/* Command palette — a ⌘K palette that springs out of a search pill. Three looks (?look=catalog|night|bubble), each a whole
   world with its own row, selection indicator, keycap and impact.

   1 tokens: primitive → semantic (per look) → component     2 stage, frame, ambient     3 the frame's words
   4 the surface, the pill, the dialog   5 field, rows, selection, keys   6 empty state   7 impact   8 footer
   9 look A · catalog   10 look B · night   11 look C · bubble   12 reduced motion

   ---- 1. TOKENS -------------------------------------------------------------------------------------------------
   1a PRIMITIVES (:root): raw, hand-tuned values with no meaning — a tonal ramp per hue, three worlds.
        catalog   --fe felt green · --cd card cream · --tx typewriter ink · --rb rubber-stamp red · --mu mustard
        night     --nb ink blue · --ic ice (the light) · --go gold (the neon underline) · --nx accent hues
        bubble    --pk pink · --lc lilac · --sk sky · --mn mint · --lm lemon · --gp grape (the outline ink)
   1b SEMANTIC TOKENS (per look, on [data-look]): what a colour is FOR.
        field   --page --field-bg --on-field --on-field-muted --chip --on-chip --em --scrim
        panel   --panel --panel-edge --panel-shadow --panel-r --ink --ink-muted --ink-faint --rule --accent --focus --caret
        rows    --sel --sel-edge --sel-shadow --on-sel --on-sel-muted --ic-bg-1/2/3 --ic-ink --av-1…5 --on-av --match-bg --on-match
        keys    --key --key-edge --key-shadow --on-key --on-key-sel
        word    --word --word-edge --word-shadow
        trigger --trig --trig-edge --trig-shadow --on-trig --on-trig-muted
        impact  --spark-1…4 --fx-ring --fx-ink
        frame   --pill --pill-edge --on-pill --on-pill-muted --pill-icon --on-pill-icon --ring --lockup
   1c COMPONENT TOKENS: each component names the semantic tokens it uses (.panel { --pn-bg … }).
   Component rules (sections 2–8) use only component or semantic tokens (plus color-mix transparency helpers). The look
   sections (9–11) shape parts with tokens too. */

:root {
  /* catalog: felt, card, ink */
  --fe-950: #061D15; --fe-900: #0A2C20; --fe-800: #0F3C2C; --fe-700: #17543D; --fe-600: #1F6F50;
  --cd-50: #FCF6E6; --cd-100: #F6EBCE; --cd-200: #EBDAAE; --cd-300: #D8C18A; --cd-400: #B39A63;
  --tx-900: #211D14; --tx-700: #4B4231; --tx-600: #5C5240;
  --rb-700: #9E2119; --rb-600: #B3261E; --rb-500: #CC3A2B; --mu-400: #E8B84A; --mu-300: #F2CE75; --bl-500: #5F86A8;
  --vin-1: #86A98A; --vin-2: #D08A6B; --vin-3: #7C9CBD; --vin-4: #C9A94E; --vin-5: #A58BB4;
  /* night: ink blue, ice light, gold neon */
  --nb-975: #04071A; --nb-950: #070C26; --nb-900: #0B1236; --nb-850: #101A4A; --nb-700: #24379A; --nb-500: #4C69E0;
  --ic-50: #F4F7FF; --ic-100: #E3EAFF; --ic-300: #B6C5FB; --ic-400: #94A9F2;
  --go-300: #FFE08A; --go-400: #FFCB57; --go-500: #FFB02E;
  --nx-1: #7DA2FF; --nx-2: #A98BFF; --nx-3: #5EEAD4; --nx-4: #FF8FAB; --nx-5: #FDBA74;
  /* bubble: candy and grape ink */
  --pk-100: #FFE9F6; --pk-200: #FFC7E6; --pk-300: #FFA3D5; --pk-400: #FF7DC1; --pk-500: #FF4FA8;
  --lc-300: #D3C2FF; --lc-400: #B39BFF; --lc-500: #8F6BFF;
  --sk-300: #A5E6FF; --mn-300: #9AF2CC; --lm-300: #FFE86F; --lm-400: #FFD21F;
  --gp-950: #1E0B3D; --gp-900: #2A1250; --gp-800: #3B1A6E; --gp-700: #4C1D95; --gp-600: #6B3FA0;
  --white: #fff; --black: #000;

  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --cour: 'Courier Prime', 'Courier New', monospace;
  --baloo: 'Baloo 2', 'Nunito', ui-rounded, system-ui, sans-serif;
  --nunito: 'Nunito', ui-rounded, system-ui, sans-serif;
  --row-h: 34px; --hd-h: 20px; --field-h: 50px;     /* app.js uses the same numbers */
}

