/* ---- Type — self-hosted, no CDN, no bundler; ships offline from dist/.
   Newsreader (editorial serif: names, modes, the reading) and IBM Plex Mono
   (the instrument's own speech) are both SIL OFL 1.1; the licence text ships
   beside the files in assets/fonts/. Roman and Italic are separate drawn files
   — one face does not carry both — so each is declared on its own. Both carry
   an opsz axis, so font-optical-sizing (below) sizes the contrast from 11px to
   126px without a second cut. ---- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600;
  src: url("assets/fonts/Newsreader-roman.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600;
  src: url("assets/fonts/Newsreader-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  src: url("assets/fonts/IBMPlexMono-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  src: url("assets/fonts/IBMPlexMono-500.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light;
  font-optical-sizing: auto;


  /* IFAH semantic palette: blue belongs to sensing and performance; oxblood
     belongs to the paper/manual layer. */
  --ifah-paper: #f1ede4;
  --ifah-ink: #211d15;
  --ifah-muted: #6d6656;
  --ifah-blue: #748aa3;
  --ifah-blue-soft: rgba(116,138,163,.14);
  --ifah-oxblood: #7c2f25;
  --ifah-border: #dcd6c7;
  --ifah-field: #101318;
  /* Legacy palette note (pre-brand pass): the world is a cream specimen sheet;
     a muted olive field seen behind it; oxblood is the one active pigment; warm
     graphite is the ink. No blue, no gold — those were the dark room. Names are
     kept (--gold, --paper) so the 150-odd token references flip with the
     palette instead of being rewritten one by one. */
  --cream: var(--ifah-paper);          /* the paper, the language */
  --cream-line: var(--ifah-border);

  /* Warm graphite ink, in weights. Text is dark ON paper now, so --paper (the
     value ink) is graphite and --muted is its quieter grade. */
  --ink: #211d15;            /* deepest ink — a heading that must hold */
  --paper: #2d2820;          /* the value ink — a chosen value, read close */
  --muted: var(--ifah-muted); /* labels, secondary ink */
  --faint: #6f6e4d;          /* the quietest voice — a muted olive, the one
                                whisper of the camera field that reaches the
                                sheet: provenance, notes, the felt descriptions.
                                4.51:1 on ground-1 so 9px text stays legible. */
  --line: var(--ifah-border); /* a hairline drawn on paper */
  --rule-soft: #e9e4d7;      /* the softest divider between two rows */

  /* Oxblood — the single active pigment. Used only where something is chosen,
     lit, or live. A deeper cut on the paper; a lifted cut over the camera,
     where deep oxblood would go muddy on a dark field (--oxblood-lit). */
  --oxblood: var(--ifah-oxblood);
  --oxblood-lit: #ab4a3b;
  --oxblood-soft: rgba(124,47,37,.085);
  --oxblood-line: rgba(124,47,37,.34);
  --gold: var(--oxblood);    /* legacy alias: every --gold is oxblood now */
  --red: #9c3a2b;            /* record / destructive — a darker brick, its own note */

  /* Muted olive — the room behind the paper and its furniture. Secondary,
     never an accent. */
  --olive: #6c6a4b;
  --olive-deep: #33341d;
  --field-dark: var(--ifah-field);
  --field-accent: var(--ifah-blue);
  --field-accent-soft: var(--ifah-blue-soft);
  --field-accent-line: rgba(116,138,163,.46);
  --field-accent-glow: rgba(116,138,163,.38);

  /* Light ink for the chrome that floats over the camera. The stage subtree
     re-points --paper/--muted/--gold to these (see the override below) so the
     reading and the transport stay legible on the olive field without any
     per-selector rewriting. */
  --chrome-ink: #ece4d4;
  --chrome-faint: rgba(236,228,212,.58);
  --chrome-line: rgba(236,228,212,.2);

  /* Four broken-white grounds, ~4% apart in luminance — bright and close to
     neutral, the home-page ground, not a butter cream. A control set into a
     slightly darker well reads as built; a raised element lifts a touch toward
     white. One soft light from the top-left carries depth — luminance, not
     shadow, and luminance alone cannot band. */
  --ground-0: #e5dfd1;   /* the surround the panel sits against */
  --ground-1: #f1eee4;   /* the panel — broken white, the home-page ground */
  --ground-2: #e9e4d6;   /* a recessed well a control sits in */
  --ground-3: #faf8f2;   /* a raised, active element */
  --panel: #f1eee4;
  --blue: var(--ifah-blue); /* legacy alias */

  /* Tactility, spent sparingly: a hairline of top-left light on a raised edge,
     a hairline of shadow on the bottom-right. This is the whole depth budget. */
  --well-inset: inset 1px 1px 0 rgba(120,108,84,.16), inset -1px -1px 0 rgba(255,255,255,.55);
  --raise: 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(88,78,56,.12);
  --panel-light: linear-gradient(152deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%);

  /* Four-pixel spatial grid. Every gap, pad and height is one of these, so
     nothing floats and nothing is cramped by accident. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px;
  --panel-pad: 22px;
  --row-height: 46px;

  /* One type scale, shared with SOMA Studio so the family measures alike.
     Tracking is set per-selector and has been quieted throughout: IBM Plex Mono
     is wider than the Consolas the old values were tuned against, so what was
     "engraved" now reads loose. */
  --t-micro: 9px;    /* provenance, status, the smallest true text */
  --t-section: 10px; /* section titles, widest tracking */
  --t-label: 11px;   /* row labels, card titles */
  --t-value: 12px;   /* the chosen value */
  --t-read: 16px;    /* a measurement, read at a glance */
  --serif: "Newsreader", Georgia, "Iowan Old Style", serif;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  background: var(--ground-0);
  color: var(--paper);
}

/* The stage and the chrome over it are the one place text sits on the camera,
   not on paper. Re-point the ink and accent tokens for that whole subtree; the
   drawer is a sibling, so it keeps the paper values. */
.topbar, .mode-menu, .footbar, .stage {
  --paper: var(--chrome-ink);
  --muted: var(--chrome-faint);
  --gold: var(--field-accent);
  --line: var(--chrome-line);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ground-0); }
button, select { border-radius: 0; font: inherit; }
button { color: inherit; }

/* Paper from the first frame. The bloom is warm now — a pigment breathing under
   the sheet, not a blue light in a void. */
