/* ══════════════════════════════════════════════════════════════════════
   HELIX 디자인 시스템 (helix-ds.css)

   왜 만드나
     케어뷰·빌더·센서허브·멀티RAG 가 각자 CSS 를 들고 있어 같은 "카드"가
     페이지마다 다른 색·간격·라운드를 쓴다. 상태(hover/focus/disabled)도 제각각이고,
     **키보드 포커스 링이 아예 없는 화면**이 많다.
     토큰 한 벌 + 컴포넌트 한 벌로 묶는다.

   원칙
     · 토큰(변수)만 바꾸면 전체 톤이 바뀐다. 색을 하드코딩하지 않는다.
     · 상태는 **여섯 가지를 전부** 정의한다: default·hover·focus·active·disabled·loading.
       focus 는 접근성 필수인데 가장 자주 빠진다.
     · 모션은 `prefers-reduced-motion` 을 존중한다.
     · 대비는 WCAG AA(4.5:1)를 목표로 한다. 예쁘다고 흐린 회색을 본문에 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 색: 표면 ── */
  --hx-bg:#000; --hx-bg2:#08080b; --hx-surface:#141417; --hx-surface2:#1a1a1f;
  --hx-fill:#1e1e24; --hx-fill2:rgba(255,255,255,.06);
  --hx-line:rgba(255,255,255,.08); --hx-line2:rgba(255,255,255,.045);

  /* ── 색: 의미 ── */
  --hx-ok:#2fe6a8; --hx-info:#37c3f5; --hx-warn:#f5c542; --hx-crit:#f0555f;
  --hx-accent:#b76bf5; --hx-accent2:#cf9bff; --hx-live:#2fe6a8;

  /* ── 색: 글자 (대비 확보) ── */
  --hx-txt:#f4f4f7;        /* 본문 — 배경 대비 15:1 */
  --hx-txt2:#b9b9c4;       /* 보조 — 7:1 */
  --hx-mut:#8b8b96;        /* 흐림 — 4.6:1 (AA 하한) */
  --hx-mut2:#5f5f6a;       /* 장식용. **본문에 쓰지 말 것** (2.8:1, AA 미달) */

  /* ── 타이포 ── */
  --hx-head:'Nunito',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --hx-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --hx-fs-xs:10.5px; --hx-fs-sm:11.5px; --hx-fs-md:12.5px;
  --hx-fs-lg:14px;   --hx-fs-xl:16px;   --hx-fs-2xl:20px; --hx-fs-3xl:27px;

  /* ── 간격 (4px 배수 — 눈대중 값을 없앤다) ── */
  --hx-s1:4px; --hx-s2:8px; --hx-s3:12px; --hx-s4:16px;
  --hx-s5:20px; --hx-s6:24px; --hx-s8:32px; --hx-s10:40px;

  /* ── 모양 ── */
  --hx-r-sm:7px; --hx-r-md:11px; --hx-r-lg:15px; --hx-r-xl:19px; --hx-r-full:999px;
  --hx-sh-1:0 2px 8px rgba(0,0,0,.35);
  --hx-sh-2:0 10px 28px rgba(0,0,0,.45);
  --hx-sh-3:0 22px 60px rgba(0,0,0,.6);

  /* ── 모션 ── */
  --hx-t-fast:.14s; --hx-t:.2s; --hx-t-slow:.32s;
  --hx-ease:cubic-bezier(.2,.7,.3,1);

  /* ── 그리드 / 브레이크포인트 ── */
  --hx-col:12; --hx-gap:var(--hx-s3);
  --hx-bp-sm:600px; --hx-bp-md:900px; --hx-bp-lg:1280px;

  --hx-z-sticky:40; --hx-z-modal:9500; --hx-z-toast:9800;
}