/* 1b · semantic tokens, per look */
/* A · CATALOG: a library card catalog. Green felt desk, a cream index card, typewriter type, a red rubber stamp */
[data-look="catalog"] {
  --page: var(--fe-900);
  --field-bg: radial-gradient(ellipse 78% 52% at 50% 44%, var(--fe-600) 0%, var(--fe-800) 52%, var(--fe-950) 100%);
  --on-field: var(--cd-100); --on-field-muted: #E4D8B6; --chip: var(--cd-100); --on-chip: var(--tx-900); --em: linear-gradient(180deg, var(--mu-300), var(--mu-400)); --scrim: color-mix(in srgb, var(--fe-950) 55%, transparent);
  --panel: var(--cd-100); --panel-edge: var(--cd-300); --panel-shadow: 0 30px 50px -24px color-mix(in srgb, var(--black) 80%, transparent), 0 3px 0 var(--cd-400);
  --panel-r: 7px; --ink: var(--tx-900); --ink-muted: var(--tx-600); --ink-faint: var(--tx-700); --rule: color-mix(in srgb, var(--bl-500) 55%, transparent);
  --accent: var(--rb-600); --focus: var(--rb-600); --caret: var(--rb-600);
  --sel: color-mix(in srgb, var(--rb-600) 7%, transparent); --sel-edge: var(--rb-600); --sel-shadow: color-mix(in srgb, var(--tx-900) 30%, transparent);
  --on-sel: var(--tx-900); --on-sel-muted: var(--tx-600);
  --ic-bg-1: transparent; --ic-bg-2: transparent; --ic-bg-3: transparent; --ic-ink: var(--tx-900);
  --av-1: var(--vin-1); --av-2: var(--vin-2); --av-3: var(--vin-3); --av-4: var(--vin-4); --av-5: var(--vin-5); --on-av: var(--tx-900);
  --match-bg: transparent; --on-match: var(--rb-600);
  --key: var(--cd-50); --key-edge: var(--tx-900); --key-shadow: var(--tx-900); --on-key: var(--tx-900); --on-key-sel: var(--rb-600);
  --word: var(--cd-100); --word-edge: transparent; --word-shadow: color-mix(in srgb, var(--black) 45%, transparent);
  --trig: var(--cd-100); --trig-edge: var(--cd-300); --trig-shadow: 0 3px 0 var(--cd-400), 0 22px 30px -16px color-mix(in srgb, var(--black) 75%, transparent);
  --on-trig: var(--tx-900); --on-trig-muted: var(--tx-600);
  --spark-1: var(--rb-500); --spark-2: var(--cd-100); --spark-3: var(--mu-400); --spark-4: var(--cd-300); --fx-ring: var(--cd-100); --fx-ink: var(--rb-600);
  --pill: color-mix(in srgb, var(--fe-950) 78%, transparent); --pill-edge: color-mix(in srgb, var(--cd-300) 45%, transparent);
  --on-pill: var(--cd-100); --on-pill-muted: #E4D8B6; --pill-icon: var(--mu-400); --on-pill-icon: var(--fe-950); --ring: var(--cd-300); --lockup: none;
}
/* B · NIGHT: a stage at night. Ink-blue glass, a moving specular light, thin gold neon underlines */
[data-look="night"] {
  --page: var(--nb-950);
  --field-bg: radial-gradient(ellipse 85% 50% at 50% 46%, var(--nb-850) 0%, var(--nb-900) 45%, var(--nb-975) 100%);
  --on-field: var(--ic-100); --on-field-muted: var(--ic-400); --chip: var(--go-400); --on-chip: var(--nb-975); --em: linear-gradient(180deg, var(--go-300), var(--go-500)); --scrim: color-mix(in srgb, var(--nb-975) 58%, transparent);
  --panel: linear-gradient(180deg, color-mix(in srgb, var(--nb-850) 94%, var(--nb-700)) 0%, var(--nb-900) 100%); --panel-edge: color-mix(in srgb, var(--ic-400) 38%, transparent);
  --panel-shadow: 0 40px 70px -24px color-mix(in srgb, var(--black) 85%, transparent);
  --panel-r: 22px; --ink: var(--ic-50); --ink-muted: var(--ic-300); --ink-faint: var(--ic-400); --rule: color-mix(in srgb, var(--ic-400) 18%, transparent);
  --accent: var(--go-400); --focus: var(--go-400); --caret: var(--go-400);
  --sel: linear-gradient(90deg, color-mix(in srgb, var(--ic-400) 26%, transparent), color-mix(in srgb, var(--ic-400) 7%, transparent)); --sel-edge: color-mix(in srgb, var(--go-400) 78%, transparent); --sel-shadow: transparent;
  --on-sel: var(--white); --on-sel-muted: var(--ic-100);
  --ic-bg-1: color-mix(in srgb, var(--nx-1) 20%, transparent); --ic-bg-2: color-mix(in srgb, var(--nx-2) 22%, transparent); --ic-bg-3: color-mix(in srgb, var(--go-400) 20%, transparent); --ic-ink: var(--ic-50);
  --av-1: var(--nx-3); --av-2: var(--nx-4); --av-3: var(--nx-2); --av-4: var(--nx-5); --av-5: var(--nx-1); --on-av: var(--nb-975);
  --match-bg: transparent; --on-match: var(--go-300);
  --key: linear-gradient(180deg, color-mix(in srgb, var(--ic-300) 20%, transparent), color-mix(in srgb, var(--ic-300) 6%, transparent)); --key-edge: color-mix(in srgb, var(--ic-300) 38%, transparent); --key-shadow: transparent; --on-key: var(--ic-100); --on-key-sel: var(--white);
  --word: var(--ic-50); --word-edge: transparent; --word-shadow: color-mix(in srgb, var(--nb-500) 70%, transparent);
  --trig: linear-gradient(180deg, var(--nb-850), var(--nb-900)); --trig-edge: color-mix(in srgb, var(--ic-300) 48%, transparent);
  --trig-shadow: 0 0 80px -14px color-mix(in srgb, var(--nb-500) 70%, transparent), 0 24px 36px -18px color-mix(in srgb, var(--black) 80%, transparent);
  --on-trig: var(--ic-50); --on-trig-muted: var(--ic-300);
  --spark-1: var(--go-300); --spark-2: var(--go-400); --spark-3: var(--ic-100); --spark-4: var(--nx-1); --fx-ring: var(--go-400); --fx-ink: var(--go-400);
  --pill: color-mix(in srgb, var(--nb-975) 80%, transparent); --pill-edge: color-mix(in srgb, var(--ic-400) 45%, transparent);
  --on-pill: var(--ic-100); --on-pill-muted: var(--ic-400); --pill-icon: var(--go-400); --on-pill-icon: var(--nb-975); --ring: var(--go-400); --lockup: none;
}
/* C · BUBBLE: bubblegum OS. Candy pink world, sticker panels in grape outline, a jelly selection pill */
[data-look="bubble"] {
  --page: var(--pk-400);
  --field-bg: linear-gradient(165deg, var(--pk-300) 0%, var(--pk-400) 42%, var(--lc-400) 100%);
  --on-field: var(--gp-950); --on-field-muted: var(--gp-950); --chip: var(--lm-300); --on-chip: var(--gp-900); --em: linear-gradient(180deg, var(--gp-700), var(--gp-700)); --scrim: color-mix(in srgb, var(--gp-800) 14%, transparent);
  --panel: var(--pk-100); --panel-edge: var(--gp-900); --panel-shadow: 6px 7px 0 0 var(--gp-900);
  --panel-r: 28px; --ink: var(--gp-900); --ink-muted: var(--gp-600); --ink-faint: var(--gp-600); --rule: color-mix(in srgb, var(--gp-900) 12%, transparent);
  --accent: var(--gp-700); --focus: var(--gp-700); --caret: var(--pk-500);
  --sel: var(--lm-300); --sel-edge: var(--gp-900); --sel-shadow: var(--gp-900);
  --on-sel: var(--gp-900); --on-sel-muted: var(--gp-800);
  --ic-bg-1: var(--lm-300); --ic-bg-2: var(--sk-300); --ic-bg-3: var(--mn-300); --ic-ink: var(--gp-900);
  --av-1: var(--mn-300); --av-2: var(--pk-300); --av-3: var(--sk-300); --av-4: var(--lm-300); --av-5: var(--lc-300); --on-av: var(--gp-900);
  --match-bg: var(--pk-300); --on-match: var(--gp-900);
  --key: var(--white); --key-edge: var(--gp-900); --key-shadow: var(--gp-900); --on-key: var(--gp-900); --on-key-sel: var(--gp-900);
  --word: var(--white); --word-edge: var(--gp-900); --word-shadow: var(--gp-900);
  --trig: var(--pk-100); --trig-edge: var(--gp-900); --trig-shadow: 6px 7px 0 0 var(--gp-900);
  --on-trig: var(--gp-900); --on-trig-muted: var(--gp-600);
  --spark-1: var(--lm-300); --spark-2: var(--white); --spark-3: var(--sk-300); --spark-4: var(--mn-300); --fx-ring: var(--white); --fx-ink: var(--gp-900);
  --pill: var(--pk-100); --pill-edge: var(--gp-900); --on-pill: var(--gp-900); --on-pill-muted: var(--gp-600); --pill-icon: var(--gp-900); --on-pill-icon: var(--lm-300); --ring: var(--gp-900); --lockup: brightness(0);
}