.start-screen, .prepare-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  color: var(--ink);
  background: var(--cream);
  transition: opacity .8s ease, visibility .8s;
}
.start-screen::before, .prepare-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(26% 30% at 53% 40%, rgba(124,47,37,.16), transparent 64%),
    radial-gradient(15% 17% at 63% 30%, rgba(171,74,59,.11), transparent 66%),
    radial-gradient(18% 21% at 43% 50%, rgba(108,106,75,.14), transparent 68%),
    radial-gradient(9% 10% at 55% 39%, rgba(51,52,29,.14), transparent 70%);
  filter: blur(11px);
  animation: bloom 17s ease-in-out infinite alternate;
}
.start-screen > *, .prepare-screen > * { position: relative; z-index: 1; }
@keyframes bloom {
  0%   { transform: scale(1) translate(0, 0); opacity: .8; }
  50%  { transform: scale(1.09) translate(1.4%, -1.2%); opacity: 1; }
  100% { transform: scale(1.03) translate(-1.2%, 1%); opacity: .86; }
}
@media (prefers-reduced-motion: reduce) {
  .start-screen::before, .prepare-screen::before { animation: none; }
}
.start-screen.closed, .prepare-screen.closed { opacity: 0; visibility: hidden; pointer-events: none; }
.prepare-screen { display: none; }
.prepare-screen.active { display: grid; }
.start-identity { display: grid; justify-items: center; gap: clamp(12px, 1.8vh, 20px); margin-bottom: 8px; }
.start-screen .ifah-logo { display: block; width: clamp(190px, 26vw, 310px); max-width: 62vw; height: auto; }
.start-screen h1 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; line-height: 1; letter-spacing: .01em; color: var(--ink); }
.eyebrow { margin: 0; color: var(--oxblood); font-size: 10px; letter-spacing: .2em; }
.start-screen small, .prepare-screen small { margin: 0; color: var(--faint); font-size: 9px; letter-spacing: .13em; }
.start-copy { max-width: 460px; margin: 6px 0 4px; color: var(--muted); font-size: 15px; line-height: 1.7; letter-spacing: .01em; }
.begin { min-width: 200px; height: 52px; margin-top: 10px; padding: 0 26px; border: 1px solid var(--ink); background: transparent; color: var(--ink); letter-spacing: .18em; font-size: 10px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.begin:hover { border-color: var(--oxblood); background: var(--oxblood); color: var(--cream); }
.start-screen .begin { min-width: 180px; height: 46px; margin-top: 6px; }
@media (max-height: 680px) {
  .start-screen { gap: 10px; padding: 20px; }
  .start-screen .ifah-logo { width: clamp(170px, 24vw, 240px); }
  .start-screen .start-mark { margin: -7px 0; transform: scale(.8); }
  .start-screen .begin { height: 42px; }
}
@media (max-width: 520px) {
  .start-screen { gap: 12px; padding: 24px; }
  .start-screen .ifah-logo { width: min(250px, 68vw); max-width: none; }
  .start-screen h1 { font-size: 30px; }
  .eyebrow { max-width: 32ch; line-height: 1.6; }
  .start-copy { font-size: 14px; }
}
.start-mark { position: relative; width: 66px; height: 66px; border: 1px solid var(--oxblood-line); border-radius: 50%; }
.start-mark i { position: absolute; top: 15px; width: 20px; height: 34px; border: 1px solid var(--ink); border-radius: 16px 16px 9px 9px; transform: rotate(20deg); }
.start-mark i:first-child { left: 12px; transform: rotate(-20deg); }
.start-mark i:last-child { right: 12px; }

.prepare-screen h2 { margin: 0; max-width: 15ch; font-family: var(--serif); font-size: clamp(30px, 4.4vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.prepare-terms { display: grid; gap: 7px; margin: 14px 0 4px; padding: 0; list-style: none; color: var(--muted); font-size: 9px; letter-spacing: .11em; }

/* The instrument is one surface: the camera. Everything else floats above it
   and is allowed to leave. Nothing permanently narrows the frame. */
#instrument { position: relative; height: 100%; }

.topbar {
  position: absolute; z-index: 10; inset: 0 0 auto 0; height: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 18px; pointer-events: none;
  background: linear-gradient(rgba(8,11,15,.84), rgba(8,11,15,0));
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { display: block; width: 48px; height: auto; filter: invert(.92) sepia(.08); opacity: .94; }
.brand strong { color: var(--chrome-faint); font-family: var(--serif); font-size: 13px; font-weight: 400; letter-spacing: .02em; }
.top-status { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--chrome-faint); font-size: 8px; letter-spacing: .13em; }
.track-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(236,228,212,.24); transition: background .2s ease, box-shadow .2s ease; }
.track-dot.live { background: var(--field-accent); box-shadow: 0 0 7px var(--field-accent-glow); }
.camera-status { color: rgba(116,138,163,.76); }
.tracking-metric { color: rgba(116,138,163,.56); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ghost { padding: 7px 11px; border: 1px solid transparent; background: transparent; color: var(--chrome-faint); font-size: 8px; letter-spacing: .13em; cursor: pointer; }
.ghost:hover { border-color: var(--chrome-line); color: var(--chrome-ink); }
.ghost[aria-pressed="true"] { border-color: var(--field-accent-line); color: var(--field-accent); }
.record { display: grid; grid-template-columns: 10px auto auto; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--chrome-line); background: rgba(20,20,12,.42); cursor: pointer; letter-spacing: .13em; font-size: 8px; color: var(--chrome-ink); }
.record i { width: 7px; height: 7px; border: 1px solid var(--red); border-radius: 50%; }
.record time { color: rgba(236,228,212,.42); }
.record.active { color: var(--red); border-color: var(--red); }
.record.active i { background: var(--red); box-shadow: 0 0 12px var(--red); }
.record:disabled { opacity: .34; cursor: default; }
[data-web-demo-only] { display: none !important; }
html[data-runtime-profile="web-demo"] [data-full-product] { display: none !important; }
html[data-runtime-profile="web-demo"] [data-web-demo-only] { display: inline-flex !important; }
.demo-own { min-height: 31px; padding: 0 12px; align-items: center; border: 1px solid var(--oxblood-lit); background: rgba(81,24,20,.28); color: #f3ddd3; font-size: 8px; letter-spacing: .13em; text-decoration: none; white-space: nowrap; }
.demo-own:hover { background: rgba(122,43,35,.46); border-color: #d88c78; color: #fff4ef; }

/* Modes are named by default. The rail can fold away for a clean frame, and
   remembers that choice. */
.mode-menu { position: absolute; z-index: 9; inset: 0; pointer-events: none; }
.mode-rail { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 1px; min-height: 40px; padding: 6px 0; pointer-events: auto; }
.mode-zone--left { left: 0; }
.mode-zone--right { right: 0; }
.mode-zone--right .mode { justify-content: flex-end; text-align: right; }
.mode-zone--right .mode::before { right: 0; left: auto; }
.mode-layout-tools { position: absolute; top: calc(50% + 132px); left: 18px; display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.mode-layout-edit, .mode-layout-reset { height: 24px; padding: 0 9px; border: 1px solid var(--field-accent-line); background: rgba(8,11,15,.52); color: rgba(236,228,212,.72); font-size: 8px; letter-spacing: .1em; cursor: pointer; }
.mode-layout-edit:hover, .mode-layout-reset:hover, .mode-layout-edit.active { border-color: var(--field-accent); color: var(--field-accent); }
.mode-layout-reset[hidden] { display: none; }
#instrument.layout-editing .mode-zone { min-width: 116px; min-height: 252px; border: 1px dashed rgba(236,228,212,.28); background: rgba(20,20,12,.16); }
#instrument.layout-editing .mode-zone::after { content: attr(data-edge); align-self: end; padding: 6px 18px; color: rgba(236,228,212,.42); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
#instrument.layout-editing .mode-zone.drop-ready { border-color: var(--field-accent); background: var(--field-accent-soft); }
#instrument.layout-editing .mode { cursor: grab; }
#instrument.layout-editing .mode.dragging { opacity: .28; }

/* The selected mode has to be seen changing. The mark grows into place and the
   row it leaves fades, over one beat, so the eye — on the camera, not the rail
   — does not miss the swap. */
.mode {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px;
  padding: 0 18px; border: 0; background: transparent; color: rgba(236,228,212,.62);
  text-align: left; cursor: pointer;
  transition: color .22s ease, background-color .22s ease;
}
.mode::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0; background: var(--field-accent); transform: translateY(-50%);
  transition: height .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
}
.mode.active::before { height: 26px; box-shadow: 0 0 10px var(--field-accent-glow); }
.mode b { font-weight: 400; font-size: 9px; letter-spacing: .08em; }
.mode span { max-width: 170px; overflow: hidden; white-space: nowrap; font-family: var(--serif); font-size: 15px; opacity: 1; transition: max-width .28s ease, opacity .2s ease; }
.mode-menu.collapsed .mode span { max-width: 0; opacity: 0; }
.mode-menu.collapsed .mode-zone:hover .mode span { max-width: 170px; opacity: 1; }
.mode.menu-hover { color: var(--chrome-ink); background: rgba(236,228,212,.06); }
.mode.menu-hover::after { content: ""; position: absolute; bottom: 3px; left: 18px; width: calc((100% - 36px) * var(--menu-hover-progress, 0)); height: 1px; background: var(--field-accent); }
.mode.menu-armed { color: var(--field-accent); background: var(--field-accent-soft); box-shadow: inset 0 0 0 1px var(--field-accent-line); }
.mode.menu-latched { color: var(--field-accent); background: rgba(116,138,163,.2); }

.mode:hover { color: var(--chrome-ink); }
.mode.active { color: var(--field-accent); }
.mode:focus-visible { outline: 0; color: var(--chrome-ink); background: rgba(236,228,212,.06); }
.rail-collapse { margin: 6px 0 0 18px; width: 22px; height: 22px; border: 1px solid var(--chrome-line); background: rgba(8,11,15,.42); color: rgba(236,228,212,.62); font-size: 11px; line-height: 1; cursor: pointer; }
.rail-collapse:hover { border-color: var(--field-accent); color: var(--field-accent); }

.footbar {
  position: absolute; z-index: 10; inset: auto 0 0 0; min-height: 74px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px;
  padding: 26px 18px 16px; pointer-events: none;
  background: linear-gradient(rgba(8,11,15,0), rgba(8,11,15,.88));
}
.footbar > * { pointer-events: auto; }
.foot-read { display: grid; gap: 5px; }
.lesson-progress { margin: 0; color: var(--chrome-ink); font-size: 9px; letter-spacing: .16em; }
.gesture-guide { margin: 0; color: var(--chrome-faint); font-size: 8px; letter-spacing: .13em; }
.message { margin: 0; min-height: 1em; color: var(--field-accent); font-size: 8px; letter-spacing: .08em; opacity: 0; transition: opacity .3s ease; }
.message.show { opacity: 1; }
.foot-actions { display: flex; align-items: center; gap: 8px; }
.listen { height: 38px; padding: 0 15px; border: 1px solid var(--oxblood-lit); background: rgba(20,20,12,.42); color: var(--oxblood-lit); font-size: 8px; letter-spacing: .14em; cursor: pointer; }
.listen[hidden] { display: none; }
.listen:hover { background: var(--oxblood-lit); color: var(--field-dark); }
.listen.playing { border-color: var(--chrome-ink); color: var(--chrome-ink); animation: listening 1.1s ease-in-out infinite; }
@keyframes listening { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .listen.playing { animation: none; } }
.drawer-toggle { height: 38px; padding: 0 14px; border: 1px solid var(--chrome-line); background: rgba(20,20,12,.42); color: var(--chrome-faint); font-size: 8px; letter-spacing: .13em; cursor: pointer; }
.drawer-toggle:hover, .drawer-toggle[aria-expanded="true"] { border-color: var(--oxblood-lit); color: var(--oxblood-lit); }

/* One drawer, over the camera, closed by default. This is the specimen sheet:
   a cream surface you sit at and work on, distinct from the olive field behind
   it. */
.drawer {
  /* Starts below the topbar on purpose: RECORD and PERFORM stay reachable while
     the panel is open. Fully opaque, because at 97% the topbar and footbar read
     straight through as ghost text. */
  position: absolute; z-index: 12; inset: 56px 0 0 auto; width: min(372px, 94vw);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--cream-line);
  /* Paper, lit softly from the top-left. Luminance carries the lift; there is
     no cast shadow anywhere on the sheet. */
  background: var(--panel-light), var(--ground-1);
  box-shadow: -1px 0 0 rgba(255,255,255,.4), -14px 0 34px rgba(40,34,20,.16);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer.open { transform: translateX(0); }
/* Paper tooth, not a fix for banding this time but the thing itself: a little
   grain multiplied into the cream so it reads as stock, not as a flat fill.
   Paper needs more of this than near-black did. */
.drawer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.72  0 0 0 0 0.68  0 0 0 0 0.58  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.drawer > * { position: relative; z-index: 1; }
.drawer[aria-hidden="true"] { pointer-events: none; }
.drawer.open[aria-hidden="false"] { pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) 0 var(--panel-pad); border-bottom: 1px solid var(--line); }
.drawer-tabs { display: flex; gap: var(--s4); }
.drawer-tab { padding: var(--s2) 0 var(--s3); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-size: var(--t-section); letter-spacing: .15em; cursor: pointer; transition: color .14s ease; }
.drawer-tab:hover { color: var(--ink); }
.drawer-tab.active { border-bottom-color: var(--oxblood); color: var(--oxblood); }
.drawer .ghost { color: var(--muted); }
.drawer .ghost:hover { border-color: var(--oxblood-line); color: var(--oxblood); }

/* Only the configuration body scrolls; the tabs stay put above it. A narrow
   rule, not the Windows scrollbar, which is wide enough to break the world. */
.drawer-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--s5) var(--panel-pad) var(--s7);
  scrollbar-width: thin;
  scrollbar-color: rgba(45,40,32,.28) transparent;
}
.drawer-body::-webkit-scrollbar { width: 5px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: rgba(45,40,32,.24); border-radius: 0; }
.drawer-body:hover::-webkit-scrollbar-thumb { background: rgba(45,40,32,.4); }
.panel { display: none; }
.panel.active { display: block; }
.drawer-note { margin: var(--s6) 0 0; color: var(--faint); font-size: var(--t-micro); line-height: 1.7; letter-spacing: .06em; }

/* ---- SECTION TITLE ---------------------------------------------------- */
/* The title carries the rule. That is the whole border budget for a section:
   one line, under the name of the thing, the way a device engraves a panel. */
.section { margin-bottom: var(--s7); }
.section:last-of-type { margin-bottom: var(--s5); }
.section-title {
  margin: 0 0 var(--s4); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-section); font-weight: 500; letter-spacing: .17em;
}