/* 밝은 테마 — 토큰만 갈아끼운다 */
[data-hx-theme="light"]{
  --hx-bg:#f7f7fa; --hx-bg2:#fff; --hx-surface:#fff; --hx-surface2:#f2f2f6;
  --hx-fill:#ececf1; --hx-fill2:rgba(0,0,0,.05);
  --hx-line:rgba(0,0,0,.1); --hx-line2:rgba(0,0,0,.06);
  --hx-txt:#16161a; --hx-txt2:#44444f; --hx-mut:#6b6b78; --hx-mut2:#9a9aa6;
}

@media (prefers-reduced-motion:reduce){
  :root{ --hx-t-fast:0s; --hx-t:0s; --hx-t-slow:0s; }
}

/* ══ 스태킹 대시보드 / 그리드 ═════════════════════════════════════════
   "스태킹" = 넓은 화면에서는 격자로 펼치고, 좁아지면 **한 줄씩 쌓인다**.
   span 은 12칸 기준이고 브레이크포인트마다 자동으로 줄어든다.
   카드가 스스로 크기를 정하지 않는다 — 배치는 부모(그리드)의 책임이다. */
.hx-grid{display:grid;grid-template-columns:repeat(var(--hx-col),1fr);
  gap:var(--hx-gap);align-items:start}
.hx-grid.dense{grid-auto-flow:dense}
.hx-span-2{grid-column:span 2} .hx-span-3{grid-column:span 3}
.hx-span-4{grid-column:span 4} .hx-span-6{grid-column:span 6}
.hx-span-8{grid-column:span 8} .hx-span-9{grid-column:span 9}
.hx-span-12{grid-column:span 12}
.hx-row-2{grid-row:span 2}

@media (max-width:1280px){
  .hx-span-3{grid-column:span 4} .hx-span-2{grid-column:span 3}
}
@media (max-width:900px){
  .hx-grid{--hx-col:6}
  .hx-span-8,.hx-span-9,.hx-span-12{grid-column:span 6}
  .hx-span-4,.hx-span-6{grid-column:span 3}
  .hx-span-2,.hx-span-3{grid-column:span 3}
}
@media (max-width:600px){
  .hx-grid{--hx-col:1;--hx-gap:var(--hx-s2)}
  [class*="hx-span-"]{grid-column:span 1}
  .hx-row-2{grid-row:span 1}
}

/* ══ 컨테이너 · 카드 ═══════════════════════════════════════════════════ */
.hx-container{max-width:1280px;margin:0 auto;padding:var(--hx-s6) var(--hx-s5)}
.hx-card{background:var(--hx-surface);border:1px solid var(--hx-line);
  border-radius:var(--hx-r-lg);padding:var(--hx-s4);
  transition:border-color var(--hx-t) var(--hx-ease),
             transform var(--hx-t) var(--hx-ease),
             box-shadow var(--hx-t) var(--hx-ease)}
.hx-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);
  box-shadow:var(--hx-sh-2)}
.hx-card[data-state="live"]{border-color:color-mix(in srgb,var(--hx-live) 42%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hx-live) 12%,transparent)}
.hx-card[data-state="warn"]{border-color:color-mix(in srgb,var(--hx-warn) 34%,transparent)}
.hx-card[data-state="crit"]{border-color:color-mix(in srgb,var(--hx-crit) 40%,transparent)}
.hx-card[data-state="off"]{opacity:.72}
.hx-card-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--hx-s2);margin-bottom:var(--hx-s2)}
.hx-card-t{font-weight:900;font-size:var(--hx-fs-lg);line-height:1.3}
.hx-card-s{color:var(--hx-mut);font-size:var(--hx-fs-sm);margin-top:2px}

/* ══ 상태 인디케이터 ═══════════════════════════════════════════════════
   같은 의미는 같은 색으로. 페이지마다 다른 초록을 쓰지 않는다. */
.hx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--hx-mut2);flex:none;
  transition:background var(--hx-t) var(--hx-ease),box-shadow var(--hx-t) var(--hx-ease)}
