@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/s/inter-400.8909904ab6c8.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/s/inter-500.f3779f1efccc.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/s/inter-600.f9a06e79cd3a.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/s/oswald-600.f6cb541f4d97.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/s/geist-mono-400.3f98383b122f.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/s/geist-mono-500.72971bd4908d.woff2") format("woff2")}

/* =========================================================================
   STREAMSEQ DESIGN TOKENS  v1.0
   Layer 1 · Primitives (--p-*)   : raw values. NEVER used inside components.
   Layer 2 · Semantic (--color-*, --space-*, --radius-* ...) : the only layer
             components may read. Dark mode and RTL only touch this layer.
   ========================================================================= */
:root {
  /* ---------- Primitive: brand orange (500 = #D64524, frozen) ---------- */
  --p-orange-50:  #FDF3F0;
  --p-orange-100: #FBE4DD;
  --p-orange-200: #F6C6B8;
  --p-orange-300: #EEA28C;
  --p-orange-400: #E4735A;
  --p-orange-500: #D64524;
  --p-orange-600: #B8391C;
  --p-orange-700: #952E17;
  --p-orange-800: #722414;
  --p-orange-900: #4E1A10;

  /* ---------- Primitive: warm neutral ---------- */
  --p-gray-0:   #FFFFFF;
  --p-gray-25:  #FCFCFB;
  --p-gray-50:  #F7F7F5;
  --p-gray-100: #F0F0ED;
  --p-gray-150: #E8E8E4;
  --p-gray-200: #DEDDD8;
  --p-gray-300: #C6C5BF;
  --p-gray-400: #9F9E97;
  --p-gray-500: #6A6964;
  --p-gray-600: #5A5954;
  --p-gray-700: #43423E;
  --p-gray-800: #2C2B28;
  --p-gray-850: #22211F;
  --p-gray-900: #1A1918;
  --p-gray-950: #121211;

  /* ---------- Primitive: status hues ---------- */
  --p-blue-50:  #EEF4FF;  --p-blue-200: #C3D6FB;  --p-blue-500: #2F6FEB;  --p-blue-700: #1D4DB3;  --p-blue-300d: #8DB0F7;
  --p-green-50: #EBF7F0;  --p-green-200:#BFE5CF;  --p-green-500:#1E9A5A;  --p-green-700:#126C3D;  --p-green-300d:#7FD3A6;
  --p-amber-50: #FDF5E4;  --p-amber-200:#F5DDA4;  --p-amber-500:#D49508;  --p-amber-700:#8A5D05;  --p-amber-300d:#F1C25A;
  --p-red-50:   #FDEEEE;  --p-red-200:  #F6C4C4;  --p-red-500:  #D93838;  --p-red-700:  #A12323;  --p-red-300d:  #F29A9A;
  --p-teal-50:  #E8F6F5;  --p-teal-200: #B6E2DE;  --p-teal-500: #12918A;  --p-teal-700: #0A625D;  --p-teal-300d: #79D0C9;

  /* =====================================================================
     SEMANTIC · LIGHT (default)
     ===================================================================== */
  --color-canvas:          var(--p-gray-100);  /* behind the app frame      */
  --color-bg:              var(--p-gray-50);   /* app background            */
  --color-surface:         var(--p-gray-0);    /* cards, panels, inputs     */
  --color-surface-raised:  var(--p-gray-0);    /* menus, drawers, modals    */
  --color-surface-sunken:  var(--p-gray-100);  /* columns, wells, code      */
  --color-surface-hover:   var(--p-gray-100);
  --color-surface-active:  var(--p-gray-150);
  --color-overlay:         rgb(18 18 17 / 0.32);

  --color-border:          var(--p-gray-150);
  --color-border-strong:   var(--p-gray-200);
  --color-divider:         var(--p-gray-150);

  --color-text:            var(--p-gray-900);
  --color-text-muted:      var(--p-gray-600);
  --color-text-subtle:     var(--p-gray-500);  /* min 4.5:1 on surface      */
  --color-text-disabled:   var(--p-gray-400);
  --color-text-inverse:    var(--p-gray-0);

  --color-ink:             var(--p-gray-900);  /* strong neutral buttons    */
  --color-ink-hover:       var(--p-gray-800);

  --color-accent:          var(--p-orange-500);  /* brand mark, dots, progress, focus (non-text) */
  --color-action:          #CC4020;              /* filled buttons w/ white text · 4.86:1 AA */
  --color-action-hover:    var(--p-orange-600);
  --color-action-pressed:  var(--p-orange-700);
  --color-accent-soft:     var(--p-orange-50);
  --color-accent-soft-2:   var(--p-orange-100);
  --color-accent-text:     var(--p-orange-700);  /* links, mentions on light */
  --color-on-accent:       var(--p-gray-0);
  --color-focus:           var(--p-orange-500);

  --color-info-soft:    var(--p-blue-50);   --color-info-text:    var(--p-blue-700);   --color-info:    var(--p-blue-500);
  --color-success-soft: var(--p-green-50);  --color-success-text: var(--p-green-700);  --color-success: var(--p-green-500);
  --color-warning-soft: var(--p-amber-50);  --color-warning-text: var(--p-amber-700);  --color-warning: var(--p-amber-500);
  --color-danger-soft:  var(--p-red-50);    --color-danger-text:  var(--p-red-700);    --color-danger:  var(--p-red-500);
  --color-teal-soft:    var(--p-teal-50);   --color-teal-text:    var(--p-teal-700);   --color-teal:    var(--p-teal-500);
  --color-neutral-soft: var(--p-gray-100);  --color-neutral-text: var(--p-gray-700);   --color-neutral: var(--p-gray-400);

  /* Activity heat (0 = none … 4 = most) */
  --color-heat-0: var(--p-gray-150);
  --color-heat-1: var(--p-orange-100);
  --color-heat-2: var(--p-orange-200);
  --color-heat-3: var(--p-orange-400);
  --color-heat-4: var(--p-orange-500);

  /* ---------- Typography ---------- */
  --font-sans: "Geist", "Noto Sans Hebrew", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --text-2xs: 0.6875rem; /* 11 · counters, kbd         */
  --text-xs:  0.75rem;   /* 12 · meta, captions        */
  --text-sm:  0.8125rem; /* 13 · secondary UI          */
  --text-md:  0.875rem;  /* 14 · base UI text          */
  --text-lg:  1rem;      /* 16 · card titles, reading  */
  --text-xl:  1.125rem;  /* 18 · section titles        */
  --text-2xl: 1.375rem;  /* 22 · drawer titles         */
  --text-3xl: 1.75rem;   /* 28 · page titles           */
  --text-4xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);   /* marketing H2 */
  --text-5xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);   /* marketing H1 */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.5;
  --leading-loose: 1.65;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-wide: 0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;    /* kbd, tiny chips          */
  --radius-sm: 6px;    /* badges, small buttons    */
  --radius-md: 8px;    /* buttons, inputs, rows    */
  --radius-lg: 12px;   /* cards, popovers          */
  --radius-xl: 16px;   /* panels, drawers, modals  */
  --radius-2xl: 22px;  /* app frame, hero media    */
  --radius-full: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgb(26 25 24 / 0.05);
  --shadow-sm: 0 1px 2px rgb(26 25 24 / 0.04), 0 1px 3px rgb(26 25 24 / 0.06);
  --shadow-md: 0 2px 4px rgb(26 25 24 / 0.04), 0 6px 16px rgb(26 25 24 / 0.07);
  --shadow-lg: 0 4px 8px rgb(26 25 24 / 0.04), 0 16px 40px rgb(26 25 24 / 0.10);
  --shadow-xl: 0 8px 16px rgb(26 25 24 / 0.06), 0 32px 72px rgb(26 25 24 / 0.16);
  --ring-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);

  /* ---------- Motion ---------- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 40;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-tooltip: 120;

  /* ---------- Layout ---------- */
  --size-rail: 64px;
  --size-sidebar: 264px;
  --size-panel: 320px;
  --size-drawer: 560px;
  --size-topbar: 56px;
  --size-control-sm: 28px;
  --size-control-md: 36px;
  --size-control-lg: 44px;
  --size-content: 1200px;

  color-scheme: light;
}

/* Colour values used once in a rule, kept as tokens (the repo's tokens-only CSS rule); same values as the design file */
:root {
  --lit-btn-primary-box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / .12);
  --lit-switch-thumb-background: #fff;
  --lit-tooltip-kbd-border-color: rgb(255 255 255 / .25);
  --lit-dark-tooltip-kbd-border-color: rgb(0 0 0 / .25);
  --lit-toast-action-hover-background: rgb(255 255 255 / .1);
  --lit-rv-tab-hover-background: rgb(0 0 0 / .04);
  --lit-rv-icon-hover-background: rgb(0 0 0 / .06);
  --lit-dark-rv-tab-hover-background: rgb(255 255 255 / .06);
  --lit-dark-rv-icon-hover-background: rgb(255 255 255 / .08);
  --lit-hx-media-background: #F3F3F3;
  --lit-dark-hx-media-background: #1C1C1C;
  --lit-hx-board-h-frame-box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 18px 40px rgb(0 0 0 / .08);
  --lit-hx-card-box-shadow: 0 2px 6px rgb(0 0 0 / .05), 0 16px 36px rgb(0 0 0 / .1);
  --lit-hx-card-ink-background: #0A0A0A;
  --lit-hx-card-ink-color: #fff;
  --lit-hx-card-ink-border-color: #0A0A0A;
  --lit-hx-card-ink-box-shadow: 0 16px 36px rgb(0 0 0 / .16);
  --lit-dark-hx-card-ink-background: #000;
  --lit-dark-hx-card-ink-border-color: #2A2A2A;
  --lit-hx-live-color: rgb(255 255 255 / .6);
  --lit-hx-feed-li-background: rgb(255 255 255 / .06);
  --lit-hx-feed-li-color: rgb(255 255 255 / .7);
  --lit-hx-feed-li-is-new-background: rgb(255 255 255 / .13);
  --lit-hx-feed-li-b-color: #fff;
  --lit-hx-feed-time-color: rgb(255 255 255 / .46); /* the file had .45: 4.49:1, AA needs 4.5 */
  --lit-hx-feed-icon-background: rgb(255 255 255 / .12);
  --lit-hx-feed-icon-color: #fff;
  --lit-ix-peek-in-box-shadow: 0 30px 60px rgb(0 0 0 / .25);
  --lit-md-mover-box-shadow: 0 8px 18px rgb(0 0 0 / .1);
  --lit-md-cur-b-color: #fff;
  --lit-md-cur-b-background: #0A0A0A;
  --lit-md-cur-b-b-background: #5A5A5A;
}

/* =====================================================================
   SEMANTIC · DARK  (only semantic tokens are remapped)
   ===================================================================== */