/* ---- SETTING ROW ------------------------------------------------------ */
.setting-row {
  display: grid; grid-template-columns: 68px 1fr; align-items: center;
  min-height: var(--row-height);
  border-bottom: 1px solid var(--rule-soft);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row:has(.field.open) { align-items: start; }
.setting-row:has(.field.open) .setting-label { padding-top: 9px; }
.setting-label { color: var(--muted); font-size: var(--t-label); letter-spacing: .11em; }

/* ---- FIELD (an authored dropdown; see src/field.js) ------------------- */
.field-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field { position: relative; }
.field-value {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s2);
  width: 100%; padding: var(--s2) 0; border: 0; background: transparent;
  color: var(--paper); font-size: var(--t-value); letter-spacing: .08em;
  text-align: right; cursor: pointer; transition: color .14s ease;
}
.field-value:hover { color: var(--oxblood); }
/* A drawn mark, not a glyph: a font's caret is whatever the font decides. */
.field-value i { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; opacity: .6; }
.field.open .field-value { color: var(--oxblood); }
.field.open .field-value i { transform: translateY(1px) rotate(225deg); opacity: 1; }
.field-list { display: grid; padding: var(--s1) 0 var(--s3); }
.field-list[hidden] { display: none; }
.field-group { margin: var(--s3) 0 var(--s1); color: var(--faint); font-size: var(--t-micro); letter-spacing: .15em; text-align: right; }
.field-group:first-child { margin-top: var(--s1); }
.field-option {
  padding: var(--s2) var(--s2); border: 0; border-right: 2px solid transparent;
  background: transparent; color: var(--muted);
  font-size: var(--t-label); letter-spacing: .08em; text-align: right; cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.field-option:hover { color: var(--ink); background: rgba(45,40,32,.04); }
.field-option[aria-selected="true"] { border-right-color: var(--oxblood); color: var(--oxblood); }
.field-option:focus-visible { outline: 0; color: var(--ink); }
.field-option:focus-visible::before { content: ""; position: absolute; inset: 0; border-right: 2px solid var(--oxblood-line); }
.field-option { position: relative; }

/* Waking: the camera arrives indistinct and the chrome stays away, so the first
   thing that happens is a hand — not a control panel and a face. */
#instrument.waking .topbar,
#instrument.waking .footbar,
#instrument.waking .mode-menu,
#instrument.waking .stage-axis,
#instrument.waking .stage-copy { opacity: 0; pointer-events: none; }
#instrument.waking #camera { filter: grayscale(1) brightness(.3) blur(26px); }
#instrument .topbar, #instrument .footbar, #instrument .mode-menu,
#instrument .stage-axis, #instrument .stage-copy { transition: opacity .9s ease; }
#camera { transition: filter 1.1s ease; }
.wake-word {
  position: absolute; z-index: 6; inset: auto 0 auto 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--cream); font-size: 11px; letter-spacing: .26em;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
#instrument.waking .wake-word { opacity: .9; }

/* SHADOW is a stage, not a diagnostic view: camera performance only. FACE
   BLUR remains because it is drawn on the separate privacy canvas. */
#instrument[data-view="shadow"] .topbar,
#instrument[data-view="shadow"] .footbar,
#instrument[data-view="shadow"] .mode-menu,
#instrument[data-view="shadow"] .drawer,
#instrument[data-view="shadow"] .guide,
#instrument[data-view="shadow"] .stage-axis,
#instrument[data-view="shadow"] .stage-copy,
#instrument[data-view="shadow"] #hands,
#instrument[data-view="shadow"] .signal-lost,
#instrument[data-view="shadow"] .wake-word,
#instrument[data-view="shadow"] .level { opacity: 0; pointer-events: none; }
#instrument[data-view="shadow"] .topbar,
#instrument[data-view="shadow"] .footbar { transition: opacity .3s ease; }
#instrument[data-view="shadow"] .mode-menu.gesture-visible { opacity: 1; pointer-events: auto; }
.lesson-tabs { display: flex; gap: var(--s1); margin-bottom: var(--s4); }
.learn-intro { margin: 0 0 var(--s4); padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); }
.learn-intro strong { color: var(--oxblood); font-size: var(--t-section); font-weight: 500; letter-spacing: .15em; }
.learn-intro p { margin: var(--s2) 0 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.5; }
.lesson-route { display: grid; gap: var(--s2); margin-top: var(--s5); padding: var(--s4); border: 1px solid var(--oxblood-line); background: var(--oxblood-soft); }
.lesson-route[hidden] { display: none; }
.lesson-route p { display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); margin: 0; }
.lesson-route span { color: var(--muted); font-size: var(--t-micro); letter-spacing: .13em; }
.lesson-route strong { color: var(--oxblood); font-size: var(--t-label); font-weight: 400; line-height: 1.55; }
.lesson-tab { flex: 1; padding: var(--s2) var(--s1); border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--t-micro); letter-spacing: .11em; cursor: pointer; transition: color .14s ease, border-color .14s ease; }
.lesson-tab:hover { color: var(--ink); border-color: var(--cream-line); }
.lesson-tab.active { border-color: var(--oxblood); color: var(--oxblood); background: var(--oxblood-soft); }
.lesson-list { display: grid; gap: var(--s1); }