/* 1c · component tokens: each component names what it uses */
.title   { --title-ink: var(--on-field); --title-muted: var(--on-field-muted); --title-em: var(--em); --title-chip: var(--chip); --title-on-chip: var(--on-chip); }
.pal     { --pn-bg: var(--panel); --pn-edge: var(--panel-edge); --pn-shadow: var(--panel-shadow); --pn-ink: var(--ink); --pn-muted: var(--ink-muted); --pn-faint: var(--ink-faint);
           --pn-rule: var(--rule); --pn-accent: var(--accent); --pn-focus: var(--focus); --pn-caret: var(--caret); }
.trigger { --tg-bg: var(--trig); --tg-edge: var(--trig-edge); --tg-shadow: var(--trig-shadow); --tg-ink: var(--on-trig); --tg-muted: var(--on-trig-muted); --tg-focus: var(--focus); }
.rows    { --rw-sel: var(--sel); --rw-sel-edge: var(--sel-edge); --rw-sel-shadow: var(--sel-shadow); --rw-on-sel: var(--on-sel); --rw-on-sel-muted: var(--on-sel-muted);
           --rw-ic-1: var(--ic-bg-1); --rw-ic-2: var(--ic-bg-2); --rw-ic-3: var(--ic-bg-3); --rw-ic-ink: var(--ic-ink);
           --rw-av-1: var(--av-1); --rw-av-2: var(--av-2); --rw-av-3: var(--av-3); --rw-av-4: var(--av-4); --rw-av-5: var(--av-5); --rw-on-av: var(--on-av);
           --rw-match-bg: var(--match-bg); --rw-on-match: var(--on-match); }