:root[data-theme="dark"] {
  --color-canvas:          var(--p-gray-950);
  --color-bg:              #161615;
  --color-surface:         var(--p-gray-900);
  --color-surface-raised:  var(--p-gray-850);
  --color-surface-sunken:  #141413;
  --color-surface-hover:   var(--p-gray-850);
  --color-surface-active:  var(--p-gray-800);
  --color-overlay:         rgb(0 0 0 / 0.55);

  --color-border:          #2A2927;
  --color-border-strong:   #363532;
  --color-divider:         #262523;

  --color-text:            #F2F1EE;
  --color-text-muted:      #B4B2AB;
  --color-text-subtle:     #8F8D86;
  --color-text-disabled:   #5E5D58;
  --color-text-inverse:    var(--p-gray-900);

  --color-ink:             #F2F1EE;
  --color-ink-hover:       #FFFFFF;

  --color-accent:          #E2562F;
  --color-action:          #CC4020;
  --color-action-hover:    #B8391C;
  --color-action-pressed:  var(--p-orange-700);
  --color-accent-soft:     rgb(226 86 47 / 0.14);
  --color-accent-soft-2:   rgb(226 86 47 / 0.22);
  --color-accent-text:     #F28E70;
  --color-on-accent:       #FFFFFF;
  --color-focus:           #EE7A58;

  --color-info-soft:    rgb(47 111 235 / 0.16);  --color-info-text:    var(--p-blue-300d);
  --color-success-soft: rgb(30 154 90 / 0.16);   --color-success-text: var(--p-green-300d);
  --color-warning-soft: rgb(212 149 8 / 0.16);   --color-warning-text: var(--p-amber-300d);
  --color-danger-soft:  rgb(217 56 56 / 0.16);   --color-danger-text:  var(--p-red-300d);
  --color-teal-soft:    rgb(18 145 138 / 0.16);  --color-teal-text:    var(--p-teal-300d);
  --color-neutral-soft: #2A2927;                 --color-neutral-text: #C9C7C0;  --color-neutral: #6E6D67;

  --color-heat-0: #2A2927;
  --color-heat-1: rgb(226 86 47 / 0.22);
  --color-heat-2: rgb(226 86 47 / 0.40);
  --color-heat-3: rgb(226 86 47 / 0.70);
  --color-heat-4: #E2562F;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.30);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.30), 0 6px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.35), 0 32px 72px rgb(0 0 0 / 0.55);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* =========================================================================
   STREAMSEQ COMPONENTS  v1.0  · reads semantic tokens only. BEM naming.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
:root[dir="rtl"] body { font-family: "Noto Sans Hebrew", var(--font-sans); }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--color-accent-soft-2); }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-feature-settings: "zero"; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Icon ---------- */
.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 20px; height: 20px; }
:root[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ---------- Button ---------- */
.btn {
  --btn-h: var(--size-control-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--btn-h); padding-inline: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--text-only { padding-inline: var(--space-4); }
.btn--primary { background: var(--color-action); color: var(--color-on-accent); box-shadow: var(--lit-btn-primary-box-shadow); }
@media (hover: hover) { .btn--primary:hover { background: var(--color-action-hover); } }
.btn--primary:active { background: var(--color-action-pressed); }
.btn--ink { background: var(--color-ink); color: var(--color-text-inverse); }
@media (hover: hover) { .btn--ink:hover { background: var(--color-ink-hover); } }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); box-shadow: var(--shadow-xs); }
@media (hover: hover) { .btn--secondary:hover { background: var(--color-surface-hover); } }
.btn--ghost { color: var(--color-text-muted); }
@media (hover: hover) { .btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); } }
.btn--soft { background: var(--color-surface-sunken); color: var(--color-text); }
@media (hover: hover) { .btn--soft:hover { background: var(--color-surface-active); } }
.btn--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
@media (hover: hover) { .btn--danger:hover { filter: brightness(.97); } }
.btn--sm { --btn-h: var(--size-control-sm); font-size: var(--text-sm); padding-inline: var(--space-2) var(--space-3); border-radius: var(--radius-sm); gap: var(--space-1-5); }
.btn--lg { --btn-h: var(--size-control-lg); font-size: var(--text-lg); padding-inline: var(--space-5); border-radius: var(--radius-md); }
.btn--block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--color-on-accent); border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Icon button ---------- */
.icon-btn {
  --ib: var(--size-control-md);
  display: inline-grid; place-items: center; width: var(--ib); height: var(--ib); flex: none;
  border-radius: var(--radius-md); color: var(--color-text-muted);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.icon-btn[aria-pressed="true"], .icon-btn.is-active { background: var(--color-surface-active); color: var(--color-text); }
.icon-btn--sm { --ib: var(--size-control-sm); border-radius: var(--radius-sm); }
.icon-btn--bordered { border: 1px solid var(--color-border-strong); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.icon-btn__dot { position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface); }
.icon-btn { position: relative; }

/* ---------- Kbd ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: var(--radius-xs); border: 1px solid var(--color-border-strong); border-block-end-width: 2px;
  background: var(--color-surface); color: var(--color-text-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1;
}

/* ---------- Field / input ---------- */
.field { display: grid; gap: var(--space-1-5); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-subtle); }
.field__error { font-size: var(--text-xs); color: var(--color-danger-text); display: flex; gap: var(--space-1); align-items: center; }
.field__error[hidden] { display: none; }
.input {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--size-control-md); padding-inline: var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-subtle);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input:hover { border-color: var(--color-text-disabled); }
.input:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft-2); }
.input input, .input textarea, .input select {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--color-text);
  font-size: var(--text-md);
}
.input input:focus-visible, .input textarea:focus-visible, .input select:focus-visible, .composer__input:focus-visible, .palette__search input:focus-visible { box-shadow: none; }
.input input::placeholder, .input textarea::placeholder { color: var(--color-text-subtle); }
.input--sm { height: var(--size-control-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.input--lg { height: var(--size-control-lg); }
.input--textarea { height: auto; align-items: flex-start; padding-block: var(--space-2); }
.input--textarea textarea { resize: vertical; min-height: 72px; line-height: var(--leading-normal); }
.input--invalid { border-color: var(--color-danger); }
.input--invalid:focus-within { box-shadow: 0 0 0 3px var(--color-danger-soft); border-color: var(--color-danger); }
.input select { appearance: none; cursor: pointer; }

/* ---------- Checkbox / radio / switch ---------- */
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-md); }
.check input { appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.check input:hover { border-color: var(--color-text-disabled); }
.check input:checked { background: var(--color-action); border-color: var(--color-action); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--color-on-accent); border-block-start: 0; border-inline-end: 0; transform: translateY(-1px) rotate(-45deg); }
:root[dir="rtl"] .check input:checked::after { border-inline-end: 2px solid var(--color-on-accent); border-inline-start: 0; transform: translateY(-1px) rotate(45deg); }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]:checked { background: var(--color-surface); border: 5px solid var(--color-action); }
.check input[type="radio"]:checked::after { display: none; }
.check input:focus-visible { box-shadow: var(--ring-focus); }
.check--done span { color: var(--color-text-subtle); text-decoration: line-through; text-decoration-color: var(--color-text-disabled); }

.switch { position: relative; display: inline-flex; flex: none; width: 36px; height: 20px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch__track { width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--color-border-strong); transition: background-color var(--dur-base) var(--ease-standard); }
.switch__thumb { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lit-switch-thumb-background); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-emphasized); }
.switch input:checked ~ .switch__track { background: var(--color-action); }
.switch input:checked ~ .switch__thumb { transform: translateX(16px); }
:root[dir="rtl"] .switch input:checked ~ .switch__thumb { transform: translateX(-16px); }
.switch input:focus-visible ~ .switch__track { box-shadow: var(--ring-focus); }

/* ---------- Segmented control ---------- */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.segmented__item { height: 28px; padding-inline: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; transition: color var(--dur-fast), background-color var(--dur-fast); }
.segmented__item:hover { color: var(--color-text); }
.segmented__item[aria-selected="true"], .segmented__item[aria-pressed="true"], .segmented__item[aria-checked="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.segmented__count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-subtle); }

/* ---------- Tabs (underline) ---------- */
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--color-divider); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__item { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding-inline: var(--space-3); color: var(--color-text-muted); font-weight: var(--weight-medium); white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--dur-fast); }
.tabs__item:hover { color: var(--color-text); }
.tabs__item[aria-selected="true"] { color: var(--color-text); }
.tabs__item[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--space-2); inset-block-end: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--color-accent); }
.tabs__item[aria-selected="true"] .icon { color: var(--color-accent); }
.tabs--sm .tabs__item { height: 34px; font-size: var(--text-sm); padding-inline: var(--space-2); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: 22px; padding-inline: var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  background: var(--color-neutral-soft); color: var(--color-neutral-text);
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--pill { border-radius: var(--radius-full); padding-inline: var(--space-2-5); }
.badge--outline { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }
.badge--accent  { background: var(--color-accent-soft);  color: var(--color-accent-text); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info-text); }
.badge--success { background: var(--color-success-soft); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.badge--teal    { background: var(--color-teal-soft);    color: var(--color-teal-text); }
.badge--new { height: 18px; padding-inline: 6px; font-size: 10px; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); background: var(--color-accent-soft); color: var(--color-accent-text); border-radius: var(--radius-xs); }

/* Priority = bars glyph + label, never colour alone */
.priority { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.priority__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.priority__bars i { width: 3px; border-radius: 1px; background: var(--color-border-strong); }
.priority__bars i:nth-child(1) { height: 5px; } .priority__bars i:nth-child(2) { height: 8px; } .priority__bars i:nth-child(3) { height: 12px; }
.priority--low i:nth-child(-n+1) { background: var(--color-text-subtle); }
.priority--medium i:nth-child(-n+2) { background: var(--color-warning); }
.priority--high i { background: var(--color-danger); }
.priority--high { color: var(--color-danger-text); }

.count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding-inline: 5px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); background: var(--color-surface-active); color: var(--color-text-muted); }
.count--accent { background: var(--color-action); color: var(--color-on-accent); }

.tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding-inline: var(--space-2-5); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-sm); color: var(--color-text-muted); }
.tag__x { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--color-text-subtle); }
.tag__x:hover { background: var(--color-surface-active); color: var(--color-text); }

/* ---------- Avatar ---------- */
.avatar {
  --av: 28px;
  position: relative; display: inline-grid; place-items: center; width: var(--av); height: var(--av); flex: none;
  border-radius: 50%; font-size: calc(var(--av) * .38); font-weight: var(--weight-semibold); letter-spacing: -0.01em;
  color: var(--av-fg, var(--color-text)); background: var(--av-bg, var(--color-surface-active)); user-select: none;
}
.avatar--xs { --av: 20px; } .avatar--sm { --av: 24px; } .avatar--md { --av: 32px; } .avatar--lg { --av: 40px; } .avatar--xl { --av: 56px; }
.avatar__status { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 2px var(--color-surface); }
.avatar__status--away { background: var(--color-warning); }
.avatar__status--off { background: var(--color-neutral); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--color-surface); }
.avatar-stack > .avatar + .avatar { margin-inline-start: calc(var(--av) * -0.22); }
.avatar--more { background: var(--color-surface-sunken); color: var(--color-text-muted); font-family: var(--font-mono); font-weight: var(--weight-medium); }
/* Avatar hues: muted, no purple */
.av-1 { --av-bg: #F6DED5; --av-fg: #7A2C17; } .av-2 { --av-bg: #DCE8FB; --av-fg: #1D4DB3; }
.av-3 { --av-bg: #D9F0E3; --av-fg: #126C3D; } .av-4 { --av-bg: #F7EACB; --av-fg: #7A5205; }
.av-5 { --av-bg: #D6EFED; --av-fg: #0A625D; } .av-6 { --av-bg: #E9E7E1; --av-fg: #43423E; }
:root[data-theme="dark"] .av-1 { --av-bg: #4A2A20; --av-fg: #F6C6B8; } :root[data-theme="dark"] .av-2 { --av-bg: #1F2E4D; --av-fg: #C3D6FB; }
:root[data-theme="dark"] .av-3 { --av-bg: #18392A; --av-fg: #BFE5CF; } :root[data-theme="dark"] .av-4 { --av-bg: #40331A; --av-fg: #F5DDA4; }
:root[data-theme="dark"] .av-5 { --av-bg: #163936; --av-fg: #B6E2DE; } :root[data-theme="dark"] .av-6 { --av-bg: #33322E; --av-fg: #DEDDD8; }

/* ---------- Progress ---------- */
.progress-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.progress-seg i { height: 4px; border-radius: 2px; background: var(--color-heat-0); transition: background-color var(--dur-base) var(--ease-standard); }
.progress-seg i.is-done { background: var(--color-accent); }
.progress { height: 6px; border-radius: var(--radius-full); background: var(--color-heat-0); overflow: hidden; }
.progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); transform-origin: left; }
.subtasks { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.subtasks__head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.subtasks__head span:first-child { display: inline-flex; align-items: center; gap: var(--space-1-5); }

/* ---------- Heatmap ---------- */
.heat { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--color-heat-0); }
.heat i[data-l="1"] { background: var(--color-heat-1); } .heat i[data-l="2"] { background: var(--color-heat-2); }
.heat i[data-l="3"] { background: var(--color-heat-3); } .heat i[data-l="4"] { background: var(--color-heat-4); }

/* ---------- Card (generic) ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card--pad { padding: var(--space-5); }
.card--sunken { background: var(--color-surface-sunken); box-shadow: none; }

/* ---------- Task card ---------- */
.task-card {
  position: relative; display: grid; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); cursor: pointer; text-align: start; width: 100%;
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.task-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.task-card:focus-visible { box-shadow: var(--ring-focus); border-radius: var(--radius-lg); }
.task-card.is-dragging { opacity: .5; transform: rotate(-1.2deg) scale(.98); }
.task-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 24px; }
.task-card__menu { margin-inline-end: -6px; opacity: .7; }
.task-card:hover .task-card__menu { opacity: 1; }
.task-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.task-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block-start: calc(var(--space-2) * -1); }
.task-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.task-card__date { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.task-card__date.is-overdue { color: var(--color-danger-text); }
.task-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-divider); }
.task-card__stats { display: flex; gap: var(--space-3); color: var(--color-text-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.task-card__stats span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Dropdown menu ---------- */
.menu {
  min-width: 240px; padding: var(--space-1-5); border-radius: var(--radius-lg);
  background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
.menu__label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-xs); color: var(--color-text-subtle); }
.menu__item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; min-height: 34px; padding-inline: var(--space-2-5); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--text-md); text-align: start; }
.menu__item .icon { color: var(--color-text-muted); }
.menu__item:hover, .menu__item.is-active { background: var(--color-surface-hover); }
.menu__item--danger, .menu__item--danger .icon { color: var(--color-danger-text); }
.menu__trail { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-subtle); font-size: var(--text-sm); }
.menu__sep { height: 1px; margin: var(--space-1-5) var(--space-1); background: var(--color-divider); }