/* ---- DISCRETE LEVEL --------------------------------------------------- */
/* A measurement, not a widget: hairline ticks that fill, with the current
   position standing tall. Nothing to grab, nothing to drag, and no OS accent
   colour to inherit. Seven positions, deliberately discrete. */
.measure { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: var(--s3); min-height: var(--row-height); }
.measure-label { color: var(--muted); font-size: var(--t-label); letter-spacing: .11em; }
.measure-label--end { text-align: right; }
.measure-value { min-width: 22px; color: var(--ink); font-size: var(--t-read); letter-spacing: 0; text-align: right; font-variant-numeric: tabular-nums; }
.notches {
  position: relative; display: flex; align-items: center; gap: var(--s1);
  height: 26px; padding: 0 var(--s2);
  background: var(--ground-2); border: 1px solid var(--cream-line);
  box-shadow: var(--well-inset);
  transition: border-color .14s ease;
}
.notches:focus-within { border-color: var(--oxblood-line); }
/* The rail the cap travels: a recessed cream channel with a soft inner shadow,
   the length below the cap filled in oxblood, seven stops marked along it. */
.notches::before { content: ""; position: absolute; left: var(--s2); right: var(--s2); top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; background: rgba(45,40,32,.13); box-shadow: inset 0 1px 1px rgba(45,40,32,.2); }
.notch { flex: 1; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
/* The travelled length: every stop up to the cap is oxblood, joined across the
   adjacent notches into one continuous fill. */
.notch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: transparent; transition: background .12s ease; }
.notch.on::before { background: var(--oxblood); }
/* Each of the seven stops, a small seated dot; oxblood on the filled side. */
.notch::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(45,40,32,.32);
  transition: background .12s ease, width .12s ease, height .12s ease, box-shadow .12s ease;
}
.notch.on::after { background: var(--oxblood); }
/* The cap: a raised ivory fader head seated on the rail, lit from the top-left,
   a thin oxblood index down its centre. It snaps between the seven stops — no
   less discrete than a filament, only now it is something a hand wants to take
   hold of. */
.notch.cursor::after {
  width: 15px; height: 19px; border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--oxblood) calc(50% - 1px), var(--oxblood) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, #f9f5ed, #e6ddc8);
  border: 1px solid #cdc4ad;
  box-shadow: 0 2px 4px rgba(70,58,34,.34), 0 1px 0 rgba(255,255,255,.65), inset 0 1px 0 rgba(255,255,255,.95);
}
.notch:focus-visible { outline: 0; }
.notch.cursor:focus-visible::after { box-shadow: 0 0 0 2px var(--oxblood-line), 0 2px 4px rgba(70,58,34,.34); }
.notch:not(.cursor):focus-visible::after { width: 5px; height: 5px; background: var(--ink); }
.notch:hover:not(.cursor)::after { width: 5px; height: 5px; background: var(--ink); }