.kc      { --kc-bg: var(--key); --kc-edge: var(--key-edge); --kc-shadow: var(--key-shadow); --kc-ink: var(--on-key); }
.word    { --wd-ink: var(--word); --wd-edge: var(--word-edge); --wd-shadow: var(--word-shadow); }
.tutorial { --pill-bg: var(--pill); --pill-line: var(--pill-edge); --pill-ink: var(--on-pill); --pill-dim: var(--on-pill-muted); --pill-ic: var(--pill-icon); --pill-on-ic: var(--on-pill-icon); }
.credits { --credit-ink: var(--on-field); --credit-muted: var(--on-field-muted); --credit-ring: var(--ring); }
.fx      { --fx-1: var(--spark-1); --fx-2: var(--spark-2); --fx-3: var(--spark-3); --fx-4: var(--spark-4); --fx-r: var(--fx-ring); --fx-i: var(--fx-ink); }

/* ---- 2. the stage, the frame, ambient ---- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overflow: hidden;
}
button, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stage { position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: var(--field-bg), var(--page); color: var(--on-field); }
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(calc(var(--k, 1) * var(--bump, 1))); }
.amb { position: absolute; inset: 0; pointer-events: none; }
.amb > * { display: none; position: absolute; }
.amb .scrim { display: block; inset: -60px; background: var(--scrim); opacity: 0; }

/* ---- 3. the frame's words ---- */
.title { position: absolute; top: 30px; left: 0; right: 0; text-align: center; z-index: 3; color: var(--title-ink); }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 -4px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--title-muted);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--title-on-chip); background: var(--title-chip); }
.title h1 { margin: 0; height: 72px; font-size: 44px; font-weight: 700; line-height: 72px; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.14em; line-height: 50px; letter-spacing: -.02em; padding: 0 .1em;
  background: var(--title-em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin: -7px 0 0; height: 20px; line-height: 20px; font-size: 14px; font-weight: 500; color: var(--title-muted); }
.hint .mod { font-family: inherit; }
.hint kbd { font: inherit; font-weight: 700; color: var(--title-ink); }

/* the giant word: it lives above the surface and rides with it (app.js sets its transform from the morph) */
.cmd { position: absolute; inset: 0; z-index: 2; }
.word { position: absolute; left: 0; right: 0; top: 110px; height: 128px; margin: 0; transform-origin: 50% 104px; text-align: center; pointer-events: none; }
.w { position: absolute; left: 0; right: 0; top: 0; height: 128px; display: block; text-align: center; font-size: 80px; line-height: 128px; white-space: nowrap; color: var(--wd-ink); -webkit-text-stroke: 0; transform-origin: 50% 60%; }

/* ---- 4. the surface: ONE element is the pill, then the palette. Its box (left, top, width, height, radius) is
        sprung by app.js; both faces are laid out at their own fixed size inside it and clipped by it. ---- */
.pal-wrap { position: absolute; left: 46px; top: 366px; width: 340px; height: 64px; }
.pal { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r, 32px); background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--pn-edge), var(--pn-shadow); color: var(--pn-ink); font-family: var(--f-ui); }
.ghost { display: none; position: absolute; inset: 0; border-radius: inherit; }

/* the trigger: the pill's face (a real button) */
.trigger {
  position: absolute; left: 50%; top: 0; width: 340px; height: 64px; margin-left: -170px; padding: 0 16px 0 20px; border: 0; border-radius: 0;
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: transparent; color: var(--tg-ink); font-family: var(--f-ui);
}
.trigger:focus-visible { outline: 3px solid var(--tg-focus); outline-offset: -6px; border-radius: 28px; }
.t-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tg-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-label { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; color: var(--tg-ink); }
.t-keys { flex: none; display: flex; gap: 4px; }

/* the dialog: the palette's face, 392 wide, centred in the growing surface */
.dialog { position: absolute; left: 50%; top: 0; bottom: 0; width: 392px; margin-left: -196px; opacity: 0; visibility: hidden; }
.dialog:not([inert]) { visibility: visible; }
.pal.is-closing .dialog { visibility: visible; }

/* ---- 5. the field, the rows, the selection, the keys ---- */
.field { position: absolute; left: 0; right: 0; top: 0; height: var(--field-h); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; }
.field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pn-rule); }
.field:has(.q:focus-visible)::after { height: 2px; background: var(--pn-focus); }
.f-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pn-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; background: transparent; font-family: var(--f-ui); font-size: 17px; font-weight: 500; color: var(--pn-ink); caret-color: var(--pn-caret); -webkit-user-select: text; user-select: text; }
.q::placeholder { color: var(--pn-muted); opacity: 1; }
.close { flex: none; height: 24px; min-width: 38px; padding: 0 8px; border: 0; border-radius: 6px; font-family: var(--f-key); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; background: var(--kc-bg); color: var(--kc-ink); box-shadow: inset 0 0 0 1px var(--kc-edge); }
.close:focus-visible { outline: 2px solid var(--pn-focus); outline-offset: 2px; }