/* ---------- Tooltip ---------- */
.tooltip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: var(--weight-medium); box-shadow: var(--shadow-md); }
.tooltip .kbd { background: transparent; color: inherit; border-color: var(--lit-tooltip-kbd-border-color); opacity: .8; }
:root[data-theme="dark"] .tooltip .kbd { border-color: var(--lit-dark-tooltip-kbd-border-color); }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 0;
  padding: 5px 8px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; z-index: var(--z-tooltip); pointer-events: none;
  animation: fade-in var(--dur-fast) var(--ease-standard);
}
:root[dir="rtl"] [data-tip]:hover::after { translate: 50% 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Property list (key → value rows) ---------- */
.props { display: grid; }
.props__row { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; align-items: center; gap: var(--space-3); min-height: 44px; }
.props__row + .props__row { border-block-start: 1px solid var(--color-divider); }
.props--plain .props__row + .props__row { border: 0; }
.props__key { display: inline-flex; align-items: center; gap: var(--space-2-5); color: var(--color-text-muted); font-size: var(--text-md); }
.props__key .icon { color: var(--color-text-subtle); }
.props__val { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-md); color: var(--color-text); min-width: 0; }
.props--split .props__row { grid-template-columns: 1fr auto; }
.props--split .props__val { justify-content: flex-end; }

/* ---------- Nav item (sidebar) ---------- */
.nav-item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; min-height: 34px; padding-inline: var(--space-2-5); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-md); text-align: start; transition: background-color var(--dur-fast), color var(--dur-fast); }
.nav-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-item[aria-current="page"], .nav-item.is-active { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.nav-item[aria-current="page"] .icon { color: var(--color-accent); }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__glyph { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--color-text-subtle); flex: none; }
.nav-item__glyph--box { background: var(--color-surface); border: 1px solid var(--color-border); }
.nav-item--child { padding-inline-start: var(--space-8); }
.nav-item--child2 { padding-inline-start: 52px; }
.nav-item .count { margin-inline-start: auto; }
.nav-section { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-2-5) var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-subtle); }
.nav-section__actions { display: flex; gap: 2px; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-md); min-width: 0; }
.crumbs__item { color: var(--color-text-muted); white-space: nowrap; border-radius: var(--radius-xs); }
.crumbs__item:hover { color: var(--color-text); }
.crumbs__item[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }
.crumbs__sep { color: var(--color-text-disabled); }

/* ---------- Activity feed ---------- */
.feed { display: grid; }
.feed__group { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); padding-block: var(--space-4) var(--space-2); }
.feed__item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding-block: var(--space-2-5); }
.feed__item::before { content: ""; position: absolute; inset-inline-start: 13.5px; inset-block: 42px -4px; width: 1px; background: var(--color-divider); }
.feed__item:last-child::before { display: none; }
.feed__text { font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-text-muted); }
.feed__text b { font-weight: var(--weight-medium); color: var(--color-text); }
.feed__time { margin-block-start: 2px; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* ---------- File chip ---------- */
.file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); max-width: 340px; }
.file__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger-text); flex: none; }
.file__icon--doc { background: var(--color-info-soft); color: var(--color-info-text); }
.file__icon--design { background: var(--color-accent-soft); color: var(--color-accent-text); }
.file__name { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file__meta { font-size: var(--text-xs); color: var(--color-text-subtle); }
.file__body { flex: 1; min-width: 0; }

/* ---------- Chat message ---------- */
.msg { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); }
.msg:hover { background: var(--color-surface-hover); }
.msg__head { display: flex; align-items: baseline; gap: var(--space-2); }
.msg__name { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.msg__time { font-size: var(--text-xs); color: var(--color-text-subtle); }
.msg__body { margin-block-start: 2px; color: var(--color-text); line-height: var(--leading-loose); font-size: var(--text-md); display: grid; gap: var(--space-2); max-width: 68ch; }
.mention { color: var(--color-accent-text); font-weight: var(--weight-medium); background: var(--color-accent-soft); border-radius: var(--radius-xs); padding-inline: 3px; }
.reactions { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-block-start: var(--space-2); }
.reaction { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding-inline: var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reaction:hover { border-color: var(--color-border-strong); }
.reaction[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-soft-2); color: var(--color-accent-text); }
.reaction--add { width: 26px; padding: 0; justify-content: center; color: var(--color-text-subtle); }

/* ---------- Composer ---------- */
.composer { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--color-border-strong); background: var(--color-surface); box-shadow: var(--shadow-md); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.composer:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-md), 0 0 0 3px var(--color-accent-soft-2); }
.composer__input { display: block; width: 100%; min-height: 56px; max-height: 180px; padding: var(--space-3) var(--space-4) var(--space-1); border: 0; outline: 0; resize: none; background: transparent; line-height: var(--leading-normal); }
.composer__bar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1-5) var(--space-2) var(--space-2) var(--space-2); }
.composer__tools { display: flex; gap: 2px; margin-inline-end: auto; }

/* ---------- Member row ---------- */
.member { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.member__body { flex: 1; min-width: 0; }
.member__name { font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member__role { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- Toast ---------- */
.toast { display: flex; align-items: center; gap: var(--space-3); min-width: 280px; max-width: 420px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-text-inverse); box-shadow: var(--shadow-lg); font-size: var(--text-md); }
.toast__icon { color: var(--p-green-300d); flex: none; }
:root[data-theme="dark"] .toast__icon { color: var(--p-green-500); }
.toast__msg { flex: 1; }
.toast__action { font-weight: var(--weight-semibold); color: var(--p-orange-300); padding: 4px 8px; border-radius: var(--radius-sm); }
:root[data-theme="dark"] .toast__action { color: var(--p-orange-600); }
.toast__action:hover { background: var(--lit-toast-action-hover-background); }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); }
.empty__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); color: var(--color-accent); margin-block-end: var(--space-2); }
.empty__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.empty__text { color: var(--color-text-muted); max-width: 40ch; }

/* ---------- Skeleton ---------- */
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-surface-active) 50%, var(--color-surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Command palette ---------- */
.palette { width: min(680px, 100%); border-radius: var(--radius-xl); background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; max-height: min(620px, 80vh); }
.palette__search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.palette__search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--text-lg); min-width: 0; }
.palette__search input::placeholder { color: var(--color-text-subtle); }
.palette__tabs { padding-inline: var(--space-3); }
.palette__body { overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-3); flex: 1; }
.palette__group { padding: var(--space-3) var(--space-2) var(--space-1-5); font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.palette__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px; padding-inline: var(--space-2-5); border-radius: var(--radius-md); text-align: start; font-size: var(--text-md); }
.palette__item[aria-selected="true"] { background: var(--color-surface-hover); }
.palette__item .icon { color: var(--color-text-subtle); }
.palette__item-title { font-weight: var(--weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-meta { color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-enter { margin-inline-start: auto; visibility: hidden; }
.palette__item[aria-selected="true"] .palette__item-enter { visibility: visible; }
.palette__foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2-5) var(--space-4); border-block-start: 1px solid var(--color-divider); background: var(--color-surface-sunken); font-size: var(--text-xs); color: var(--color-text-muted); }
.palette__foot span { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.palette__foot span:last-child { margin-inline-start: auto; }
.palette__empty { padding: var(--space-10) var(--space-4); text-align: center; color: var(--color-text-muted); }

/* ---------- Divider / misc ---------- */
.divider { height: 1px; background: var(--color-divider); border: 0; margin: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dot, var(--color-neutral)); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }

/* =========================================================================
   SITE BASE · theme overrides, page shell, header, footer, typography
   ========================================================================= */

/* Type: Inter everywhere, Oswald for display headings on the home page */
:root { --font-sans: "Inter", ui-sans-serif, sans-serif; --font-display: "Oswald", "Inter", sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --size-content: 1280px; --gutter: var(--space-6); --fx: cubic-bezier(.16, 1, .3, 1); --dir: 1; }
:root[dir="rtl"] { --dir: -1; }

/* Monochrome theme: pure white canvas, black actions, gray only for lines. Orange lives in the logo only. */
:root {
  --color-canvas: #FFFFFF; --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F6F6F6; --color-surface-hover: #F4F4F4; --color-surface-active: #EDEDED;
  --color-border: #EAEAEA; --color-border-strong: #D9D9D9; --color-divider: #EDEDED;
  --color-text: #0A0A0A; --color-text-muted: #4D4D4D; --color-text-subtle: #6B6B6B; --color-text-disabled: #A3A3A3;
  --color-ink: #0A0A0A; --color-ink-hover: #262626;
  --color-accent: #0A0A0A; --color-action: #0A0A0A; --color-action-hover: #262626; --color-action-pressed: #000000;
  --color-accent-soft: #F3F3F3; --color-accent-soft-2: #E5E5E5; --color-accent-text: #0A0A0A; --color-on-accent: #FFFFFF; --color-focus: #0A0A0A;
  --color-neutral-soft: #F3F3F3; --color-neutral-text: #404040;
  --color-heat-0: #EDEDED; --color-heat-1: #D4D4D4; --color-heat-2: #A3A3A3; --color-heat-3: #525252; --color-heat-4: #0A0A0A;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .04); --shadow-sm: 0 1px 2px rgb(0 0 0 / .04), 0 1px 3px rgb(0 0 0 / .05);
  --shadow-md: 0 2px 6px rgb(0 0 0 / .05), 0 8px 20px rgb(0 0 0 / .05); --shadow-lg: 0 6px 16px rgb(0 0 0 / .06), 0 20px 44px rgb(0 0 0 / .07);
}
:root[data-theme="dark"] {
  --color-accent: #F2F2F2; --color-action: #F2F2F2; --color-action-hover: #FFFFFF; --color-action-pressed: #D9D9D9; --color-on-accent: #0A0A0A;
  --color-accent-soft: #262626; --color-accent-soft-2: #333333; --color-accent-text: #F2F2F2; --color-focus: #F2F2F2;
  --color-heat-1: #333; --color-heat-2: #555; --color-heat-3: #999; --color-heat-4: #F2F2F2;
}

html { scroll-behavior: smooth; }
body { min-width: 320px; font-feature-settings: "cv11", "ss01"; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Component tweaks for the site */
.page .btn { border-radius: var(--radius-full); }
.page .btn--primary { box-shadow: none; }
.page .card, .page .task-card { box-shadow: none; }
.page .h-frame, .page .auth__card { box-shadow: var(--shadow-lg); }
.btn--compact { height: 40px; padding-inline: var(--space-5); border-radius: var(--radius-full); box-shadow: none; }

/* Logo: the image is embedded once here and reused by every logo on the site */
.logo-mark { display: block; flex: none; background: url("/s/logo-mark.ab917f1917cb.png") center / cover no-repeat; }

/* Skip link: hidden until focused with the keyboard */
.skip { position: fixed; z-index: calc(var(--z-sticky) + 10); top: var(--space-3); inset-inline-start: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-action); color: var(--color-on-accent); font-weight: var(--weight-medium); transform: translate3d(0, -200%, 0); transition: transform var(--dur-base) var(--fx); }
.skip:focus-visible { transform: none; }

/* =========================================================================
   HEADER · prefixed .rv-
   ========================================================================= */
.rv { position: sticky; top: 0; z-index: calc(var(--z-sticky) + 5); height: 68px; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-block-end: 1px solid transparent; transition: border-color var(--dur-base); }
.rv.is-scrolled { border-block-end-color: var(--color-divider); }
.rv__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 100%; padding-inline: clamp(var(--space-4), 2.2vw, var(--space-10)); }
.rv__start { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.rv__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); flex: none; font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--color-text); border-radius: var(--radius-sm); }
.rv__brand .logo-mark { width: 28px; height: 28px; border-radius: 7px; }
.rv__tabs { display: flex; align-items: center; gap: var(--space-1); }
.rv__tab { position: relative; display: inline-flex; align-items: center; height: 36px; padding-inline: var(--space-3); border-radius: var(--radius-full); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; transition: color var(--dur-fast), background-color var(--dur-fast); }
.rv__tab:hover { color: var(--color-text); background: var(--lit-rv-tab-hover-background); }
.rv__tab[aria-current="page"] { color: var(--color-text); }
.rv__tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--space-3); bottom: 2px; height: 2px; border-radius: 2px; background: var(--color-ink); }
.rv__end { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.rv__icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text-muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
@media (hover: hover) { .rv__icon:hover { background: var(--lit-rv-icon-hover-background); color: var(--color-text); } }
.rv__icon:focus-visible { border-radius: 50%; }
.rv__signin[aria-current="page"] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
.rv__menu { display: none; }
:root[data-theme="dark"] .rv__tab:hover { background: var(--lit-dark-rv-tab-hover-background); }
@media (hover: hover) { :root[data-theme="dark"] .rv__icon:hover { background: var(--lit-dark-rv-icon-hover-background); } }

/* =========================================================================
   PAGES · public pages (www.streamseq.com) · prefixed .s-
   ========================================================================= */
.page { display: none; min-height: calc(100dvh - 52px); flex-direction: column; background: var(--color-bg); }
.page.is-active { display: flex; animation: page-in var(--dur-slow) var(--ease-standard); }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
/* Programmatic focus targets (page main after navigation, legal headings) need no ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.s-wrap { width: 100%; max-width: calc(var(--size-content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.s-logo { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--color-text); border-radius: var(--radius-sm); }
.s-logo .logo-mark { width: 32px; height: 32px; border-radius: 8px; }

/* Typography helpers */
.s-kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.s-h1 { font-size: var(--text-5xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.02; text-wrap: balance; }
.s-h1--md { font-size: var(--text-4xl); }
.s-h2 { font-size: var(--text-4xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.08; text-wrap: balance; }
.s-lead { font-size: var(--text-xl); color: var(--color-text-muted); line-height: var(--leading-normal); text-wrap: pretty; }
.s-link { color: var(--color-accent-text); font-weight: var(--weight-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-accent-text) 40%, transparent); border-radius: 2px; }
.s-link:hover { text-decoration-color: currentColor; }
.s-link--plain { text-decoration: none; }

/* Footer */
.s-foot { margin-block-start: auto; border-block-start: 1px solid var(--color-divider); }
.s-foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); padding-block: var(--space-12) var(--space-8); }
.s-foot__tag { margin-block-start: var(--space-3); color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-normal); }
.s-foot h2 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-block-end: var(--space-3); }
.s-foot a.s-foot__link { display: block; padding-block: 4px; color: var(--color-text-muted); font-size: var(--text-sm); width: fit-content; }
.s-foot a.s-foot__link:hover { color: var(--color-text); }
.s-foot__legal { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5) var(--space-8); border-block-start: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-subtle); }
.s-foot__legal span { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.s-foot__nav { display: grid; grid-column: span 3; grid-template-columns: subgrid; }

.toasts { position: fixed; z-index: var(--z-toast); inset-block-end: var(--space-6); inset-inline-start: 50%; translate: -50% 0; display: grid; gap: var(--space-2); }

/* Live status dot */
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex: none; }
@media (prefers-reduced-motion: no-preference) { .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-success); animation: pulse 1.8s var(--ease-standard) infinite; } }
@keyframes pulse { to { transform: scale(2.6); opacity: 0; } }