.hx-dot[data-s="live"]{background:var(--hx-ok);animation:hxPulse 2.4s ease-in-out infinite}
.hx-dot[data-s="warn"]{background:var(--hx-warn)}
.hx-dot[data-s="crit"]{background:var(--hx-crit)}
.hx-dot[data-s="info"]{background:var(--hx-info)}
.hx-dot[data-s="off"]{background:#4a4a55}
@keyframes hxPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hx-ok) 45%,transparent)}
                   50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){ .hx-dot[data-s="live"]{animation:none} }

.hx-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--hx-mono);
  font-size:var(--hx-fs-xs);font-weight:600;padding:3px 9px;border-radius:var(--hx-r-full);
  border:1px solid transparent;background:var(--hx-fill);color:var(--hx-mut);white-space:nowrap}
.hx-badge[data-s="live"]{background:color-mix(in srgb,var(--hx-ok) 14%,transparent);
  color:var(--hx-ok);border-color:color-mix(in srgb,var(--hx-ok) 35%,transparent)}
.hx-badge[data-s="warn"]{background:color-mix(in srgb,var(--hx-warn) 13%,transparent);
  color:var(--hx-warn);border-color:color-mix(in srgb,var(--hx-warn) 30%,transparent)}
.hx-badge[data-s="crit"]{background:color-mix(in srgb,var(--hx-crit) 12%,transparent);
  color:var(--hx-crit);border-color:color-mix(in srgb,var(--hx-crit) 32%,transparent)}
.hx-badge[data-s="info"]{background:color-mix(in srgb,var(--hx-info) 12%,transparent);
  color:var(--hx-info);border-color:color-mix(in srgb,var(--hx-info) 28%,transparent)}

/* ══ 버튼 — 상태 6종을 전부 정의한다 ══════════════════════════════════ */
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--hx-head);font-weight:900;font-size:var(--hx-fs-md);
  padding:9px 16px;border-radius:var(--hx-r-md);border:1px solid transparent;
  background:var(--hx-accent);color:#12001f;cursor:pointer;position:relative;
  min-height:36px;                              /* 터치 타깃 하한 */
  transition:filter var(--hx-t-fast) var(--hx-ease),
             transform var(--hx-t-fast) var(--hx-ease),
             background var(--hx-t-fast) var(--hx-ease)}
.hx-btn:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.hx-btn:active:not(:disabled){transform:translateY(0) scale(.985);filter:brightness(.95)}
/* 포커스 링 — 가장 자주 빠지는 상태. 마우스에는 안 보이고 키보드에만 보인다. */
.hx-btn:focus-visible,.hx-input:focus-visible,.hx-chip:focus-visible,
.hx-icon-btn:focus-visible,[data-hx-focusable]:focus-visible{
  outline:2px solid var(--hx-info);outline-offset:2px}
.hx-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.hx-btn.ghost{background:var(--hx-fill);color:var(--hx-txt);border-color:var(--hx-line)}
.hx-btn.ghost:hover:not(:disabled){background:var(--hx-fill2)}
.hx-btn.danger{background:transparent;color:var(--hx-crit);
  border-color:color-mix(in srgb,var(--hx-crit) 35%,transparent)}
/* 로딩 상태 — 글자를 지우지 않고 흐리게 해서 폭이 흔들리지 않게 한다 */
.hx-btn[data-loading="1"]{pointer-events:none}
.hx-btn[data-loading="1"] .hx-btn-l{opacity:.35}
.hx-btn[data-loading="1"]::after{content:"";position:absolute;width:14px;height:14px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  animation:hxSpin .7s linear infinite}
@keyframes hxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hx-btn[data-loading="1"]::after{animation-duration:2s}
}

.hx-icon-btn{width:32px;height:32px;border-radius:var(--hx-r-sm);display:grid;
  place-items:center;background:transparent;border:0;color:var(--hx-mut);cursor:pointer;
  transition:background var(--hx-t-fast),color var(--hx-t-fast)}