.list { position: absolute; left: 0; right: 0; top: var(--field-h); bottom: 0; overflow: hidden; }
.rows { position: relative; height: 100%; }
.ghd, .row { position: absolute; left: 8px; right: 8px; top: 0; }
.ghd { height: var(--hd-h); display: flex; align-items: center; padding: 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-faint); }
.grp { display: block; }                                   /* a plain wrapper (role=group): rows position against .rows */
.grp[hidden] { display: none; }
.row { height: var(--row-h); display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 10px; cursor: pointer; color: var(--pn-ink); z-index: 1; }
.row[hidden] { display: none; }
.row .lb { flex: none; line-height: 24px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.row .hn { margin-left: auto; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--pn-muted); }
.row .ks { flex: none; display: flex; justify-content: flex-end; gap: 3px; width: 54px; }
.row.is-sel .lb { color: var(--rw-on-sel); } .row.is-sel .hn { color: var(--rw-on-sel-muted); }
.row mark { background: var(--rw-match-bg); color: var(--rw-on-match); }
.ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--rw-ic-ink); }
.ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-1 { background: var(--rw-ic-1); } .ic-2 { background: var(--rw-ic-2); } .ic-3 { background: var(--rw-ic-3); }
.ic b { font-size: 10.5px; font-weight: 800; line-height: 16px; color: var(--rw-on-av); }
.av-1 { background: var(--rw-av-1); } .av-2 { background: var(--rw-av-2); } .av-3 { background: var(--rw-av-3); } .av-4 { background: var(--rw-av-4); } .av-5 { background: var(--rw-av-5); }

/* the selection: one element that slides between rows (app.js springs its top and bottom edges apart: a stretch) */
.sel { position: absolute; left: 4px; right: 4px; top: 0; height: var(--row-h); transform-origin: 50% 0; border-radius: 10px; background: var(--rw-sel); box-shadow: inset 0 0 0 1px var(--rw-sel-edge); opacity: 0; z-index: 0; }
.spot { display: none; }

/* keycaps */
.kc { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--f-key); font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; white-space: nowrap; color: var(--kc-ink); background: var(--kc-bg); box-shadow: inset 0 0 0 1px var(--kc-edge); }
.row.is-sel .kc { color: var(--on-key-sel); }

/* ---- 6. the empty state ---- */
.empty { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; opacity: 0; visibility: hidden; }
.empty svg { width: 52px; height: 52px; margin-bottom: 6px; fill: none; stroke: var(--pn-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e-title { font-size: 18px; font-weight: 700; color: var(--pn-ink); }
.e-sub { font-size: 13px; font-weight: 500; color: var(--pn-muted); }

/* the destination state: the pill names where it is going, so the keycaps step aside */
.trigger.is-dest .t-keys { display: none; }
.trigger.is-dest .t-ic { stroke: var(--pn-accent); }
.kc.wide { padding: 0 7px; }

/* ---- the closed scene: a key legend and the "simulated" note ---- */
.legend { position: absolute; left: 0; right: 0; top: 452px; margin: 0; display: flex; justify-content: center; gap: 18px; font-size: 12.5px; font-weight: 600; color: var(--on-field-muted); font-family: var(--f-ui); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend .kc { min-width: 22px; }
.sim { position: absolute; left: 0; right: 0; top: 492px; margin: 0; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--on-field-muted); font-family: var(--f-ui); }

/* ---- 7. the impact ---- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fx-ring { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--fx-r); opacity: 0; }
.fx-ring + .fx-ring { border-width: 1.5px; }
.sp { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; opacity: 0; }
.sp1 { background: var(--fx-1); } .sp2 { background: var(--fx-2); } .sp3 { background: var(--fx-3); } .sp4 { background: var(--fx-4); }
.fx-flare, .fx-stamp, .fx-pop { display: none; position: absolute; left: 0; top: 0; opacity: 0; }

/* ---- 8. the frame's footer ---- */
.tutorial {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); margin: 0; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px 10px 11px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--pill-ink); background: var(--pill-bg); box-shadow: 0 14px 28px -14px var(--black), inset 0 0 0 1px var(--pill-line);
}
.tutorial svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; fill: var(--pill-on-ic); background: var(--pill-ic); }
.tutorial span { font-weight: 400; color: var(--pill-dim); }
.credits { position: absolute; left: 28px; right: 24px; bottom: 34px; display: flex; align-items: center; justify-content: space-between; z-index: 4; }
.stack { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--credit-muted); }
.stack i { font-style: normal; color: var(--credit-ink); margin: 0 3px; }
.logo { margin: 0; display: flex; align-items: center; gap: 7px; }
.logo .avatar { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.2px var(--credit-ring); }
.logo .lockup { height: 24px; width: auto; filter: var(--lockup); }
.touch {
  position: fixed; top: 0; left: 0; z-index: 10; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid var(--white); background: color-mix(in srgb, var(--white) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 30%, transparent); transition: opacity .12s;
}
.touch.is-on { opacity: 1; }

/* =================================================================================================================
   9. LOOK A · CATALOG — an index card on a felt desk. Typewriter type, round typewriter keys, a red rubber stamp
   ================================================================================================================= */