@media (max-width: 1023px) {
  :root { --gutter: var(--space-5); }
}
@media (max-width: 767px) {
  :root { --gutter: var(--space-4); }
  .rv { height: 60px; }
  .rv__start { gap: 0; }
  .rv__end { gap: var(--space-1); }
  .btn--compact { height: 36px; padding-inline: var(--space-4); }
  .rv__menu { display: inline-grid; }
  .rv__tabs { position: absolute; top: calc(100% + 6px); inset-inline: var(--space-4); flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-2); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0); transition: opacity var(--dur-base) var(--fx), transform var(--dur-base) var(--fx), visibility 0s linear var(--dur-base); }
  .rv.is-open .rv__tabs { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .rv__tab { height: 46px; padding-inline: var(--space-4); border-radius: 14px; }
  .rv__tab[aria-current="page"] { background: var(--color-surface-sunken); }
  .rv__tab[aria-current="page"]::after { display: none; }
  .s-foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-foot__in > div:first-child { grid-column: 1 / -1; }
}
/* Phones (v1.9.2, the owner's mockup): the theme switch and Sign in live in the menu, the header keeps the logo, the name
   and the menu button, so the name fits at 320 px too; the hero's title sits a little higher */
.rv__more { display: none; }
@media (max-width: 767px) {
  .rv__end > #rvTheme, .rv__end > .rv__signin { display: none; }
  .rv__tabs { padding-block-end: var(--space-3); }
  .rv__more { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-divider); }
  .rv__theme-row { display: flex; align-items: center; justify-content: space-between; height: 46px; padding-inline: var(--space-4); border-radius: 14px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; }
  .rv__more .btn { width: 100%; height: 46px; border-radius: var(--radius-full); }
  .rv__theme-row:has(input:focus-visible) { outline: 2px solid transparent; outline-offset: -2px; } /* forced colors */
  .hx { padding-block-start: var(--space-6); }
}
@media print { .rv, .s-foot, .l-toc, .skip { display: none; } .page.is-active { display: block; } }

/* =========================================================================
   HOME HERO · big type, app window with stacked summary cards
   ========================================================================= */
.hx { position: relative; padding-block: var(--space-16) var(--space-20); }
.hx > .s-wrap { position: relative; }
.hx-top { --hx: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.s-h1.hx-title { grid-column: 1; grid-row: 1; font-size: var(--hx); line-height: 1.08; max-width: none; }
.hx-line { display: block; overflow: hidden; padding-block: .02em .2em; margin-block-end: -.12em; }
.hx-line > span { display: inline-block; }
.hx-copy { grid-column: 1; grid-row: 2; display: grid; justify-items: center; margin-block-start: var(--space-8); position: relative; z-index: 1; }
.hx-copy .h-hero__sub, .hx-copy .h-hero__body { max-width: none; white-space: nowrap; }
.hx-copy .h-hero__body { margin-block-start: var(--space-2-5); }
.hx-copy .h-hero__sub { margin-block-start: 0; font-size: var(--text-2xl); }
.hx-copy .h-hero__cta { margin-block-start: var(--space-8); justify-items: center; }
.hx-stage { --p: 1; --s0: .88; position: relative; margin-block-start: var(--space-16); perspective: 1400px; transform-origin: 50% 0; will-change: transform; }
.hx-media { --hx-h: clamp(440px, 50vw, 660px); position: relative; height: var(--hx-h); border-radius: 28px 28px 0 0; overflow: hidden; background: var(--lit-hx-media-background); contain: layout paint; }
.hx-media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--color-bg) 94%); }
:root[data-theme="dark"] .hx-media { background: var(--lit-dark-hx-media-background); }
.hx-board { --hx-x: -50%; position: absolute; left: 50%; top: clamp(28px, 4vw, 56px); width: min(1180px, calc(100% - 64px)); transform: translate3d(var(--hx-x), calc(28px * (1 - var(--p))), 0) rotateX(calc(9deg * (1 - var(--p)))); transform-origin: 50% 0; will-change: transform; }
:root[dir="rtl"] .hx-board { --hx-x: 50%; left: auto; right: 50%; }
.hx-board, .hx-stack, .hx-card, .hx-chip { will-change: transform; }
.hx-board .h-frame { box-shadow: var(--lit-hx-board-h-frame-box-shadow); }
.hx-board .h-frame__board { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }
.hx-board .h-frame__in { height: calc(var(--hx-h, 600px) + 80px); }
.hx-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; }
.hx-side { display: grid; align-content: start; gap: 2px; padding: var(--space-3) var(--space-2-5); border-inline-end: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text-muted); }
.hx-side__ws { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px var(--space-3); font-weight: var(--weight-semibold); color: var(--color-text); }
.hx-side__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-ink); color: var(--color-text-inverse); font-size: 9px; font-weight: 600; }
.hx-side__item { display: flex; align-items: center; gap: var(--space-2); height: 30px; padding-inline: 8px; border-radius: 8px; white-space: nowrap; }
.hx-side__item .count { margin-inline-start: auto; }
.hx-side__item.is-active { background: var(--color-surface-sunken); color: var(--color-text); font-weight: var(--weight-medium); }
.hx-side__label { padding: var(--space-3) 8px 4px; font-size: 11px; color: var(--color-text-subtle); }
.hx-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); font-size: var(--text-sm); white-space: nowrap; }
.hx-chip b { font-weight: var(--weight-semibold); }
.hx-chip--a { top: 5%; right: 7%; }
.hx-chip--b { top: 56%; right: 4%; padding-inline-start: var(--space-2); }
.hx-chip__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-ink); color: var(--color-text-inverse); }
.hx-stack { position: relative; z-index: 3; width: min(500px, 100%); margin: calc(clamp(440px, 50vw, 660px) * -0.5) auto 0; transform: translate3d(0, calc(48px * (1 - var(--p))), 0); will-change: transform; }
.hx-card { position: relative; z-index: 2; padding: var(--space-6) var(--space-6) var(--space-5); border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--lit-hx-card-box-shadow); transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); backface-visibility: hidden; }
.hx-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block-end: var(--space-3); margin-block-end: var(--space-4); border-block-end: 1px solid var(--color-divider); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.hx-card__head a { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.hx-card__head a:hover { color: var(--color-text); }
.hx-card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.hx-card__text { margin-block-start: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.hx-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-6); }
.hx-card__stat { display: flex; align-items: baseline; gap: var(--space-2); }
.hx-card__stat b { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hx-card__stat > span { font-size: var(--text-xs); color: var(--color-text-subtle); }
.hx-card--ink { z-index: 1; margin-block-start: -28px; padding: calc(28px + var(--space-5)) var(--space-6) var(--space-6); border-radius: 0 0 24px 24px; background: var(--lit-hx-card-ink-background); color: var(--lit-hx-card-ink-color); border-color: var(--lit-hx-card-ink-border-color); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: center; box-shadow: var(--lit-hx-card-ink-box-shadow); }
:root[data-theme="dark"] .hx-card--ink { background: var(--lit-dark-hx-card-ink-background); border-color: var(--lit-dark-hx-card-ink-border-color); }
.hx-card--ink { align-items: start; }
.hx-ink__copy { display: grid; gap: var(--space-2); align-content: start; font-size: var(--text-sm); }
.hx-ink__copy b { font-weight: var(--weight-semibold); }
.hx-live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--lit-hx-live-color); }
.hx-feed { position: relative; height: 132px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.hx-feed li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2-5); min-height: 38px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--lit-hx-feed-li-background); font-size: 13px; color: var(--lit-hx-feed-li-color); transition: background-color .8s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.hx-feed li.is-new { background: var(--lit-hx-feed-li-is-new-background); }
.hx-feed li b { color: var(--lit-hx-feed-li-b-color); font-weight: var(--weight-medium); }
.hx-feed__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-feed__time { font-size: 11px; color: var(--lit-hx-feed-time-color); font-variant-numeric: tabular-nums; }
.hx-feed .avatar { --av: 22px; font-size: 9px; box-shadow: none; }
.hx-feed__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lit-hx-feed-icon-background); color: var(--lit-hx-feed-icon-color); }
.hx-feed__icon .icon { width: 12px; height: 12px; }

