/* Cascadia Code is what omarchy.org uses for everything; self-hosting
     it from this repo keeps the look consistent on every platform. The
     whole page is honestly all-mono. The terminal aesthetic is the brand,
     not a costume, so there is no second typeface to fetch. */
  @font-face { font-display: swap; font-family: 'Cascadia Code'; font-style: normal; font-weight: 300; src: url('fonts/CascadiaCode-SemiLight.woff2') format('woff2'); }
  @font-face { font-display: swap; font-family: 'Cascadia Code'; font-style: normal; font-weight: 400; src: url('fonts/CascadiaCode-Regular.woff2') format('woff2'); }
  @font-face { font-display: swap; font-family: 'Cascadia Code'; font-style: normal; font-weight: 600; src: url('fonts/CascadiaCode-SemiBold.woff2') format('woff2'); }
  @font-face { font-display: swap; font-family: 'Cascadia Code'; font-style: normal; font-weight: 700; src: url('fonts/CascadiaCode-Bold.woff2') format('woff2'); }

  :root {
    /* Tokyo Night palette - the same source variables omarchy.org uses,
       so the two sites share an identity. */
    --bg: #161618;        /* page shell */
    --bg-1: #0c0d11;      /* terminal chrome */
    --bg-elev: #121318;   /* cards */
    --bg-elev-2: #181a20; /* chips / pills / panels */
    --border: #24252b;    /* hairline dividers */
    --border-2: #343640;  /* brighter divider for emphasis */
    --text: #e8e8ec;      /* terminal-white */
    --text-dim: #a2a2aa;
    --text-faint: #686872;
    /* Tokyo Night blue is the theme's signature UI highlight - focus rings,
       active controls, links, the apply button. One token drives the whole
       page's accent, keeping the identity consistent. */
    --accent: #7aa2f7;
    --accent-soft: #7aa2f733;
    --accent-ink: #11121c;
    /* Tokyo Night accent hues. */
    --blue:   #7aa2f7;
    --magenta:#bb9af7;
    --cyan:   #7dcfff;
    --green:  #9ece6a;
    --orange: #ff9e64;
    --red:    #f7768e;
    --teal:   #2ac3de;
    --ok:     #41a86a;
    /* --vibe is the palette-reactive hue. It defaults to the brand accent
       and is overwritten per-card (--chip) and on the open lightbox so the
       chrome takes on the color of whatever theme you are looking at. It is
       always contrast-safe because every use mixes it INTO the dark base,
       never the other way around. */
    --vibe: var(--accent);
    /* Subtle, consistent rounding. */
    --radius: 10px;
    --radius-sm: 7px;
    --radius-xs: 5px;
    /* 4px spacing scale - one source of truth for rhythm. */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px;
    /* Mono type scale. */
    --fs-3xs: 9px; --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
    --fs-md: clamp(15px, 1rem + 0.3vw, 16px);
    --fs-lg: clamp(19px, 1.1rem + 0.7vw, 26px);
    --fs-xl: clamp(24px, 1.4rem + 1.2vw, 40px);
    --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.55;
    --ls-label: 0.14em;
    /* Motion tokens: fast=in-place flips, base=surfaces, slow=image/blur. */
    --dur-fast: 0.12s; --dur: 0.18s; --dur-slow: 0.34s; --dur-slower: 0.5s;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ink-tinted elevation (not pure black) so depth matches the palette. */
    --shadow-color: 230 40% 3%;
    --shadow-1: 0 1px 0 hsl(var(--shadow-color) / 0.24);
    --shadow-2: 0 18px 50px hsl(var(--shadow-color) / 0.34);
    --shadow-3: 0 28px 70px hsl(var(--shadow-color) / 0.55);
    /* Glass recipe knobs. */
    --glass-bg: color-mix(in oklab, var(--bg-1) 94%, transparent);
    --glass-lip: inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
    /* Sticky chrome heights (status line + heatmap) used to offset content. */
    --topbar-h: 30px;
    --heat-h: 42px;
    --font: 'Cascadia Code', ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
    --mono: var(--font);
    --display: var(--font);
  }
  @media (prefers-color-scheme: light) {
    /* Tokyo Night Day - the official light variant, so the site keeps its
       identity whichever color scheme the OS prefers. */
    :root {
      --bg: #e1e2e7;
      --bg-1: #d5d6db;
      --bg-elev: #d5d6db;
      --bg-elev-2: #c8cad6;
      --border: #b7bcce;
      --border-2: #a1a6c5;
      --text: #2e3550;
      --text-dim: #565f89;
      --text-faint: #787e9e;
      --accent: #2e7de9;
      --accent-soft: #2e7de933;
      --accent-ink: #ffffff;
      --blue:   #2e7de9;
      --magenta:#9854f1;
      --cyan:   #007197;
      --green:  #587539;
      --orange: #b15c00;
      --red:    #f52a65;
      --teal:   #118c74;
      --ok:     #33635c;
      --glass-bg: color-mix(in oklab, var(--bg) 78%, transparent);
      --glass-lip: inset 0 1px 0 color-mix(in oklab, #fff 55%, transparent);
      --shadow-color: 230 25% 35%;
      --shadow-1: 0 2px 8px hsl(var(--shadow-color) / 0.14);
      --shadow-2: 0 12px 30px hsl(var(--shadow-color) / 0.18);
      --shadow-3: 0 24px 60px hsl(var(--shadow-color) / 0.24);
    }
  }

  * { box-sizing: border-box; }
  html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: var(--fs-sm); line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }

  /* Refined terminal shell: mostly flat, with only a faint palette wash. */
  body {
    min-height: 100vh;
    isolation: isolate;
    background-color: var(--bg);
    background-image:
      radial-gradient(42% 28% at 18% -12%, color-mix(in oklab, var(--blue) 4%, transparent), transparent 68%),
      radial-gradient(44% 34% at 92% -8%,  color-mix(in oklab, var(--magenta) 3%, transparent), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  /* Fine film grain so no surface reads as a flat fill. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: 0.025; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }
  @media (prefers-color-scheme: light) { body::before { opacity: 0.03; mix-blend-mode: multiply; } }

  ::selection { background: var(--accent); color: var(--accent-ink); }
  ::-moz-selection { background: var(--accent); color: var(--accent-ink); }
  a { color: inherit; }

  /* Shared glass recipe for the floating chrome. Reserved for the few
     large surfaces (sidebar, lightbox, toast, heatbar). Cards do NOT use
     backdrop-filter - blurring ~80 tiles at once would tank compositing on
     weak GPUs during fast scroll, so they get a cheap semi-opaque fill. */
  .glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    box-shadow: var(--glass-lip), var(--shadow-1);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass { background: var(--bg-1); }
  }

  /* ---- TOP TERMINAL -------------------------------------------------- */
  header {
    position: relative; top: 0; left: 0; right: 0;
    width: auto; min-height: 0;
    z-index: 70;
    border-right: none;
    border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
    overflow: visible;
  }
  .head-row {
    width: min(100%, 1520px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(260px, 540px) auto auto;
    align-items: center;
    gap: 12px 18px;
    padding: 14px clamp(var(--space-3), 3vw, var(--space-6)) 12px;
    min-height: 0;
  }
  .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .brand-row {
    display: flex; align-items: center; gap: var(--space-2);
    font-weight: 700; letter-spacing: -0.01em; font-size: var(--fs-base);
  }
  .brand-logo {
    width: 25px; height: 25px; display: block; flex-shrink: 0;
    border-radius: 7px;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 10%, transparent);
  }
  .brand-name { display: inline-flex; align-items: baseline; gap: 1px; }
  .brand-name b { font-weight: 700; }
  .brand-name span { color: var(--text-dim); font-weight: 400; }
  /* Blinking block caret after the wordmark - it reads as a live shell. */
  .caret {
    display: inline-block; width: 0.5em; height: 1.02em;
    margin-left: 4px; transform: translateY(0.12em);
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-soft);
  }
  @media (prefers-reduced-motion: no-preference) {
    .caret { animation: caret-blink 1.1s steps(1, end) infinite; }
  }
  @keyframes caret-blink { 50% { opacity: 0; } }

  .count-row { display: flex; align-items: center; gap: var(--space-2); flex: none; }
  .count {
    font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.02em; color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border);
    padding: 3px 7px; border-radius: var(--radius-xs);
    font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  }
  .count-label { display: none; }

  /* Search styled as a shell prompt. */
  .search { width: 100%; position: relative; max-width: 540px; }
  .search .prompt {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-weight: 700; pointer-events: none;
    text-shadow: 0 0 8px var(--accent-soft);
  }
  .search input {
    width: 100%;
    background: color-mix(in oklab, var(--text) 4%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--text) 9%, transparent); border-radius: 8px;
    padding: 8px 30px 8px 28px;
    font-size: var(--fs-base); font-family: var(--mono); outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .search input::placeholder { color: var(--text-faint); }
  .search input:focus { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: none; background: color-mix(in oklab, var(--text) 5%, transparent); }
  .search .slash {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: var(--fs-2xs); color: var(--text-faint);
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    padding: 1px 5px; pointer-events: none; line-height: 1.4;
  }
  .search input:focus ~ .slash { opacity: 0; }

  /* Filter sections collapse into a compact terminal command row. */
  .filters-inline {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 9px 14px;
    padding-top: 11px;
    border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  }
  .filter-section { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .filter-section-label {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: var(--fs-2xs);
    text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--text-faint);
    padding: 0;
  }
  .filter-section-label .hk {
    font-size: var(--fs-3xs); letter-spacing: 0.04em;
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0 4px; color: var(--text-faint);
  }
  .flist { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .flist-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 4px 9px;
    font-family: var(--mono); font-size: var(--fs-sm);
    color: var(--text-dim);
    cursor: pointer; user-select: none;
    border: 1px solid color-mix(in oklab, var(--text) 9%, transparent);
    border-radius: 6px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .flist-item:hover { color: var(--text); background: color-mix(in oklab, var(--text) 4%, transparent); }
  .flist-item.selected {
    color: var(--text);
    background: color-mix(in oklab, var(--accent) 14%, transparent);
    border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  }
  .flist-item.zero { opacity: 0.36; }
  .flist-dot {
    width: 11px; height: 11px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 7px -1px currentColor;
    flex-shrink: 0;
  }
  .flist-name { flex: 1; text-transform: capitalize; }
  .flist-count { font-size: var(--fs-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .flist-item.selected .flist-count { color: var(--accent); }

  /* Resolution range row: tier name + two compact min/max op buttons. */
  .flist-range {
    display: grid; grid-template-columns: auto auto auto auto; gap: 6px;
    align-items: center;
    padding: 2px 0;
    font-family: var(--mono); font-size: var(--fs-sm);
    color: var(--text-dim);
  }
  .flist-range .rname { font-variant-numeric: tabular-nums; }
  .flist-range .rcount { font-size: var(--fs-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
  .flist-range.zero { opacity: 0.36; }
  .op-btn {
    background: var(--bg-elev-2); color: var(--text-faint);
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    padding: 2px 7px;
    font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.3;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .op-btn:hover { color: var(--text); border-color: var(--text-faint); }
  .op-btn:active { transform: translateY(1px); }
  .op-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* Header utilities: reset + optional keymap legend + links. */
  .side-foot { margin-top: 0; display: flex; align-items: center; gap: var(--space-2); padding-top: 0; }
  .reset-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 8px; padding: 8px 10px;
    font-family: var(--mono); font-size: var(--fs-xs); cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .reset-btn:hover { color: var(--text); border-color: var(--text-faint); background: color-mix(in oklab, var(--bg-elev) 60%, transparent); }
  .reset-btn[disabled] { opacity: 0.4; cursor: default; }
  .keymap { display: none; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: var(--fs-3xs); color: var(--text-faint); font-family: var(--mono); }
  .keymap div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .kbd {
    font-size: var(--fs-3xs); border: 1px solid var(--border); border-radius: 4px;
    padding: 0 4px; color: var(--text-dim); background: color-mix(in oklab, var(--bg-elev) 50%, transparent);
    min-width: 14px; text-align: center;
  }
  .side-links { display: none; flex-wrap: wrap; gap: 6px; }
  .side-links a {
    font-size: var(--fs-2xs); color: var(--text-faint); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    padding: 3px 8px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .side-links a:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }

  /* ---- MAIN + STICKY CHROME ----------------------------------------- */
  main { margin-left: 0; }
  .topchrome {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
  }
  /* tmux/lualine-style status line: mode pill, filter breadcrumbs, count. */
  .statusline {
    display: flex; align-items: center; gap: var(--space-2);
    width: min(100%, 1520px); margin: 0 auto;
    height: var(--topbar-h); padding: 0 clamp(var(--space-3), 3vw, var(--space-6));
    font-family: var(--mono); font-size: var(--fs-xs);
    border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
    overflow: hidden; white-space: nowrap;
  }
  .mode-pill {
    flex: none; font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.1em;
    color: var(--accent-ink); background: var(--accent);
    padding: 3px 8px; border-radius: 5px;
  }
  .crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--text-dim); }
  .crumb {
    display: inline-flex; align-items: center; gap: 5px;
    background: color-mix(in oklab, var(--text) 4%, transparent);
    border: 1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: 5px;
    padding: 2px 4px 2px 8px; cursor: pointer; color: var(--text-dim);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .crumb:hover { color: var(--text); border-color: var(--text-faint); }
  .crumb .crumb-k { color: var(--text-faint); }
  .crumb .crumb-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
  .crumb .x { font-size: var(--fs-sm); line-height: 1; opacity: 0.6; padding: 0 2px; }
  .crumb:hover .x { opacity: 1; }
  .crumbs-empty { color: var(--text-faint); }
  .status-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: none; }
  .status-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }
  .status-count b { color: var(--accent); font-weight: 700; }
  .status-hint { color: var(--text-faint); }
  .status-hint .kbd { margin: 0 1px; }

  /* SPECTRUM heatmap: all entries as one canvas, hue from color, dimmed
     when filtered out. Doubles as a scrubber - hover shows a chip, click
     opens that theme. One draw call, redrawn only on filter / resize. */
  .heatwrap { position: relative; height: var(--heat-h); width: min(100%, 1520px); margin: 0 auto; }
  #heat { display: block; width: 100%; height: 100%; cursor: pointer; }
  .heat-cursor {
    position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
    background: var(--text); box-shadow: 0 0 0 1px hsl(var(--shadow-color) / 0.4);
    transform: translateX(-2px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) linear;
  }
  .heatwrap.scrub .heat-cursor { opacity: 0.9; }
  .heat-tip {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    transform: translateX(-50%); pointer-events: none;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    padding: 7px 9px; min-width: 150px; max-width: 240px;
    opacity: 0; transition: opacity var(--dur-fast) var(--ease);
    z-index: 100;
  }
  .heatwrap.scrub .heat-tip { opacity: 1; }
  .heat-tip .htitle { font-size: var(--fs-2xs); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
  .heat-tip .hmeta { font-size: var(--fs-3xs); color: var(--text-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
  .heat-tip .hramp { height: 7px; border-radius: 2px; }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .heat-tip { background: var(--bg-elev); }
  }

  .gridwrap {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: 18px clamp(var(--space-3), 3vw, var(--space-6)) var(--space-7);
  }
  #grid { scroll-margin-top: calc(var(--topbar-h) + var(--heat-h) + var(--space-6)); }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 22vw, 300px), 1fr));
    gap: 14px;
  }

  /* ---- FEATURED: 3 random picks, one per color, re-rolled each visit -- */
  /* The row is a curated shelf with a faint accent wash, not just three
     more tiles. */
  .featured {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
    border-radius: 13px;
    background:
      radial-gradient(130% 160% at 0% 0%, color-mix(in oklab, var(--accent) 4%, transparent), transparent 58%),
      var(--bg-1);
    box-shadow: 0 24px 70px -46px hsl(var(--shadow-color) / 0.7), inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
  }
  .featured-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .featured-title { font-family: var(--display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
  .featured-title svg { color: var(--accent); }
  .featured-sub { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
  .featured-shuffle {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: var(--radius-sm); padding: 6px 11px;
    font-family: var(--mono); font-size: var(--fs-xs); cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .featured-shuffle:hover { color: var(--text); border-color: var(--text-faint); background: color-mix(in oklab, var(--bg-elev) 60%, transparent); }
  .featured-shuffle:active { transform: translateY(1px); }
  .featured-shuffle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-soft); }
  .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* Featured cards are larger but keep the same quiet chrome as the grid. */
  .card.featured-card {
    border-top-width: 2px;
    border-top-color: var(--chip);
    border-color: color-mix(in oklab, var(--chip) 18%, var(--border));
    box-shadow: var(--shadow-1);
  }
  .card.featured-card .card-image { aspect-ratio: 3 / 2; }
  .card.featured-card .card-title { font-size: var(--fs-base); font-weight: 700; }
  .card.featured-card .badge { font-size: var(--fs-2xs); }
  .card.featured-card:hover {
    border-color: color-mix(in oklab, var(--chip) 26%, var(--border));
    box-shadow: var(--shadow-1);
  }
  @media (max-width: 880px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .featured-grid { grid-template-columns: 1fr; } .featured-shuffle span { display: none; } }

  /* ---- CARD: a color chip ------------------------------------------- */
  .card {
    --chip: var(--accent);
    position: relative;
    background: var(--bg-elev);
    border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
    border-top: 1px solid color-mix(in oklab, var(--chip) 22%, var(--border));
    border-radius: 9px;
    overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease-out);
  }
  @supports not (background: color-mix(in oklab, red, blue)) {
    .card { background: var(--bg-elev); border-top-color: var(--accent); }
  }
  .card:focus-visible { outline: none; }
  .card.kbf {
    border-color: color-mix(in oklab, var(--chip) 70%, var(--border));
    box-shadow: 0 0 0 2px var(--chip), 0 0 0 5px color-mix(in oklab, var(--chip) 35%, transparent);
  }
  .card:active { transform: translateY(0) scale(0.997); transition-duration: var(--dur-fast); }
  .card:hover {
    border-color: color-mix(in oklab, var(--chip) 26%, var(--border));
    box-shadow: var(--shadow-1);
  }
  .card-image {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background:
      linear-gradient(115deg,
        color-mix(in oklab, var(--bg-elev-2) 60%, transparent) 0%,
        color-mix(in oklab, var(--chip) 14%, var(--bg-elev-2)) 45%,
        color-mix(in oklab, var(--bg-elev-2) 60%, transparent) 90%) 0 0 / 220% 100%,
      var(--bg-elev);
    animation: card-shimmer 1.3s ease-in-out infinite;
  }
  .card-image:has(img.loaded) { animation: none; }
  @keyframes card-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
  .card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; filter: blur(12px); transform: scale(1.05);
    transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .card-image img.loaded { opacity: 1; filter: blur(0); transform: scale(1); }
  .card:hover .card-image img.loaded { transform: scale(1.015); }
  .badge {
    position: absolute; top: var(--space-2); left: var(--space-2);
    display: inline-flex; align-items: center; gap: 5px;
    /* Solid-ish fill instead of backdrop-filter: a card carries two badges
       and ~80 cards are live during scroll, so real blur here would mean
       100+ simultaneous filters. The opaque ink keeps them legible over any
       wallpaper without the compositing cost. */
    background: color-mix(in oklab, var(--bg-1) 86%, transparent); color: var(--text);
    border: 1px solid color-mix(in oklab, var(--text) 11%, transparent);
    padding: 3px 8px; border-radius: var(--radius-xs);
    font-size: var(--fs-3xs); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono);
    z-index: 1;
  }
  .badge .bdot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
  .badge.res {
    position: absolute; bottom: var(--space-2); right: var(--space-2); top: auto; left: auto;
    border-color: var(--border); color: var(--text-dim); font-variant-numeric: tabular-nums;
  }
  /* Favourite star: a per-card toggle persisted to localStorage. No
     backdrop-filter on purpose - one filter per card would reintroduce the
     scroll-time compositing cost we deliberately removed from the badges. */
  .fav-btn {
    position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
    width: 30px; height: 30px; padding: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--bg) 74%, transparent);
    border: 1px solid color-mix(in oklab, var(--border-2) 85%, transparent);
    color: var(--text-dim); cursor: pointer; line-height: 0;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .fav-btn svg { width: 16px; height: 16px; display: block; }
  .fav-btn svg polygon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .fav-btn:hover { color: #f2c14e; border-color: color-mix(in oklab, #f2c14e 55%, var(--border-2)); transform: scale(1.08); }
  .fav-btn:active { transform: scale(0.92); }
  .fav-btn.is-fav { color: #f2c14e; border-color: color-mix(in oklab, #f2c14e 55%, transparent); background: color-mix(in oklab, #f2c14e 15%, color-mix(in oklab, var(--bg) 72%, transparent)); }
  .fav-btn.is-fav svg polygon { fill: currentColor; stroke: currentColor; }
  .fav-btn.pop { animation: fav-pop var(--dur-slow) var(--ease-out); }
  @keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
  .fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-soft); }

  /* Sidebar Favourites filter toggle. */
  .fav-toggle {
    width: auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: color-mix(in oklab, var(--bg-elev) 55%, transparent);
    border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 8px; padding: 8px 11px;
    font-family: var(--mono); font-size: var(--fs-sm); cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .fav-toggle .ft-star { color: #f2c14e; display: inline-flex; }
  .fav-toggle .ft-star svg { width: 14px; height: 14px; display: block; }
  .fav-toggle .ft-label { flex: 1; text-align: left; }
  .fav-toggle .fav-n { font-size: var(--fs-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .fav-toggle:hover { color: var(--text); border-color: var(--text-faint); }
  .fav-toggle.active { color: var(--text); background: color-mix(in oklab, #f2c14e 16%, transparent); border-color: color-mix(in oklab, #f2c14e 55%, var(--border)); }
  .fav-toggle.active .fav-n { color: #f2c14e; }
  .fav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-soft); }
  .card-body { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 3px; }
  .card-title {
    font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-sub {
    font-family: var(--mono); font-size: var(--fs-2xs);
    color: var(--text-faint); letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 6px;
  }
  .card-sub .vcount { color: var(--text-dim); }
  /* The wallpaper's own extracted palette as a single-gradient fingerprint.
     Built dynamically from colors[] (variable length) so it never shows a
     blank cell. */
  .card-ramp {
    height: 8px; margin-top: 1px;
  }

  /* First-paint reveal cascade. Only the very first batch gets it; later
     infinite-scroll batches just appear so scrolling stays smooth. */
  @media (prefers-reduced-motion: no-preference) {
    .card.reveal { opacity: 0; transform: translateY(12px); animation: card-in var(--dur-slow) var(--ease-out) forwards; animation-delay: var(--rd, 0ms); }
    @keyframes card-in { to { opacity: 1; transform: none; } }
  }

  .empty {
    grid-column: 1 / -1; padding: var(--space-7) var(--space-5);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    text-align: center; color: var(--text-dim);
    font-family: var(--mono); font-size: var(--fs-base); line-height: 1.6;
  }
  .empty-icon { color: var(--text-faint); opacity: 0.75; }
  .empty-big { font-family: var(--display); font-size: clamp(18px, 3vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
  .empty-sub { font-size: var(--fs-base); color: var(--text-dim); }
  .empty-btn { margin-top: var(--space-1); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 16px; font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
  .empty-btn:hover { filter: brightness(1.08); }
  .sentinel { grid-column: 1 / -1; height: 1px; }

  /* ---- LIGHTBOX (frost-out) ----------------------------------------- */
  /* Opening does not slam a black overlay over the grid. The backdrop
     blur ramps up across the whole viewport so the gallery dissolves into
     soft frosted color behind the focused wallpaper, the aurora still
     glowing through. The panel tints to the focused theme's hue (--vibe). */
  .lb {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: stretch;
    background: color-mix(in oklab, var(--bg) 30%, transparent);
    -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    transition: backdrop-filter var(--dur-slow) var(--ease-out), -webkit-backdrop-filter var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
  }
  .lb.open { display: flex; }
  .lb.frost {
    background: color-mix(in oklab, var(--bg) 64%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lb { background: color-mix(in oklab, var(--bg) 94%, #000); }
    .lb.frost { background: color-mix(in oklab, var(--bg) 94%, #000); }
  }
  .lb-image-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 3vw, 40px); min-width: 0;
  }
  .lb-image-wrap img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in oklab, var(--vibe) 30%, transparent);
    background: #000;
  }
  .lb.open .lb-image-wrap img { animation: lb-img-in var(--dur-slow) var(--ease-out); }
  @keyframes lb-img-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
  .lb-side {
    width: 392px; flex: none;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    border-left: 1px solid color-mix(in oklab, var(--vibe) 30%, var(--border));
    box-shadow: var(--glass-lip);
    padding: var(--space-5); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-4);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lb-side { background: var(--bg-1); }
  }
  .lb.open .lb-side { animation: lb-side-in var(--dur) var(--ease-out); }
  @keyframes lb-side-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .lb-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 999px;
    background: color-mix(in oklab, var(--bg) 60%, transparent); color: var(--text);
    border: 1px solid var(--border-2);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; z-index: 2;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .lb-close:hover { background: color-mix(in oklab, var(--bg) 85%, #000); transform: rotate(90deg); }

  .lb-plate { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .lb-plate b { color: var(--vibe); font-weight: 700; }
  .lb-plate i { font-style: normal; color: var(--border-2); }
  .lb-title {
    font-family: var(--display); font-size: var(--fs-lg); font-weight: 700;
    line-height: var(--lh-tight); letter-spacing: -0.015em; word-break: break-word; text-wrap: balance;
    color: var(--text);
    border-left: 3px solid var(--vibe); padding-left: var(--space-3); margin: 2px 0 0 -2px;
  }
  .lb-path {
    font-family: var(--mono); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-faint);
    word-break: break-all;
    padding: var(--space-2) 10px;
    background: color-mix(in oklab, var(--bg-elev-2) 70%, transparent); border-radius: var(--radius-xs); border: 1px solid var(--border);
  }
  .kv { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0; }
  .kv dt { color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; }
  .kv dd { margin: 0; color: var(--text); word-break: break-word; font-variant-numeric: tabular-nums; }
  .tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .tag {
    font-size: var(--fs-xs); padding: 3px 8px;
    background: color-mix(in oklab, var(--bg-elev-2) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius-xs);
    color: var(--text-dim); font-family: var(--mono);
  }
  .lb-sec-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--vibe); font-weight: 700; font-family: var(--mono); }

  .lb-variants { display: flex; flex-direction: column; gap: var(--space-2); }
  .variant {
    border: 1px solid var(--border); border-left: 3px solid var(--vhue, var(--border));
    border-radius: var(--radius-sm); overflow: hidden;
    background: color-mix(in oklab, var(--bg-elev-2) 78%, transparent);
    box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
  }
  .variant-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px 7px 11px; gap: var(--space-2); }
  .variant-name { font-weight: 700; font-size: var(--fs-sm); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 7px; }
  .variant-name .vdot { width: 8px; height: 8px; border-radius: 50%; background: var(--vhue, var(--accent)); box-shadow: 0 0 8px -1px var(--vhue, var(--accent)); }
  .variant-actions { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
  .variant-apply, .variant-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: var(--radius-xs);
    font-family: var(--font); font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    justify-content: center;
  }
  .variant-apply {
    background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
    min-width: 70px; font-weight: 700; letter-spacing: 0.01em;
  }
  .variant-apply:hover { filter: brightness(1.1); }
  .variant-apply:active { transform: translateY(1px); filter: brightness(0.95); }
  .variant-apply.applying { background: color-mix(in oklab, var(--accent) 70%, #000); }
  .variant-apply.sent { background: var(--ok); border-color: var(--ok); color: #fff; animation: apply-pop var(--dur-slow) var(--ease-out); }
  @keyframes apply-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
  .variant-edit { background: transparent; color: var(--text-faint); border: 1px solid var(--border); padding: 5px 9px; font-weight: 400; }
  .variant-edit:hover { color: var(--text); border-color: var(--text-faint); }
  .variant-edit:active { transform: translateY(1px); }
  .variant-apply .spin { width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: lspin 0.7s linear infinite; }
  .variant .ramp { display: grid; grid-template-columns: repeat(16, 1fr); height: 18px; }
  .variant .ramp .sl { height: 100%; cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--ease); }
  .variant .ramp .sl.copied { transform: scaleY(1.5); z-index: 2; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
  .variant-foot { display: flex; gap: var(--space-2); align-items: center; padding: 5px 11px 7px; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--text-faint); }
  .variant-foot .slug { margin-left: auto; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- TOAST -------------------------------------------------------- */
  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    color: var(--text);
    border: 1px solid var(--border-2); border-radius: var(--radius);
    padding: 11px 15px; box-shadow: var(--shadow-2), var(--glass-lip);
    font-family: var(--mono); font-size: var(--fs-sm);
    display: flex; align-items: center; gap: 10px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
    z-index: 300;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .toast { background: var(--bg-elev); } }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); }
  .toast .dot.ok { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 30%, transparent); }
  .toast strong { font-weight: 700; }
  .toast .muted { color: var(--text-faint); font-size: var(--fs-xs); }

  /* ---- FOCUS / A11Y ------------------------------------------------- */
  .flist-item:focus-visible, .op-btn:focus-visible, .reset-btn:focus-visible,
  .search input:focus-visible, .variant-edit:focus-visible, .lb-close:focus-visible,
  .crumb:focus-visible, .side-links a:focus-visible, .empty-btn:focus-visible, .ramp .sl:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .op-btn.active:focus-visible, .variant-apply:focus-visible {
    outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent);
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ---- SCROLLBARS --------------------------------------------------- */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--border-2) 80%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
  * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

  /* ---- LOADER ------------------------------------------------------- */
  .loader {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
    background: var(--bg); z-index: 200;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .loader-spinner { width: 36px; height: 36px; border: 3px solid color-mix(in oklab, var(--accent) 22%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: lspin 0.8s linear infinite; }
  .loader-text { font-family: var(--mono); font-size: clamp(12px, 0.7rem + 0.4vw, 14px); font-weight: 600; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; }
  @keyframes lspin { to { transform: rotate(360deg); } }

  /* ---- RESPONSIVE: top-bar layout under 880px ----------------------- */
  @media (max-width: 880px) {
    header {
      position: relative; top: 0; bottom: auto; right: 0;
      width: auto; border-right: none;
      border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
      overflow-y: visible;
    }
    .head-row {
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-2) var(--space-4);
      padding: var(--space-3) clamp(var(--space-3), 4vw, var(--space-6));
      min-height: 0;
    }
    .brand { flex-direction: row; align-items: center; gap: var(--space-3); }
    .count-row { gap: 6px; }
    .count-label { display: none; }
    .search { grid-column: 1 / -1; max-width: none; }
    .filters-inline {
      grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--space-3);
    }
    .filter-section { flex: 1 1 200px; }
    .side-foot { grid-column: 1 / -1; margin-top: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding-top: var(--space-2); }
    .keymap { display: none; }
    .reset-btn { flex: none; }
    main { margin-left: 0; }
    .topchrome { top: 0; }
    .lb { flex-direction: column; }
    .lb-side { width: auto; max-height: 56vh; border-left: none; border-top: 1px solid color-mix(in oklab, var(--vibe) 30%, var(--border)); }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
  }
  @media (max-width: 560px) {
    .statusline .crumbs { display: none; }
    .status-hint { display: none; }
    .heatwrap { height: 30px; }
    :root { --heat-h: 30px; }
  }

  /* ---- 1A REFINED TERMINAL OVERRIDES --------------------------------- */
  :root {
    color-scheme: dark;
    --bg: #161618;
    --bg-1: #0c0d11;
    --bg-elev: #111217;
    --bg-elev-2: #171820;
    --border: #24252b;
    --border-2: #343640;
    --text: #e8e8ec;
    --text-dim: #9a9aa3;
    --text-faint: #56565f;
    --accent: #7aa2f7;
    --accent-soft: #7aa2f733;
    --accent-ink: #0c0d11;
    --topbar-h: 33px;
    --heat-h: 30px;
  }

  html,
  body {
    background: #161618;
    color: #e8e8ec;
  }

  body {
    min-height: 100vh;
    padding: 36px 0 56px;
    background-image: none;
  }

  body::before { opacity: 0.018; }

  .terminal-frame {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    background: #0c0d11;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    overflow: hidden;
    font-family: var(--font);
    box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
  }

  main.terminal-frame { margin-left: auto; }

  .terminal-frame .glass {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .terminal-frame header {
    position: relative;
    z-index: 10;
    border: 0;
    background: #0c0d11;
  }

  .head-row {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .brand { flex: none; }
  .brand-row { gap: 9px; font-size: 14px; }
  .brand-logo {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  }
  .brand-name span { color: #5a5a64; }

  .search {
    flex: 1 1 540px;
    max-width: 540px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    padding: 8px 13px;
  }

  .search .prompt {
    position: static;
    transform: none;
    color: #7aa2f7;
    font-weight: 600;
    text-shadow: none;
  }

  .search input {
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #e8e8ec;
    font-size: 13px;
  }

  .search input:focus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .search input::placeholder { color: #56565f; }
  .search .slash { display: none; }
  .search .caret {
    width: 7px;
    height: 15px;
    margin: 0 0 0 -2px;
    transform: none;
    flex: none;
    background: #7aa2f7;
    box-shadow: none;
  }

  .header-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
    color: #7c7c85;
    font-size: 12px;
  }

  .fav-toggle {
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #7c7c85;
    gap: 5px;
    font-size: 12px;
  }

  .fav-toggle:hover,
  .fav-toggle.active { color: #e8e8ec; background: transparent; border-color: transparent; }
  .fav-toggle .ft-star { color: #e0af68; }
  .fav-toggle .ft-star svg { width: 13px; height: 13px; }
  .fav-toggle .ft-label { flex: none; text-align: left; }
  .fav-toggle .fav-sep { color: #56565f; }
  .fav-toggle .fav-n { color: #9a9aa3; }

  .count-row { gap: 5px; }
  .count {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #56565f;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
  }
  .count-label { display: inline; color: #56565f; font-size: 12px; }

  .filter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #7c7c85;
    font-size: 12px;
  }

  .reset-btn {
    flex: none;
    padding: 4px 11px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.09);
    color: #9a9aa3;
    font-size: 12px;
    gap: 0;
  }

  .reset-btn[disabled] {
    opacity: 1;
    cursor: default;
    background: rgba(122,162,247,.16);
    border-color: rgba(122,162,247,.25);
    color: #7aa2f7;
    font-weight: 600;
  }

  .reset-btn:not([disabled]):hover {
    color: #7aa2f7;
    border-color: rgba(122,162,247,.35);
    background: rgba(122,162,247,.08);
  }

  .filters-inline {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 14px;
    padding: 0;
    border: 0;
  }

  .filter-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .filter-section:not(:last-child)::after {
    content: "|";
    margin-left: 14px;
    color: #3b3b43;
  }

  .filter-section-label {
    display: inline-flex;
    color: #56565f;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }

  .filter-section-label .hk { display: none; }
  .filters-inline .filter-section:first-child .filter-section-label { display: none; }
  .flist { gap: 7px; }

  .flist-item {
    gap: 6px;
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.09);
    color: #9a9aa3;
    font-size: 12px;
    background: transparent;
  }

  .flist-item:hover { color: #e8e8ec; background: rgba(255,255,255,.035); }
  .flist-item.selected {
    background: rgba(122,162,247,.16);
    border-color: rgba(122,162,247,.25);
    color: #7aa2f7;
    font-weight: 600;
  }
  .flist-count { display: none; }
  .flist-dot { width: 13px; height: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

  .filters-inline .filter-section:nth-child(2) .flist-item {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }
  .filters-inline .filter-section:nth-child(2) .flist-item:hover { background: transparent; }
  .filters-inline .filter-section:nth-child(2) .flist-name { display: none; }
  .filters-inline .filter-section:nth-child(2) .flist-dot { width: 13px; height: 13px; }
  .filters-inline .filter-section:nth-child(2) .flist-item.selected .flist-dot {
    outline: 2px solid rgba(122,162,247,.4);
    outline-offset: 1px;
  }

  .flist-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 12px;
  }
  .flist-range .rcount { display: none; }
  .op-btn {
    padding: 3px 6px;
    border-radius: 6px;
    border-color: rgba(255,255,255,.08);
    background: transparent;
    color: #9a9aa3;
    font-size: 11px;
  }
  .op-btn.active { background: rgba(122,162,247,.16); border-color: rgba(122,162,247,.25); color: #7aa2f7; }

  .topchrome {
    position: relative;
    top: auto;
    z-index: 20;
    background: #0c0d11;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .heatwrap {
    width: 100%;
    height: var(--heat-h);
    margin: 0;
    background: rgba(255,255,255,.018);
  }

  .heat-tip {
    background: #0c0d11;
    box-shadow: 0 12px 28px -14px rgba(0,0,0,.85);
  }

  .gridwrap {
    width: 100%;
    margin: 0;
    padding: 20px;
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .featured {
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .featured-head { margin-bottom: 10px; }
  .featured-title { color: #e8e8ec; font-size: 12px; }
  .featured-title svg { color: #e0af68; }
  .featured-sub { color: #56565f; font-size: 10.5px; }
  .featured-shuffle { padding: 4px 9px; border-color: rgba(255,255,255,.08); border-radius: 6px; font-size: 11px; }
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  .card,
  .card.featured-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px;
    background: #111217;
    cursor: pointer;
    box-shadow: none;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  }

  .card:hover,
  .card.featured-card:hover {
    transform: translateY(-3px);
    border-color: rgba(122,162,247,.45);
    box-shadow: 0 18px 36px -16px rgba(0,0,0,.75);
  }

  .card.kbf {
    border-color: rgba(122,162,247,.8);
    box-shadow: 0 0 0 2px #7aa2f7, 0 18px 36px -16px rgba(0,0,0,.75);
  }

  .card-image,
  .card.featured-card .card-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    overflow: hidden;
    animation: none;
    background: #15161d;
  }

  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.04);
    transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease);
  }

  .card-image img.loaded { opacity: 1; filter: none; transform: scale(1); }
  .card:hover .card-image img.loaded { transform: scale(1.018); }
  .card-image.is-unavailable {
    background:
      linear-gradient(135deg, transparent 48%, rgba(255,255,255,.08) 49%, rgba(255,255,255,.08) 51%, transparent 52%),
      #15161d;
  }
  .card-image.is-unavailable img { display: none; }
  .image-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #7c7c85;
    font-size: 10px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
  }
  .card-image.is-unavailable .image-fallback { display: flex; }

  .badge,
  .card-body,
  .card-ramp { display: none; }

  .fav-btn {
    top: 9px;
    right: 9px;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(12,13,17,.55);
    border: 1px solid rgba(255,255,255,.12);
    color: #e0af68;
    opacity: .28;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .fav-btn svg { width: 12px; height: 12px; }
  .fav-btn:hover,
  .fav-btn:focus-visible,
  .fav-btn.is-fav { opacity: 1; transform: none; }
  .fav-btn.is-fav { background: rgba(12,13,17,.62); }

  .card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 75%, transparent);
    pointer-events: none;
  }

  .card-title {
    min-width: 0;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-swatches {
    display: flex;
    gap: 4px;
    flex: none;
  }

  .card-swatch {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  }

  .statusline {
    width: 100%;
    height: auto;
    min-height: var(--topbar-h);
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 0;
    background: rgba(255,255,255,.018);
    gap: 13px;
    font-size: 11px;
  }

  .mode-pill {
    padding: 2px 9px;
    border-radius: 4px;
    background: #7aa2f7;
    color: #0c0d11;
    font-size: 11px;
    letter-spacing: .04em;
  }

  .crumbs-empty { color: #56565f; }
  .status-right { gap: 16px; }
  .status-count { color: #56565f; }
  .status-count b { color: #9a9aa3; }
  .status-hint { color: #6b6b76; display: inline-flex; align-items: center; gap: 6px; }
  .kbd {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    color: #c8c8d0;
    font-weight: 600;
    font-size: 10px;
  }

  .state-label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
    font: 600 10.5px var(--font);
    color: #6b6b76;
    letter-spacing: .14em;
  }

  .state-label span {
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.08);
  }

  .view-state { margin-bottom: 16px; }
  .state-panel {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: #0c0d11;
  }
  .state-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 13px;
  }
  .state-star { color: #e0af68; }
  .state-muted { color: #56565f; font-size: 11.5px; }
  .state-count { margin-left: auto; color: #6b6b76; font-size: 11.5px; }
  .fav-view .mode-pill { background: #e0af68; }
  .fav-view .crumbs-empty { color: #56565f; }

  .empty {
    min-height: 322px;
    padding: 0 30px;
    justify-content: center;
    gap: 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: #0c0d11;
  }
  .empty-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    color: #4d4d56;
    font-size: 24px;
    opacity: 1;
  }
  .empty-big {
    color: #e8e8ec;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .empty-big span { color: #f7768e; }
  .empty-sub { color: #6b6b76; font-size: 12px; margin-top: 6px; }
  .empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    color: #9a9aa3;
    font-size: 11.5px;
    font-weight: 400;
  }
  .empty-btn:hover { color: #e8e8ec; filter: none; border-color: rgba(255,255,255,.18); }

  .loader {
    gap: 0;
    background: #161618;
    padding: 24px;
  }
  .loader .state-label { width: min(631px, calc(100vw - 48px)); }
  .loader-panel {
    width: min(631px, calc(100vw - 48px));
    height: min(322px, calc(100vh - 96px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0c0d11;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    font-family: var(--font);
  }
  .loader-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .loader-brand { color: #e8e8ec; font-size: 13px; font-weight: 700; }
  .loader-brand span { color: #5a5a64; }
  .loader-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7aa2f7;
    font-size: 11.5px;
  }
  .loader-spinner {
    width: 11px;
    height: 11px;
    border-width: 2px;
    border-color: rgba(122,162,247,.3);
    border-top-color: #7aa2f7;
  }
  .loader-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px;
  }
  .loader-grid div {
    border-radius: 7px;
    background: linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.035) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
  }
  .loader-grid div:nth-child(2) { animation-delay: .2s; }
  .loader-grid div:nth-child(3) { animation-delay: .35s; }
  .loader-grid div:nth-child(4) { animation-delay: .15s; }
  .loader-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.018);
    color: #56565f;
    font-size: 11px;
  }
  .loader-status span:first-child {
    padding: 2px 8px;
    border-radius: 4px;
    background: #3b3b43;
    color: #9a9aa3;
    font-weight: 700;
    font-size: 10.5px;
  }
  @keyframes shimmer { to { background-position: -200% 0; } }

  .lb {
    align-items: center;
    justify-content: center;
    padding: 42px 18px 18px;
    background: rgba(5,6,8,.7);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
  }
  .lb::before {
    content: "DETAIL · ONE-CLICK APPLY";
    position: fixed;
    top: 18px;
    left: 50%;
    width: min(1040px, calc(100vw - 36px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 11px;
    color: #6b6b76;
    font: 600 10.5px var(--font);
    letter-spacing: .14em;
  }
  .lb::after {
    content: "";
    position: fixed;
    top: 24px;
    left: calc(50% - min(520px, calc((100vw - 36px) / 2)) + 198px);
    right: calc(50% - min(520px, calc((100vw - 36px) / 2)));
    height: 1px;
    background: rgba(255,255,255,.08);
  }
  .lb-panel {
    width: min(1040px, calc(100vw - 36px));
    max-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: minmax(380px, 620px) minmax(280px, 1fr);
    grid-template-rows: auto minmax(0, 470px) auto;
    overflow: hidden;
    background: #0f1016;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 50px 110px -30px rgba(0,0,0,.9);
  }
  .lb-chrome {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    color: #c8c8d0;
    font-size: 12.5px;
  }
  .lb-prompt { color: #7aa2f7; font-weight: 700; }
  .lb-chrome b { color: #fff; font-weight: 600; }
  .lb-chrome .lb-close {
    position: static;
    margin-left: auto;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #56565f;
    font: 12px var(--font);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lb-chrome .lb-close:hover { color: #e8e8ec; background: transparent; transform: none; }
  .lb-image-wrap {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    flex: none;
    min-width: 0;
    padding: 0;
    background: #070809;
  }
  .lb-image-wrap img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }
  .lb-image-wrap.is-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      linear-gradient(135deg, transparent 49%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.08) 51%, transparent 52%),
      #070809;
  }
  .lb-image-wrap.is-unavailable img { display: none; }
  .lb-image-fallback {
    display: none;
    color: #7c7c85;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .lb-image-wrap.is-unavailable .lb-image-fallback { display: block; }
  .lb-image-wrap.is-unavailable .lb-preview-swatches { display: none; }
  .lb-preview-swatches {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    gap: 6px;
  }
  .lb-preview-swatches span {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.4);
  }
  .lb-side {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    padding: 22px 24px;
    overflow: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    gap: 17px;
  }
  .lb-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .lb-title {
    padding: 0;
    margin: 0;
    border: 0;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.12;
  }
  .lb-tone {
    padding: 2px 7px;
    border: 1px solid rgba(122,162,247,.4);
    border-radius: 5px;
    color: #7aa2f7;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .lb-meta { margin-top: 7px; color: #7c7c85; font-size: 12px; }
  .lb-sec-label { color: #56565f; font-size: 10px; letter-spacing: .16em; margin-bottom: -7px; }
  .lb-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
  }
  .lb-palette-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .lb-palette-swatch {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16);
  }
  .lb-palette-name {
    flex: 1;
    overflow: hidden;
    color: #b8b8c0;
    font-size: 11.5px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lb-palette-hex { color: #6b6b76; font-size: 11px; }
  .lb-variants { gap: 9px; margin-top: -5px; }
  .variant {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    box-shadow: none;
  }
  .variant-head { padding: 0; }
  .variant-name { padding: 10px 0 10px 12px; color: #d8d8de; font-size: 12px; }
  .variant-actions { margin-left: auto; padding: 7px; gap: 7px; }
  .variant-apply,
  .variant-edit {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
  }
  .variant-apply {
    border: 0;
    background: #7aa2f7;
    color: #0c0d11;
  }
  .variant-edit {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #d8d8de;
  }
  .variant-edit:hover { color: #fff; border-color: rgba(255,255,255,.2); }
  .variant .ramp { height: 13px; }
  .variant-foot { display: none; }
  .lb-actions {
    margin-top: auto;
    display: flex;
    gap: 9px;
  }
  .lb-secondary-action {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    color: #d8d8de;
    font: 600 12px var(--font);
    cursor: pointer;
  }
  .lb-secondary-action:hover { color: #fff; border-color: rgba(255,255,255,.2); }
  .lb-path { display: none; }
  .lb-foot {
    grid-column: 1 / -1;
    padding: 9px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #6b6b76;
    font-size: 11px;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: dark light;
      --bg: #f4f3ee;
      --bg-1: #f4f3ee;
      --bg-elev: #ebe8df;
      --bg-elev-2: #e3dfd4;
      --border: #d6d0c2;
      --border-2: #c8bfae;
      --text: #1a1a1a;
      --text-dim: #7a756c;
      --text-faint: #9a958c;
      --accent-ink: #fff;
    }

    html, body { background: #e8e5dd; color: #1a1a1a; }
    body { background-image: none; }
    .terminal-frame,
    .terminal-frame header,
    .topchrome,
    .state-panel,
    .empty { background: #f4f3ee; border-color: rgba(0,0,0,.1); }
    .terminal-frame { box-shadow: 0 34px 80px -46px rgba(34,28,18,.42); }
    .head-row,
    .filter-row,
    .topchrome,
    .statusline,
    .state-panel-head { border-color: rgba(0,0,0,.08); }
    .brand-name b,
    .state-panel-head b { color: #1a1a1a; }
    .brand-name span,
    .count,
    .count-label,
    .state-muted,
    .crumbs-empty { color: #9a958c; }
    .search { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
    .search input { color: #1a1a1a; }
    .search input::placeholder { color: #9a958c; }
    .fav-toggle { color: #7a756c; }
    .fav-toggle:hover,
    .fav-toggle.active { color: #1a1a1a; }
    .fav-toggle .ft-star,
    .state-star { color: #d98c3a; }
    .reset-btn,
    .flist-item,
    .op-btn { border-color: rgba(0,0,0,.1); color: #7a756c; }
    .flist-item:hover { color: #1a1a1a; background: rgba(0,0,0,.035); }
     .topchrome,
     .heatwrap,
     .statusline { background: rgba(0,0,0,.025); }
     .heat-tip { background: #f4f3ee; box-shadow: 0 12px 28px -14px rgba(34,28,18,.28); }
    .card,
    .card.featured-card { background: #e9e4d9; border-color: rgba(0,0,0,.12); }
    .mode-pill { color: #fff; }
    .status-hint,
    .state-count { color: #7a756c; }
    .kbd { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: #555047; }
    .empty-icon { border-color: rgba(0,0,0,.12); color: #aaa397; }
    .empty-big { color: #1a1a1a; }
    .empty-sub { color: #7a756c; }
    .empty-btn { border-color: rgba(0,0,0,.1); color: #7a756c; }
    .loader { background: #e8e5dd; }
    .loader-panel { background: #f4f3ee; border-color: rgba(0,0,0,.1); }
    .loader-head,
    .loader-status { border-color: rgba(0,0,0,.08); }
    .loader-brand { color: #1a1a1a; }
    .loader-brand span { color: #9a958c; }
    .loader-grid div { background: linear-gradient(100deg, rgba(0,0,0,.035) 30%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.035) 70%); background-size: 200% 100%; }
    .loader-status { background: rgba(0,0,0,.025); color: #9a958c; }
    .loader-status span:first-child { background: #d9d2c4; color: #7a756c; }
  }

  @media (max-width: 980px) {
    body { padding: 18px 0 36px; }
    .terminal-frame { width: min(100% - 20px, 1280px); }
    .head-row { flex-wrap: wrap; gap: 12px; }
    .brand { order: 1; }
    .header-meta { order: 2; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .filter-row { align-items: flex-start; overflow-x: auto; }
    .filters-inline { min-width: max-content; flex-wrap: nowrap; }
    .grid,
    .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-right { gap: 8px; }
    .status-count { display: none; }
    .lb { padding: 18px 10px; }
    .lb::before,
    .lb::after { display: none; }
    .lb-panel {
      width: min(100%, 620px);
      max-height: calc(100vh - 36px);
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(220px, 38vh) minmax(0, 1fr) auto;
    }
    .lb-image-wrap { grid-column: 1; grid-row: 2; }
    .lb-side { grid-column: 1; grid-row: 3; max-height: none; }
    .lb-foot { grid-row: 4; }
  }

  @media (max-width: 620px) {
    body { padding: 10px 0 24px; }
    .terminal-frame { width: calc(100% - 12px); border-radius: 10px; }
    .head-row,
    .filter-row { padding-left: 12px; padding-right: 12px; }
    .header-meta { width: 100%; margin-left: 0; justify-content: space-between; order: 3; }
    .search { order: 2; }
    .gridwrap { padding: 12px; }
    .grid,
    .featured-grid { grid-template-columns: 1fr; gap: 12px; }
    .fav-btn { opacity: .82; }
    .statusline { overflow-x: auto; }
    .statusline .crumbs { display: flex; }
    .status-hint { display: none; }
  }

  /* ---- REDUCED MOTION: collapse everything to instant ---------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    body { animation: none !important; }
    .caret { animation: none !important; }
    .loader-spinner { animation: none !important; }
    .card-image { animation: none !important; }
    .card.reveal { opacity: 1 !important; transform: none !important; }
    .card:hover { transform: none !important; }
    .card:hover .card-image img.loaded { transform: scale(1) !important; }
    .variant-apply .spin { animation: none !important; border-top-color: rgba(255,255,255,0.35) !important; }
    .variant-apply.sent { animation: none !important; }
    .lb.open .lb-image-wrap img, .lb.open .lb-side { animation: none !important; }
    .lb-close:hover { transform: none !important; }
  }