/* ---- MEASURED SLIDER -------------------------------------------------- */
/* A one-pixel track and a thin vertical tick for a handle. A round thumb is a
   browser's idea of a control, not an instrument's. */
.slider-row { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: var(--s3); min-height: var(--row-height); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: ew-resize; }
.slider:focus { outline: 0; }
.slider::-webkit-slider-runnable-track { height: 1px; background: rgba(45,40,32,.2); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 15px; margin-top: -7px; border: 0; border-radius: 0; background: var(--oxblood); box-shadow: 0 0 5px rgba(124,47,37,.3); }
.slider::-moz-range-track { height: 1px; background: rgba(45,40,32,.2); }
.slider::-moz-range-progress { height: 1px; background: var(--oxblood-line); }
.slider::-moz-range-thumb { width: 2px; height: 15px; border: 0; border-radius: 0; background: var(--oxblood); }
.slider:focus-visible::-webkit-slider-thumb { background: var(--ink); }

/* ---- CHOICE CARD ------------------------------------------------------ */
/* Idle is a quiet card on paper, hover brings the boundary in, selected earns
   oxblood and a corner mark. A card with states is an instrument character;
   one that looks the same chosen or not is a settings matrix. */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.rhythm {
  position: relative; min-height: 62px; padding: var(--s3);
  border: 1px solid var(--cream-line); background: rgba(255,255,255,.16);
  color: var(--muted); text-align: left; cursor: pointer;
  box-shadow: var(--raise);
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.rhythm strong { display: block; color: var(--paper); font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; line-height: 1.35; }
/* The name is measured, so it is mono. The description is felt, so it is serif
   italic. That contrast is most of what makes the panel read as authored. */
.rhythm small { display: block; margin-top: var(--s1); color: var(--faint); font-family: var(--serif); font-style: italic; font-size: var(--t-label); letter-spacing: 0; line-height: 1.4; text-transform: lowercase; }
.rhythm:hover { border-color: #c6bca4; background: rgba(255,255,255,.4); }
.rhythm:hover strong { color: var(--ink); }
.rhythm:hover small { color: var(--muted); }
.rhythm:active { transform: translateY(1px); box-shadow: none; }
.rhythm.active { border-color: var(--oxblood); background: var(--oxblood-soft); }
.rhythm.active strong { color: var(--oxblood); }
.rhythm.active small { color: rgba(124,47,37,.8); }
/* The corner mark says this one is loaded, without spending a second colour. */
.rhythm.active::after { content: "\25C6"; position: absolute; top: var(--s2); right: var(--s2); font-size: 7px; color: var(--oxblood); }

/* ---- TRANSPORT CONTROL ------------------------------------------------ */
.choice-pair, .choice-triple { display: grid; gap: var(--s2); margin-top: var(--s3); }
.choice-pair { grid-template-columns: 1fr 1fr; }
.choice-triple { grid-template-columns: 1fr 1fr 1fr; }
.pill { min-height: 38px; padding: var(--s2) var(--s1); border: 1px solid var(--line); background: rgba(255,255,255,.16); color: var(--muted); font-size: var(--t-micro); letter-spacing: .11em; cursor: pointer; box-shadow: var(--raise); transition: border-color .14s ease, color .14s ease, background-color .14s ease, transform .12s ease; }
.pill:hover { border-color: #c6bca4; color: var(--ink); background: rgba(255,255,255,.42); }
.pill:active { transform: translateY(1px); box-shadow: none; }
.pill.active { border-color: var(--oxblood); color: var(--oxblood); background: var(--oxblood-soft); }
.pill--strong { min-height: 42px; color: var(--ink); font-size: var(--t-label); letter-spacing: .13em; }
.pill.recording { border-color: var(--red); color: var(--red); background: rgba(156,58,43,.07); }
.switch { width: 100%; min-height: 46px; border: 1px solid var(--line); background: rgba(255,255,255,.16); color: var(--muted); font-size: var(--t-label); letter-spacing: .13em; cursor: pointer; box-shadow: var(--raise); transition: border-color .14s ease, color .14s ease, background-color .14s ease; }
.switch:hover { border-color: #c6bca4; color: var(--ink); background: rgba(255,255,255,.42); }
.switch[aria-pressed="true"] { border-color: var(--oxblood); color: var(--oxblood); background: var(--oxblood-soft); }

.lesson { width: 100%; padding: var(--s3) var(--s2); border: 1px solid transparent; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, color .14s ease; }
.lesson strong { display: block; color: inherit; font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: .01em; }
.lesson small { display: block; margin-top: var(--s1); color: var(--faint); font-size: var(--t-micro); line-height: 1.5; letter-spacing: .06em; }
.lesson .lesson-reference { margin-top: var(--s1); color: var(--faint); font-size: var(--t-micro); letter-spacing: .08em; }
.lesson .lesson-path-preview { color: var(--oxblood); font-family: "IBM Plex Mono", monospace; font-style: normal; letter-spacing: .1em; }
.lesson:hover { border-color: var(--cream-line); color: var(--ink); }
.lesson.active { border-color: var(--oxblood); background: var(--oxblood-soft); color: var(--oxblood); }
/* ---- THE SOUND LIST IS A MIXER ---------------------------------------- */
/* Every row carries its own level and no row is special. A sound at zero is
   just a name; bring it up and it plays; bring a second up and they blend. No
   mode to enter, nothing to arm. */
.sound-list { display: grid; }
.lead-voice { margin: 0 0 var(--s5); padding: var(--s2) var(--s3); border: 1px solid var(--oxblood-line); background: var(--oxblood-soft); }
.lead-voice .setting-row { grid-template-columns: 90px 1fr; }
.lead-voice .panel-hint { margin: var(--s2) 0; }
.sound {
  display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: var(--s3);
  min-height: 46px; border-bottom: 1px solid var(--rule-soft);
}
.sound-name {
  padding: var(--s2) var(--s1); border: 0; background: transparent;
  color: var(--muted); font-size: var(--t-value); letter-spacing: .08em;
  text-align: left; cursor: pointer; transition: color .14s ease;
}
.sound-name:hover { color: var(--ink); }
.sound-name:focus-visible { outline: 0; color: var(--ink); }
.sound.up .sound-name { color: var(--oxblood); }
/* A level nobody has touched should not shout. It comes up with the sound —
   nearly invisible at rest, so the eye finds the two or three that sound. */
.sound .notches { height: 22px; padding: 0 var(--s1); background: transparent; border-color: transparent; box-shadow: none; opacity: .28; transition: opacity .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease; }
.sound:hover .notches { opacity: 1; }
.sound.up .notches { opacity: 1; background: var(--ground-2); border-color: var(--cream-line); box-shadow: var(--well-inset); }
/* A smaller cap for the mixer's per-row levels — the same head, sized down. */
.sound .notch.cursor::after { width: 12px; height: 15px; }
/* But a head on all twenty resting rows is noise. At rest the mixer keeps to
   dots; the head returns the moment a row is hovered or brought up. */
.sound:not(.up):not(:hover) .notch.cursor::after {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(45,40,32,.32); border: 0; box-shadow: none;
}

.stage { position: absolute; inset: 0; overflow: hidden; background: var(--field-dark); }
#camera, #privacy, #hands { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Camera treatment is presentation only: CSS filters never reach the pixels the
   hand model reads, and the landmark canvas draws on top untouched. SOFT is
   therefore a real privacy option — the room and the face go indistinct while
   tracking stays exact. The base grade is neutral and the stage shade gives
   the field its faint cool bias without tinting the camera feed. */
#camera { object-fit: cover; transform: scaleX(-1); filter: contrast(1.03) brightness(.7) saturate(.58); }
.stage[data-camera="mono"] #camera { filter: grayscale(1) contrast(1.08) brightness(.5); }
.stage[data-camera="soft"] #camera { filter: contrast(1.03) brightness(.64) saturate(.46) blur(13px); }
#privacy { z-index: 1; pointer-events: none; }
#hands { z-index: 2; }
.stage-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at center, transparent 20%, rgba(25,34,47,.22) 62%, rgba(7,9,13,.86)); }
.stage-copy { position: absolute; z-index: 4; width: min(650px, 90%); text-align: center; pointer-events: none; transition: opacity .18s ease; }
/* The reading can sit where the player wants it, or step out of the frame
   entirely. Hidden keeps the instrument identical and only removes the text. */
.stage-copy--center { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.stage-copy--top { inset: 26px auto auto 50%; transform: translateX(-50%); }
.stage-copy--right { inset: 50% 4% auto auto; width: min(320px, 40%); transform: translateY(-50%); text-align: right; }
.stage-copy--hidden { opacity: 0; }
.stage-copy--top output { font-size: clamp(34px, 5vw, 62px); margin: 6px 0 10px; }
.stage-copy--right output { font-size: clamp(30px, 4vw, 54px); margin: 6px 0 10px; }
.stage-copy p { margin: 0; color: var(--field-accent); font-size: 9px; letter-spacing: .18em; }
.stage-copy output { display: block; min-height: 1.1em; margin: 12px 0 18px; font-family: var(--serif); font-size: clamp(60px, 9vw, 126px); line-height: .9; color: var(--chrome-ink); text-shadow: 0 4px 25px rgba(0,0,0,.7); }
.stage-copy .lesson-progress { margin: -7px 0 15px; color: var(--chrome-ink); font-size: 8px; letter-spacing: .13em; }
.stage-copy .state-function { margin: -10px 0 14px; min-height: 1em; color: rgba(116,138,163,.82); font-size: 8px; letter-spacing: .16em; }

/* QUIET keeps the applied chord visible without turning it into scenery. It
   is the default stage density in every mode; NORMAL preserves the original
   large editorial reading. */
#instrument[data-view="quiet"] .stage-copy { width: min(720px, 82%); opacity: .88; }
#instrument[data-view="quiet"] .stage-copy output {
  min-height: 1em; margin: 7px 0 10px; font-size: clamp(19px, 2.4vw, 36px);
  line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,.72);
}
#instrument[data-view="quiet"] .stage-copy .state-function { margin: -3px 0 7px; }
#instrument[data-view="quiet"] .hand-guide { height: 38px; margin-top: 0; transform: scale(.72); transform-origin: top center; }

/* Five fingers, read without language. An outline is what to show; a filled bar
   is what the camera sees. When they agree the guide settles. */
.hand-guide { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 52px; margin-top: 6px; }
.hand-guide[hidden] { display: none; }
.stage-copy--right .hand-guide { justify-content: flex-end; }
.hand-guide i {
  width: 8px; border: 1px solid rgba(236,228,212,.26); border-radius: 4px;
  background: transparent; transform-origin: bottom center;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hand-guide i:nth-child(1) { height: 42%; margin-right: 6px; margin-bottom: -3px; transform: rotate(-36deg); }
.hand-guide i:nth-child(2) { height: 78%; margin-bottom: 4px; transform: rotate(-7deg); }
.hand-guide i:nth-child(3) { height: 92%; margin-bottom: 6px; }
.hand-guide i:nth-child(4) { height: 84%; margin-bottom: 4px; transform: rotate(6deg); }
.hand-guide i:nth-child(5) { height: 60%; margin-bottom: -1px; transform: rotate(15deg); }
.hand-guide i.target { border-color: var(--field-accent); }
.hand-guide i.on { background: rgba(236,228,212,.5); border-color: rgba(236,228,212,.5); }
.hand-guide i.target.on { background: var(--field-accent); border-color: var(--field-accent); box-shadow: 0 0 10px var(--field-accent-glow); }
.hand-guide.matched i.target { box-shadow: 0 0 14px var(--field-accent-glow); }

.context-line { margin: 0; color: var(--field-accent); font-size: 8px; letter-spacing: .16em; }
#gesture-guide { color: rgba(236,228,212,.62); font-size: 8px; }
.stage-axis span { transition: color .16s ease, text-shadow .16s ease; }
.stage-axis span.lit { color: var(--field-accent); text-shadow: 0 0 12px var(--field-accent-glow); }
.stage-axis { position: absolute; z-index: 4; left: 76px; right: 76px; bottom: 96px; display: flex; justify-content: space-between; color: rgba(236,228,212,.24); font-size: 8px; letter-spacing: .08em; }
/* The empty state, so the one moment the instrument is allowed to ask. */
.signal-lost { position: absolute; z-index: 5; top: 76px; left: 50%; transform: translateX(-50%); padding: 7px 13px; border: 1px solid var(--field-accent-line); color: var(--field-accent); font-size: 8px; letter-spacing: .14em; transition: opacity .3s ease; }
.signal-lost.hidden { opacity: 0; }
.level { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(236,228,212,.14); }
.level i { display: block; height: 100%; width: 0; background: var(--field-accent); box-shadow: 0 0 8px var(--field-accent-glow); transition: width .08s linear; }

/* The native select is kept as the source of truth and taken out of sight;
   src/field.js draws what the player actually sees. */
select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--paper); text-align: right; cursor: pointer; }
dl { margin: var(--s3) 0 0; }
dl div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule-soft); }
dt { color: var(--muted); font-size: var(--t-label); letter-spacing: .1em; }
dd { margin: 0; font-family: var(--serif); font-size: var(--t-read); color: var(--ink); font-variant-numeric: tabular-nums; }
.beat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); margin: var(--s3) 0 0; }
.beat-strip i { height: 2px; background: rgba(45,40,32,.14); transition: background .08s linear; }
.beat-strip i.active { background: var(--oxblood); box-shadow: 0 0 6px rgba(124,47,37,.5); }
.loop-status { display: flex; justify-content: space-between; margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-micro); letter-spacing: .1em; }
.loop-status span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The guide is the manual inside the instrument: broad enough to explain with
   pictures, quiet enough to close in one gesture. It shares the paper system
   with the drawer, but is a separate surface rather than another settings tab. */