/* Hero copy */
.h-hero__sub { margin-block-start: var(--space-6); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); color: var(--color-text); text-wrap: balance; }
.h-hero__body { margin-block-start: var(--space-3); font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-normal); }
.h-hero__cta { display: grid; justify-items: start; gap: var(--space-2-5); margin-block-start: var(--space-8); }
.h-hero__cta .btn { min-width: 168px; }
.h-hero__micro { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* App window frame */
.h-frame { position: relative; padding: var(--space-2); border-radius: var(--radius-2xl); background: var(--color-surface-sunken); border: 1px solid var(--color-border); box-shadow: var(--shadow-xl); }
.h-frame__in { border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.h-frame__bar { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding-inline: var(--space-4); border-block-end: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text-muted); }
.h-frame__dots { display: flex; gap: 6px; } .h-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.h-frame__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2-5); padding: var(--space-3); background: var(--color-bg); }
.h-frame__col { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.h-frame__colhead { display: flex; align-items: center; gap: var(--space-2); padding: 2px 4px; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.h-frame .task-card { padding: var(--space-3); gap: var(--space-2-5); }
.h-frame .task-card__title { font-size: var(--text-md); }

@media (prefers-reduced-motion: no-preference) {
  .page.is-active .hx-line > span { animation: hx-rise 1100ms cubic-bezier(.16, 1, .3, 1) both; }
  .page.is-active .hx-line + .hx-line > span { animation-delay: 90ms; }
  .page.is-active .hx-copy { animation: hx-fade 900ms 220ms cubic-bezier(.16, 1, .3, 1) both; }
  /* Entrance: the window rises, then the sidebar, columns and cards settle in, the summary cards lift, the chips pop */
  .page.is-active .hx-media { animation: hx-media 1300ms 260ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .page.is-active .hx-side > * { animation: hx-slide 800ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(620ms + var(--i, 0) * 38ms); }
  .page.is-active .h-frame__colhead { animation: hx-fade 800ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(640ms + var(--c, 0) * 90ms); }
  .page.is-active .hx-board .task-card { animation: hx-card 900ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: var(--d, 700ms); }
  .page.is-active .hx-card { animation: hx-lift 1200ms 820ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .page.is-active .hx-card--ink { animation-delay: 980ms; }
  .page.is-active .hx-card--ink .hx-feed { animation: hx-fade 900ms 1250ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .page.is-active .hx-chip--a { animation: hx-pop 800ms 1350ms cubic-bezier(.34, 1.56, .64, 1) backwards, hx-float 6s 2.2s ease-in-out infinite; }
  .page.is-active .hx-chip--b { animation: hx-pop 800ms 1550ms cubic-bezier(.34, 1.56, .64, 1) backwards, hx-float 7s 2.6s ease-in-out infinite; }
}
@keyframes hx-media { from { opacity: 0; transform: translate3d(0, 80px, 0) scale(.96); } }
:root[dir="rtl"] .hx-side { --dir: -1; }
@keyframes hx-slide { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * -14px), 0, 0); } }
@keyframes hx-card { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); } }
@keyframes hx-lift { from { opacity: 0; transform: translate3d(0, 90px, 0) scale(.94); } }
@keyframes hx-pop { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.7); } }
@keyframes hx-rise { from { transform: translate3d(0, 108%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes hx-fade { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes hx-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }

@media (max-width: 899px) {
  .hx-copy .h-hero__sub, .hx-copy .h-hero__body { white-space: normal; text-wrap: balance; }
  .hx-copy { margin-block-start: var(--space-6); }
  .hx-chip--b { display: none; }
}
@media (max-width: 767px) {
  .hx { padding-block: var(--space-10) var(--space-12); }
  .hx-top { --hx: clamp(2.25rem, 1rem + 6.2vw, 3.25rem); }
  .hx-copy .h-hero__sub { font-size: var(--text-xl); }
  .h-hero__cta, .h-hero__cta .btn { width: 100%; }
  .h-hero__micro { justify-self: center; }
  .hx-stage { --s0: .94; margin-block-start: var(--space-10); }
  .hx-media { --hx-h: 380px; border-radius: 20px 20px 0 0; }
  .hx-app { grid-template-columns: minmax(0, 1fr); } .hx-side { display: none; }
  .hx-board { width: 820px; left: 16px; --hx-x: 0px; }
  :root[dir="rtl"] .hx-board { right: 16px; left: auto; }
  .hx-stack { margin-top: -170px; }
  .hx-chip--a { right: 12px; top: 10px; font-size: var(--text-xs); }
  .hx-card { padding: var(--space-5) var(--space-4) var(--space-4); border-radius: 20px; }
  .hx-card--ink { grid-template-columns: minmax(0, 1fr); padding: calc(28px + var(--space-4)) var(--space-4) var(--space-4); border-radius: 0 0 20px 20px; }
  .hx-card__stat b { font-size: 2.25rem; }
}
@media (max-width: 379px) {
  .hx-top { --hx: 2.25rem; }
  .hx-card__foot { flex-direction: column; align-items: stretch; }
  .hx-card__foot .btn { width: 100%; }
  .hx-chip--a span:last-child { display: none; }
}
/* =========================================================================
   HOME SECTIONS · features head, calendar, privacy promise, closing call to action, dotted background
   ========================================================================= */
:where(.page[data-page="home"]) :is(.s-h1, .s-h2) { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.02; }
.h-section { padding-block: var(--space-20); }
.h-section__head { display: grid; gap: var(--space-3); margin-block-end: var(--space-10); }
.s-h2.h-section__title { font-size: var(--text-3xl); }

/* Calendar */
.h-cal { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-12); align-items: stretch; }
.h-cal__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.h-cal__lead { margin-block-start: var(--space-4); font-size: clamp(1.25rem, .95rem + 1vw, 1.75rem); line-height: 1.55; letter-spacing: -0.01em; color: var(--color-text-muted); text-wrap: pretty; }
.h-cal__lead span { color: var(--color-text); font-weight: var(--weight-medium); }
.h-cal__link { margin-block-start: auto; padding-block-start: var(--space-6); align-self: flex-start; }
.week { padding: var(--space-5); display: grid; gap: var(--space-4); }
.week__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.week__title { font-weight: var(--weight-semibold); }
.week__grid { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 4px; font-size: var(--text-xs); }
.week__day { text-align: center; color: var(--color-text-muted); padding-block-end: 6px; font-weight: var(--weight-medium); }
.week__day b { display: block; font-size: var(--text-lg); color: var(--color-text); font-weight: var(--weight-semibold); }
.week__day.is-today b { color: var(--color-accent-text); }
.week__hour { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: 10.5px; padding-block-start: 2px; }
.week__cell { min-height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); position: relative; }
.ev { position: absolute; inset: 3px; border-radius: 6px; padding: 4px 6px; font-size: 11px; line-height: 1.25; font-weight: var(--weight-medium); overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.ev small { font-weight: 400; opacity: .83; font-size: 10px; } /* the file had .8: 4.43:1 on the task colour, AA needs 4.5 */
.ev--work { background: var(--color-accent-soft); color: var(--color-accent-text); box-shadow: inset 2px 0 0 var(--color-accent); }
.ev--due { background: var(--color-info-soft); color: var(--color-info-text); box-shadow: inset 2px 0 0 var(--color-info); }
.ev--google { background: var(--color-surface); color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); }
:root[dir="rtl"] .ev--work { box-shadow: inset -2px 0 0 var(--color-accent); }
.ev--tall { inset-block-end: -41px; z-index: 1; }
.week__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.week__legend span { display: inline-flex; align-items: center; gap: 6px; }
.week__legend i { width: 10px; height: 10px; border-radius: 3px; }
.week__key--work { background: var(--color-accent-soft); box-shadow: inset 2px 0 0 var(--color-accent); }
.week__key--due { background: var(--color-info-soft); box-shadow: inset 2px 0 0 var(--color-info); }
.week__key--google { border: 1px dashed var(--color-border-strong); }
.week__note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }

/* Privacy promise */
.h-promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.h-promise__item { padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.h-promise__item .icon { color: var(--color-accent); width: 22px; height: 22px; margin-block-end: var(--space-1); }
.h-promise__item b { font-weight: var(--weight-semibold); }
.h-promise__item span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.h-promise__note { margin-block-start: var(--space-5); color: var(--color-text-muted); }

/* Closing call to action */
.h-cta { position: relative; z-index: 1; padding-block: var(--space-20); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); justify-items: center; text-align: center; }
.h-cta .btn { min-width: 168px; }
.h-cta__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Dotted background: 90% under the hero, 20% above the footer (stops set from JS) */
.page[data-page="home"] { position: relative; isolation: isolate; }
.page[data-page="home"] > main, .page[data-page="home"] > .s-foot { position: relative; z-index: 1; }
.page[data-page="home"] .s-foot { border-block-start: 0; }
.bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--g-a, 400px), transparent var(--g-b, 800px), transparent var(--g-c, 3000px), #000 var(--g-d, 3200px), #000 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--g-a, 400px), transparent var(--g-b, 800px), transparent var(--g-c, 3000px), #000 var(--g-d, 3200px), #000 100%); }
.bg-grid__pat { position: absolute; inset-inline: 0; overflow: hidden; color: var(--color-text); }
.bg-grid__pat > svg { position: absolute; top: 0; left: 0; display: block; }
.bg-grid__pat--top { top: 0; height: var(--g-b, 800px); opacity: .9; }
.bg-grid__pat--bot { top: var(--g-c, 3000px); bottom: 0; opacity: .2; }

@media (max-width: 1023px) {
  .h-cal { grid-template-columns: 1fr; gap: var(--space-10); }
  .h-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .h-section { padding-block: var(--space-12); }
  .h-promise { grid-template-columns: 1fr; }
  .h-cta { padding-block: var(--space-12) var(--space-20); }
  .week { padding: var(--space-3); }
  .week__grid { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); }
  .ev small { display: none; }
}

/* =========================================================================
   OTHER PAGES · explore, about, sign in, contact, legal
   ========================================================================= */

/* Shared page head and closing call to action */
.x-head { display: grid; gap: var(--space-4); padding-block: var(--space-16) var(--space-10); }
.s-h1.x-title { font-size: var(--text-5xl); }
.x-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-16) var(--space-20); }
.x-cta .s-h2 { font-size: var(--text-3xl); }
.x-points, .x-cta, .a-split, .a-name { background: linear-gradient(var(--color-divider), var(--color-divider)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.x-ghost { border: 1px solid var(--color-border-strong); color: var(--color-text); }

/* Explore */
.x-tour { padding-block-end: var(--space-16); }
.x-tabs { display: flex; gap: 2px; padding: 4px; margin-block-end: var(--space-8); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.x-tabs::-webkit-scrollbar { display: none; }
.x-tab { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding-inline: var(--space-4); border-radius: var(--radius-full); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; transition: background-color var(--dur-fast), color var(--dur-fast); }
.x-tab:hover { color: var(--color-text); }
.x-tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-text-inverse); }
.x-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); align-items: center; }
.x-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .x-panel:not([hidden]) { animation: hx-fade 600ms cubic-bezier(.16, 1, .3, 1) both; } }
.x-copy { display: grid; gap: var(--space-4); align-content: start; }
.x-copy__title { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.x-copy p { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-normal); }
.x-list { display: grid; gap: var(--space-2-5); margin-block-start: var(--space-2); }
.x-list li { display: flex; align-items: center; gap: var(--space-2-5); }
.x-list .icon { color: var(--color-success); }
.x-demo { padding: var(--space-5); border-radius: 24px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); min-height: 360px; display: grid; align-content: center; }
.x-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.x-col { display: grid; gap: var(--space-2-5); }
.x-col__head { display: flex; align-items: center; gap: var(--space-2); padding: 0 4px var(--space-1); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.x-rows { border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.x-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 72px 56px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-divider); font-size: var(--text-sm); }
.x-row > span:first-child { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-row--head { border: 0; font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.x-row--head > span:first-child { font-weight: var(--weight-medium); }
.x-week { display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); gap: 4px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-xs); }
.x-week b { text-align: center; font-weight: var(--weight-semibold); padding-block-end: 6px; }
.x-week__h { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-subtle); padding-block-start: 4px; }
.x-week i { position: relative; min-height: 46px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.x-week .ev { font-style: normal; }
.x-chat { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.x-chat__head { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-2) var(--space-3); margin-block-end: var(--space-1); border-block-end: 1px solid var(--color-divider); font-weight: var(--weight-semibold); }
.x-goals { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.x-goal { display: grid; grid-template-columns: 160px minmax(0, 1fr) 44px; gap: var(--space-4); align-items: center; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.x-goal .mono { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: end; }
.x-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding-block: var(--space-12); }
.x-point { display: grid; gap: var(--space-2); }
.x-point .icon { width: 22px; height: 22px; margin-block-end: var(--space-2); }
.x-point b { font-weight: var(--weight-semibold); }
.x-point span { color: var(--color-text-muted); }

/* About */
.a-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-12); padding-block: var(--space-12); }
.a-h2 { margin-block-start: var(--space-3); font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.a-text { display: grid; gap: var(--space-4); font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-loose); }
.a-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-12); align-items: center; padding-block: var(--space-12); }
.a-name__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -0.005em; }
.a-name__word { color: var(--p-orange-500); }
.a-name__key { display: grid; gap: var(--space-3); font-size: var(--text-lg); color: var(--color-text-muted); }
.a-name__key b { color: var(--color-text); font-weight: var(--weight-semibold); }
.a-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-block: var(--space-4) var(--space-16); }
.a-value { padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; border-radius: var(--radius-xl); }
.a-value__n { font-size: var(--text-xs); color: var(--color-text-subtle); margin-block-end: var(--space-4); }
.a-value b { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.a-value p { color: var(--color-text-muted); line-height: var(--leading-normal); }

/* Sign in (board.streamseq.com) */
.auth { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-12) var(--space-4); background: var(--color-bg); }
.auth > div { width: min(420px, 100%); }
.auth__card { width: 100%; padding: var(--space-8); display: grid; gap: var(--space-5); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.auth__head { display: grid; justify-items: center; text-align: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.auth__head .logo-mark { width: 52px; height: 52px; border-radius: 13px; margin-block-end: var(--space-2); }
.auth__head h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.auth__head p { color: var(--color-text-muted); }
.auth__row .check { font-size: var(--text-sm); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.auth__alt { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.auth__legal { flex-wrap: wrap; display: flex; gap: var(--space-4); justify-content: center; margin-block-start: var(--space-6); font-size: var(--text-xs); color: var(--color-text-subtle); }
.auth__legal a:hover { color: var(--color-text); }
.auth-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.form-alert[hidden], .c-form[hidden] { display: none; }
.input .pw-toggle { margin-inline-end: -6px; }
.form-alert { display: flex; gap: var(--space-2-5); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger-text); font-size: var(--text-sm); }

/* Contact */
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-12) var(--space-20); }
.c-head { display: grid; gap: var(--space-3); margin-block-end: var(--space-8); }
.c-lead { font-size: var(--text-lg); }
.c-fieldset { border: 0; padding: 0; margin: 0; }
.c-fieldset legend { margin-block-end: var(--space-2); }
.c-submit { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.c-note { font-size: var(--text-sm); color: var(--color-text-subtle); }
.c-form { padding: var(--space-8); display: grid; gap: var(--space-5); border-radius: var(--radius-xl); }
.topic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.topic label { position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10); border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.topic label:hover { border-color: var(--color-text-disabled); }
.topic input { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 15px; margin: 0; accent-color: var(--color-action); width: 16px; height: 16px; }
.topic b { font-weight: var(--weight-medium); font-size: var(--text-md); }
.topic span { font-size: var(--text-xs); color: var(--color-text-subtle); }
.topic label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.topic label:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.c-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.c-aside__card { padding: var(--space-5); display: grid; align-content: start; gap: var(--space-2); }
.c-aside__card b { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.c-aside__card b .icon { color: var(--color-accent); }
.c-aside__card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.c-success { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); }
.c-success__title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.c-success b { color: var(--color-text); font-weight: 500; }
.c-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); }