[data-look="catalog"] { --f-ui: var(--cour); --f-key: var(--cour); }
[data-look="catalog"] .amb .lamp { display: block; left: -70px; top: 150px; width: 572px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--mu-300) 17%, transparent), transparent); will-change: transform; }
[data-look="catalog"] .amb .fibre { display: block; inset: 0; background: repeating-linear-gradient(35deg, color-mix(in srgb, var(--white) 1.6%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-55deg, color-mix(in srgb, var(--black) 6%, transparent) 0 1px, transparent 1px 5px); }
[data-look="catalog"] .amb .dust { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--cd-100); opacity: .3; will-change: transform; }
[data-look="catalog"] .title h1, [data-look="catalog"] .series, [data-look="catalog"] .hint { font-family: var(--cour); }
[data-look="catalog"] .title h1 { font-weight: 700; letter-spacing: -.06em; }
[data-look="catalog"] .title h1 em { font-family: var(--serif); letter-spacing: -.02em; }
[data-look="catalog"] .w { font-family: var(--type); font-size: 74px; text-shadow: 3px 4px 0 var(--wd-shadow); letter-spacing: -.02em; }
[data-look="catalog"] .pal-wrap .ghost { display: block; background: var(--cd-200); box-shadow: inset 0 0 0 1px var(--cd-300), 0 8px 14px -8px color-mix(in srgb, var(--black) 70%, transparent); border-radius: 7px; }
[data-look="catalog"] .ghost.g1 { transform: translate(0, 7px) rotate(1.2deg); } [data-look="catalog"] .ghost.g2 { transform: translate(0, 14px) rotate(-1.6deg); background: var(--cd-300); }
[data-look="catalog"] .trigger { border-radius: 7px; }
[data-look="catalog"] .t-label { font-family: var(--type); font-size: 18px; font-weight: 400; letter-spacing: .01em; }
[data-look="catalog"] .field::after { height: 2px; background: color-mix(in srgb, var(--rb-600) 75%, transparent); }
[data-look="catalog"] .field:has(.q:focus-visible)::after { background: var(--rb-600); height: 3px; }
[data-look="catalog"] .q { font-family: var(--type); font-size: 18px; font-weight: 400; }
[data-look="catalog"] .ghd { font-family: var(--cour); color: var(--rb-700); letter-spacing: .2em; }
[data-look="catalog"] .ghd::before { content: ''; width: 7px; height: 7px; margin-right: 8px; background: var(--rb-600); transform: rotate(45deg); }
[data-look="catalog"] .row .lb { font-family: var(--type); font-size: 14.5px; font-weight: 400; }
[data-look="catalog"] .row .hn { font-family: var(--cour); font-size: 11.5px; font-weight: 400; }
[data-look="catalog"] .row::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 1px dotted var(--pn-rule); }
[data-look="catalog"] .row mark { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--rb-600); }
[data-look="catalog"] .ic { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tx-900); }
[data-look="catalog"] .ic b { font-family: var(--cour); font-weight: 700; }
[data-look="catalog"] .row { border-radius: 3px; }
/* the stamp: a double-ruled red frame; it lifts while it travels and slams down on arrival (app.js drives --lift) */
[data-look="catalog"] .sel { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--rb-600), inset 0 0 0 4px var(--panel), inset 0 0 0 5px color-mix(in srgb, var(--rb-600) 62%, transparent), 0 calc(2px + 9px * var(--lift, 0)) calc(2px + 10px * var(--lift, 0)) calc(-1px) color-mix(in srgb, var(--tx-900) calc(8% + 30% * var(--lift, 0)), transparent); }
[data-look="catalog"] .kc { width: 22px; padding: 0; border-radius: 50%; background: var(--cd-50); box-shadow: inset 0 0 0 2px var(--tx-900), inset 0 0 0 3.5px var(--cd-50), 0 2px 0 var(--tx-900); font-weight: 700; }
[data-look="catalog"] .t-keys .kc, [data-look="catalog"] .legend .kc, [data-look="catalog"] .close { }
[data-look="catalog"] .kc.wide { width: auto; padding: 0 9px; border-radius: 12px; }
[data-look="catalog"] .legend .kc { background: var(--cd-100); color: var(--tx-900); box-shadow: inset 0 0 0 2px var(--tx-900), inset 0 0 0 3.5px var(--cd-100), 0 2px 0 var(--black); }
[data-look="catalog"] .close { border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--tx-900), 0 2px 0 var(--tx-900); background: var(--cd-50); }
[data-look="catalog"] .empty svg { stroke: var(--rb-600); } [data-look="catalog"] .e-title { font-family: var(--type); font-weight: 400; font-size: 20px; }
[data-look="catalog"] .e-sub { font-family: var(--cour); }
[data-look="catalog"] .legend, [data-look="catalog"] .sim { font-family: var(--cour); }
[data-look="catalog"] .fx-ring { border-style: dashed; }
[data-look="catalog"] .sp { width: 7px; height: 4px; border-radius: 1px; }
[data-look="catalog"] .fx-stamp { display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; color: var(--fx-i); font-family: var(--cour); box-shadow: inset 0 0 0 4px var(--fx-i), inset 0 0 0 7px transparent, inset 0 0 0 8px var(--fx-i); background: radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--fx-i) 12%, transparent) 55%); }
[data-look="catalog"] .fx-stamp b { font-size: 17px; letter-spacing: .12em; text-transform: uppercase; transform: translateY(1px); }

/* =================================================================================================================
   10. LOOK B · NIGHT — a stage in the dark. Ink-blue glass, a specular light that follows the selection, gold neon
   ================================================================================================================= */