.hx-icon-btn:hover{background:var(--hx-fill2);color:var(--hx-txt)}

/* ══ 입력 ══════════════════════════════════════════════════════════════ */
.hx-field{display:flex;flex-direction:column;gap:5px}
.hx-label{font-size:var(--hx-fs-sm);color:var(--hx-mut);font-weight:700}
.hx-input,.hx-select{background:var(--hx-bg2);border:1px solid var(--hx-line);
  color:var(--hx-txt);border-radius:var(--hx-r-md);padding:9px 12px;
  font-family:var(--hx-mono);font-size:var(--hx-fs-md);min-height:38px;outline:none;
  transition:border-color var(--hx-t-fast),box-shadow var(--hx-t-fast)}
.hx-input:focus,.hx-select:focus{border-color:var(--hx-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-accent) 16%,transparent)}
.hx-input:disabled,.hx-select:disabled{opacity:.5;cursor:not-allowed}
.hx-input[aria-invalid="true"]{border-color:var(--hx-crit)}
.hx-hint{font-size:var(--hx-fs-xs);color:var(--hx-mut)}
.hx-err{font-size:var(--hx-fs-xs);color:var(--hx-crit)}

.hx-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:var(--hx-fs-md);min-height:32px}
.hx-check input{width:16px;height:16px;accent-color:var(--hx-accent);cursor:pointer}

.hx-chip{font-size:var(--hx-fs-sm);padding:5px 12px;border-radius:var(--hx-r-full);
  border:1px solid var(--hx-line);background:var(--hx-fill);color:var(--hx-mut);
  cursor:pointer;user-select:none;min-height:30px;display:inline-flex;align-items:center;
  transition:background var(--hx-t-fast),color var(--hx-t-fast),border-color var(--hx-t-fast)}
.hx-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--hx-accent) 16%,transparent);
  color:var(--hx-accent2);border-color:color-mix(in srgb,var(--hx-accent) 40%,transparent)}

/* ══ 내비게이션 · 브레드크럼 ═══════════════════════════════════════════ */
.hx-nav{display:flex;gap:var(--hx-s1);flex-wrap:wrap;align-items:center}
.hx-nav-i{padding:7px 14px;border-radius:var(--hx-r-full);font-size:var(--hx-fs-md);
  font-weight:700;color:var(--hx-mut);text-decoration:none;cursor:pointer;
  transition:background var(--hx-t-fast),color var(--hx-t-fast)}
.hx-nav-i:hover{background:var(--hx-fill2);color:var(--hx-txt)}
.hx-nav-i[aria-current="page"]{background:var(--hx-fill);color:var(--hx-txt)}
.hx-crumb{display:flex;align-items:center;gap:6px;font-size:var(--hx-fs-sm);color:var(--hx-mut)}
.hx-crumb a{color:var(--hx-mut);text-decoration:none}
.hx-crumb a:hover{color:var(--hx-txt)}
.hx-crumb .sep{opacity:.45}
.hx-crumb [aria-current="page"]{color:var(--hx-txt);font-weight:700}

/* ══ 모달 · 툴팁 ═══════════════════════════════════════════════════════ */
.hx-modal{position:fixed;inset:0;z-index:var(--hx-z-modal);display:flex;
  align-items:center;justify-content:center;padding:3vh 3vw}
.hx-modal[hidden]{display:none!important}
.hx-scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.hx-modal-p{position:relative;background:var(--hx-surface);
  border:1px solid var(--hx-line);border-radius:var(--hx-r-xl);
  max-width:min(1000px,100%);width:100%;max-height:94vh;overflow:auto;
  box-shadow:var(--hx-sh-3);animation:hxUp var(--hx-t) var(--hx-ease)}