/* Legal */
.l-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12) var(--space-20); align-items: start; }
.l-toc { position: sticky; top: 96px; display: grid; gap: 1px; }
.l-toc__label { font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-medium); padding: 0 var(--space-2-5) var(--space-2); }
.l-toc a { display: flex; gap: var(--space-2); padding: 5px var(--space-2-5); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); border-inline-start: 2px solid transparent; }
.l-toc a span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); min-width: 18px; padding-block-start: 1px; }
.l-toc a:hover { color: var(--color-text); background: var(--color-surface-hover); }
.l-toc a.is-active { color: var(--color-text); border-inline-start-color: var(--color-accent); background: var(--color-surface); }
.l-doc { min-width: 0; }
.l-doc__head { display: grid; gap: var(--space-3); padding-block-end: var(--space-8); margin-block-end: var(--space-8); border-block-end: 1px solid var(--color-divider); }
.l-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.l-doc section { scroll-margin-top: 96px; padding-block: var(--space-2) var(--space-6); }
.l-doc h2 { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin-block-end: var(--space-3); }
.l-doc h2 span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-text); font-weight: 500; min-width: 22px; }
.l-doc p { color: var(--color-text-muted); line-height: var(--leading-loose); font-size: var(--text-lg); }
.l-doc p + p, .l-doc p + ul, .l-doc ul + p { margin-block-start: var(--space-3); }
.l-doc ul { display: grid; gap: var(--space-2-5); }
.l-doc li { position: relative; padding-inline-start: var(--space-5); color: var(--color-text-muted); line-height: var(--leading-loose); font-size: var(--text-lg); }
.l-doc li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .78em; width: 6px; height: 6px; border-radius: 2px; background: var(--color-accent); }
.l-doc li b, .l-doc p b { color: var(--color-text); font-weight: var(--weight-semibold); }
.l-callout { margin-block-start: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-accent-soft); border-inline-start: 3px solid var(--color-accent); }
.l-callout p { color: var(--color-text); font-size: var(--text-md); }
.l-doc .l-intro { font-size: var(--text-lg); margin-block-end: var(--space-6); }

@media (max-width: 1023px) {
  .x-panel, .a-split, .a-name { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .x-points, .a-values { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .l-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .l-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .l-toc__label { grid-column: 1 / -1; padding-block-start: var(--space-1); }
}
@media (max-width: 767px) {
  .x-head { padding-block: var(--space-10) var(--space-8); }
  .x-demo { padding: var(--space-3); min-height: 0; }
  .x-board { grid-template-columns: minmax(0, 1fr); }
  .x-col:nth-child(n+2) { display: none; }
  .x-row { grid-template-columns: minmax(0, 1fr) auto; } .x-row > span:nth-child(n+3) { display: none; }
  .x-week { grid-template-columns: 38px repeat(5, minmax(0, 1fr)); padding: var(--space-2); }
  .x-goal { grid-template-columns: minmax(0, 1fr) 44px; } .x-goal .progress { grid-column: 1 / -1; grid-row: 2; }
  .x-cta { padding-block: var(--space-12) var(--space-16); }
  .auth__card { padding: var(--space-6) var(--space-5); }
  .c-form { padding: var(--space-5); }
  .topic { grid-template-columns: 1fr; }
  .c-aside { grid-template-columns: 1fr; }
  .l-toc { grid-template-columns: 1fr; }
  .l-doc p, .l-doc li { font-size: var(--text-md); }
}

/* =========================================================================
   FEATURES · Index list with a cursor-following preview
   ========================================================================= */
.ix { position: relative; display: block; }
.ix::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-divider); transform-origin: left; }

/* Row */
.ix-row { --o: bottom; position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 52px; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-4); overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.ix-row::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-divider); transform-origin: left; }
.ix-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: scaleY(0); transform-origin: var(--o); transition: transform .6s var(--fx); }
.ix-row.is-hot::before, .ix-row:focus-visible::before { transform: scaleY(1); }
.ix-row:focus-visible { box-shadow: none; outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* Number + title share the rolling-letter effect */
.ix-n, .ix-t { display: block; }
.ix-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: .14em; margin-block-end: -.14em; white-space: nowrap; }
.ix-n { font-size: var(--text-sm); color: var(--color-text-subtle); line-height: 1.4; transition: color .4s; }
.ix-t { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1rem + 3.8vw, 4.8rem); line-height: 1.05; transition: transform .6s var(--fx), color .4s; }
.ix-c { --off: 1.3em; display: inline-block; text-shadow: 0 var(--off) currentColor; transition: transform .6s var(--fx); transition-delay: calc(var(--i) * 12ms); }
.ix-n .ix-c { --off: 1.6em; }
.ix-row.is-hot .ix-c, .ix-row:focus-visible .ix-c { transform: translate3d(0, calc(-1 * var(--off)), 0); }
.ix-row.is-hot .ix-t, .ix-row:focus-visible .ix-t { transform: translate3d(18px, 0, 0); }

/* Description */
.ix-d { color: var(--color-text-muted); font-size: var(--text-md); transition: color .4s, transform .6s var(--fx); }
.ix-row.is-hot .ix-d, .ix-row:focus-visible .ix-d { transform: translate3d(-8px, 0, 0); }

/* Arrow: a circle grows behind it, and it leans toward the cursor */
.ix-go { --gx: 0px; --gy: 0px; position: relative; display: grid; place-items: center; width: 52px; height: 52px; transform: translate3d(var(--gx), var(--gy), 0); }
.ix-go::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-text-inverse); transform: scale(0); transition: transform .5s var(--fx); }
.ix-go .icon { position: relative; width: 26px; height: 26px; transition: transform .6s var(--fx), color .3s; }
.ix-row.is-hot .ix-go::before, .ix-row:focus-visible .ix-go::before { transform: scale(1); }
.ix-row.is-hot .ix-go .icon, .ix-row:focus-visible .ix-go .icon { transform: rotate(45deg); color: var(--color-ink); }

/* Inverted text on the filled row */
.ix-row.is-hot, .ix-row:focus-visible { color: var(--color-text-inverse); }
.ix-row.is-hot .ix-n, .ix-row.is-hot .ix-d, .ix-row:focus-visible .ix-n, .ix-row:focus-visible .ix-d { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.ix-row:active .ix-t { transform: translate3d(18px, 0, 0) scale(.985); transition-duration: .15s; }

/* Preview card */
.ix-peek { position: absolute; left: 0; top: 0; z-index: 3; width: 340px; pointer-events: none; opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rot, 0deg)) scale(var(--s, .8)); transition: opacity .35s var(--fx); will-change: transform, opacity; }
.ix-peek.is-on { opacity: 1; }
.ix-peek__in { display: grid; padding: 14px; border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--lit-ix-peek-in-box-shadow); }
.ix-peek__in > .md { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); transition: opacity .35s var(--fx), transform .5s var(--fx); }
.ix-peek__in > .md.is-on { opacity: 1; transform: none; }
.ix-peek__in > .md:not(.is-on) * { animation-play-state: paused; }

/* Entrance: lines draw, then each row rises (only when JS is running) */
.ix--js:not(.is-in) .ix-row::after, .ix--js:not(.is-in)::after { transform: scaleX(0); }
.ix--js:not(.is-in) .ix-n, .ix--js:not(.is-in) .ix-t, .ix--js:not(.is-in) .ix-d, .ix--js:not(.is-in) .ix-go { opacity: 0; translate: 0 40%; }
.ix--js .ix-row::after, .ix--js::after { transition: transform 1.2s var(--fx); transition-delay: calc(var(--r, 0) * 90ms); }
.ix--js .ix-n, .ix--js .ix-t, .ix--js .ix-d, .ix--js .ix-go { transition-property: transform, color, opacity, translate; transition-duration: .6s, .4s, .9s, .9s; transition-timing-function: var(--fx); }
.ix--js.is-in .ix-n, .ix--js.is-in .ix-t, .ix--js.is-in .ix-d, .ix--js.is-in .ix-go { transition-delay: 0s, 0s, calc(var(--r) * 90ms + 150ms), calc(var(--r) * 90ms + 150ms); }

/* Mini demos inside the preview */
.md-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 14px; background: var(--color-surface-sunken); }
.md-col { display: grid; gap: 6px; align-content: start; min-height: 108px; }
.md-col > span { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-muted); padding: 0 2px 2px; }
.md-card { height: 30px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; gap: 6px; padding-inline: 8px; font-size: 11px; color: var(--color-text-muted); }
.md-card i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-subtle); flex: none; }
.md-mover { position: absolute; left: 10px; top: 70px; width: calc((100% - 36px) / 3); border-color: var(--color-ink); color: var(--color-text); box-shadow: var(--lit-md-mover-box-shadow); }
.md-mover i { background: var(--color-success); }
.md-live { position: relative; height: 128px; padding: 14px; border-radius: 14px; background: var(--color-surface-sunken); overflow: hidden; }
.md-live > i { display: block; height: 8px; border-radius: 4px; background: var(--color-border-strong); margin-block-end: 10px; }
.md-live > i:nth-child(1) { width: 56%; } .md-live > i:nth-child(2) { width: 82%; } .md-live > i:nth-child(3) { width: 64%; } .md-live > i:nth-child(4) { width: 74%; } .md-live > i:nth-child(5) { width: 40%; }
.md-cur { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 2px; }
.md-cur svg { width: 14px; height: 14px; fill: var(--color-text); stroke: var(--color-surface); stroke-width: 1.5; }
.md-cur b { margin-block-start: 10px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--lit-md-cur-b-color); background: var(--lit-md-cur-b-background); }
.md-cur--b b { background: var(--lit-md-cur-b-b-background); }
.md-chat { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--color-surface-sunken); min-height: 128px; align-content: end; }
.md-msg { display: flex; align-items: flex-end; gap: 8px; font-size: 12px; }
.md-msg span:last-child { padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.md-msg .avatar { --av: 22px; }
.md-chat .md-msg--typing, .md-chat .md-msg--new { grid-row: 3; grid-column: 1; }
.md-typing { display: inline-flex; gap: 3px; padding: 9px 10px; }
.md-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-subtle); }
.md-goals { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--color-surface-sunken); }
.md-goal { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 12px; font-weight: var(--weight-medium); }
.md-goal .progress__bar { transform-origin: left center; }
.md-goal .mono { font-size: 11px; color: var(--color-text-subtle); text-align: end; }