[data-look="night"] { --f-ui: var(--sans); --f-key: var(--sans); }
[data-look="night"] .amb .stars { display: block; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent;
  box-shadow: 28px 90px 0 0 #fff8, 74px 410px 0 0 #fff6, 120px 640px 0 0 #fff5, 166px 40px 0 0 #fff7, 214px 560px 0 0 #fff6, 262px 700px 0 0 #fff5, 310px 20px 0 0 #fff8, 352px 470px 0 0 #fff6, 396px 120px 0 0 #fff7, 18px 330px 0 0 #fff5, 404px 330px 0 0 #fff6, 60px 740px 0 0 #fff4, 336px 600px 0 0 #fff5, 140px 210px 0 0 #fff4, 380px 700px 0 0 #fff5, 246px 22px 0 0 #fff6, 22px 500px 0 0 #fff5, 410px 560px 0 0 #fff5; }
[data-look="night"] .amb .beam { display: block; left: 56px; top: 0; width: 320px; height: 620px; clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--ic-300) 20%, transparent), color-mix(in srgb, var(--ic-300) 5%, transparent) 62%, transparent); will-change: opacity; }
[data-look="night"] .amb .horizon { display: block; left: -60px; right: -60px; bottom: -120px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--go-500) 22%, transparent), transparent); will-change: opacity; }
[data-look="night"] .w { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: 88px; text-shadow: 0 0 36px var(--wd-shadow); }
[data-look="night"] .title h1 { letter-spacing: -.045em; }
[data-look="night"] .t-label { font-size: 17px; font-weight: 500; }
[data-look="night"] .pal-wrap .ghost { display: block; border-radius: var(--panel-r); background: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ic-400) 22%, transparent); transform: scale(1.04); opacity: .55; }
[data-look="night"] .ghost.g2 { transform: scale(1.09); opacity: .28; }
/* the halo behind the surface: a fixed-size radial gradient in the ambient layer (resizing a blurred shadow every frame was costly) */
[data-look="night"] .amb .lamp { display: block; left: -50px; top: 170px; width: 532px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--nb-500) 40%, transparent), color-mix(in srgb, var(--nb-500) 13%, transparent) 62%, transparent); opacity: .35; }
[data-look="night"] .pal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 70%, transparent) 50%, transparent); z-index: 3; pointer-events: none; }
[data-look="night"] .row { border-radius: 12px; }
[data-look="night"] .row .lb { font-weight: 500; font-size: 14.5px; }
[data-look="night"] .ghd { color: var(--ic-400); }
[data-look="night"] .ic { border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic-300) 22%, transparent); }
/* matches: a thin neon underline that glows */
[data-look="night"] .row mark { font-weight: 700; text-decoration: none; background: linear-gradient(var(--go-400), var(--go-400)) 0 100% / 100% 2px no-repeat; text-shadow: 0 0 10px color-mix(in srgb, var(--go-400) 80%, transparent); box-shadow: 0 6px 10px -6px color-mix(in srgb, var(--go-400) 90%, transparent); }
/* the selection: a lit pane with a gold edge; the specular .spot lags behind it and overshoots */
[data-look="night"] .sel { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rw-sel-edge), inset 0 1px 0 color-mix(in srgb, var(--white) 38%, transparent); overflow: hidden; }
[data-look="night"] .sel::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--go-400); box-shadow: 0 0 12px var(--go-400); }
[data-look="night"] .spot { display: block; position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ic-100) 22%, transparent), color-mix(in srgb, var(--nx-1) 8%, transparent) 55%, transparent); }
[data-look="night"] .kc { font-weight: 600; box-shadow: inset 0 0 0 1px var(--kc-edge), inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent); }
[data-look="night"] .close { box-shadow: inset 0 0 0 1px var(--kc-edge), inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent); }
[data-look="night"] .trigger { border-radius: 32px; }
[data-look="night"] .empty svg { stroke: var(--go-400); }
[data-look="night"] .fx-ring { box-shadow: 0 0 16px color-mix(in srgb, var(--go-400) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--go-400) 40%, transparent); }
[data-look="night"] .sp { width: 5px; height: 5px; border-radius: 50%; left: -2.5px; top: -2.5px; box-shadow: 0 0 10px 1px currentColor; }
[data-look="night"] .sp1 { color: var(--fx-1); } [data-look="night"] .sp2 { color: var(--fx-2); } [data-look="night"] .sp3 { color: var(--fx-3); } [data-look="night"] .sp4 { color: var(--fx-4); }
[data-look="night"] .fx-flare { display: block; width: 440px; height: 3px; margin: -1.5px 0 0 -220px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--go-300) 30%, var(--white) 50%, var(--go-300) 70%, transparent); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--go-400) 70%, transparent); transform-origin: 50% 50%; }

/* =================================================================================================================
   11. LOOK C · BUBBLE — bubblegum OS. Sticker panels with grape outlines, chunky keys, a jelly selection
   ================================================================================================================= */