@keyframes hxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hx-tip{position:relative}
.hx-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);
  transform:translateX(-50%);background:#000;color:#fff;font-size:var(--hx-fs-xs);
  padding:5px 9px;border-radius:var(--hx-r-sm);white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity var(--hx-t-fast);z-index:var(--hx-z-sticky)}
.hx-tip:hover::after,.hx-tip:focus-visible::after{opacity:1}

/* ══ 토스트 알림 피드 ══════════════════════════════════════════════════ */
.hx-toasts{position:fixed;right:var(--hx-s4);bottom:var(--hx-s4);z-index:var(--hx-z-toast);
  display:flex;flex-direction:column;gap:var(--hx-s2);max-width:min(380px,calc(100vw - 32px));
  pointer-events:none}
.hx-toast{pointer-events:auto;background:var(--hx-surface);border:1px solid var(--hx-line);
  border-left:3px solid var(--hx-mut);border-radius:var(--hx-r-md);padding:11px 13px;
  box-shadow:var(--hx-sh-2);display:flex;gap:10px;align-items:flex-start;
  animation:hxToastIn var(--hx-t) var(--hx-ease)}
.hx-toast[data-s="ok"]{border-left-color:var(--hx-ok)}
.hx-toast[data-s="warn"]{border-left-color:var(--hx-warn)}
.hx-toast[data-s="crit"]{border-left-color:var(--hx-crit)}
.hx-toast[data-s="info"]{border-left-color:var(--hx-info)}
.hx-toast.out{animation:hxToastOut var(--hx-t) var(--hx-ease) forwards}
@keyframes hxToastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes hxToastOut{to{opacity:0;transform:translateX(16px);height:0;margin:0;padding:0}}
.hx-toast-b{flex:1;min-width:0}
.hx-toast-t{font-size:var(--hx-fs-md);font-weight:800;line-height:1.35}
.hx-toast-m{font-size:var(--hx-fs-sm);color:var(--hx-txt2);margin-top:3px;line-height:1.55;
  word-break:break-word}
.hx-toast-x{background:0;border:0;color:var(--hx-mut);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px}
.hx-toast-x:hover{color:var(--hx-txt)}
@media (max-width:600px){
  .hx-toasts{left:var(--hx-s3);right:var(--hx-s3);bottom:var(--hx-s3);max-width:none}
}

/* ══ 유틸 ══════════════════════════════════════════════════════════════ */
.hx-stack{display:flex;flex-direction:column;gap:var(--hx-s3)}
.hx-row{display:flex;gap:var(--hx-s2);align-items:center;flex-wrap:wrap}
.hx-mono{font-family:var(--hx-mono)}
.hx-mut{color:var(--hx-mut)}
.hx-skel{background:linear-gradient(90deg,var(--hx-fill) 25%,var(--hx-fill2) 37%,var(--hx-fill) 63%);
  background-size:400% 100%;animation:hxShim 1.4s ease infinite;border-radius:var(--hx-r-sm)}
@keyframes hxShim{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* 스크린리더 전용 — 화면엔 없지만 보조기기는 읽는다 */
.hx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ══════════════════════════════════════════════════════════════════════
   Carousel · Gesture

   왜 이 둘인가
     좁은 화면에서 카드를 세로로만 쌓으면 스크롤이 끝없이 길어진다. 캐러셀은
     **같은 층위의 것들을 가로로** 넘겨 보게 한다. 제스처는 그걸 손가락으로
     하게 만든다 — 모바일에서 화살표 버튼만 두면 아무도 안 누른다.

   지키는 것
     · 스크롤 스냅을 쓴다. 자바스크립트로 위치를 계산하면 확대·회전에서 어긋난다.
     · 키보드로도 넘어가야 한다(←/→, Home/End). 제스처만 두면 못 쓰는 사람이 생긴다.
     · 현재 위치를 점으로 보여준다. 몇 개 중 몇 번째인지 모르면 길을 잃는다.
     · 동작 줄이기 설정이면 스르륵 넘기지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.hx-carousel{position:relative}
.hx-car-track{
  display:flex; gap:var(--hx-s3,12px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:2px 2px 10px;
}
.hx-car-track::-webkit-scrollbar{display:none}
.hx-car-item{
  flex:0 0 auto; scroll-snap-align:start; min-width:min(280px,82vw);
}
.hx-car-item[data-w="full"]{min-width:min(100%,100%)}
.hx-car-item[data-w="half"]{min-width:min(48%,82vw)}
/* 좌우 끝이 잘린 걸 알려주는 페이드 — 없으면 더 있는 줄 모른다 */
.hx-carousel::before,.hx-carousel::after{
  content:''; position:absolute; top:0; bottom:12px; width:26px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .2s;
}
.hx-carousel::before{left:0;  background:linear-gradient(90deg,var(--hx-bg,#000),transparent)}
.hx-carousel::after{right:0; background:linear-gradient(270deg,var(--hx-bg,#000),transparent)}
.hx-carousel[data-more~="left"]::before{opacity:1}
.hx-carousel[data-more~="right"]::after{opacity:1}

.hx-car-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--hx-line,rgba(255,255,255,.1));
  background:var(--hx-card,#141417); color:var(--hx-txt,#f4f4f7); cursor:pointer;
  display:grid; place-items:center; font-size:15px; line-height:1;
  opacity:0; transition:opacity .2s, background .15s;
}
.hx-carousel:hover .hx-car-nav,.hx-car-nav:focus-visible{opacity:1}
.hx-car-nav:hover{background:var(--hx-fill,#1e1e24)}
.hx-car-nav[disabled]{opacity:0 !important; pointer-events:none}
.hx-car-nav.prev{left:-6px} .hx-car-nav.next{right:-6px}
/* 손가락 조작이 기본인 화면에서는 화살표를 숨긴다 */
@media (hover:none){ .hx-car-nav{display:none} }

.hx-car-dots{display:flex; gap:6px; justify-content:center; margin-top:2px}
.hx-car-dot{
  width:6px; height:6px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:var(--hx-mut2,#5f5f6a); opacity:.5; transition:width .2s, opacity .2s;
}
.hx-car-dot[aria-current="true"]{width:18px; opacity:1; background:var(--hx-acc,#b76bf5)}
.hx-car-dot:focus-visible{outline:2px solid var(--hx-info,#37c3f5); outline-offset:2px}

/* ── Gesture ─────────────────────────────────────────────────────────
   스와이프로 닫기(시트)·당겨서 새로고침. 손이 닿는 곳에 있어야 쓴다. */
.hx-swipe{touch-action:pan-y}
.hx-swipe[data-dragging="true"]{transition:none; user-select:none}
.hx-swipe-x{touch-action:pan-x}
.hx-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9500;
  background:var(--hx-card,#141417); border-top:1px solid var(--hx-line,rgba(255,255,255,.1));
  border-radius:18px 18px 0 0; padding:8px 0 max(18px,env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
  max-height:86vh; overflow:auto; touch-action:pan-y;
}
.hx-sheet[open]{transform:translateY(0)}
/* 잡을 곳을 눈에 보이게 — 없으면 끌 수 있는지 모른다 */
.hx-sheet-grip{
  width:38px; height:4px; border-radius:99px; margin:0 auto 12px;
  background:var(--hx-mut2,#5f5f6a); opacity:.6;
}
.hx-pull{
  display:grid; place-items:center; height:0; overflow:hidden;
  color:var(--hx-mut,#8b8b96); font-size:11.5px; transition:height .2s;
}
.hx-pull[data-armed="true"]{height:34px}

@media (prefers-reduced-motion:reduce){
  .hx-car-track{scroll-behavior:auto}
  .hx-sheet,.hx-car-dot,.hx-car-nav,.hx-pull{transition:none !important}
}