.guide {
  position: absolute; z-index: 13; inset: 56px 0 0 0;
  display: grid; grid-template-rows: auto auto 1fr;
  color: var(--paper); background: var(--panel-light), var(--ground-1);
  transform: translateY(102%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.guide.open { transform: translateY(0); pointer-events: auto; }
.guide[aria-hidden="true"] { visibility: hidden; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s; }
.guide.open[aria-hidden="false"] { visibility: visible; transition-delay: 0s; }
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s5) clamp(24px, 5vw, 72px) var(--s4); border-bottom: 1px solid var(--line); }
.guide-head p, .guide-promise p { margin: 0; color: var(--oxblood); font-size: var(--t-micro); letter-spacing: .18em; }
.guide-head h2 { margin: var(--s1) 0 0; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.guide-close { padding: var(--s2) var(--s3); border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--t-micro); letter-spacing: .13em; cursor: pointer; }
.guide-head-actions { display: flex; gap: var(--s2); }
.guide-head-actions a { text-decoration: none; }
.guide-close:hover { border-color: var(--oxblood); color: var(--oxblood); }
.guide-mode-tabs { display: flex; gap: 0; padding: 0 clamp(24px, 5vw, 72px); border-bottom: 1px solid var(--line); overflow-x: auto; }
.guide-mode-tabs button { flex: 1; min-width: 110px; padding: var(--s3) var(--s2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: var(--t-micro); letter-spacing: .12em; cursor: pointer; }
.guide-mode-tabs button.active { border-bottom-color: var(--oxblood); color: var(--oxblood); }
.guide-body { min-height: 0; overflow-y: auto; padding: var(--s5) clamp(24px, 5vw, 72px) var(--s7); }
.guide-promise h3 { max-width: 24ch; margin: var(--s2) 0 var(--s5); font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); font-weight: 400; line-height: 1.05; }
.guide-hands { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }
.guide-hands article { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: var(--s3); min-height: 112px; padding: var(--s3); border: 1px solid var(--cream-line); background: rgba(255,255,255,.24); }
.guide-hands span, .guide-manual span { color: var(--oxblood); font-size: var(--t-micro); letter-spacing: .14em; }
.guide-hands strong { display: block; margin-top: var(--s1); color: var(--ink); font-size: var(--t-label); font-weight: 500; line-height: 1.4; }
.guide-hands p { margin: var(--s1) 0 0; color: var(--muted); font-family: var(--serif); font-size: 14px; }
.guide-hand-glyph { position: relative; width: 64px; height: 82px; transform: rotate(-4deg); }
.guide-hand-glyph b { position: absolute; left: 17px; bottom: 2px; width: 40px; height: 45px; border: 1px solid var(--oxblood); border-radius: 20px 20px 13px 13px; background: var(--oxblood-soft); }
.guide-hand-glyph i { position: absolute; bottom: 38px; width: 8px; border: 1px solid var(--oxblood); border-radius: 7px 7px 2px 2px; background: var(--ground-1); transform-origin: bottom; animation: guide-finger 2.4s ease-in-out infinite; }
.guide-hand-glyph i:nth-child(1) { left: 7px; height: 27px; bottom: 22px; transform: rotate(-48deg); animation-delay: -.8s; }
.guide-hand-glyph i:nth-child(2) { left: 18px; height: 42px; transform: rotate(-4deg); animation-delay: -.6s; }
.guide-hand-glyph i:nth-child(3) { left: 29px; height: 50px; animation-delay: -.4s; }
.guide-hand-glyph i:nth-child(4) { left: 40px; height: 44px; transform: rotate(4deg); animation-delay: -.2s; }
.guide-hand-glyph i:nth-child(5) { left: 51px; height: 33px; transform: rotate(10deg); }
@keyframes guide-finger { 0%, 72%, 100% { background: var(--ground-1); } 82% { background: rgba(124,47,37,.26); } }
@media (prefers-reduced-motion: reduce) { .guide-hand-glyph i { animation: none; } }
.guide-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); }
.guide-states[hidden] { display: none; }
.guide-states article { display: grid; grid-template-columns: 48px 1fr; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--oxblood-line); background: var(--oxblood-soft); }
.guide-states b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--oxblood); border-radius: 50%; color: var(--oxblood); font-family: var(--serif); font-size: 24px; font-weight: 400; }
.guide-states strong { color: var(--oxblood); font-size: var(--t-label); font-weight: 500; }
.guide-states p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--t-micro); line-height: 1.4; }
.guide-manual { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5) var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.guide-manual h4 { margin: var(--s1) 0 var(--s2); font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.15; }
.guide-manual p { margin: 0; color: var(--muted); font-size: var(--t-label); line-height: 1.65; }