[data-look="bubble"] { --f-ui: var(--nunito); --f-key: var(--nunito); }
[data-look="bubble"] .amb .sun { display: block; left: -86px; top: 520px; width: 164px; height: 164px; border-radius: 50%; background: var(--lm-300); box-shadow: inset 0 0 0 3px var(--gp-900), 6px 7px 0 0 var(--gp-900); }
[data-look="bubble"] .amb .bub { display: block; border-radius: 50%; background: color-mix(in srgb, var(--white) 30%, transparent); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--white) 85%, transparent), inset 7px 8px 0 -3px color-mix(in srgb, var(--white) 70%, transparent); will-change: transform; }
[data-look="bubble"] .b1 { width: 54px; height: 54px; } [data-look="bubble"] .b2 { width: 34px; height: 34px; } [data-look="bubble"] .b3 { width: 76px; height: 76px; }
[data-look="bubble"] .b4 { width: 28px; height: 28px; } [data-look="bubble"] .b5 { width: 46px; height: 46px; } [data-look="bubble"] .b6 { width: 64px; height: 64px; }
[data-look="bubble"] .title h1, [data-look="bubble"] .series { font-family: var(--baloo); }
[data-look="bubble"] .title h1 { font-weight: 800; letter-spacing: -.02em; }
[data-look="bubble"] .title h1 em { font-family: var(--serif); letter-spacing: -.02em; }
[data-look="bubble"] .hint { font-weight: 700; font-family: var(--nunito); }
[data-look="bubble"] .w { font-family: var(--baloo); font-weight: 800; font-size: 82px; letter-spacing: -.01em; -webkit-text-stroke: 7px var(--wd-edge); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--wd-shadow); }
[data-look="bubble"] .pal-wrap .ghost { display: none; }
[data-look="bubble"] .t-label { font-family: var(--baloo); font-weight: 700; font-size: 19px; }
[data-look="bubble"] .t-ic { stroke: var(--gp-900); stroke-width: 2.6; }
[data-look="bubble"] .field::after { height: 3px; background: var(--gp-900); }
[data-look="bubble"] .field:has(.q:focus-visible)::after { background: var(--pk-500); }
[data-look="bubble"] .q { font-family: var(--baloo); font-weight: 700; font-size: 18px; }
[data-look="bubble"] .f-ic { stroke: var(--gp-900); stroke-width: 2.6; }
[data-look="bubble"] .ghd { padding-top: 4px; font-family: var(--baloo); font-weight: 800; font-size: 10.5px; line-height: 16px; letter-spacing: .1em; color: var(--gp-600); }
[data-look="bubble"] .row { border-radius: 14px; }
[data-look="bubble"] .row .lb { font-family: var(--baloo); font-weight: 700; font-size: 15.5px; padding: 0 2px; margin: 0 -2px; }
[data-look="bubble"] .row .hn { font-weight: 700; font-size: 12px; }
[data-look="bubble"] .ic { width: 25px; height: 25px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--gp-900); }
[data-look="bubble"] .ic svg { stroke-width: 2.2; }
[data-look="bubble"] .ic b { font-family: var(--baloo); font-weight: 800; }
[data-look="bubble"] .av-1, [data-look="bubble"] .av-2, [data-look="bubble"] .av-3, [data-look="bubble"] .av-4, [data-look="bubble"] .av-5 { border-radius: 50%; }
[data-look="bubble"] .row mark { font-weight: 800; border-radius: 6px; padding: 0 2px; margin: 0 -2px; }
[data-look="bubble"] .sel { border-radius: 14px; box-shadow: inset 0 0 0 2.5px var(--gp-900), 0 2px 0 0 var(--gp-900); }
[data-look="bubble"] .kc { font-weight: 800; border-radius: 8px; min-width: 24px; height: 24px; box-shadow: inset 0 0 0 2px var(--gp-900), inset 0 -3px 0 color-mix(in srgb, var(--gp-900) 18%, transparent), 0 2px 0 0 var(--gp-900); }
[data-look="bubble"] .close { border-radius: 9px; font-weight: 800; box-shadow: inset 0 0 0 2px var(--gp-900), inset 0 -3px 0 color-mix(in srgb, var(--gp-900) 18%, transparent), 0 2px 0 0 var(--gp-900); }
[data-look="bubble"] .legend .kc, [data-look="bubble"] .t-keys .kc { background: var(--white); }
[data-look="bubble"] .legend { font-weight: 800; color: var(--gp-900); } [data-look="bubble"] .sim { font-weight: 700; color: var(--gp-800); }
[data-look="bubble"] .empty svg { stroke: var(--gp-900); } [data-look="bubble"] .e-title { font-family: var(--baloo); font-weight: 800; font-size: 21px; }
[data-look="bubble"] .e-sub { font-weight: 700; }
[data-look="bubble"] .fx-ring { border-width: 3px; border-color: var(--white); }
[data-look="bubble"] .sp { width: 11px; height: 11px; border-radius: 50%; left: -5.5px; top: -5.5px; box-shadow: inset 0 0 0 2px var(--gp-900); }
[data-look="bubble"] .fx-pop { display: grid; place-items: center; width: 150px; height: 150px; margin: -75px 0 0 -75px; background: var(--gp-900); clip-path: var(--star); }
[data-look="bubble"] .fx-pop::before { content: ''; position: absolute; inset: 6px; background: var(--lm-300); clip-path: var(--star); }
[data-look="bubble"] .fx-pop { --star: polygon(50% 0, 60% 17%, 79% 7%, 80% 28%, 100% 30%, 87% 48%, 100% 66%, 80% 70%, 79% 93%, 60% 83%, 50% 100%, 40% 83%, 21% 93%, 20% 70%, 0 66%, 13% 48%, 0 30%, 20% 28%, 21% 7%, 40% 17%); }
[data-look="bubble"] .fx-pop b { position: relative; font-family: var(--baloo); font-weight: 800; font-size: 29px; color: var(--gp-900); letter-spacing: .02em; text-transform: uppercase; transform: rotate(-8deg); }

/* ---- 12. reduced motion: no morph, no stagger, no sparks; the palette fades in (app.js jumps the geometry) ---- */
@media (prefers-reduced-motion: reduce) {
  .dialog, .trigger { transition: opacity .16s linear; }
  .fx { display: none; }
  .amb * { animation: none; }
}