.md-road { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--color-surface-sunken); }
.md-road__title { font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); }
.md-road__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 7px; padding: 8px; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); }
.md-road__q { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-subtle); padding-inline-start: 2px; }
.md-road__bar { grid-column: calc(var(--s) + 1) / calc(var(--e) + 1); height: 22px; display: flex; align-items: center; padding-inline: 8px; border-radius: 6px; background: var(--color-ink); color: var(--color-text-inverse); font-style: normal; overflow: hidden; transform-origin: left center; position: relative; z-index: 1; }
.md-road__bar b { font-size: 10.5px; font-weight: var(--weight-medium); white-space: nowrap; }
.md-road__bar--soft { background: var(--color-surface-active); color: var(--color-text); }
.md-road__now { --w: 290px; position: absolute; top: 4px; bottom: 4px; left: 8px; width: 1.5px; border-radius: 1px; background: var(--color-success); }
@media (prefers-reduced-motion: no-preference) {
  .md-road__bar { animation: md-fill 6s var(--fx) infinite; }
  .md-road__bar:nth-of-type(2) { animation-delay: .12s; } .md-road__bar:nth-of-type(3) { animation-delay: .24s; }
  .md-road__now { animation: md-now 6s linear infinite; }
}
@keyframes md-now { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--w, 300px), 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .md-mover { animation: md-move 6s var(--fx) infinite; }
  .md-cur--a { animation: md-cur-a 7s ease-in-out infinite; }
  .md-cur--b { animation: md-cur-b 8s ease-in-out infinite; }
  .md-typing i { animation: md-dot 1.2s ease-in-out infinite; }
  .md-typing i:nth-child(2) { animation-delay: .15s; } .md-typing i:nth-child(3) { animation-delay: .3s; }
  .md-msg--typing { animation: md-typing 6s linear infinite; }
  .md-msg--new { animation: md-new 6s var(--fx) infinite; }
  .md-goal .progress__bar { animation: md-fill 6s var(--fx) infinite; }
  .md-goal:nth-child(2) .progress__bar { animation-delay: .15s; } .md-goal:nth-child(3) .progress__bar { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-c, .ix-t, .ix-d, .ix-go .icon, .ix-row::before { transition-duration: .01ms; }
}
@keyframes md-move { 0%, 18% { transform: translate3d(0, 0, 0); } 30%, 52% { transform: translate3d(calc(100% + 8px), 0, 0); } 64%, 86% { transform: translate3d(calc(200% + 16px), 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes md-cur-a { 0%, 100% { transform: translate3d(30px, 24px, 0); } 35% { transform: translate3d(150px, 44px, 0); } 65% { transform: translate3d(90px, 78px, 0); } }
@keyframes md-cur-b { 0%, 100% { transform: translate3d(190px, 70px, 0); } 40% { transform: translate3d(60px, 60px, 0); } 70% { transform: translate3d(170px, 22px, 0); } }
@keyframes md-dot { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .4; } 50% { transform: translate3d(0, -3px, 0); opacity: 1; } }
@keyframes md-typing { 0%, 8% { opacity: 0; } 12%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes md-new { 0%, 46% { opacity: 0; transform: translate3d(0, 8px, 0); } 54%, 92% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; } }
@keyframes md-fill { 0% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

@media (max-width: 767px) {
  .ix-row { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: var(--space-4); padding: var(--space-5) var(--space-2); }
  .ix-d, .ix-peek { display: none; }
  .ix-go { width: 40px; height: 40px; }
  .ix-go .icon { width: 22px; height: 22px; }
  .ix-row.is-hot .ix-t { transform: translate3d(8px, 0, 0); }
}

/* =========================================================================
   FAQ · searchable, filterable accordion
   ========================================================================= */
.fq-head { display: grid; gap: var(--space-4); padding-block: var(--space-16) var(--space-10); }
.fq { --ico: 64px; --pm: 44px; --gap: var(--space-6); padding-block-end: var(--space-16); }

/* Toolbar: search and topics */
.fq-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-8); }
.fq-search { position: relative; min-width: 0; display: flex; align-items: center; gap: var(--space-3); flex: 1 1 320px; max-width: 440px; height: 52px; padding-inline: var(--space-5) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); cursor: text; transition: border-color var(--dur-base) var(--ease-standard), box-shadow .4s var(--fx); }
.fq-search:hover { border-color: var(--color-text-disabled); }
.fq-search:focus-within { border-color: var(--color-action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-action) 8%, transparent); }
.fq-search__icon { flex: none; color: var(--color-text-subtle); transition: color var(--dur-base), transform .5s var(--fx); }
.fq-search:focus-within .fq-search__icon { color: var(--color-text); transform: scale(1.08) rotate(-8deg); }
.fq-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-md); outline: none; }
.fq-search input::placeholder { color: var(--color-text-subtle); }
.fq-search input::-webkit-search-cancel-button { appearance: none; }
/* The pill itself shows focus (border and halo), so the inner field needs no second ring */
.fq-search input:focus-visible { box-shadow: none; }
.fq-search__kbd { flex: none; transition: opacity var(--dur-base), transform .4s var(--fx); }
.fq-search:focus-within .fq-search__kbd, .fq-search.has-value .fq-search__kbd { opacity: 0; transform: scale(.8); }
.fq-search.has-value .fq-search__kbd { display: none; }
.fq-search__clear { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--color-surface-hover); color: var(--color-text); cursor: pointer; transition: background-color var(--dur-fast), transform .4s var(--fx); }
.fq-search__clear[hidden] { display: none; }
.fq-search__clear:hover { background: var(--color-surface-active); transform: rotate(90deg); }

.fq-topics { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--color-border); border-radius: 26px; }
.fq-topics__pill { position: absolute; z-index: -1; top: 0; left: 0; width: var(--w, 0); height: var(--h, 0); border-radius: var(--radius-full); background: var(--color-action); transform: translate3d(var(--x, 0), var(--y, 0), 0); transition: transform .55s var(--fx), width .55s var(--fx), height .55s var(--fx); }
.fq-topic { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: color .3s var(--ease-standard), background-color var(--dur-fast); }
.fq-topic span { font-size: var(--text-xs); color: var(--color-text-subtle); transition: color .3s; }
.fq-topic:hover { color: var(--color-text); }
.fq-topic[aria-pressed="true"], .fq-topic[aria-pressed="true"] span { color: var(--color-on-accent); }
.fq-topic:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Count and expand all */
.fq-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-3); }
.fq-count { font-size: var(--text-xs); color: var(--color-text-subtle); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.fq-all { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: var(--space-3); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--dur-fast); }
@media (hover: hover) { .fq-all:hover { background: var(--color-surface-hover); } }
.fq-all .icon { transition: transform .5s var(--fx); }
.fq-all.is-all .icon { transform: rotate(180deg); }
.fq-all[hidden] { display: none; }

/* Rows */
.fq-list { position: relative; }
.fq-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-divider); }
.fq-item { position: relative; scroll-margin-block-start: 96px; }
.fq-item[hidden] { display: none; }
.fq-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-divider); transform-origin: left; }
.fq-item::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-action); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fx); pointer-events: none; }
:root[dir="rtl"] .fq-item::before, :root[dir="rtl"] .fq-item::after { transform-origin: right; }
.fq-item.is-open::after { transform: scaleX(1); }

.fq-h { margin: 0; font: inherit; }
.fq-btn { display: grid; grid-template-columns: var(--ico) minmax(0, 1fr) auto var(--pm); align-items: center; gap: var(--gap); width: 100%; padding: var(--space-6) var(--space-2); border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--color-text); font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fq-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.fq-ico { position: relative; isolation: isolate; display: grid; place-items: center; width: var(--ico); height: var(--ico); border: 1px solid var(--color-border-strong); border-radius: 50%; overflow: hidden; color: var(--color-text); transition: border-color .4s var(--ease-standard), color .35s var(--ease-standard); }
.fq-ico::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: 50%; background: var(--color-action); transform: scale(0); transition: transform .6s var(--fx); }
.fq-ico .icon { width: 22px; height: 22px; transition: transform .6s var(--fx); }
.fq-q { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: 1.3; text-wrap: pretty; transition: transform .6s var(--fx); }
.fq-tag { padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); transition: color .3s, border-color .3s; }
.fq-pm { position: relative; display: grid; place-items: center; width: var(--pm); height: var(--pm); border-radius: 50%; transition: background-color var(--dur-base) var(--ease-standard), transform .6s var(--fx); }
.fq-pm i { position: absolute; width: 18px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .6s var(--fx); }
.fq-pm i:last-child { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) {
  .fq-btn:hover .fq-ico { border-color: var(--color-action); }
  .fq-btn:hover .fq-ico .icon { transform: rotate(-10deg) scale(1.1); }
  .fq-btn:hover .fq-q { transform: translate3d(calc(var(--dir) * 6px), 0, 0); }
  .fq-btn:hover .fq-pm { background: var(--color-surface-hover); }
  .fq-btn:hover .fq-pm i:last-child { transform: rotate(90deg) scaleX(1.15); }
  .fq-btn:active .fq-pm { transform: scale(.9); }
}

/* Open */
.fq-item.is-open .fq-ico { border-color: var(--color-action); color: var(--color-on-accent); }
.fq-item.is-open .fq-ico::before { transform: scale(1); }
.fq-item.is-open .fq-ico .icon { transform: rotate(0) scale(1); }
.fq-item.is-open .fq-tag { color: var(--color-text); border-color: var(--color-border-strong); }
.fq-item.is-open .fq-pm i { transform: rotate(180deg); }
.fq-item.is-open .fq-pm i:last-child { transform: rotate(180deg); }

/* Panel: grid rows animate the height, the inner block keeps find-in-page working */
/* Answers are open without JavaScript; the script closes them before the first paint (.fq--js), as in the design */
.fq-panel { display: grid; grid-template-rows: 1fr; }
.fq--js .fq-panel { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--fx); }
.fq-item.is-open .fq-panel { grid-template-rows: 1fr; }
.fq-panel__in { min-height: 0; overflow: hidden; }
.fq-panel__in[hidden="until-found"] { display: block; }
.fq-body { display: grid; justify-items: start; gap: var(--space-6); padding-block: 0 var(--space-8); padding-inline: calc(var(--ico) + var(--gap) + var(--space-2)) var(--space-2); }
.fq-body > * { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .3s var(--ease-standard), transform .5s var(--fx); }
.fq-item.is-open .fq-body > * { opacity: 1; transform: none; transition-duration: .5s, .8s; }
.fq-item.is-open .fq-body > :nth-child(1) { transition-delay: .12s; }
.fq-item.is-open .fq-body > :nth-child(2) { transition-delay: .2s; }
.fq-item.is-open .fq-body > :nth-child(3) { transition-delay: .28s; }
.fq-text { display: grid; gap: var(--space-3); font-size: var(--text-lg); line-height: 1.7; color: var(--color-text-muted); text-wrap: pretty; }
.fq mark { padding-inline: 2px; border-radius: 3px; background: var(--color-accent-soft-2); color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-action); }