@media (max-width: 1080px) {
  .body { grid-template-columns: 175px minmax(480px, 1fr) 190px; }
  .rail, .settings { padding: 18px 12px; }
  .topbar { grid-template-columns: 200px 1fr 210px; }
}
@media (max-width: 760px) {
  .guide-states { grid-template-columns: 1fr; }
  .guide-head { padding-top: var(--s3); }
  .guide-head h2 { font-size: 24px; }
}


/* ---- FOCUS ------------------------------------------------------------ */
/* Every control answers to the keyboard, and says so. The missing states are
   what read as cheap — not the palette. */
.pill:focus-visible, .switch:focus-visible, .rhythm:focus-visible,
.lesson:focus-visible, .sound:focus-visible, .drawer-tab:focus-visible,
.field-value:focus-visible, .lesson-tab:focus-visible {
  outline: 0; border-color: var(--oxblood); color: var(--ink);
  background: var(--oxblood-soft);
}
.slider:focus-visible::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 0 8px rgba(33,29,21,.5); }
.rhythm:disabled, .pill:disabled { opacity: .34; cursor: default; }

/* ---- BLEND ------------------------------------------------------------ */
/* Two sounds and the balance between them, in the list where the sounds are. */
.panel-hint { margin: 0 0 var(--s4); color: var(--faint); font-size: var(--t-micro); letter-spacing: .12em; line-height: 1.6; }
.sound { justify-content: space-between; }
/* The mark says which of the two a row is: filled for the voice, half for the
   one underneath. One glyph, three states, no second colour. */
.sound.blended { color: rgba(124,47,37,.78); }
.sound.blended::after { content: "\25D0"; color: rgba(124,47,37,.78); opacity: 1; }
.blend-bar {
  margin-top: var(--s4); padding: var(--s3) var(--s3) var(--s2);
  background: var(--ground-2); border: 1px solid var(--oxblood-line);
  box-shadow: var(--well-inset);
}
.blend-bar[hidden] { display: none; }
.blend-bar .measure { grid-template-columns: auto 1fr auto; min-height: 34px; gap: var(--s2); }
.blend-bar .measure-label { font-size: var(--t-micro); color: var(--oxblood); }
.blend-bar .pill { width: 100%; margin-top: var(--s2); min-height: 30px; }

/* A meter reads what is arriving, before the fader — so it tells the truth
   about the signal rather than about the level you set. */
.meter { height: 2px; margin-top: var(--s2); background: rgba(45,40,32,.16); }
.meter i { display: block; height: 100%; width: 0; background: var(--oxblood); transition: width .06s linear; }
.meter i.hot { background: var(--red); }

/* Where takes go. A full path, small and selectable, because the question it
   answers is "where exactly" and a folder name alone does not answer it. */
.folder-path {
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  background: var(--ground-2); border: 1px solid var(--cream-line);
  box-shadow: var(--well-inset);
  color: var(--muted); font-size: var(--t-micro); line-height: 1.6;
  letter-spacing: .03em; word-break: break-all; user-select: text;
}

/* ---- SETUPS ------------------------------------------------------------ */
/* Somewhere to come back to. Six at most, named by what they are, so nobody has
   to type into an interface that has no keyboard in it. */
.setup-list { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.setup { display: grid; grid-template-columns: 1fr 30px; align-items: center; }
.setup-name {
  padding: var(--s3) var(--s2); border: 1px solid var(--cream-line);
  border-right: 0; background: rgba(255,255,255,.16); color: var(--muted);
  font-size: var(--t-label); letter-spacing: .06em; text-align: left; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.setup-name:hover { border-color: #c6bca4; color: var(--ink); background: rgba(255,255,255,.42); }
.setup-forget {
  height: 100%; min-height: 40px; border: 1px solid var(--cream-line);
  background: rgba(255,255,255,.16); color: var(--faint); font-size: var(--t-label); cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.setup-forget:hover { border-color: var(--red); color: var(--red); }
.setup-name:focus-visible, .setup-forget:focus-visible { outline: 0; border-color: var(--oxblood); color: var(--ink); }
/* LIVE CONTROL is a temporary transport surface, never a seventh mode. */
.mode-layout-tools {
  top: auto; bottom: 86px; left: 14px;
  display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px;
}
.live-control-entry {
  position: relative; grid-column: 1 / -1; display: flex; align-items: center;
  min-width: 116px; height: 36px; padding: 0 12px;
  border: 1px solid rgba(236,228,212,.24); background: rgba(20,20,12,.58);
  color: rgba(236,228,212,.78); font-family: var(--serif); font-size: 13px;
  letter-spacing: .08em; cursor: pointer;
}
.live-control-entry::after {
  content: ""; position: absolute; bottom: 3px; left: 12px;
  width: calc((100% - 24px) * var(--menu-hover-progress, 0)); height: 1px;
  background: var(--oxblood-lit);
}
.live-control-entry:hover, .live-control-entry.menu-hover { color: var(--chrome-ink); }
.live-control-entry.menu-armed {
  color: var(--oxblood-lit); background: rgba(171,74,59,.14);
  box-shadow: inset 0 0 0 1px rgba(171,74,59,.5);
}
.live-control-entry.menu-latched { color: var(--oxblood-lit); background: rgba(171,74,59,.22); }
.live-control-entry[hidden] { display: none; }

.mode-arranger {
  position: absolute; z-index: 8; inset: 56px 0 74px;
  display: grid; grid-template-rows: auto auto 1fr; gap: 18px;
  padding: clamp(24px, 5vw, 58px) clamp(132px, 15vw, 220px);
  color: var(--ink); background: var(--panel-light), var(--ground-1);
  pointer-events: auto;
}
.mode-arranger[hidden] { display: none; }
.mode-arranger-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mode-arranger-head p { margin: 0; color: var(--oxblood); font-size: 8px; letter-spacing: .18em; }
.mode-arranger-head h2 { margin: 5px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.mode-arranger-head button, .arrange-row button {
  border: 1px solid var(--cream-line); background: transparent; color: var(--muted);
  font-size: 8px; letter-spacing: .1em; cursor: pointer;
}
.mode-arranger-head button { height: 34px; padding: 0 14px; }
.mode-arranger-copy { max-width: 620px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.mode-arranger-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-height: 0; overflow: auto; }
.mode-arranger-columns h3 { margin: 0 0 8px; color: var(--oxblood); font-size: 9px; font-weight: 500; letter-spacing: .16em; }
.arrange-list { display: grid; align-content: start; gap: 5px; min-height: 54px; padding: 7px; border: 1px solid var(--cream-line); }
.arrange-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; background: rgba(255,255,255,.22); }
.arrange-row strong { font-family: var(--serif); font-size: 14px; font-weight: 400; }
.arrange-row div { display: flex; gap: 4px; }
.arrange-row button { height: 28px; padding: 0 7px; }
.arrange-row button:hover:not(:disabled), .mode-arranger-head button:hover { border-color: var(--oxblood); color: var(--oxblood); }
.arrange-row button:disabled { opacity: .24; cursor: default; }
.arrange-empty { margin: auto; color: var(--faint); font-size: 8px; letter-spacing: .14em; }
#instrument.layout-editing .mode-zone {
  min-width: 0; min-height: 40px; border: 0; background: transparent;
}
#instrument.layout-editing .mode-zone::after { content: none; }
#instrument.layout-editing .mode { cursor: default; }
#instrument.layout-editing .mode-layout-reset { display: block; }

.live-control-overlay {
  position: absolute; z-index: 8; left: 50%; top: 50%; width: min(650px, calc(100vw - 220px));
  transform: translate(-50%, -50%);
  padding: 24px; border: 1px solid rgba(236,228,212,.28);
  color: var(--chrome-ink); background: rgba(20,20,12,.88);
  box-shadow: 0 18px 60px rgba(0,0,0,.28); pointer-events: none;
}
.live-control-overlay[hidden] { display: none; }
.live-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--chrome-line); }
.live-control-head p { margin: 0; color: var(--oxblood-lit); font-size: 9px; letter-spacing: .18em; }
.live-control-head h2 { margin: 0; color: var(--chrome-faint); font-size: 9px; font-weight: 400; letter-spacing: .14em; }
.live-control-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.live-control-grid article { display: grid; grid-template-rows: 30px auto auto; gap: 5px; min-width: 0; padding: 10px 8px; border: 1px solid var(--chrome-line); }
.live-control-grid article.active { border-color: var(--oxblood-lit); background: rgba(171,74,59,.14); }
.live-control-grid b { color: var(--oxblood-lit); font-family: var(--serif); font-size: 23px; font-weight: 400; }
.live-control-grid span { color: var(--chrome-ink); font-size: 8px; letter-spacing: .1em; }
.live-control-grid strong { color: var(--chrome-faint); font-size: 7px; font-weight: 400; line-height: 1.45; letter-spacing: .06em; }
.live-control-progress { display: block; width: 100%; height: 2px; margin-top: 14px; background: var(--oxblood-lit); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }

.drawer-handle {
  position: absolute; z-index: 13; right: 0; top: calc(50% - 22px);
  display: grid; place-items: center; width: 28px; height: 42px; padding: 0 0 2px;
  border: 1px solid var(--cream-line); border-right: 0;
  background: var(--ground-1); color: var(--muted); cursor: pointer;
  font-family: var(--serif); font-size: 18px; line-height: 1;
  transition: right .3s cubic-bezier(.4,0,.2,1), color .14s ease, background-color .14s ease;
}
.drawer-handle.open { right: min(372px, 94vw); border-right: 1px solid var(--cream-line); color: var(--oxblood); }
.drawer-handle:hover { background: var(--ground-3); color: var(--oxblood); }
#instrument[data-view="shadow"] .drawer-handle,
#instrument[data-view="shadow"] .mode-arranger { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .mode-arranger { padding: 24px 104px 24px 96px; }
  .mode-arranger-columns { grid-template-columns: 1fr; }
  .live-control-overlay { width: calc(100vw - 150px); }
  .live-control-grid { grid-template-columns: repeat(2, 1fr); }
}