/* Pill call to action with a sliding arrow */
.fq-cta { display: inline-flex; align-items: center; gap: var(--space-4); height: 56px; padding-inline: var(--space-6) 8px; border-radius: var(--radius-full); background: var(--color-action); color: var(--color-on-accent); font-size: var(--text-md); font-weight: var(--weight-medium); text-decoration: none; transition: padding .5s var(--fx), background-color var(--dur-base), transform .3s var(--fx); }
.fq-cta__go { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-on-accent); color: var(--color-action); overflow: hidden; }
.fq-cta__go .icon { grid-area: 1 / 1; transition: transform .5s var(--fx); }
.fq-cta__go .icon + .icon { transform: translate3d(calc(var(--dir) * -160%), 0, 0); }
:root[dir="rtl"] .fq-cta__go .icon { scale: -1 1; }
@media (hover: hover) {
.fq-cta:hover { background: var(--color-action-hover); padding-inline-start: var(--space-8); }
.fq-cta:hover .fq-cta__go .icon:first-child { transform: translate3d(calc(var(--dir) * 160%), 0, 0); }
.fq-cta:hover .fq-cta__go .icon + .icon { transform: none; }
}
.fq-cta:active { transform: scale(.97); }
.fq-cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Answer footer: helpful vote and copy link */
.fq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); }
.fq-foot__vote { display: inline-flex; gap: var(--space-1); }
.fq-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast); }
@media (hover: hover) { .fq-chip:hover { border-color: var(--color-action); } }
.fq-chip[aria-pressed="true"] { border-color: var(--color-action); background: var(--color-action); color: var(--color-on-accent); }
.fq-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fq-chip--link { margin-inline-start: auto; border-color: transparent; color: var(--color-text-muted); }
.fq-chip--link:hover { border-color: transparent; background: var(--color-surface-hover); color: var(--color-text); }
.fq-chip--link .icon { transition: transform .5s var(--fx); }
.fq-chip--link:hover .icon { transform: rotate(-20deg); }
.fq-chip--link.is-done { color: var(--color-text); }
.fq-foot__thanks { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.fq-foot__thanks:empty { display: none; }

/* Empty state */
.fq-empty { display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-16); text-align: center; color: var(--color-text-muted); border-block: 1px solid var(--color-divider); }
.fq-empty[hidden] { display: none; }
.fq-empty b { color: var(--color-text); font-weight: var(--weight-semibold); }
.fq-empty__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: var(--space-3); border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text); }
.fq-ctab { min-width: 168px; }

/* Entrance and motion */
@media (prefers-reduced-motion: no-preference) {
  .fq--js .fq-item { transition: opacity .7s var(--fx) calc(var(--r) * 55ms), transform .9s var(--fx) calc(var(--r) * 55ms); }
  .fq--js .fq-item::before { transition: transform 1s var(--fx) calc(var(--r) * 55ms); }
  .fq--js:not(.is-in) .fq-item { opacity: 0; transform: translate3d(0, 24px, 0); }
  .fq--js:not(.is-in) .fq-item::before { transform: scaleX(0); }
  .fq-item.is-flash .fq-ico { animation: fq-ring 1.4s var(--fx) .35s; }
  .fq-empty:not([hidden]) .fq-empty__ico { animation: fq-wobble .8s var(--fx); }
  .fq-chip.is-pop { animation: fq-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes fq-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-action) 35%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes fq-wobble { 0% { transform: rotate(0) scale(.8); } 40% { transform: rotate(-14deg) scale(1.05); } 70% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes fq-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .fq *, .fq *::before, .fq *::after { transition-duration: 1ms; transition-delay: 0s; }
}

@media (max-width: 767px) {
  .fq { --ico: 44px; --pm: 36px; --gap: var(--space-4); }
  .fq-search { flex-basis: 100%; max-width: none; height: 48px; }
  .fq-search__kbd { display: none; }
  .fq-topics { width: 100%; }
  .fq-topic { height: 38px; padding-inline: var(--space-3); font-size: var(--text-sm); }
  .fq-btn { grid-template-columns: var(--ico) minmax(0, 1fr) var(--pm); padding-block: var(--space-5); padding-inline: 0; }
  .fq-tag { display: none; }
  .fq-ico .icon { width: 18px; height: 18px; }
  .fq-body { padding-inline: calc(var(--ico) + var(--gap)) 0; }
  .fq-text { font-size: var(--text-md); }
  .fq-cta { height: 50px; font-size: var(--text-sm); padding-inline-start: var(--space-5); }
  .fq-cta__go { width: 36px; height: 36px; }
  .fq-chip--link { margin-inline-start: 0; }
}
@media (max-width: 379px) {
  .fq-body { padding-inline: 0; }
}

.fq + .x-cta { background: none; padding-block-start: var(--space-6); }

/* =========================================================================
   SOCIAL PROOF · Spotlight carousel
   ========================================================================= */
.sp { position: relative; }

/* Shared pieces */
.sp-av { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-border-strong); border-radius: 50%; overflow: hidden; color: var(--color-text); transition: color .35s, border-color .35s; }
.sp-av::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: 50%; background: var(--color-action); transform: scale(0); transition: transform .6s var(--fx); }
.sp-av .icon { width: 18px; height: 18px; transition: transform .6s var(--fx); }
.sp-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sp-who b { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); }
.sp-who small { display: block; font-size: var(--text-sm); color: var(--color-text-subtle); }
.sp-round { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-text); cursor: pointer; overflow: hidden; isolation: isolate; transition: color .35s, border-color .35s, transform .3s var(--fx); }
.sp-round::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: 50%; background: var(--color-action); transform: scale(0); transition: transform .5s var(--fx); }
.sp-round .icon { transition: transform .5s var(--fx); }
@media (hover: hover) {
.sp-round:hover { color: var(--color-on-accent); border-color: var(--color-action); }
.sp-round:hover::before { transform: scale(1); }
}
.sp-round[data-d="-1"]:hover .icon { transform: translate3d(calc(var(--dir) * -3px), 0, 0); }
.sp-round[data-d="1"]:hover .icon { transform: translate3d(calc(var(--dir) * 3px), 0, 0); }
:root[dir="rtl"] .sp-round .icon { scale: -1 1; }
.sp-round:active { transform: scale(.92); }
.sp-round:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Spotlight carousel */
.sp-spot { position: relative; display: grid; gap: var(--space-10); padding-block: var(--space-4) 0; }
.sp-spot__main { position: relative; isolation: isolate; display: grid; gap: var(--space-6); min-height: 15rem; align-content: start; padding-block-start: var(--space-10); }
.sp-spot__mark { position: absolute; z-index: -1; inset-inline-start: -.06em; top: -.02em; font-family: var(--font-display); font-size: clamp(7rem, 5rem + 8vw, 12rem); line-height: 1; color: var(--color-surface-active); pointer-events: none; user-select: none; }
.sp-spot__mark--end { top: auto; bottom: -.62em; inset-inline-start: auto; inset-inline-end: -.06em; }
.sp-spot__q { position: relative; margin: 0; padding-block-start: var(--space-10); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.18; text-wrap: balance; }
.sp-spot__q .w { display: inline-block; }
.sp-spot__by { display: flex; align-items: center; gap: var(--space-3); }
.sp-spot__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-divider); }
.sp-spot__dots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-dot { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.sp-dot .sp-av { width: 44px; height: 44px; transition: transform .5s var(--fx), color .35s, border-color .35s; }
.sp-dot svg.ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); pointer-events: none; }
.sp-dot .ring circle { fill: none; stroke: var(--color-action); stroke-width: 1.5; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
.sp-dot:hover .sp-av { transform: scale(1.06); border-color: var(--color-action); }
.sp-dot[aria-selected="true"] .sp-av { color: var(--color-on-accent); border-color: var(--color-action); transform: scale(.86); }
.sp-dot[aria-selected="true"] .sp-av::before { transform: scale(1); }
.sp-dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sp-spot__ctrl { display: flex; align-items: center; gap: var(--space-3); }
.sp-spot__count { min-width: 4.5em; font-size: var(--text-sm); color: var(--color-text-subtle); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .sp-spot.is-in .sp-spot__q .w { animation: sp-word .8s var(--fx) both; animation-delay: calc(var(--i) * 26ms); }
  .sp-spot.is-in .sp-spot__by { animation: sp-rise .8s var(--fx) both .25s; }
  .sp-spot.is-in .sp-spot__mark { animation: sp-mark .9s var(--fx) both; }
  .sp-spot.is-in .sp-spot__mark--end { animation: sp-mark-end .9s var(--fx) both .35s; }
}
.sp-dot[aria-selected="true"] .ring circle { animation: sp-ring var(--dur, 6s) linear forwards paused; }
.sp-spot.is-play .sp-dot[aria-selected="true"] .ring circle { animation-play-state: running; }
.sp-spot.is-stopped .sp-dot[aria-selected="true"] .ring circle { animation: none; stroke-dashoffset: 0; }
.sp-round[aria-pressed] .icon { transition: transform .5s var(--fx), opacity .3s; }
.sp-round[aria-pressed]:hover .icon { transform: scale(1.12); }
@keyframes sp-word { from { opacity: 0; transform: translate3d(0, .45em, 0); } }
@keyframes sp-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes sp-mark { from { opacity: 0; transform: translate3d(0, 16px, 0) rotate(-8deg); } }
@keyframes sp-mark-end { from { opacity: 0; transform: translate3d(0, -16px, 0) rotate(8deg); } }
@keyframes sp-ring { from { stroke-dashoffset: 163.4; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) { .sp *, .sp *::before, .sp *::after { transition-duration: 1ms; } }
@media (max-width: 767px) {
  .sp-spot__dots { gap: 2px; }
  .sp-dot, .sp-dot svg.ring { width: 46px; height: 46px; }
  .sp-dot .sp-av { width: 36px; height: 36px; }
  .sp-dot .sp-av .icon { width: 16px; height: 16px; }
  .sp-spot__nav { gap: var(--space-4); }
  .sp-spot__ctrl { width: 100%; justify-content: flex-end; }
  .sp-spot__count { margin-inline-end: auto; text-align: start; }
}

/* =========================================================================
   REVEAL · staged entrances for every page (driven by js/reveal.js)
   .rv-wait  hidden start state, set before the element is seen
   .rv-go    the transition, removed again when it ends so the element keeps its own transitions
   Variants: --up (rise), --rise (rise and scale, for cards), --words / --letters (masked text)
   ========================================================================= */
.rv-go { transition: opacity .9s var(--fx), transform 1.1s var(--fx); transition-delay: calc(var(--rv-i, 0) * 90ms); }
.rv-wait:not(.rv--words, .rv--letters) { opacity: 0; }
.rv--up.rv-wait { transform: translate3d(0, 28px, 0); }
.rv--rise.rv-wait { transform: translate3d(0, 56px, 0) scale(.96); }

/* Masked text: every word (or letter) rises out of its own clip */
.rv-m { display: inline-block; overflow: clip; padding-block: .06em .16em; margin-block: -.06em -.16em; vertical-align: top; }
.rv-m > span { display: inline-block; }
.rv-wait .rv-m > span { transform: translate3d(0, 110%, 0); }
.rv-go .rv-m > span { transition: transform 1.1s var(--fx); transition-delay: calc(var(--rv-i, 0) * 90ms + var(--w) * 42ms); }
.rv--letters.rv-go .rv-m > span { transition-delay: calc(var(--rv-i, 0) * 90ms + var(--w) * 34ms); }

/* Calendar cells settle in one after another */
.week.rv-wait .week__cell { opacity: 0; transform: scale(.86); }
.week.rv-go .week__cell { transition: opacity .6s var(--fx), transform .8s var(--fx); transition-delay: calc(300ms + var(--k, 0) * 22ms); }

/* Values the design file wrote as style="" attributes, as classes (CSP: style-src 'self' allows no inline styles) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dot.dot--warning { --dot: var(--color-warning); }
.dot.dot--info { --dot: var(--color-info); }
.dot.dot--teal { --dot: var(--color-teal); }
.dot.dot--success { --dot: var(--color-success); }
.progress__bar.w-41 { width: 41%; }
.progress__bar.w-58 { width: 58%; }
.progress__bar.w-72 { width: 72%; }
.progress__bar.w-90 { width: 90%; }
.md-road__bar.md-road__bar--q12 { --s: 0; --e: 2; }
.md-road__bar.md-road__bar--q23 { --s: 1; --e: 3; }
.md-road__bar.md-road__bar--q34 { --s: 2; --e: 4; }
/* The contact form's bot trap: never shown, never focused */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Accessibility fix (not in the design file): primary buttons lost the focus ring to their own shadow rules
   (.btn--primary and .page .btn--primary come after :focus-visible). Keyboard users now see the design's ring on them too (WCAG 2.4.7). */
.btn--primary:focus-visible, .page .btn--primary:focus-visible { box-shadow: var(--ring-focus); }

/* Accessibility (v1.9.1, the owner's button review): text fields draw their focus as a shadow on their wrapper, which
   forced colors (Windows High Contrast) drop; a transparent outline beside it shows in the system colour there */
.fq-search:focus-within, .input:focus-within { outline: 2px solid transparent; outline-offset: 2px; }
/* No press nudge with reduced motion */
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }