/* ------------------------------------------------------------------
   CYRUSREX — styles
   Paper / ink / vermilion. Grid, rules, mono labels, katakana marginalia.
------------------------------------------------------------------- */

/* The type, served from the site itself (assets/fonts/): Cabinet Grotesk and General Sans as Fontshare serves them (ITF
   Free Font License; the same files business mode has had since 8 Oct 2026), JetBrains Mono (SIL Open Font License). The
   page used to wait on Fontshare's and Google's stylesheets before it could draw, so whenever either was slow the switch
   from CSMAKAR stood on its landed orange full stop until it answered (Cyrus, 10 Oct 2026: "it sometimes crashes on the
   orange dot still"). Noto Sans JP, the katakana's, still comes from Google Fonts, asked for by main.js once the page is
   up, so it never holds the page; until it comes the katakana are in the system's Japanese face */
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('assets/fonts/general-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('assets/fonts/general-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --paper: oklch(0.962 0.006 85);
  --paper-2: oklch(0.935 0.008 85);
  --ink: oklch(0.14 0.004 70);
  --ink-70: oklch(0.14 0.004 70 / 0.72);
  --ink-50: oklch(0.14 0.004 70 / 0.52);
  --ink-30: oklch(0.14 0.004 70 / 0.30);
  --rule: oklch(0.14 0.004 70 / 0.14);
  --rule-strong: oklch(0.14 0.004 70 / 0.34);
  --accent: oklch(0.63 0.215 34);
  --accent-ink: oklch(0.98 0.005 85);
  --on-accent: oklch(0.14 0.004 70);
  --img-bg: oklch(0.90 0.008 85);
  --panel: oklch(0.962 0.006 85);
  --panel-2: oklch(0.935 0.008 85);
  --accent-text: oklch(0.53 0.2 34);

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', sans-serif;

  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  --text-2xl: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  --text-hero: clamp(3.6rem, 1rem + 13.5vw, 13.5rem);

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --max: 1440px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
  color-scheme: light;
}

html[data-theme='dark'] {
  --paper: oklch(0.13 0.003 70);
  --paper-2: oklch(0.17 0.004 70);
  --ink: oklch(0.95 0.006 85);
  --ink-70: oklch(0.95 0.006 85 / 0.74);
  --ink-50: oklch(0.95 0.006 85 / 0.54);
  --ink-30: oklch(0.95 0.006 85 / 0.32);
  --rule: oklch(0.95 0.006 85 / 0.14);
  --rule-strong: oklch(0.95 0.006 85 / 0.34);
  --accent: oklch(0.67 0.21 36);
  --accent-ink: oklch(0.13 0.003 70);
  --img-bg: oklch(0.2 0.004 70);
  --panel: oklch(0.16 0.003 70);
  --panel-2: oklch(0.2 0.004 70);
  --accent-text: oklch(0.7 0.19 36);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv01';
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; background: var(--img-bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; font-family: var(--font-mono); font-size: var(--text-xs); }
.skip:focus { left: 8px; }

.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.jp { font-family: var(--font-jp); font-weight: 400; }
.accent { color: var(--accent); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gutter);
  padding: 14px var(--gutter);
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem; }
/* Cyrus's logo (6 Oct 2026; docs/brand/): the mark in the page's ink, so it turns with the theme, and its orange square;
   it keeps its colour under the pointer */
.brand-mark { display: block; height: 32px; width: auto; }
.brand:hover { color: inherit; }

.site-nav { justify-self: center; display: flex; gap: clamp(0.8rem, 2vw, 1.8rem); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav.more-l, .site-nav.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent); }
.site-nav.more-l { --fade-l: 28px; }
.site-nav.more-r { --fade-r: 28px; }
.site-nav a { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; color: var(--ink-70); padding: 6px 0; position: relative; }
.site-nav a b { font-weight: 500; color: var(--ink-30); }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.site-nav a.active::after { transform: scaleX(1); }
.site-nav a.active b { color: var(--accent); }

.head-tools { display: flex; align-items: center; gap: 8px; }
/* with Play lab's name in the header, the gaps tighten a little on mid-size screens so the section links still fit */
@media (min-width: 861px) and (max-width: 1365px) {
  .site-head { column-gap: clamp(1.1rem, 2.5vw, 2rem); }
  .site-nav { gap: clamp(0.8rem, 1.8vw, 1.8rem); }
}
/* and with full screen and the switch to CSMAKAR there too, a little more, so all nine still show from about the width
   they did without them (the rings keep their size; their 44px targets narrow a little) */
@media (min-width: 861px) and (max-width: 1599px) {
  .site-head:has(.ss-sw:not([hidden])) { column-gap: clamp(1.1rem, 1.6vw, 2rem); }
  .site-head:has(.ss-sw:not([hidden])) .site-nav { gap: clamp(0.7rem, 1.35vw, 1.6rem); }
  .site-head:has(.ss-sw:not([hidden])) .head-tools { gap: 2px; }
  .site-head:has(.ss-sw:not([hidden])) :is(.theme-btn, .ss-sw, .ss-fs) { width: 40px; }
  .site-head:has(.ss-sw:not([hidden])) :is(.theme-btn, .ss-sw, .ss-fs)::before { inset: 7px 5px; }
}
/* 44px tap target, smaller visible ring; full screen and the switch to CSMAKAR are the same ring (the switch's glyph in
   sine-square.css) */
.theme-btn, .ss-sw, .ss-fs { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; }
.theme-btn::before, .ss-sw::before, .ss-fs::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--rule-strong); border-radius: inherit; transition: border-color 0.3s var(--ease); }
.theme-btn:hover::before, .ss-sw:hover::before, .ss-fs:hover::before { border-color: var(--ink); }
.theme-btn:focus-visible, .ss-sw:focus-visible, .ss-fs:focus-visible { outline-offset: -5px; }
.theme-btn svg, .ss-fs svg { width: 14px; height: 14px; }
.ss-sw, .ss-fs { color: var(--ink); }
@media (max-width: 600px) { .ss-fs { display: none; } }
.ss-sw .tip, .ss-fs .tip { position: absolute; top: calc(100% - 2px); right: 7px; padding: 6px 8px 5px; border-radius: 4px; background: var(--ink); color: var(--paper); font-style: normal; font-size: 10.5px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.ss-sw:hover .tip, .ss-sw:focus-visible .tip, .ss-fs:hover .tip, .ss-fs:focus-visible .tip { opacity: 1; transform: none; transition-delay: 0.35s; }
.theme-btn .moon { display: none; }
html[data-theme='dark'] .theme-btn .sun { display: none; }
html[data-theme='dark'] .theme-btn .moon { display: block; }
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* ---------- Play lab: the entry in the header ---------- */
/* a waveform turning from sine to square, in a ring like the theme button's, with its name beside it; shown only
   with JavaScript. While sound plays the glyph gives way to the live trace and the name turns vermilion. */
.deck-btn { display: none; align-items: center; height: 44px; padding-right: 6px; border-radius: 999px; }
.js .deck-btn { display: inline-flex; }
.deck-ring { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.deck-ring::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--rule-strong); border-radius: 999px; transition: border-color 0.3s var(--ease); }
.deck-btn:hover .deck-ring::before, .deck-btn[aria-expanded='true'] .deck-ring::before { border-color: var(--ink); }
.deck-btn.is-playing .deck-ring::before { border-color: var(--accent); }
.deck-btn:focus-visible { outline-offset: -3px; }
.deck-glyph, .deck-mini { grid-area: 1 / 1; transition: opacity 0.3s var(--ease); }
.deck-glyph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.deck-glyph path { stroke-dasharray: 40; }
.deck-btn:hover .deck-glyph path { animation: deck-draw 0.9s var(--ease); }
@keyframes deck-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.deck-mini { display: block; width: 20px; height: 12px; opacity: 0; }
.deck-btn.is-playing .deck-glyph { opacity: 0; }
.deck-btn.is-playing .deck-mini { opacity: 1; }
.deck-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--ink-70); transition: color 0.3s var(--ease); }
.deck-btn:hover .deck-label, .deck-btn[aria-expanded='true'] .deck-label { color: var(--ink); }
.deck-btn.is-playing .deck-label { color: var(--accent-text); }

/* ---------- the devices: Play lab and the others, in a list under the header's control ---------- */
/* (Cyrus, 6 Oct 2026: "lets make this menu more discoverable something unique to attract to it and also make its
   design more interesting and aesthetics better"; of a capsule round the control, with the count of devices: "feels a
   bit big and out of theme in menu tho i think the way it works is nice") The control keeps its size and look, the
   ring, the name and the arrow. Until the list is first opened on a visit (main.js: is-calling), a light shows on its
   ring, the logo's orange square, and for the first minute a signal runs round the ring now and then; nothing of it
   with reduced motion but the light. The list opens on hover where there is a mouse, and from the button until a
   device is chosen, or the arrow (touch, keyboard); main.js runs it */
.lab-nav { position: relative; display: none; align-items: center; }
.js .lab-nav { display: flex; }
.lab-more { display: grid; place-items: center; width: 26px; height: 44px; border-radius: 999px; color: var(--ink-50); transition: color 0.3s var(--ease); }
.lab-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.lab-more:hover, .lab-more[aria-expanded='true'] { color: var(--ink); }
.lab-more[aria-expanded='true'] svg { transform: rotate(180deg); }
.lab-more:focus-visible { outline-offset: -6px; }
/* the light on the ring, until the list has been opened: the logo's orange square, at the ring's corner as the logo's
   is at its mark's */
.deck-ring::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); opacity: 0; transform: scale(0.3); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.lab-nav.is-calling .deck-ring::after { opacity: 1; transform: none; }
/* the signal: a light running round the ring, the ring's line alone showing (the mask) */
.lab-signal { position: absolute; inset: 7px; padding: 1px; border-radius: 999px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.lab-signal::before { content: ''; position: absolute; inset: 0; background: conic-gradient(transparent 0deg 220deg, color-mix(in oklch, var(--accent) 0%, transparent) 220deg, var(--accent) 338deg, transparent 340deg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lab-nav.is-calling .lab-signal::before { animation: lab-signal 10s linear 1.4s 6; }
  .lab-nav.is-calling .deck-ring::after { animation: lab-light 2.6s ease-in-out infinite; }
}
@keyframes lab-signal { 0% { opacity: 0; transform: rotate(0deg); } 3% { opacity: 1; } 26% { opacity: 1; transform: rotate(720deg); } 30%, 100% { opacity: 0; transform: rotate(720deg); } }
@keyframes lab-light { 50% { opacity: 0.35; } }
/* while Play lab plays, its own ring is lit instead */
.lab-nav .deck-btn.is-playing .deck-ring::after { opacity: 0; animation: none; }
.deck-btn.is-playing .lab-signal { display: none; }

.lab-list { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; width: min(23.5rem, calc(100vw - 2 * var(--gutter))); padding: 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.06); animation: lab-in 0.26s var(--ease); }
.lab-list[hidden] { display: none; }
@keyframes lab-in { from { opacity: 0; transform: translateY(-6px); } }
/* (z-index: above the header's scroll progress line, which comes after it in the header and crossed it, Cyrus, 6 Oct
   2026: "mobile menu glitch") */
/* the hover's bridge: the pointer crosses the gap above the list without leaving it */
.lab-list::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.lab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding: 9px 12px 9px; border-bottom: 1px solid var(--rule); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-50); }
.lab-head span + span { letter-spacing: 0.06em; color: var(--ink-30); }
.lab-list ul { margin: 0; padding: 0; list-style: none; }
/* eight devices are taller than a small phone's screen, or a phone turned sideways, under the header: the devices scroll
   under the list's head, within the screen, both groups together, numbered down the whole list */
.lab-scroll { max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); overflow-y: auto; overscroll-behavior: contain; counter-reset: device; }
/* the list's foot inside the scroller, so the devices rising into place as it opens (lab-row) stay within it and bring
   no scroll bar with them */
.lab-list { padding-bottom: 0; }
.lab-scroll { padding-bottom: 6px; }
.lab-list li { counter-increment: device; }
/* the groups, Audio and Design: a small mono label with its katakana, held at the top while its group scrolls under it */
.lab-cat { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 12px 5px; background: var(--panel); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); }
.lab-cat .jp { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: none; color: var(--ink-30); }
.lab-group:not(:last-child) { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
/* a device: its glyph, its number and name, its line, and an arrow */
.lab-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; align-items: center; column-gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 8px; text-align: left; color: inherit; transition: background-color 0.25s var(--ease); }
button.lab-item:hover, button.lab-item:focus-visible { background: var(--panel-2); }
button.lab-item:focus-visible { outline-offset: -2px; }
.lab-tile { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: 9px; background: var(--paper); transition: border-color 0.25s var(--ease); }
button.lab-item:hover .lab-tile, button.lab-item:focus-visible .lab-tile { border-color: var(--ink); }
.lab-text { display: grid; gap: 4px; min-width: 0; }
/* the number, the name and its tag on one line; a long name wraps in its own place */
.lab-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lab-no { flex: none; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--ink-30); }
.lab-no::before { content: counter(device, decimal-leading-zero); }
.lab-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.lab-say { font-size: 0.8rem; line-height: 1.35; color: var(--ink-50); }
.lab-new { flex: none; align-self: center; padding: 2px 6px 1px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.54rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-go { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-30); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
button.lab-item:hover .lab-go, button.lab-item:focus-visible .lab-go { color: var(--accent); transform: translateX(3px); }
.lab-item.is-soon { color: var(--ink-50); }
.lab-tag { padding: 1px 7px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-70); }
/* the list's foot (docs/NEWSLETTER.md): one quiet line after the devices, in the head's type, under the rule the last
   group now has: word of new devices, the form in Next. With the devices, so it takes none of their room where the
   screen is short (there it comes last as they scroll). Pointed at, it darkens and its arrow moves, as a device's does */
.lab-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 0.64rem; letter-spacing: 0.12em; color: var(--ink-50); transition: color 0.25s var(--ease); }
.lab-foot:hover, .lab-foot:focus-visible { color: var(--ink); }
.lab-foot:focus-visible { outline-offset: -2px; }
.lab-foot:is(:hover, :focus-visible) .lab-go { color: var(--accent); transform: translateX(3px); }
/* the glyphs, each the device in a line or two: Play lab's steps and its playhead, the room's beams from their source,
   the synth's cassette, the editor's misregistered letters, Soft Scope's two shapes, Polite Disorder's hits in time and
   the one drifting off it, Registration Error's two plates of rings printed out of register, Wrong Division's slices of a
   break with one out of its place, Evidence Kit's mark of three cells and a fourth that breaks its rule (its own mark's
   shape, in lines), Matter / Field's fall of a fragment in pieces, bent by a force, and the orange one striking the
   floor (the symbol of its app icon, Cyrus's "Cut trail", 15 Oct 2026). Pointed at, each moves */
.lab-glyph { width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.g-playlab .g-cells rect { stroke-width: 1.1; }
.g-playlab .g-cells .on { fill: currentColor; stroke: none; }
.g-playlab .g-head { stroke: var(--accent); stroke-width: 1.3; }
.g-room .g-floor { stroke: var(--ink-30); }
.g-room .g-beams path { stroke-width: 1.15; }
.g-room .g-left { transform-origin: 5.5px 21.5px; }
.g-room .g-right { transform-origin: 22.5px 21.5px; }
.g-room .g-hot { stroke: var(--accent); stroke-width: 1.5; }
.g-room .g-src { fill: var(--accent); stroke: none; }
.g-operator .g-reel { transform-box: fill-box; transform-origin: center; }
.g-operator .g-tape { stroke: var(--accent); }
.g-type text { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: -0.03em; stroke: none; }
.g-type .g-print { fill: currentColor; }
.g-type .g-misreg { fill: var(--accent); transform: translate(1.4px, 1.1px); }
.g-scope .g-shape-a, .g-scope .g-shape-b { transform-box: fill-box; transform-origin: center; }
.g-scope .g-shape-b { stroke: var(--ink-30); }
.g-scope .g-handle { fill: var(--accent); stroke: none; }
.g-disorder .g-base { stroke: var(--ink-30); }
.g-disorder circle { fill: currentColor; stroke: none; }
.g-disorder .g-hit { transform-box: fill-box; transform-origin: 50% 100%; }
.g-disorder .g-stray { stroke: var(--accent); transform-origin: 19.7px 22.5px; }
.g-disorder .g-stray circle { fill: var(--accent); }
.g-print circle { stroke-width: 1.1; }
.g-print .g-offset { stroke: var(--accent); }
.g-division .g-base { stroke: var(--ink-30); }
.g-division .g-cut { stroke: var(--accent); }
.g-evidence .g-set rect { stroke-width: 1.1; }
.g-evidence .g-rule { stroke: var(--accent); transform-box: fill-box; transform-origin: center; }
.g-matter .g-floor { stroke: var(--ink-30); }
.g-matter .g-strike { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .lab-list:not([hidden]) :is(li, .lab-cat) { animation: lab-row 0.4s var(--ease) both; }
  .lab-list li:nth-child(2) { animation-delay: 0.03s; }
  .lab-list li:nth-child(3) { animation-delay: 0.06s; }
  .lab-list li:nth-child(4) { animation-delay: 0.09s; }
  .lab-list li:nth-child(5) { animation-delay: 0.12s; }
  .lab-list li:nth-child(n + 6) { animation-delay: 0.15s; }
  /* the second group after the first */
  .lab-group + .lab-group :is(.lab-cat, li:nth-child(1)) { animation-delay: 0.15s; }
  .lab-group + .lab-group li:nth-child(n + 2) { animation-delay: 0.18s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-head { animation: g-step 1.6s steps(4, jump-none) infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-left { animation: g-sweep 1.8s ease-in-out infinite alternate; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-right { animation: g-sweep 2.2s ease-in-out infinite alternate-reverse; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-reel { animation: g-spin 1.6s linear infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-misreg { animation: g-misreg 1s steps(1, end) infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shape-a { animation: g-turn 6s linear infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shape-b { animation: g-turn 8s linear infinite reverse; }
  /* the hits struck in turn, a sequence playing, while the orange one drifts off time and back (its Drift) */
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-hit { animation: g-hit 1.2s ease-out infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-hit:nth-of-type(2) { animation-delay: 0.3s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-hit:nth-of-type(3) { animation-delay: 0.6s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-hit:nth-of-type(4) { animation-delay: 0.9s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-stray { animation: g-drift 2.4s ease-in-out infinite; }
  /* the orange plate wanders round its register, the rings' interference moving with it */
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-offset { animation: g-register 2.6s ease-in-out infinite; }
  /* the orange slice and the one before it trade places, and back: a break resequenced */
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-cut { animation: g-cut 1.6s steps(1, end) infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-swap { animation: g-swap 1.6s steps(1, end) infinite; }
  /* the fourth cell turns a quarter at a time, its rule disturbed, the three about it as they were */
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-rule { animation: g-turn 2.4s steps(4, end) infinite; }
  /* the letter's cut turns from one diagonal to the other and back, N to its mirror: the same name, another form */
  /* the fall runs down piece by piece, and the orange fragment strikes the floor as the run reaches it */
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shard { animation: g-run 1.2s linear infinite; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shard:nth-of-type(3) { animation-delay: 0.15s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shard:nth-of-type(4) { animation-delay: 0.3s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-shard:nth-of-type(5) { animation-delay: 0.45s; }
  :is(button.lab-item:is(:hover, :focus-visible), .dev-wait) .g-strike { animation: g-strike 1.2s ease-out infinite; }
}
@keyframes lab-row { from { opacity: 0; transform: translateY(6px); } }
@keyframes g-step { from { transform: translateX(0); } to { transform: translateX(15px); } }
@keyframes g-sweep { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-misreg { 0% { transform: translate(1.4px, 1.1px); } 25% { transform: translate(-1.2px, 1.5px); } 50% { transform: translate(1.8px, -0.8px); } 75% { transform: translate(-0.7px, -1.2px); } }
@keyframes g-turn { to { transform: rotate(360deg); } }
@keyframes g-hit { 0%, 30%, 100% { transform: none; } 8% { transform: scaleY(0.72); } }
@keyframes g-drift { 0%, 100% { transform: none; } 50% { transform: rotate(-10deg); } }
@keyframes g-register { 0%, 100% { transform: none; } 25% { transform: translate(-1.4px, 1.3px); } 50% { transform: translate(-2.4px, 0.6px); } 75% { transform: translate(-0.9px, -0.5px); } }
@keyframes g-cut { 50% { transform: translateX(-5.5px); } }
@keyframes g-swap { 50% { transform: translateX(5.5px); } }
@keyframes g-run { 0%, 40%, 100% { opacity: 0.25; } 8% { opacity: 1; } }
@keyframes g-strike { 0%, 48%, 78%, 100% { transform: none; } 55% { transform: scale(1.35, 0.72); } 65% { transform: scale(0.92, 1.1); } }
/* on a phone the list hangs from the header's right edge, so it stays on the screen beside the theme button */
@media (max-width: 600px) {
  .lab-nav { position: static; }
  .head-tools { position: relative; }
}
/* on the smallest phones (under 360px), with the switch to CSMAKAR there as well, the header's spacing tightens (the rings
   keep their size; their 44px targets narrow a little) so nothing runs off the screen */
@media (max-width: 359px) {
  .site-head:has(.ss-sw:not([hidden])) { column-gap: 8px; padding-inline: 10px; }
  .site-head:has(.ss-sw:not([hidden])) .head-tools { gap: 0; }
  .site-head:has(.ss-sw:not([hidden])) .deck-btn { padding-right: 2px; }
  .site-head:has(.ss-sw:not([hidden])) .lab-more { width: 22px; }
  .site-head:has(.ss-sw:not([hidden])) :is(.theme-btn, .ss-sw) { width: 40px; }
  .site-head:has(.ss-sw:not([hidden])) :is(.theme-btn, .ss-sw)::before { inset: 7px 5px; }
}

/* ---------- Play lab: the panel, a bottom sheet on a phone ---------- */
/* the head, then the player and the tabs, which stay put, then the body, which scrolls */
.deck { --paper: var(--panel); --paper-2: var(--panel-2); position: fixed; z-index: 49; top: var(--deck-top, 72px); right: var(--gutter); display: flex; flex-direction: column; width: min(27rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - var(--deck-top, 72px) - 12px); max-height: calc(100dvh - var(--deck-top, 72px) - 12px); background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 6px; opacity: 0; clip-path: circle(0 at var(--ox, 100%) var(--oy, 0)); transition: clip-path 0.45s var(--ease), opacity 0.25s var(--ease); }
.deck[hidden], .deck [hidden] { display: none; }
.deck.is-open { opacity: 1; clip-path: circle(var(--or, 150%) at var(--ox, 100%) var(--oy, 0)); }
.deck.is-open.is-settled { clip-path: none; }
/* wide for the sounds and their steps, where the screen allows */
.deck.is-wide { width: min(56rem, calc(100vw - 2 * var(--gutter))); }
/* wide, as in Cyrus's wide mockups: the player and the volume in one row, the tool select beside what the tool does */
@media (min-width: 761px) {
  .deck.is-wide .dk-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); column-gap: 32px; align-items: center; }
  .deck.is-wide .dk-strip > * { grid-column: 1 / -1; }
  .deck.is-wide .dk-strip > .dk-transport { grid-column: 1; padding-bottom: 14px; }
  .deck.is-wide .dk-strip > .dk-vol { grid-column: 2; grid-row: 1; margin: 0; }
  .deck.is-wide #dk-tp-sound:not([hidden]) { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 24px; align-items: end; }
  .deck.is-wide #dk-tp-sound > * { grid-column: 1 / -1; }
  .deck.is-wide #dk-tp-sound > .dk-tool { grid-column: 1; }
  .deck.is-wide #dk-tp-sound > .dk-tool-desc { grid-column: 2; margin: 0 0 12px; }
  /* New patch and Undo beside the Tool select over the wide rack */
  .deck.is-wide #dk-tp-sound > .dk-tool-acts { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
  .deck.is-wide #dk-tp-sound > .dk-tool-acts[hidden] { display: none; }
  .dk-tool-acts .dk-btn { min-height: 44px; justify-content: center; }
  /* the rack as a step editor: the steps' numbers, one line per sound, cells, boxed M, a vermilion column at the step
     playing now, the open sound's editor under the rows, the musical settings in a row at the foot */
  .deck.is-wide .gx-head { display: none; }
  /* the four New buttons on one line, to the right */
  .deck.is-wide .gx-view[data-view='seq']:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .deck.is-wide .gx-view[data-view='seq'] > * { grid-column: 1 / -1; }
  .deck.is-wide .gx-view[data-view='seq'] > .gx-group { grid-column: 2; justify-content: flex-end; margin: 0; }
  .deck.is-wide .gx-group .pill { min-height: 36px; padding: 0 12px; }
  .deck.is-wide .gx-numline { display: block; position: relative; height: 22px; margin-top: 16px; }
  .deck.is-wide .gx-numline .dk-label { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
  .deck.is-wide .gx-rack { position: relative; margin-top: 2px; }
  .deck.is-wide .gx-row { grid-template-columns: 10rem minmax(0, 1fr) 12px; min-height: 40px; padding: 4px 8px; }
  .deck.is-wide .gx-who { display: flex; align-items: baseline; gap: 10px; }
  .deck.is-wide .gx-type { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; }
  .deck.is-wide .gx-steps { height: 26px; touch-action: pan-y; }
  .deck.is-wide .gx-line.is-open { background: none; border-bottom-color: var(--rule); }
  .deck.is-wide .gx-mute { align-self: center; width: 32px; height: 32px; margin: 0 4px 0 8px; border: 1px solid var(--rule-strong); border-radius: 3px; }
  .deck.is-wide .gx-mute[aria-pressed='true'] { border-color: var(--ink); }
  .deck.is-wide .gx-rackins > .gx-ed { margin-top: 14px; padding: 12px 14px 16px; border: 1px solid var(--rule); border-radius: 4px; }
  .deck.is-wide .gx-ed-title { display: block; color: var(--ink); }
  /* the inspector's settings in two columns, in reading order */
  .deck.is-wide .gx-rackins .gx-body { columns: 2; column-gap: 32px; }
  .deck.is-wide .gx-rackins .gx-body > * { break-inside: avoid; }
  .deck.is-wide .gx-rackins .gx-body > .dk-label, .deck.is-wide .gx-rackins .gx-body > .gx-sub { break-after: avoid; }
  .deck.is-wide .gx-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
}
.gx-numline, .gx-ed-title, .gx-quick { display: none; }
.gx-nums { position: absolute; top: 0; display: block; height: 22px; }
.gx-playcol { position: absolute; z-index: 1; border: 1.5px solid var(--accent); border-radius: 3px; pointer-events: none; }
.gx-q { display: grid; gap: 6px; min-width: 0; }
.gx-q .dk-select { min-height: 40px; font-size: var(--text-sm); }
.dk-handle { display: none; }
.dk-head { flex: none; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 2px 0 18px; border-bottom: 1px solid var(--rule); color: var(--ink-70); }
.dk-head .jp { margin-left: 0.8em; font-size: var(--text-xs); letter-spacing: 0; color: var(--ink-30); }
.dk-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-70); transition: color 0.3s var(--ease); }
.dk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-x:hover { color: var(--accent-text); }
.dk-x:focus-visible { outline-offset: -6px; }
.dk-head-tools { display: flex; align-items: center; }
.dk-full { display: none; }
.dk-full .i-unfull, .dk-min .i-close { display: none; }
/* the live trace, small, in the head */
.dk-line { display: block; width: 72px; height: 24px; margin-right: 6px; }
.dk-restart.is-busy svg { animation: dk-spin 0.6s var(--ease); }
@keyframes dk-spin { to { transform: rotate(360deg); } }
.dk-strip { flex: none; padding: 0 18px; }
.dk-transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0 6px; }
.dk-meta { min-width: 0; }
/* the play button: a vermilion disc, the one big mark of the accent */
.dk-play { flex: none; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.dk-play:hover { background: var(--ink); color: var(--paper); }
.dk-play svg { width: 14px; height: 14px; fill: currentColor; }
.dk-play .i-pause { display: none; }
.dk-play.is-on .i-play { display: none; }
.dk-play.is-on .i-pause { display: block; }
.dk-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.dk-sub { color: var(--ink-50); margin-top: 4px; overflow-wrap: anywhere; }
/* the patch's key, scale, meter and tempo in the player's line, each a way in: a menu over its text, or the tempo's slider */
.dk-pick { position: relative; display: inline-block; color: inherit; text-decoration: underline dotted; text-decoration-color: var(--ink-30); text-underline-offset: 3px; cursor: pointer; border-radius: 2px; }
.dk-pick:hover, .dk-pick:focus-within, .dk-pick-tempo[aria-expanded='true'] { color: var(--ink); text-decoration-color: currentColor; }
.dk-pick:has(.dk-pick-sel:focus-visible), .dk-pick-tempo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dk-pick-sel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; }
button.dk-pick { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.dk-tempo { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px 4.6rem; gap: 8px; align-items: center; max-width: 24rem; margin-top: 8px; }
.dk-tempo[hidden] { display: none; }
.dk-tempo .dk-val { text-align: right; }
.dk-flag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-top: 8px; padding: 0 10px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
.dk-flag:hover { background: var(--ink); color: var(--paper); }
.dk-skips { display: flex; }
.dk-skips[hidden] { display: none; }
.dk-skip { width: 40px; height: 44px; display: grid; place-items: center; }
.dk-skip svg { width: 12px; height: 12px; fill: currentColor; }
.dk-skip:hover { color: var(--accent-text); }
.dk-seekrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.dk-seekrow[hidden] { display: none; }
.dk-time { color: var(--ink-50); font-variant-numeric: tabular-nums; }
.dk-vol { margin: 0 0 2px; }
/* Sound and Visuals: tabs with a vermilion underline */
.dk-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); }
.dk-tab { position: relative; min-height: 44px; padding: 0 2px; color: var(--ink-50); transition: color 0.2s var(--ease); }
.dk-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.dk-tab:hover { color: var(--ink); }
.dk-tab[aria-selected='true'] { color: var(--accent-text); }
.dk-tab[aria-selected='true']::after { transform: scaleX(1); }
.dk-tab:focus-visible { outline-offset: -3px; }
.dk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; scrollbar-width: thin; }
.dk-tp[hidden] { display: none; }
/* the Sound tool: a labelled select */
.dk-tool { display: grid; gap: 6px; }
.dk-select-wrap { position: relative; }
.dk-select { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 40px 0 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; transition: border-color 0.2s var(--ease); }
.dk-select:hover { border-color: var(--ink); }
.dk-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dk-select-chev { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-70); pointer-events: none; }
.dk-tool-desc { margin-top: 8px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.dk-label { color: var(--ink-70); }
.dk-field { margin-top: 16px; }
.dk-field > .dk-label { margin-bottom: 6px; }
/* buttons: small rectangles (Cyrus's mockups: fewer round outlined pills); New patch is filled */
.dk-btn, .deck .pill, .vz-dock .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--panel); color: var(--ink); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; line-height: 1.2; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); }
.dk-btn:hover, .deck .pill:hover, .vz-dock .pill:hover { border-color: var(--ink); background: var(--panel); color: var(--ink); }
.dk-btn svg, .deck .pill svg { width: 14px; height: 14px; flex: none; }
.dk-btn .i-line, .deck .pill .i-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dk-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dk-btn:disabled { opacity: 0.4; cursor: default; }
.dk-btn:disabled:hover { border-color: var(--rule-strong); }
.dk-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 4px; margin-left: -4px; border-radius: 4px; color: var(--ink-70); font-size: var(--text-sm); transition: color 0.2s var(--ease); }
.dk-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-back:hover { color: var(--accent-text); }
/* a switch with its name, on a row of its own */
.dk-swrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; }
.dk-swname { color: var(--ink); }
.dk-projects { padding-top: 2px; }
.dk-proj-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dk-proj, .dk-chip { min-height: 36px; padding: 0 13px; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--ink-70); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.dk-proj:hover, .dk-chip:hover { border-color: var(--ink); color: var(--ink); }
.dk-proj[aria-pressed='true'], .dk-chip[aria-pressed='true'] { background: color-mix(in oklch, var(--accent) 12%, var(--panel)); border-color: var(--accent); color: var(--accent-text); }
/* the patch editor: sound choices, the wave canvas */
.dk-chip { min-height: 32px; padding: 0 11px; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.dk-wave { display: block; width: 100%; height: 150px; margin-top: 8px; border: 1px solid var(--rule-strong); touch-action: none; cursor: crosshair; }
.dk-proj-body { margin-top: 10px; }
.dk-proj-body .dk-note { margin-top: 0; }
.dk-tracks { border-top: 1px solid var(--rule); }
.dk-track { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 8px; align-items: baseline; width: 100%; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.dk-track-n { color: var(--ink-50); }
.dk-track-y { color: var(--ink-70); }
.dk-track-t { overflow-wrap: anywhere; transition: color 0.3s var(--ease); }
.dk-track:hover .dk-track-t, .dk-track[aria-current='true'] .dk-track-t, .dk-track[aria-current='true'] .dk-track-n { color: var(--accent-text); }
.dk-proj-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; color: var(--ink-70); }
.dk-proj-links a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.dk-proj-links a:hover { color: var(--accent-text); border-color: var(--accent); }
.dk-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.dk-panel[hidden] { display: none; }
.dk-big { margin: 2px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.15; }
.dk-note { margin-top: 8px; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.5; }
.dk-note:empty { display: none; }
.dk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dk-actions [hidden] { display: none; }

/* the Generator's sections and the Sequencer's modes, in a bar that stays at the top as the panel scrolls, so it is
   always clear where one is and how to get back */
.gx-sticky { position: sticky; top: -16px; z-index: 6; margin: 0 -18px 14px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.gx-tiles.gx-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 32rem; margin: 0; }
.gx-nav .gx-tile { padding: 0 4px; }
.gx-nav .gx-tile[aria-current='page'] { position: relative; z-index: 2; background: color-mix(in oklch, var(--accent) 12%, var(--paper)); border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 600px) { .gx-sticky { top: -14px; margin: 0 -16px 12px; padding: 8px 16px; } }
/* the Sequencer's seven modes keep to one row on the narrowest phones, so the bar takes no more room than the Generator's */
@media (max-width: 359px) { .gx-sticky .seq-modes .gx-tile { padding: 0 1px; letter-spacing: 0; } }
/* what the keyboard or a jump brings into view lands below the bar, never under it */
.dk-body:has(> .dk-tp:not([hidden]) .dk-panel:not([hidden]) .gx-sticky) { scroll-padding-top: 72px; }

/* Presets, Play lab's third tab: this patch out as a link, a file or into the library; the library, cyrusrex first;
   publishing with a code; Cyrus's codes for friends */
.pr-sec { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.pr-sec:first-child { padding-top: 2px; }
.pr-sec:last-child { border-bottom: 0; }
.pr-h { margin: 0; font-weight: 400; }
.pr-lead { margin-top: 6px; }
.pr-lab { display: block; margin: 14px 0 6px; }
.pr-input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; }
.pr-input::placeholder { color: var(--ink-50); }
.pr-input:hover { border-color: var(--ink-50); }
.pr-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.pr-input[hidden] { display: none; }
.pr-row { display: flex; gap: 8px; margin-top: 12px; }
.pr-row .pr-input { flex: 1 1 auto; min-width: 0; }
.pr-row .dk-btn { flex: none; }
.pr-linkout { margin-top: 10px; font-family: var(--font-mono); font-size: var(--text-xs); }
.pr-now { margin-top: 12px; color: var(--accent-text); text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.pr-now[hidden] { display: none; }
.pr-say { margin-top: 10px; color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.pr-say:empty { display: none; }
.pr-lib { margin-top: 12px; }
.pr-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.pr-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.pr-what { flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.pr-who { color: var(--ink-70); text-transform: none; letter-spacing: 0.02em; }
.pr-item.is-rex .pr-who { color: var(--accent-text); }
.pr-sep { color: var(--ink-50); }
.pr-name { color: var(--ink); }
.pr-when { color: var(--ink-50); text-transform: none; letter-spacing: 0.02em; }
.pr-acts { display: flex; flex: none; gap: 6px; }
.pr-acts .dk-btn { min-height: 40px; padding: 0 10px; }
.pr-code { margin: 4px 0 0; color: var(--ink); font-size: var(--text-sm); text-transform: none; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.pr-codename { margin: 0; }
.pr-old { margin-top: 4px; }
.pr-item.is-new { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
/* the library's selector: previous, the dropdown, next; under it the one picked and where it sits */
.pr-find { margin-top: 12px; }
.pr-find[hidden] { display: none; }
.pr-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; align-items: center; margin-top: 12px; }
.pr-step { border: 1px solid var(--rule-strong); border-radius: 4px; }
.pr-step:hover { border-color: var(--ink); }
.pr-step:disabled { opacity: 0.4; cursor: default; }
.pr-pick .dk-select { padding-right: 34px; text-overflow: ellipsis; }
.pr-pick .dk-select-chev { right: 12px; }
.pr-count { margin-top: 8px; color: var(--ink-70); text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.pr-count.is-rex { color: var(--accent-text); }
.pr-libacts { margin-top: 10px; }
.pr-libacts [hidden] { display: none; }
.pr-codes { margin-top: 12px; }
@media (max-width: 480px) {
  .pr-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-item { flex-wrap: wrap; padding: 8px 0 10px; }
  .pr-acts { width: 100%; }
  .pr-acts .dk-btn { flex: 1 1 0; }
}

/* the Generator: New patch and Undo, Density and Weirdness, two rows into its views, the Scroll switch */
.gx-view[hidden] { display: none; }
.gx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, auto); gap: 8px; align-items: center; }
.gx-new { width: 100%; }
.gx-no { grid-column: 1 / -1; justify-self: end; color: var(--ink-50); white-space: nowrap; }
.gx-macros { margin-top: 6px; }
.gx-gos { margin-top: 10px; border-top: 1px solid var(--rule); }
.gx-go { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 0 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-align: left; }
.gx-go-sum { max-width: 13rem; color: var(--ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-go-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-50); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.gx-go:hover .gx-go-chev { color: var(--ink); }
.gx-go[aria-expanded='true'] .gx-go-chev { transform: rotate(180deg); }
.gx-go:focus-visible { outline-offset: -2px; }
.gx-scroll { border-bottom: 1px solid var(--rule); }
.gx-scroll-body { padding: 10px 0 4px; }
.gx-rack-back { display: none; }
.gx-group { margin-top: 4px; }

/* Song: the patch's whole form, bar by bar (its length, the chords over the bars, every sound's bars, the drift) */
.gx-tiles.gx-song-len { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 20rem; margin: 0; }
.gx-tiles.gx-song-page, .gx-tiles.gx-pad-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; margin: 12px 0 0; }
.gx-tiles.gx-song-page[hidden], .gx-tiles.gx-pad-page[hidden] { display: none; }
.gx-song-box { margin-top: 16px; }
.gx-chords { display: grid; align-items: stretch; height: 32px; margin-bottom: 6px; padding-left: 1px; }
.gx-chords > .dk-label { align-self: center; font-size: 10px; letter-spacing: 0; }
.gx-chord { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; margin-left: -1px; padding: 0 2px; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-70); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.gx-chord:hover { z-index: 1; border-color: var(--ink); color: var(--ink); }
.gx-chord.is-now { z-index: 2; border-color: var(--accent); color: var(--accent-text); }
label.gx-chord:focus-within, button.gx-chord:focus-visible { z-index: 3; outline: 2px solid var(--accent); outline-offset: 1px; }
.gx-chord-name { overflow: hidden; text-overflow: clip; pointer-events: none; }
.gx-chord.is-stack { padding: 0; }
.gx-chord.is-stack .gx-chord-name { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.gx-chord.is-stack .gx-chord-q { font-size: 8px; letter-spacing: -0.02em; }
.gx-chord select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.gx-song { display: block; width: 100%; touch-action: pan-y; cursor: pointer; }
.gx-song:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gx-song-drift { margin-top: 14px; border-top: 1px solid var(--rule); }

/* the bar on screen in the single-bar views (Sounds & sequence, the Sequencer): the previous bar, which bar of how many
   and its chord, the next, Follow; under them the bars to jump to, the bar on screen in ink, the bar playing in accent */
.gx-meas { margin-top: 12px; }
.gx-meas-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px auto; align-items: center; gap: 4px; }
.gx-meas .gx-meas-nav { width: 40px; height: 40px; border: 1px solid var(--rule-strong); border-radius: 4px; }
.gx-meas .gx-meas-nav:hover { border-color: var(--ink); }
.gx-meas-label { min-width: 0; color: var(--ink); text-align: center; line-height: 1.25; text-transform: none; letter-spacing: 0.02em; }
.gx-meas-chord { display: inline-block; white-space: nowrap; }
.gx-meas-togs { display: flex; margin-left: 4px; padding-left: 1px; }
.gx-meas-togs .gx-tile { flex: none; min-height: 40px; margin: 0 0 0 -1px; padding: 0 12px; }
@media (max-width: 480px) {
  .gx-meas-row { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .gx-meas-togs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0; }
  .gx-meas-togs .gx-tile { flex: auto; }
}
.gx-meas-map { display: grid; column-gap: 2px; margin-top: 2px; touch-action: pan-y; }
.gx-meas-bar { height: 18px; padding: 6px 0; }
.gx-meas-bar::before { content: ''; display: block; height: 6px; border-radius: 1px; background: var(--rule-strong); transition: background-color 0.2s var(--ease); }
.gx-meas-bar:hover::before { background: var(--ink-50); }
.gx-meas-bar[aria-current='true']::before { background: var(--ink); }
.gx-meas-bar.is-now::before { background: var(--accent); }
.gx-meas-bar[aria-current='true'].is-now::before { background: var(--accent); box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); }
.gx-meas-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gx-rack { touch-action: pan-y; }
.gx-rack.is-next .gx-steps { animation: gx-bar-next 0.2s var(--ease); }
.gx-rack.is-prev .gx-steps { animation: gx-bar-prev 0.2s var(--ease); }
@keyframes gx-bar-next { from { opacity: 0.3; transform: translateX(12px); } }
@keyframes gx-bar-prev { from { opacity: 0.3; transform: translateX(-12px); } }
@media (prefers-reduced-motion: reduce) { .gx-rack.is-next .gx-steps, .gx-rack.is-prev .gx-steps { animation: none; } }
/* a sound's patterns, over its steps in its editor, and the letter of the one on screen beside its name */
.gx-pats { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.gx-pat-head { display: flex; align-items: center; gap: 4px; margin: -8px 0 4px; }
.gx-pat-head > .dk-label { flex: 1; }
.gx-pats .gx-pat-nav { width: 36px; height: 36px; }
.gx-tiles.gx-pat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 24rem; margin: 0; }
.gx-pat-say { margin-top: 8px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.gx-pat-acts { margin-top: 8px; }
.gx-pat-acts[hidden] { display: none; }
.gx-patb { margin-left: 6px; padding: 0 4px; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent-text); font-size: 10px; line-height: 1.4; letter-spacing: 0; }
.gx-patb[hidden] { display: none; }

/* the pad's chords (Sounds & sequence → Pad): the chords over the bars to pick from, the grid of the scale's notes over
   every bar, and the chord picked */
.gx-pad-box { margin-top: 10px; }
.gx-padroll { display: block; width: 100%; touch-action: none; cursor: pointer; }
.gx-padroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button.gx-chord { cursor: pointer; }
.gx-chord[aria-pressed='true'] { z-index: 2; background: color-mix(in oklch, var(--accent) 12%, var(--paper)); border-color: var(--accent); color: var(--accent-text); }
.gx-chord.is-rest .gx-chord-name { opacity: 0.45; }
.gx-pad-ins { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.gx-pad-title { margin-bottom: 4px; color: var(--ink); font-size: var(--text-sm); }
.gx-pad-lab { margin: 12px 0 6px; }
.gx-tiles.gx-pad-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.gx-pad-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.gx-pad-btns .dk-btn { min-height: 40px; padding: 0 8px; }
@media (min-width: 601px) {
  .gx-tiles.gx-pad-shapes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gx-pad-btns.gx-pad-lens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the Sequencer: Grid (every lane at once, a step's inspector, a lane's values) and Orbit (rings of Euclidean
   rhythms beside their steppers); one lane at a time on a phone */
.gx-tiles.seq-modes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 52rem; margin: 0; }
.seq-modes .gx-tile { padding: 0 2px; }
.seq-view[hidden] { display: none; }
.seq-view { margin-top: 12px; }
.seq-main { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 14px 22px; align-items: start; }
.seq-view[data-mode='orbit'] .seq-main { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
.seq-left { min-width: 0; }
.gx-tiles.seq-lanes { display: none; margin-bottom: 10px; }
.seq-grid { display: block; width: 100%; height: 260px; touch-action: none; cursor: pointer; }
.seq-grid:focus-visible, .seq-param:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seq-paramhead { margin-top: 12px; }
.gx-tiles.seq-params { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 26rem; }
.seq-params .gx-tile { min-height: 34px; padding: 0 4px; }
.gx-tiles.seq-params.is-notes { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); max-width: 40rem; }
@media (max-width: 600px) { .gx-tiles.seq-params.is-notes { max-width: none; } }
.seq-param { display: block; width: 100%; height: 92px; margin-top: 6px; touch-action: none; cursor: ns-resize; }
.seq-ins { padding: 2px 0 0 18px; border-left: 1px solid var(--rule); }
.seq-ins-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; margin: -6px 0 2px; }
.seq-ins-title { display: grid; gap: 3px; color: var(--ink); text-align: center; }
.seq-ins-title span:first-child { color: var(--accent-text); }
.seq-stepnav { width: 36px; height: 40px; }
.seq-onrow, .seq-lockrow, .seq-flagrow { min-height: 44px; }
.seq-ins .dk-slider { grid-template-columns: 4.6rem minmax(0, 1fr) 3.6rem; }
.seq-stepper { grid-template-columns: 4.6rem minmax(0, 1fr); }
.seq-steps { display: inline-grid; grid-template-columns: 40px 2.6rem 40px; align-items: center; justify-self: start; }
.dk-btn.seq-pm { min-height: 36px; width: 40px; padding: 0; font-family: var(--font-mono); font-size: 1rem; }
.seq-num { text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.seq-cond { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; }
.seq-cond .dk-select { min-height: 40px; font-size: var(--text-sm); }
.seq-ins-lane { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.seq-acts { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.seq-seed { margin-left: auto; }
/* Orbit */
.seq-rings { display: block; width: 100%; aspect-ratio: 1; height: auto; cursor: pointer; }
.seq-olist { display: grid; gap: 6px; }
.seq-orow { display: grid; grid-template-columns: 4.4rem repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.seq-orow.is-off { opacity: 0.5; }
.seq-oname { align-self: center; min-height: 40px; text-align: left; color: var(--ink-70); }
.seq-oname[aria-pressed='true'] { color: var(--accent-text); }
.seq-ostep { display: grid; gap: 2px; min-width: 0; }
.seq-olabel { color: var(--ink-50); font-size: 10px; }
.seq-ostep .seq-steps { grid-template-columns: 34px minmax(1.6rem, 1fr) 34px; width: 100%; }
.seq-ostep .dk-btn.seq-pm { width: 34px; }
.gx-tiles.seq-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seq-olane { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.seq-olane .dk-actions .dk-btn { min-height: 40px; }
.seq-rulesgo { width: 100%; min-height: 40px; margin-top: 6px; }
/* Rules: the lane's chain, the selected rule's settings, the next four cycles */
.seq-view[data-mode='rules'] .seq-main, .seq-view[data-mode='texture'] .seq-main { grid-template-columns: minmax(0, 1fr) 17rem; }
.gx-tiles.rl-lanes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 12px; }
.rl-lanes .gx-tile { min-height: 36px; padding: 0 2px; }
.gx-tiles.rl-lanes.has-slice { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rl-head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rl-title { margin: 0; color: var(--accent-text); }
.rl-count { margin-left: auto; color: var(--ink-50); font-size: 10px; }
.rl-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.rl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border: 1px solid var(--rule-strong); border-radius: 3px; }
.rl-item.is-sel { border-color: var(--accent); }
.rl-item.is-off .rl-name { opacity: 0.5; }
.rl-name { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 6px; align-content: center; min-height: 44px; text-align: left; color: var(--ink); }
.rl-idx { grid-row: span 2; align-self: center; color: var(--ink-50); font-size: 10px; }
.rl-name[aria-pressed='true'] .rl-idx { color: var(--accent-text); }
.rl-type { font-weight: 500; }
.rl-sum { color: var(--ink-50); font-size: var(--text-sm); line-height: 1.3; }
.rl-item .dk-toggle { margin: 0 4px; }
.rl-item .dk-x { width: 34px; height: 40px; }
.rl-item .dk-x:disabled { opacity: 0.3; }
.rl-empty { padding: 10px 0; }
.rl-addrow { margin-top: 10px; }
.rl-prevlabel { margin-top: 16px; }
.rl-prev { display: block; width: 100%; height: 136px; margin-top: 6px; }
.rl-prevsay:empty { display: none; }
.rl-acts .dk-btn { min-height: 40px; }
.rl-institle { margin-bottom: 4px; }
.rl-desc { margin: 2px 0 10px; color: var(--ink-70); }
.rl-field { margin: 8px 0 4px; }
.rl-field .dk-label { margin-bottom: 6px; }
.gx-tiles.rl-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.gx-tiles.rl-opts { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-tiles .gx-tile { min-height: 36px; padding: 0 2px; letter-spacing: 0.02em; font-size: 0.66rem; }
/* Slice: the recorder, the captures, the waveform cut into slices, the slice steps */
.sl-cap { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sl-field { margin-top: 8px; }
.sl-field .dk-label { margin-bottom: 6px; }
.gx-tiles.sl-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 20rem; margin: 0; }
.sl-capacts { margin-top: 10px; }
.sl-capacts .dk-btn, .sl-acts .dk-btn { min-height: 40px; }
.sl-prog { height: 3px; margin-top: 10px; background: var(--rule); }
.sl-prog span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.2s linear; }
.sl-state { margin-top: 8px; }
.gx-tiles.sl-assets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.sl-assets .gx-tile { min-height: 36px; padding: 0 2px; letter-spacing: 0.02em; font-size: 0.66rem; }
.sl-edit { margin-top: 6px; }
.sl-lab { margin-top: 12px; }
.sl-wave { display: block; width: 100%; height: 96px; margin-top: 6px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: pointer; }
.sl-steps { display: block; width: 100%; height: 48px; margin-top: 6px; touch-action: none; cursor: pointer; }
.sl-wave:focus-visible, .sl-steps:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-edit .seq-stepper { margin-top: 6px; }
.sl-acts { margin-top: 10px; }
/* Texture: the cloud, its slow lanes, its settings */
.tx-from[hidden] { display: none; }
.gx-tiles.tx-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 0; }
.gx-tiles.tx-edge, .gx-tiles.tx-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 20rem; margin: 0; }
.tx-lanes .gx-tile, .tx-edge .gx-tile, .tx-bars .gx-tile { min-height: 36px; padding: 0 2px; letter-spacing: 0.02em; font-size: 0.66rem; }
.tx-lanes .gx-tile.is-drawn::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.tx-lane { display: block; width: 100%; height: 96px; margin-top: 6px; touch-action: none; cursor: crosshair; }
.tx-lane:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dk-slider.is-laned label { color: var(--accent-text); }
.tx-ins .dk-slider { grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem; }
/* Morph: the field with the scenes at its corners and the point, its numbers, the path; the scenes beside it */
.seq-view[data-mode='morph'] .seq-main { grid-template-columns: minmax(0, 1fr) 19rem; }
.mo-field { display: block; width: 100%; max-width: min(30rem, var(--mo-max, 30rem)); aspect-ratio: 1; height: auto; border: 1px solid var(--rule-strong); background: var(--paper); touch-action: none; cursor: crosshair; }
.mo-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mo-read { margin: 8px 0 4px; color: var(--ink-70); }
.mo-left .dk-slider { max-width: 30rem; }
.mo-path { margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--rule); }
.mo-pathacts .dk-btn, .mo-acts2 .dk-btn { min-height: 40px; }
.mo-pathsay { margin-top: 8px; }
.gx-tiles.mo-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 20rem; margin: 0; }
.gx-tiles.mo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; margin: 0; }
.gx-tiles.mo-glide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.mo-bars .gx-tile, .mo-two .gx-tile, .mo-glide .gx-tile { min-height: 36px; padding: 0 2px; letter-spacing: 0.02em; font-size: 0.66rem; }
.mo-list { display: grid; margin: 4px 0 0; }
.mo-row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.mo-id { padding-top: 1px; color: var(--ink-50); font-size: var(--text-sm); }
.mo-row.is-lead .mo-id { color: var(--accent-text); }
.mo-name { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.35; }
.mo-row.is-empty .mo-name { color: var(--ink-50); }
.mo-fit { margin: 3px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
.mo-acts { grid-column: 2; display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mo-acts .dk-btn { min-height: 36px; }
.mo-acts .dk-x { width: 36px; height: 36px; margin-left: auto; }
.mo-acts .dk-x:disabled, .mo-acts .dk-btn:disabled { opacity: 0.35; }
.mo-acts2 { margin-top: 12px; }
.mo-note:empty { display: none; }
/* FM 4-op's editor: the routings, the routing drawn, the operators (the carriers' tiles marked), an operator's envelope */
.gx-tiles.fm-algs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 4px 0 0; }
.gx-tiles.fm-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 16rem; margin: 4px 0 0; }
.fm-algs .gx-tile, .fm-ops .gx-tile { min-height: 36px; padding: 0 2px; }
.fm-ops .gx-tile.is-car { text-decoration: underline; text-underline-offset: 3px; }
.fm-graph { display: block; width: 100%; max-width: 24rem; height: 150px; margin: 8px 0 4px; }
.fm-env { display: block; width: 100%; height: 84px; margin: 6px 0 4px; }
.fm-role { margin: 6px 0 4px; }
/* a sound's own amp envelope (its graph is FM's), and the bass's and the lead's filter drawn */
.amp-note { margin: 0 0 6px; }
.flt-graph { display: block; width: 100%; height: 112px; margin: 8px 0 2px; }
.flt-say { margin: 2px 0 8px; }
@media (max-width: 600px) {
  /* seven modes in one row: each tile as wide as its name, the rest of the row shared out */
  .gx-tiles.seq-modes { display: flex; flex-wrap: nowrap; }
  .seq-modes .gx-tile { flex: 1 1 auto; min-width: 0; letter-spacing: 0.02em; font-size: 0.66rem; }
  .gx-tiles.rl-lanes, .gx-tiles.rl-lanes.has-slice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gx-tiles.sl-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-item .dk-x { width: 30px; }
}
@media (max-width: 760px) {
  .seq-main, .seq-view[data-mode='orbit'] .seq-main, .seq-view[data-mode='rules'] .seq-main, .seq-view[data-mode='texture'] .seq-main, .seq-view[data-mode='morph'] .seq-main { grid-template-columns: minmax(0, 1fr); }
  .seq-ins { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .gx-tiles.seq-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seq-lanes .gx-tile { padding: 0 2px; }
  .seq-rings { max-width: 22rem; margin: 0 auto; }
  .seq-orow { grid-template-columns: 3.6rem repeat(3, minmax(0, 1fr)); gap: 6px; }
  .seq-ostep .seq-steps { grid-template-columns: 30px minmax(1.4rem, 1fr) 30px; }
  .seq-ostep .dk-btn.seq-pm { width: 30px; }
}

/* Sounds & sequence: the patch as a rack of its sounds; a row opens its sound in place */
.gx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-top: 18px; }
.gx-hint { color: var(--ink-50); font-size: var(--text-sm); }
.gx-rack { margin-top: 8px; border-top: 1px solid var(--rule); }
.gx-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--rule); transition: background-color 0.3s var(--ease); }
.gx-line.is-open { background: var(--paper-2); border-bottom-color: transparent; }
.gx-row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 12px; gap: 12px; align-items: center; width: 100%; min-width: 0; min-height: 48px; padding: 5px 8px; text-align: left; }
.gx-mute { width: 40px; color: var(--ink-50); border-left: 1px solid var(--rule); transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.gx-mute:hover { color: var(--ink); }
.gx-mute[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.gx-mute:focus-visible, .gx-row:focus-visible { outline-offset: -2px; }
.gx-who { display: grid; gap: 1px; min-width: 0; }
.gx-name { color: var(--ink); transition: color 0.3s var(--ease); }
.gx-row[aria-expanded='true'] .gx-name { color: var(--accent); }
.gx-row.is-hit .gx-name { animation: gx-hit 0.7s var(--ease); }
@keyframes gx-hit { from { color: var(--accent); } }
.gx-type { color: var(--ink-50); font-size: var(--text-sm); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-steps { display: block; width: 100%; height: 24px; }
.gx-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-50); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.gx-row[aria-expanded='true'] .gx-chev { transform: rotate(180deg); color: var(--ink); }
@media (hover: hover) {
  .gx-line:hover { background: var(--paper-2); }
  .gx-row:hover .gx-name { color: var(--accent); }
}
.gx-ed { padding: 2px 8px 14px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.gx-tiles { display: flex; flex-wrap: wrap; padding: 1px 0 0 1px; margin-top: 4px; }
.gx-tile { flex: 1 1 auto; min-height: 40px; padding: 0 10px; margin: -1px 0 0 -1px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-70); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.gx-tile:hover { position: relative; z-index: 1; border-color: var(--ink); color: var(--ink); }
.gx-tile[aria-pressed='true'] { position: relative; z-index: 2; background: color-mix(in oklch, var(--accent) 12%, var(--paper)); border-color: var(--accent); color: var(--accent-text); }
.gx-tile:disabled { opacity: 0.4; cursor: default; }
.gx-tile:disabled:hover { z-index: auto; border-color: var(--rule-strong); color: var(--ink-70); }
.gx-tile:focus-visible { position: relative; z-index: 3; outline-offset: 1px; }
.gx-about { margin-top: 10px; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.45; }
.gx-body { margin-top: 6px; }
.gx-body:empty { display: none; }
.gx-wave { margin: 4px 0 6px; }
.gx-wave .dk-wave { background: var(--paper); }
.gx-acts { margin-top: 10px; }
.gx-acts svg { fill: currentColor; }
.gx-seq-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.gx-seq { display: block; width: 100%; height: 104px; margin-top: 8px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: crosshair; }
.gx-seq:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the bass's note grid, and its velocities beneath it in a shorter lane */
.gx-roll { display: block; width: 100%; height: 168px; margin-top: 8px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: crosshair; }
.gx-roll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gx-lane { margin-top: 12px; }
.gx-seq.gx-vel { height: 72px; }
.gx-lens { display: block; width: 100%; height: 64px; margin-top: 8px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: ns-resize; }
.gx-lens:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gx-gate { display: block; width: 100%; height: 40px; margin-top: 4px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: pointer; }
.gx-gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the bass's Gate, Accent and Slide under its velocities; every sound's Rate over its steps */
.gx-flags .gx-lane { margin-top: 10px; }
.gx-flag { display: block; width: 100%; height: 26px; margin-top: 4px; background: var(--paper); border: 1px solid var(--rule-strong); touch-action: none; cursor: pointer; }
.gx-flag-gate { height: 52px; cursor: ns-resize; }
.gx-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gx-seq-wrap > .seq-rate { margin-bottom: 2px; }
.gx-seq-note { margin-top: 8px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.gx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gx-set-label { margin-top: 18px; }
.gx-set { margin-top: 4px; }
.gx-sub { margin-top: 10px; color: var(--ink-50); }
.gx-set .gx-tiles { margin-bottom: 4px; }
.gx-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gx-keys .gx-tile { padding: 0; }
/* even rows: the seven scales four over three, the seven divisions in bars over notes */
.gx-scales, .gx-divs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gx-scales .gx-tile, .gx-divs .gx-tile { padding: 0 4px; }
.gx-scales .gx-tile { grid-column: span 3; }
.gx-scales .gx-tile:nth-child(n + 5) { grid-column: span 4; }
.gx-divs .gx-tile { grid-column: span 3; }
.gx-divs .gx-tile:nth-child(-n + 3) { grid-column: span 4; }
.dk-lfo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.dk-lfo-head + .gx-tiles { margin: 8px 0 4px; }
/* a switch: the knob slides right and the track fills when it is on */
.dk-sync { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-70); }
.dk-switch { position: relative; flex: none; width: 36px; height: 20px; border: 1px solid var(--rule-strong); border-radius: 999px; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.dk-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 999px; background: var(--ink-50); transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); }
.dk-sync:hover .dk-switch, .dk-toggle:hover .dk-switch { border-color: var(--ink); }
.dk-sync[aria-checked='true'] { color: var(--ink); }
.dk-sync[aria-checked='true'] .dk-switch, .dk-toggle[aria-checked='true'] .dk-switch { background: var(--accent); border-color: var(--accent); }
.dk-sync[aria-checked='true'] .dk-switch::after, .dk-toggle[aria-checked='true'] .dk-switch::after { transform: translateX(16px); background: var(--accent-ink); }
/* a switch on its own, at the end of a heading row */
.dk-toggle { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin-right: -4px; }
.gx-subhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gx-subhead .gx-sub { margin-top: 0; }

/* sliders: a hairline track and a fader-cap thumb */
.dk-slider { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4.2rem; gap: 10px; align-items: center; min-height: 40px; }
.dk-slider label { color: var(--ink-70); }
/* a filter's mode: three tiles in the slider's place */
.dk-slider.gx-moderow { grid-template-columns: 5rem minmax(0, 1fr); }
/* a slider's modulation: its wave button, its reach on the track and where it is now, and its route's settings */
.dk-slider.has-mod, .gx-body .dk-slider:not(.gx-moderow) { grid-template-columns: 5rem minmax(0, 1fr) 4.2rem 28px; }
.dk-slider.has-mod > label { grid-area: 1 / 1; }
.dk-slider.has-mod > input, .dk-slider.has-mod > .dk-modband { grid-area: 1 / 2; }
.dk-slider.has-mod > output { grid-area: 1 / 3; }
.dk-slider.has-mod > .dk-modbtn { grid-area: 1 / 4; }
.dk-slider > .dk-mod { grid-column: 1 / -1; grid-row: 2; }
.dk-modbtn { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-50); }
.dk-modbtn svg { width: 16px; height: 16px; }
.dk-modbtn .i-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-modbtn:hover { color: var(--ink); border-color: var(--rule-strong); }
.dk-modbtn.is-on { color: var(--accent-text); border-color: var(--accent); }
.dk-modbtn[aria-expanded='true'] { background: var(--paper-2, transparent); }
.dk-modband { display: none; position: relative; align-self: center; height: 6px; pointer-events: none; }
.dk-slider.is-mod .dk-modband { display: block; }
.dk-modband::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(8px + var(--mlo, 0) * (100% - 16px)); right: calc(8px + (1 - var(--mhi, 0)) * (100% - 16px)); border-radius: 3px; background: var(--accent); opacity: 0.28; }
.dk-modnow { position: absolute; top: -4px; left: calc(7px + var(--mnow, 0) * (100% - 16px)); width: 2px; height: 14px; border-radius: 1px; background: var(--accent); }
.dk-mod { display: grid; gap: 6px; margin: 0 0 6px; padding: 10px; border: 1px solid var(--rule); border-radius: 4px; }
.dk-modsrc { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 8px; }
.dk-modsrc > [hidden] { display: none; }
.dk-mod .dk-slider { min-height: 36px; }
.gx-rowlabel { color: var(--ink-70); }
.gx-moderow .gx-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.gx-moderow .gx-tile { padding: 0 2px; }
.gx-moderow .gx-tile { min-height: 32px; }
.dk-val { color: var(--ink-70); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.deck, .vz-dock) input[type='range'] { --fill: calc(8px + var(--v, 0.5) * (100% - 16px)); -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
:is(.deck, .vz-dock) input[type='range']::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--fill), var(--rule-strong) var(--fill)); }
:is(.deck, .vz-dock) input[type='range']::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--fill), var(--rule-strong) var(--fill)); }
:is(.deck, .vz-dock) input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 3px var(--panel); transition: transform 0.2s var(--ease); }
:is(.deck, .vz-dock) input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 3px var(--panel); }
:is(.deck, .vz-dock) input[type='range']:hover::-webkit-slider-thumb, :is(.deck, .vz-dock) input[type='range']:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
:is(.deck, .vz-dock) input[type='range']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* XY pad */
.xy { position: relative; height: 176px; border: 1px solid var(--rule-strong); touch-action: none; cursor: crosshair; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 25% 25%; background-position: -1px -1px; }
.xy:focus-visible { outline-offset: 2px; }
.xy-h, .xy-v { position: absolute; background: var(--accent); opacity: 0.45; pointer-events: none; }
.xy-h { left: 0; right: 0; height: 1px; }
.xy-v { top: 0; bottom: 0; width: 1px; }
.xy-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px var(--paper); pointer-events: none; }
.xy-ax { position: absolute; color: var(--ink-30); pointer-events: none; }
/* both axis names sit on the left, clear of the dot's resting place at the right */
.xy-ax-x { left: 8px; bottom: 6px; }
.xy-ax-y { left: 8px; top: 6px; }
.xy-read { margin: 8px 0 4px; color: var(--ink-70); }

/* Scroll meters */
.dk-meters { display: grid; gap: 9px; margin-bottom: 8px; }
.dk-meter { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 10px; align-items: center; }
.dk-meter .mono { color: var(--ink-70); }
.dk-bar { height: 6px; background: var(--rule); overflow: hidden; }
.dk-bar-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* Patch board */
.board { position: relative; padding: 10px 6px 12px; border: 1px solid var(--rule-strong); }
.board-name { margin: 0 6px 2px; color: var(--ink-50); }
.board-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 12px; }
.board-row:last-of-type { margin-bottom: 0; }
.jack { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 6px 0 4px; color: var(--ink-70); touch-action: none; }
.jack-hole { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.jack-hole::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); transition: background-color 0.2s var(--ease); }
.jack-led { position: absolute; bottom: 27px; left: calc(50% + 15px); width: 5px; height: 5px; border-radius: 999px; background: var(--accent); opacity: calc(0.15 + var(--v, 0) * 0.85); }
/* source names sit above their jacks and destination names below, so no cable crosses a name */
.jack-src .jack-name { order: -1; }
.jack-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jack:hover .jack-hole { border-color: var(--accent); }
.jack.is-patched .jack-hole::after { background: var(--accent); }
.jack.is-armed .jack-hole { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent); }
.jack:focus-visible { outline-offset: -2px; }
.cables { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }
.cable-live { opacity: 0.6; stroke-dasharray: 2 6; }
.plug { fill: var(--accent); }
.dk-cables { margin: 10px 0 2px; min-height: 1.5em; color: var(--ink-70); }
.dk-cables:not(.mono) { color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }

/* Freeze */
.dk-freeze { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 56px; margin-bottom: 6px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.dk-freeze-in { display: inline-flex; align-items: baseline; gap: 12px; }
.dk-freeze .jp { font-size: var(--text-xs); color: var(--ink-50); transition: color 0.3s var(--ease); }
.dk-freeze:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
  .dk-freeze:not(:disabled):not(.is-on):hover { background: var(--ink); color: var(--paper); }
  .dk-freeze:not(:disabled):not(.is-on):hover .jp { color: var(--paper); }
}
.dk-freeze.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dk-freeze.is-on .jp { color: var(--on-accent); }

/* Stems */
/* the Mixer: a strip per stem or sound, its name and level over its fader, M, S and Edit beside it, its meter under it;
   the drums' strip unfolds into their four sounds */
.strip { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto 30px; gap: 0 6px; align-items: center; padding: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.strip .dk-slider { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name val' 'fader fader'; gap: 2px 8px; min-height: 0; }
.strip .dk-slider > label { grid-area: name; }
.strip .dk-slider > input { grid-area: fader; }
.strip .dk-slider > output { grid-area: val; }
.mix-strips > .strip:last-child { border-bottom: 0; }
.strip-btn { width: 34px; height: 34px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--ink-70); transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.strip-btn:hover { border-color: var(--ink); }
.strip-btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.strip-solo[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.strip-lead, .strip-edit { display: grid; place-items: center; height: 34px; color: var(--ink-50); transition: color 0.2s var(--ease); }
.strip-lead svg, .strip-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.strip-lead:hover, button.strip-edit:hover { color: var(--accent-text); }
.strip-fold svg { transform: rotate(-90deg); transition: transform 0.3s var(--ease); }
.strip-fold[aria-expanded='true'] svg { transform: none; }
.strip-fold[aria-expanded='true'] { color: var(--ink); }
.mix-drums { margin-left: 12px; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip-drum:last-child { border-bottom: 0; }
.strip-meter { grid-column: 2 / -1; height: 2px; margin-top: 6px; background: var(--rule); overflow: hidden; }
.strip-meter-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.mix-sends { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.mix-sends .dk-note { margin: 4px 0 6px; }
.mix-acts { margin-top: 14px; }
/* Effects: each sound's chain (Cyrus's Effects mockup, 6 Oct 2026). The sound picked, its chain across (In, the effects,
   Out), the effects as rows with a handle, a switch and a way into their settings, the settings beside them on the wide
   panel and under them on a phone, then Bypass all, New FX, Undo and the sound's Output */
.gx-tiles.fx-sounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 14px; }
.fx-head { display: grid; gap: 2px; }
.fx-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.fx-sound { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.04em; color: var(--ink-50); }
.fx-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 14px; padding: 10px; border: 1px solid var(--rule); border-radius: 6px; }
.fx-io { padding: 0 4px; font-size: var(--text-xs); color: var(--ink-50); }
.fx-arrow { color: var(--ink-30); font-size: var(--text-xs); }
.fx-node { min-height: 36px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: 4px; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.fx-node:hover { border-color: var(--ink); }
.fx-node.is-off { border-style: dashed; color: var(--ink-50); }
.fx-node[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-text); }
.fx-bypassed { margin: 8px 0 0; }
.fx-main { display: grid; gap: 14px; margin-top: 14px; }
.fx-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; min-height: 56px; padding: 0 6px 0 0; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease); }
.fx-row.is-sel { border-color: var(--accent); }
.fx-row.is-drag { position: relative; z-index: 2; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); border-color: var(--ink); }
.fx-row.is-off .fx-text, .fx-row.is-off .fx-icon { opacity: 0.55; }
.fx-glyph { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fx-dots { stroke-width: 2.4; }
.fx-handle { display: grid; place-items: center; align-self: stretch; color: var(--ink-50); cursor: grab; touch-action: none; }
.fx-handle:hover { color: var(--ink); }
.fx-handle:active { cursor: grabbing; }
.fx-handle:focus-visible { outline-offset: -4px; }
.fx-handle.is-pinned { cursor: default; color: var(--ink-30); }
.fx-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 54px; padding: 6px 4px; text-align: left; color: inherit; }
.fx-pick .fx-go { width: 12px; height: 12px; color: var(--ink-30); transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.fx-pick:hover .fx-go, .fx-row.is-sel .fx-go { color: var(--accent); }
.fx-pick:focus-visible { outline-offset: -2px; }
.fx-text { display: grid; gap: 2px; min-width: 0; }
.fx-name { font-size: var(--text-sm); color: var(--ink); }
.fx-say { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--ink-50); overflow-wrap: anywhere; }
.fx-always { padding: 0 10px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); }
.fx-pinned, .fx-bus { margin-top: 10px; }
.fx-ins { min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--rule); border-radius: 6px; }
.fx-ins-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.fx-ins-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.fx-ins-kind { font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-50); }
.fx-draw { display: block; width: 100%; height: 96px; margin: 2px 0 8px; }
.fx-room { height: 120px; }
.fx-roomsay { margin: -4px 0 4px; min-height: 1.2em; }
.fx-sw { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
/* the Delay's divisions: two rows of four, one row of eight on the wide panel */
.dk-slider.gx-moderow.fx-divs { align-items: start; padding: 4px 0; }
.dk-slider.gx-moderow.fx-divs > .gx-rowlabel { padding-top: 8px; }
.fx-divs .gx-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-open { min-height: 36px; padding: 0 10px; font-size: var(--text-xs); }
.fx-open svg { width: 12px; height: 12px; }
.fx-subhead { margin-top: 14px; }
.fx-foot { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.fx-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-bypass[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-text); }
.dk-panel.is-bypass .fx-row .fx-text, .dk-panel.is-bypass .fx-node { opacity: 0.55; }
@media (min-width: 761px) {
  .deck.is-wide .gx-tiles.fx-sounds { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .deck.is-wide .fx-divs .gx-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .deck.is-wide .fx-main { grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.5fr); align-items: start; gap: 16px; }
  .deck.is-wide .fx-foot { grid-template-columns: auto minmax(14rem, 22rem); justify-content: space-between; align-items: center; }
}
/* a Wave sound's wavetable: its name and family, Choose, the chooser, the frames as a stack, its settings */
.wt { margin-top: 10px; }
.wt-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.wt-name { margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); line-height: 1.2; }
.wt-fam { margin-top: 2px; color: var(--ink-50); }
.wt-choose { flex: none; min-height: 40px; }
.wt-stack { display: block; width: 100%; height: 132px; margin: 10px 0 4px; touch-action: none; cursor: ew-resize; }
.wt-stack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt-chooser { margin-top: 10px; padding: 10px; border: 1px solid var(--rule-strong); border-radius: 4px; }
.wt-chooser .dk-note { margin-top: 8px; }
.wt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.wt-item { display: grid; gap: 4px; padding: 6px 8px 8px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--ink-70); text-align: left; font-size: var(--text-sm); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.wt-item:hover { border-color: var(--ink); color: var(--ink); }
.wt-item[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-text); background: color-mix(in oklch, var(--accent) 10%, var(--paper)); }
.wt-thumb { display: block; width: 100%; height: 30px; }
.gx-tiles.wt-fams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.wt-fams .gx-tile, .wt-warps .gx-tile { padding: 0 2px; min-height: 36px; letter-spacing: 0.02em; font-size: 0.66rem; }
@media (min-width: 761px) { .deck.is-wide .wt-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the Generator's home: every sound one tap away */
.gx-tiles.gx-voicego { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 10px 0 12px 1px; border-bottom: 1px solid var(--rule); }
.gx-voicego .gx-tile { min-height: 36px; padding: 0 4px; }

/* Visuals: the preview (the stereo scope, or the scene itself drawn small), the scenes, Geo's shapes, the palette */
.dk-preview { position: relative; }
.gonio { position: relative; }
.dk-gonio { display: block; width: 100%; height: 168px; border: 1px solid var(--rule-strong); border-radius: 4px; }
.gonio-l, .gonio-r { position: absolute; top: 8px; color: var(--ink-30); }
.gonio-l { left: 10px; }
.gonio-r { right: 10px; }
.dk-corr { margin-top: 6px; }
.dk-prev-gl { position: relative; height: 168px; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: 4px; background: #030205; }
.dk-prev-gl .vz-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.dk-prev-gl.is-turnable .vz-gl { touch-action: none; cursor: grab; }
.dk-prev-gl .vz-gl.is-turning { cursor: grabbing; }
.dk-prev-note { position: absolute; left: 12px; right: 12px; bottom: 10px; color: oklch(0.95 0.006 85 / 0.62); pointer-events: none; }
.dk-prev-note:empty { display: none; }
.pill .i-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-scenes, .dk-display { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.vz-scenes .gx-tile, .dk-display .gx-tile { padding: 0 2px; }
.vz-geo { margin-top: 16px; }
.vz-geo .dk-label { margin-bottom: 6px; }
/* Geo's seven shapes: two rows of four, Random across the last two */
.vz-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vz-shapes .gx-tile { padding: 0 4px; }
.vz-shapes .gx-tile:last-child { grid-column: span 2; }
.vz-palrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vz-pals { display: flex; margin-left: -9px; }
.vz-palname { color: var(--ink-70); font-size: var(--text-sm); }
.vz-sw { display: grid; place-items: center; width: 40px; height: 44px; }
.vz-sw span { width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.vz-sw[aria-pressed='true'] span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.vz-sw:focus-visible { outline-offset: -4px; }
.vz-sw-violet span { background: linear-gradient(135deg, #5a1fd1, #3d7bff 40%, #43ffb4 75%, #e2ff8a); }
.vz-sw-pink span { background: linear-gradient(135deg, #00a7b8, #7a4bff 40%, #ff3fa8 70%, #ffe4f3); }
.vz-sw-spectrum span { background: linear-gradient(135deg, #1f7bff, #19d68a 40%, #f2e04a 70%, #ff4a2a); }
.vz-sw-vermilion span { background: linear-gradient(135deg, #5c1408, #c4381a 40%, #f0532c 70%, #ffe3d6); }
/* Camera & motion: a row that opens to the two switches, each with its note */
.dk-cambox { margin-top: 16px; border-top: 1px solid var(--rule); }
.dk-cambox .gx-go { border-bottom: 1px solid var(--rule); }
.dk-cambody { padding: 2px 0 6px; border-bottom: 1px solid var(--rule); }
.dk-swbox + .dk-swbox { border-top: 1px solid var(--rule); }
.dk-swbox .dk-note { margin: -6px 0 0; padding-bottom: 10px; }
.dk-visoff { width: 100%; margin-top: 16px; }

/* the visualizer, full screen: the whole page in the browser's full screen, the scene over it, its title and Leave
   full screen on top, its hints above the dock; the panel, opened from the dock, comes over it */
html.vz-on, html.vz-on body { overflow: hidden; }
.vz { position: fixed; inset: 0; z-index: 100; background: var(--paper); color: var(--ink); overscroll-behavior: contain; touch-action: none; }
.vz[hidden] { display: none; }
/* the moving scenes are lit on black whatever the theme, so their title and hints take the dark theme's colors */
.vz:not([data-scene='scope']) {
  --paper: oklch(0.13 0.003 70);
  --paper-2: oklch(0.17 0.004 70);
  --ink: oklch(0.95 0.006 85);
  --ink-70: oklch(0.95 0.006 85 / 0.74);
  --ink-50: oklch(0.95 0.006 85 / 0.54);
  --ink-30: oklch(0.95 0.006 85 / 0.32);
  --rule: oklch(0.95 0.006 85 / 0.14);
  --rule-strong: oklch(0.95 0.006 85 / 0.34);
  --accent: oklch(0.67 0.21 36);
  --accent-ink: oklch(0.13 0.003 70);
  color-scheme: dark;
  background: #030205;
}
.vz-gl, .vz-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vz-gl[hidden], .vz-cv[hidden] { display: none; }
/* the camera's video is never on screen; the scenes only read its brightness */
.vz-src { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vz-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 28px; background: linear-gradient(to bottom, color-mix(in oklch, var(--paper) 80%, transparent), transparent); }
.vz-meta { min-width: 0; }
.vz-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.01em; }
.vz-sub { margin-top: 4px; color: var(--ink-50); }
.vz-tools { display: flex; flex: none; }
/* the hints sit above the dock and let drags through to the scene */
.vz-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 40px var(--gutter) calc(max(14px, env(safe-area-inset-bottom)) + 84px); background: linear-gradient(to top, color-mix(in oklch, var(--paper) 70%, transparent) 30%, transparent); pointer-events: none; }
.vz-ctl [hidden] { display: none; }
.vz-say, .vz-hint, .vz-corr { flex: 1 1 100%; color: var(--ink-50); }
/* the 3D scenes turn under a drag */
.vz:is([data-scene='lines'], [data-scene='points'], [data-scene='geo']):not(.vz-idle) .vz-gl { cursor: grab; }
.vz .vz-gl.is-turning { cursor: grabbing; }
/* after a few still seconds the title, the hints and the dock fade, and the pointer with them */
.vz-bar, .vz-ctl { transition: opacity 0.6s var(--ease); }
.vz.vz-idle { cursor: none; }
.vz.vz-idle .vz-bar, .vz.vz-idle .vz-ctl { opacity: 0; pointer-events: none; }
html.vz-on .deck { z-index: 103; }
html.vz-on .dk-scrim { z-index: 101; }
@media (min-width: 601px) {
  html.vz-on .deck { top: max(16px, env(safe-area-inset-top)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}
/* Over site: under the header, the panel and the dock, drawn on black and blended by difference at the Intensity
   chosen, so black leaves the page as it is, and every click passes through */
.vz-gl.vz-over { position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: difference; opacity: var(--vz-int, 0.6); }

/* ---------- the dock: the minimized player, shared by browsing, Over site and Fullscreen ---------- */
.vz-dock { --paper: var(--panel); --paper-2: var(--panel-2); position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 48; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(56rem, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.vz-dock > * { pointer-events: auto; }
.vz-dock [hidden] { display: none; }
.dk-dockbar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 6px; transition: opacity 0.6s var(--ease); }
.dk-dock-play { width: 44px; height: 44px; }
.dk-dock-meta { flex: 1 1 16rem; min-width: 0; }
.dk-dock-title { font-family: var(--font-display); font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-dock-sub { margin-top: 2px; color: var(--ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-dock-line { flex: 0 1 96px; width: 96px; min-width: 0; height: 28px; }
.dk-dockbar.is-vis .dk-dock-line { display: none; }
.dk-slider.dk-dock-vol { flex: 0 1 12rem; min-width: 0; grid-template-columns: auto minmax(3.5rem, 1fr) 2.8rem; padding: 0 4px; }
.dk-dock-ctl, .dk-dock-off, .dk-dock-cam, .dk-dock-scroll, .dk-dock-restart { flex: none; }
.dk-dock-cam { gap: 6px; padding: 0 12px; }
.dk-dock-scroll { gap: 6px; padding: 0 12px; }
.dk-dock-scroll[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-text); }
.dk-dock-scroll[aria-pressed='true'] .i-box, .dk-dock-scroll[aria-pressed='false'] .i-boxon { display: none; }
.dk-dock-restart { width: 44px; padding: 0; }
.dk-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.vz-note { max-width: min(26rem, 100%); padding: 10px 14px; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; color: var(--ink-70); }
.vz-note:empty { display: none; }
html.dk-docked body { padding-bottom: 88px; }
html.vz-on .vz-dock { z-index: 102; }
html.vz-still .vz-dock { opacity: 0; }
html.vz-still .vz-dock > * { pointer-events: none; }
@media (max-width: 1180px) {
  .dk-dock-line { display: none; }
}
@media (max-width: 900px) {
  .dk-dock-vol { display: none; }
}
@media (max-width: 600px) {
  /* on a phone every dock button is an icon, so the scroll's box, Restart audio and the camera's mark fit beside them */
  .dk-dockbar { gap: 6px; padding: 6px; }
  .dk-dock-word, .dk-dock-ctl span { display: none; }
  .dk-dock-off, .dk-dock-scroll, .dk-dock-restart, .dk-dock-ctl, .dk-dock-cam { width: 40px; padding: 0; }
}

/* ---------- the phone: the panel as a bottom sheet ---------- */
.dk-scrim { position: fixed; inset: 0; z-index: 48; background: oklch(0 0 0 / 0.28); touch-action: none; }
.dk-scrim[hidden] { display: none; }
html.dk-lock, html.dk-lock body { overflow: hidden; }
@media (max-width: 600px) {
  .deck { z-index: 52; top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: min(max(66vh, 26rem), calc(100vh - 24px)); max-height: min(max(66dvh, 26rem), calc(100dvh - 24px)); border-width: 1px 0 0; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); opacity: 1; clip-path: none; transform: translateY(105%); transition: transform 0.4s var(--ease), max-height 0.35s var(--ease); }
  .deck.is-open { clip-path: none; transform: none; }
  .dk-scrim { z-index: 51; }
  .deck.is-tall { max-height: calc(100vh - 12px); max-height: calc(100dvh - max(12px, env(safe-area-inset-top))); }
  .deck.is-wide { width: auto; }
  .deck.is-dragging { transition: none; }
  .dk-handle { display: grid; place-items: center; flex: none; width: 100%; height: 26px; touch-action: none; cursor: grab; }
  .dk-handle span { width: 40px; height: 4px; border-radius: 999px; background: var(--rule-strong); }
  .dk-handle:focus-visible { outline-offset: -4px; }
  /* Full size: the sheet the whole screen and back; at full size the minimize is a close */
  .dk-full { display: grid; }
  .deck.is-tall .dk-full .i-full, .deck.is-tall .dk-min .i-min { display: none; }
  .deck.is-tall .dk-full .i-unfull, .deck.is-tall .dk-min .i-close { display: block; }
  .dk-head { height: 40px; padding-left: 16px; border-bottom: 0; }
  .dk-strip { padding: 0 16px; }
  .dk-transport { padding-top: 2px; }
  .dk-body { padding: 14px 16px 16px; }
  .dk-slider { grid-template-columns: 4.4rem minmax(0, 1fr) 3.8rem; }
  .dk-slider.has-mod, .gx-body .dk-slider:not(.gx-moderow) { grid-template-columns: 4.4rem minmax(0, 1fr) 3.8rem 28px; }
  .dk-slider.gx-moderow { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .xy { height: 150px; }
  .dk-gonio, .dk-prev-gl { height: 140px; }
  /* an open sound has the sheet to itself, with All sounds to go back */
  .gx-view.is-focus > .gx-group, .gx-view.is-focus > .gx-head, .gx-view.is-focus .gx-line:not(.is-open) { display: none; }
  .gx-view.is-focus > .gx-rack-back { display: inline-flex; margin: -8px 0 6px; }
  .gx-view.is-focus .gx-rack { border-top: 0; }
}
@media (max-width: 369px) {
  /* the narrowest phones: the header's trace steps aside so Play lab stays on one line beside Full size */
  .dk-head .dk-line { display: none; }
}
@media (max-width: 480px) {
  .dk-transport { gap: 12px; }
}
/* a short window: the whole panel scrolls, the player with it */
@media (max-height: 540px) and (min-width: 601px) {
  .deck { overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 72px; }
  .dk-body { flex: none; overflow: visible; }
  .gx-sticky { top: 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1fr; align-content: end;
  padding-top: 110px; padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: var(--gutter); align-items: end; }
.hero-copy { min-width: 0; }
.hero-eyebrow { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; color: var(--ink-50); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero-eyebrow .dot { display: inline-block; width: 8px; height: 8px; background: var(--accent); vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
.hero-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; line-height: 0.86;
  font-size: var(--text-hero); text-transform: uppercase; margin-left: -0.04em;
  display: flex; flex-wrap: wrap;
}
.hero-title .ln { display: block; white-space: nowrap; width: 100%; }
/* side headroom in the mask: the tight tracking lets letters like S overhang their box */
.hero-title .ch { display: inline-block; clip-path: inset(0 -0.2em 100% -0.2em); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
.hero-title .thin { font-weight: 300; letter-spacing: -0.03em; }
@keyframes rise { to { clip-path: inset(-10% -0.2em -10% -0.2em); } }
/* arriving from CSMAKAR by the switch, the page opens from the title's full stop (sine-square.js): the title is there
   already, whole */
html.ss-came .hero-title .ch { animation: none; clip-path: none; }
.hero-sub { margin-top: clamp(1.5rem, 3vw, 2.6rem); max-width: 48ch; color: var(--ink-70); font-size: var(--text-lg); line-height: 1.4; font-weight: 400; letter-spacing: -0.005em; }
.hero-links { margin-top: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); }
.pill:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill svg { width: 12px; height: 12px; }

.hero-media { position: relative; min-width: 0; }
.hero-media figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; clip-path: inset(0 0 100% 0); animation: unveil 1.3s var(--ease) 0.5s forwards; }
@keyframes unveil { to { clip-path: inset(0 0 0 0); } }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.02); }
.hero-media figcaption { position: absolute; left: 0; bottom: 0; display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--paper); color: var(--ink-70); }
/* Fig. 01 in turn (main.js): the next picture comes in over the one shown, the caption changing with it */
.hero-media img.hero-next { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.hero-media img.hero-next.is-in { opacity: 1; }
.hero-media figcaption { transition: opacity 0.5s var(--ease); }
.hero-media figcaption.is-out { opacity: 0; }
.hero-vert {
  position: absolute; right: calc(-1 * var(--gutter) + 10px); bottom: 0; white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed;
  color: var(--ink-50); font-size: 0.9rem; letter-spacing: 0.3em; line-height: 1;
}
.hero-vert .hair { display: inline-block; width: 1px; height: 48px; background: var(--rule-strong); vertical-align: middle; margin: 10px 0; }
/* Loose type (Cyrus's brief, 5 Oct 2026): the title's full stop as a small weighted shape: its button (44 px or more,
   over the full stop), its PLEASE DISTURB. hint, and the canvases for the dot with its contours (over the page) and the
   field's lines (behind the type). Nothing here restyles the title */
.hero-copy { position: relative; }
.lt-dot { position: absolute; z-index: 1; padding: 0; border-radius: 999px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.lt-dot.is-held { cursor: grabbing; }
.lt-dot[hidden] { display: none; }
.lt-hint { position: absolute; z-index: 1; white-space: nowrap; color: var(--accent-text); pointer-events: none; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 70ms linear, clip-path 70ms linear; }
.lt-hint.is-below { clip-path: inset(0 0 100% 0); }
.lt-hint.is-on { opacity: 1; clip-path: inset(0 0 0 0); transition-duration: 105ms; transition-timing-function: var(--ease); }
.lt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lt-fx, .lt-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lt-fx { z-index: 47; }
.lt-field { z-index: -1; }
.lt-fx[hidden], .lt-field[hidden] { display: none; }
/* the paragraph's words: plain text until the dot moves one, a box of its own only while it moves */
.lt-w.is-moved { display: inline-block; transform-origin: 50% 85%; }


/* ---------- ticker ---------- */
.ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; white-space: nowrap; padding: 12px 0; }
.ticker-track { display: inline-flex; gap: 0; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); padding: 0 1.1rem; }
.ticker span i { font-style: normal; color: var(--accent); padding-right: 1.1rem; }
.ticker span.jp { text-transform: none; font-family: var(--font-jp); letter-spacing: 0.25em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section + .section { padding-top: 0; }
section[id] { scroll-margin-top: 84px; }
.sec-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gutter); align-items: end; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head .idx { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--accent); display: flex; gap: 10px; align-items: baseline; padding-bottom: 0.45rem; }
.sec-head .idx::before { content: ''; width: 10px; height: 10px; background: var(--accent); display: inline-block; transform: translateY(1px); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: var(--text-2xl); text-transform: uppercase; line-height: 0.95; }
.sec-head .jp-label { color: var(--ink-50); font-size: 0.95rem; letter-spacing: 0.2em; padding-bottom: 0.5rem; white-space: nowrap; }
.sec-intro { max-width: 62ch; color: var(--ink-70); font-size: var(--text-lg); line-height: 1.45; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-intro strong { color: var(--ink); font-weight: 500; }

/* reveals */
.rv { opacity: 1; }
.js .rv { opacity: 0; clip-path: inset(0 0 12% 0); transition: opacity 0.9s var(--ease), clip-path 0.9s var(--ease); }
.js .rv.in { opacity: 1; clip-path: inset(0 0 0 0); }
.js .rv[data-delay='1'] { transition-delay: 0.08s; }
.js .rv[data-delay='2'] { transition-delay: 0.16s; }
.js .rv[data-delay='3'] { transition-delay: 0.24s; }

/* ---------- work grid ---------- */
.work-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.card { position: relative; grid-column: span 2; display: flex; flex-direction: column; min-width: 0; }
.card.big { grid-column: span 4; }
.card.big .card-img { aspect-ratio: 16 / 10; }
.card.tall .card-img { aspect-ratio: 4 / 5; }
.card-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--img-bg); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.card:hover .card-img img { transform: scale(1.035); }
.card-img .tag { position: absolute; top: 0; left: 0; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 12px); padding: 7px 10px; background: var(--paper); color: var(--ink); }
.card-img .tag b { font-weight: 500; color: var(--accent); }
.card-img .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.card:hover .card-img .bar { transform: scaleX(1); }
.card-body { padding-top: 1rem; display: grid; gap: 0.6rem; }
.card-body h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; display: flex; align-items: baseline; gap: 12px; }
.card-body h3 .yrs { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-50); font-weight: 400; }
.card-body .role { color: var(--ink-50); }
.card-body p { color: var(--ink-70); font-size: var(--text-sm); line-height: 1.55; max-width: 60ch; }
.card.big .card-body p { font-size: var(--text-base); }
.links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; padding-top: 0.3rem; }
.links a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding: 4px 0; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.links a:hover { color: var(--accent); border-color: var(--accent); }
.links a::after { content: '↗'; font-size: 0.9em; }
.card .stamp { position: absolute; top: 12px; right: 12px; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
/* a card with a stamp: its tag keeps clear of the stamp, its words wrapping where the card is narrow (two cards a row,
   just over 560px wide, where they touched) */
.card-img:has(.stamp) .tag { max-width: calc(100% - 145px); }

/* ---------- timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: 1fr; }
.tl-line { position: absolute; left: calc(var(--tl-col) - 1px); top: 0; bottom: 0; width: 1px; background: var(--rule); }
.tl-line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.timeline { --tl-col: 7.5rem; }
.tl-item { display: grid; grid-template-columns: var(--tl-col) 1fr; gap: 0 var(--gutter); padding: 1.2rem 0; border-bottom: 1px solid var(--rule); position: relative; }
.tl-item:last-child { border-bottom: 0; }
.tl-item .yr { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1; color: var(--ink); position: relative; }
.tl-item .yr::after { content: ''; position: absolute; right: -4px; top: 0.35em; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--ink); transform: translateX(50%); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.tl-item.in .yr::after { background: var(--accent); border-color: var(--accent); }
.tl-item .what { display: grid; gap: 0.3rem; max-width: 70ch; }
.tl-item .what h3 { font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.25; }
.tl-item .what p { color: var(--ink-70); font-size: var(--text-sm); line-height: 1.55; }
.tl-item .what .mono { color: var(--ink-50); }

/* ---------- credits table ---------- */
.credits { border-top: 1px solid var(--ink); }
.credits .row { display: grid; grid-template-columns: 4.5rem 1.3fr 1.6fr 1.1fr 6rem; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); transition: background 0.3s var(--ease); position: relative; }
.credits .row:hover { background: var(--paper-2); }
.credits .row:hover::before { content: ''; position: absolute; left: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: 4px; background: var(--accent); }
.credits .hd { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); border-bottom: 1px solid var(--rule-strong); }
.credits .hd > span { font: inherit; letter-spacing: inherit; color: inherit; }
.credits .hd:hover { background: none; }
.credits .hd:hover::before { display: none; }
.credits .y { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-50); }
.credits .a { font-weight: 500; }
.credits .t { color: var(--ink-70); }
.credits .t em { font-style: italic; }
.credits .r { color: var(--ink-50); font-size: var(--text-sm); }
.credits .l { text-align: right; }
.credits .l a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-50); min-height: 32px; display: inline-flex; align-items: center; }
.credits .l a:hover { color: var(--accent); }
.credits-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.2rem; color: var(--ink-50); }

/* ---------- stages ---------- */
.stages { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.stage { padding: 1.4rem 0; border-top: 1px solid var(--ink); display: grid; gap: 0.6rem; }
.stage:first-child { border-top: 0; padding-top: 0; }
.stage h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.stage .meta { color: var(--ink-50); }
.stage p { color: var(--ink-70); font-size: var(--text-sm); max-width: 60ch; }
.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.4rem 1rem; padding-top: 0.6rem; }
.dates li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: var(--text-sm); color: var(--ink-70); padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.dates li .d { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink); }
.stage-media { position: sticky; top: 96px; display: grid; gap: 1rem; }
.stage-media figure { margin: 0; position: relative; overflow: hidden; }
.stage-media img { width: 100%; height: auto; }
.stage-media figcaption { padding: 8px 0 0; color: var(--ink-50); }
.stage-media .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- notes / quotes ---------- */
.notes { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); }
.note { grid-column: span 6; padding: 1.4rem 0 0; border-top: 1px solid var(--ink); display: grid; gap: 1rem; align-content: start; }
.note.wide { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.note blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; font-size: var(--text-xl); line-height: 1.12; text-wrap: pretty; }
.note.wide blockquote { font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.02; font-weight: 700; }
.note blockquote::before { content: '“'; color: var(--accent); }
.note blockquote::after { content: '”'; color: var(--accent); }
.note .who { color: var(--ink-50); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.note .who a { color: var(--ink-70); border-bottom: 1px solid var(--rule-strong); }
.note .who a:hover { color: var(--accent); border-color: var(--accent); }
.note .story { color: var(--ink-70); font-size: var(--text-sm); line-height: 1.6; max-width: 62ch; }
.note figure { margin: 0; }
.note figure img { width: 100%; }
.note figcaption { padding-top: 8px; color: var(--ink-50); }

/* ---------- machines ---------- */
.machines { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.machines .lead { font-size: var(--text-lg); color: var(--ink-70); line-height: 1.45; max-width: 46ch; }
.machines .lead strong { color: var(--ink); font-weight: 500; }
.spec { margin-top: 1.6rem; border-top: 1px solid var(--ink); }
.spec li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.spec li .k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); padding-top: 0.2em; }
.spec li .v { color: var(--ink-70); }
.spec li .v a { border-bottom: 1px solid var(--rule-strong); }
.spec li .v a:hover { border-color: var(--accent); }
/* a name linked inside running text shows a hairline, like the other inline links */
.tl-item p a, .stage p a, .card-body p a { border-bottom: 1px solid var(--rule-strong); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.tl-item p a:hover, .stage p a:hover, .card-body p a:hover { border-color: var(--accent); }
.mach-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mach-media figure { margin: 0; }
.mach-media figure.full { grid-column: span 2; }
.mach-media figcaption { padding-top: 8px; color: var(--ink-50); }
.rig { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 8px; }
.rig li { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--rule-strong); padding: 6px 10px; color: var(--ink-70); }

/* ---------- next ---------- */
.next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.next-item { border-top: 1px solid var(--ink); padding-top: 1.2rem; display: grid; gap: 0.6rem; align-content: start; }
.next-item h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: var(--text-2xl); line-height: 0.95; text-transform: uppercase; }
.next-item p { color: var(--ink-70); max-width: 52ch; }
.next-item .status { display: inline-flex; gap: 10px; align-items: center; color: var(--ink-50); }
.next-item .status::before { content: ''; width: 8px; height: 8px; background: var(--accent); animation: blink 2.4s var(--ease) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.next-item .status.still::before { animation: none; background: var(--ink); }
.stage .links { margin-top: 0.9rem; }
.next-item figure { margin: 0.4rem 0 0; }
.next-item figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
/* word of new devices, the newsletter (docs/NEWSLETTER.md): a row of Next's own under its two items, ruled as they are,
   its words in line with the first and its form with the second; its square still (nothing is upcoming), its katakana
   at the row's end, as a section head has it. The field is a line on the grid that the button sits on; the line turns
   vermilion as the field is used, the button as it is pointed at. One column where Next has one */
.nx-news { position: relative; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.nx-news, .nx-at { scroll-margin-top: 84px; }
.nx-news .status { grid-column: 1 / -1; }
.nx-news .status::before { animation: none; }
.nx-news .status .jp { margin-left: auto; color: var(--ink-30); font-size: 0.95em; letter-spacing: 0.2em; text-transform: none; }
.nx-words { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.nx-form { display: grid; gap: 0.8rem; align-content: start; min-width: 0; padding-top: 0.35rem; }
.nx-label { color: var(--ink-50); }
.nx-row { display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid var(--ink); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.nx-row:focus-within { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.nx-row:has([aria-invalid='true']) { border-color: var(--accent); }
.nx-field { flex: 1 1 auto; min-width: 0; min-height: 52px; margin: 0; padding: 0 14px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: max(16px, var(--text-lg)); letter-spacing: -0.005em; }
.nx-field:focus-visible { outline: none; }
.nx-field:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 60px var(--paper) inset; }
.nx-field[aria-invalid='true'] { color: var(--accent-text); }
.nx-join { flex: none; display: inline-flex; align-items: center; gap: 0.8em; min-height: 52px; margin-bottom: -1px; padding: 0 18px 0 22px; background: var(--ink); color: var(--paper); letter-spacing: 0.1em; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.nx-join svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.nx-join:focus-visible { background: var(--accent); color: var(--on-accent); }
.nx-join:focus-visible svg { transform: translateX(3px); }
.nx-news .nx-fine { max-width: 56ch; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-50); }
/* Take me off, in the small print's own words: a press, as Join is, with the same field (the hit a little taller than
   the line, which keeps its height) */
.nx-leave { padding: 6px 0; margin: -6px 0; color: var(--ink-70); text-decoration: underline 1px var(--rule-strong); text-underline-offset: 0.25em; transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease); }
/* pointed at with a mouse only: a tap leaves no colour behind on a touch screen */
@media (hover: hover) {
  .nx-join:hover { background: var(--accent); color: var(--on-accent); }
  .nx-join:hover svg { transform: translateX(3px); }
  .nx-leave:hover { color: var(--accent-text); text-decoration-color: var(--accent); }
}
.nx-form[aria-busy='true'] :is(.nx-join, .nx-leave) { opacity: 0.5; cursor: progress; }
/* how it went: the script's line (holding its height, so the page does not move as it speaks), or, without the script,
   the line the anchor the page came back to names; the script's line once it has spoken stands for them */
.nx-news .nx-said, .nx-news .nx-note { max-width: 56ch; font-size: var(--text-sm); line-height: 1.5; color: var(--ink); }
.nx-said { min-height: 1.5em; }
.nx-said:not(:empty)::before, .nx-note::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); vertical-align: 0.06em; }
.nx-news :is(.nx-said, .nx-note).is-bad { color: var(--accent-text); }
.nx-note, html:not(.js) .nx-said { display: none; }
#news-joined:target ~ .nx-form [data-said='joined'], #news-left:target ~ .nx-form [data-said='left'], #news-bad:target ~ .nx-form [data-said='bad'], #news-slow:target ~ .nx-form [data-said='slow'], #news-full:target ~ .nx-form [data-said='full'], #news-error:target ~ .nx-form [data-said='error'] { display: block; }
#news .nx-form.is-live .nx-note { display: none; }
.nx-at { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* for bots only: out of sight and out of the keyboard's way */
.nx-trap { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  .nx-news { grid-template-columns: minmax(0, 1fr); }
  .nx-news, .nx-at { scroll-margin-top: calc(124px + var(--gutter)); }
}

/* ---------- media: video and press links ---------- */
.media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.media-h { color: var(--ink-50); padding-bottom: 0.8rem; border-bottom: 1px solid var(--ink); }
.media-list { list-style: none; margin: 0; padding: 0; }
.media-list li { border-bottom: 1px solid var(--rule); }
.media-list a { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 0.4rem 1rem; align-items: baseline; padding: 1rem 0; transition: color 0.3s var(--ease); }
.media-list a::after { content: '↗'; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-50); transition: transform 0.4s var(--ease), color 0.3s var(--ease); }
.media-list .src { color: var(--accent); letter-spacing: 0.1em; }
.media-list .t { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; }
.media-list .d { display: block; margin-top: 0.35rem; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.55; letter-spacing: 0; max-width: 60ch; }
.media-list a:hover::after, .media-list a:focus-visible::after { color: var(--accent); transform: translate(2px, -2px); }

/* ---------- gallery ---------- */
.g-filters { display: flex; flex-wrap: wrap; column-gap: clamp(1.1rem, 2.4vw, 2.2rem); row-gap: 0; align-items: center; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
/* each filter as the nav's sections are (12 Oct 2026, Cyrus: "buttons need more finesse"; they were pills, the one
   chosen a solid block): its name in mono, its count of pictures after it, faint; the one chosen in full ink, its
   count in the accent, the accent's line under it */
.g-filters button { font: inherit; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); background: none; border: 0; border-radius: 0; padding: 0; min-height: 40px; display: inline-flex; align-items: center; gap: 0.55em; position: relative; cursor: pointer; transition: color 0.3s var(--ease); }
.g-filters button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.g-filters button:hover, .g-filters button.active { color: var(--ink); }
.g-filters button.active::after { transform: scaleX(1); }
/* pointed at, a faint line draws in under it (where there is a mouse: a touch would leave it there) */
@media (hover: hover) { .g-filters button:hover:not(.active)::after { transform: scaleX(1); background: var(--ink-30); } }
.g-filters .g-n { font-weight: 500; letter-spacing: 0.04em; color: var(--ink-30); transition: color 0.3s var(--ease); }
.g-filters button:hover .g-n { color: var(--ink-50); }
.g-filters button.active .g-n { color: var(--accent); }
.g-count { margin-left: auto; font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--ink-50); }
/* the six categories (Black Line … Muffwiggler) on a row of their own, under the four kinds, a hairline between */
.g-break { flex-basis: 100%; height: 1px; background: var(--rule); }
.gallery { columns: 4 240px; column-gap: clamp(1rem, 2vw, 1.6rem); }
.g-item { break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.6rem); display: grid; gap: 0.55rem; }
.g-item.hide { display: none; }
/* the archive stays closed until "Show more"; without JavaScript it is simply shown */
.js .g-archive:not(.open) { display: none; }
.g-archive { margin-top: clamp(1rem, 2vw, 1.6rem); }
/* "Show N more" is the gallery's one call to action, so it takes the accent, centred on a rule */
.g-more-row { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem); margin: clamp(0.6rem, 2vw, 1.2rem) 0 clamp(0.4rem, 1vw, 0.8rem); }
.g-more-row[hidden] { display: none; }
.g-more-row::before, .g-more-row::after { content: ''; flex: 1; height: 1px; background: var(--rule-strong); }
.g-more { display: inline-flex; align-items: center; gap: 0.8em; font-size: var(--text-sm); letter-spacing: 0.1em; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 12px 22px 12px 24px; min-height: 48px; cursor: pointer; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.g-more-icon { width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(45deg); transition: transform 0.4s var(--ease); }
.g-more:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.g-more:hover .g-more-icon { transform: translateY(0.05em) rotate(45deg); }
.g-more:active { transform: scale(0.97); }
.g-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* a ring that rings out twice when the button first comes into view */
.g-more.nudge { animation: g-more-ring 1.6s var(--ease) 0.2s 2; }
@keyframes g-more-ring {
  from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent); }
  to { box-shadow: 0 0 0 16px color-mix(in oklch, var(--accent) 0%, transparent); }
}
.g-btn { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; position: relative; overflow: hidden; }
.g-btn img { display: block; width: 100%; height: auto; transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.g-btn::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.g-btn:hover img, .g-btn:focus-visible img { transform: scale(1.025); }
.g-btn:hover::after, .g-btn:focus-visible::after { transform: scaleX(1); }
.g-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.g-item figcaption { display: grid; gap: 2px; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink-70); line-height: 1.4; }
.g-item figcaption .cat { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.g-item figcaption .credit { color: var(--ink-50); }
.g-note { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); }
.g-note a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.g-note a:hover { color: var(--accent); border-color: var(--accent); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.lightbox::backdrop { background: color-mix(in oklch, var(--ink) 92%, transparent); backdrop-filter: blur(6px); }
[data-theme="dark"] .lightbox::backdrop { background: color-mix(in oklch, var(--paper) 92%, transparent); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox figure { margin: 0; display: grid; gap: 0.8rem; justify-items: center; padding: clamp(1rem, 4vw, 3rem); max-width: 100%; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 78vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lightbox figcaption { color: var(--paper); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; max-width: 70ch; }
[data-theme="dark"] .lightbox figcaption { color: var(--ink); }
.lb-close { position: fixed; top: 18px; right: var(--gutter); font: inherit; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: none; border: 1px solid color-mix(in oklch, var(--paper) 40%, transparent); border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer; }
[data-theme="dark"] .lb-close { color: var(--ink); border-color: var(--rule-strong); }
.lb-close:hover { border-color: var(--accent); color: var(--accent); }
/* Room Service's popup (room-service/) keeps its own look; the site's focus ring is drawn inside its Close, where
   the popup's edge and the room under the bar would cut it */
#room-service-host .rs-host-bar button:focus-visible { outline-offset: -4px; }
/* Unlicensed Operator's popup (unlicensed-operator/) has the look Room Service's has, the same focus ring inside its
   Close, and every bar's left (the logo, a link home like the header's, and the synth's glyph before its name: barName,
   below). Where the screen has
   the room, the popup takes the instrument's own shape: as wide as lets all of it (1536 by 1024, scaled) show under the
   bar, and no taller, so none of it is cut off below and no empty space is left under it. With the cassette tray out
   the synth is 1536 by 1277, and the popup grows to that shape (data-tray, set by unlicensed-operator-site.js), narrower
   only where the screen is too short for it at full width, so the tray and the transport under it never need scrolling
   (Cyrus, 6 Oct 2026: "window should be longer as you have to scroll when you open cassette"). On a phone, and on a
   screen too short for that, it is the package's popup as sent */
#unlicensed-operator-host .uo-host-bar button:focus-visible { outline-offset: -4px; }
/* one Close (Cyrus, 6 Oct 2026: "redundant closes"). In Future, which every visit starts in, the bar's, at its top
   right as on every device, the one drawn on the faceplate put away (operator-future.css; Cyrus, 9 Oct 2026: "make the
   designs unified and logical"). In Vintage, the photograph's own, beside its Enable Sound, where a mouse can reach it;
   there on a touch screen the bar keeps its Close, the photograph's being too small to tap (unlicensed-operator-site.js
   marks the popup with its look) */
@media (min-width: 721px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
  #unlicensed-operator-host[data-look='vintage'] .uo-host-bar > button { display: none; }
}
/* the synth's look (Cyrus, 7 Oct 2026: "there should be a switch that makes it go from vintage to future mode"):
   Vintage and Future side by side at the bar's right, before the synth's sound (the group, below), the one in use
   filled warm white, each a full finger tall to tap (unlicensed-operator-site.js puts it there; operator-future.js is
   the Future look). Until the Future look is in a new frame, the frame is not shown, so the photograph never flashes
   first. On a narrow phone the note about saved cassettes takes the row under the group's */
#unlicensed-operator-host .uo-site-look { display: inline-flex; flex: none; margin: 0; border: 1px solid #3c3d36; }
#unlicensed-operator-host .uo-host-bar .uo-site-look button { position: relative; min-width: 0; min-height: 30px; padding: 6px 11px; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.2px; text-transform: uppercase; color: #a9a79b; }
#unlicensed-operator-host .uo-host-bar .uo-site-look button::before { content: ''; position: absolute; inset: -7px 0; }
#unlicensed-operator-host .uo-host-bar .uo-site-look button[aria-pressed='true'] { background: #eeeae0; color: #0b0c0a; cursor: default; }
#unlicensed-operator-host .uo-host-bar .uo-site-look button[aria-pressed='false']:hover { color: #ff602b; }
#unlicensed-operator-host[data-look-pending] > iframe { visibility: hidden; }
@media (max-width: 520px) {
  #unlicensed-operator-host .uo-host-bar .uo-site-note { order: 3; }
}

/* no white as a device opens (Cyrus, 7 Oct 2026: "the entire site flashes white in dark mode when i load any tool on
   load"). Each popup is dark (color-scheme: dark), and its frame holds a blank page, light, until the device's own page
   arrives; where the frame's scheme and its page's differ, the browser paints the page on an opaque canvas of the page's
   scheme, white for the blank one, until the device has painted (in Safari, seconds). The frames are light, as the blank
   page is, so it is see-through over the popup's dark ground, and a page dark by its own scheme (Room Service's, Polite
   Disorder's, Registration Error's, Wrong Division's, Matter / Field's) gets a dark canvas. Light, not normal: a frame of the normal
   scheme takes the scheme the page declares in its head (dark, in the dark theme), which brought the white back. The
   Operator's frame is not shown until its look is in (above) */
:is(#soft-scope-host, #type-damage-host, #room-service-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) > iframe { color-scheme: light; }
/* Type Damage's popup (type-damage/) is the package's, with every bar's left (the logo, a link home, and its glyph
   before its name: barName, below); the editor itself carries no artist name, as approved */
/* Soft Scope's popup (soft-scope/) is the site's, in the instrument's own colours, with every bar's left (the logo, a
   link home, and its glyph before its name: barName, below). One Close: the bar's, at its top right as on every device,
   at every width (Cyrus, 9 Oct 2026: "make the designs unified and logical"); the instrument's own × is put away over
   the site (soft-scope-site.js), and the popup still closes through it */
/* Polite Disorder's popup (polite-disorder/) is the site's, in the instrument's own colours. Its bar's left is every
   bar's (barName, below); the instrument's own logo, at its top left on its own page, is put away over the site
   (polite-disorder-site.js), as Room Service's is. The instrument has no Close of its own, so the bar keeps its Close
   everywhere */
/* under each device's name, what happens to what is saved in it (the shelf: unlicensed-operator-site.js,
   type-damage-site.js, soft-scope-site.js), and how its sending went; smaller and quieter than the name, in the bar's
   own height */
#unlicensed-operator-host .uo-site-label,
#type-damage-host .td-site-label,
#soft-scope-host .ss-site-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#unlicensed-operator-host .uo-site-note,
#type-damage-host .td-site-note,
#soft-scope-host .ss-site-note { font-size: 10px; line-height: 1.3; letter-spacing: 0.3px; opacity: 0.62; }
/* on a narrow phone the note takes a row of its own under the name and Close, lined up with the name */
@media (max-width: 520px) {
  dialog#unlicensed-operator-host .uo-host-bar,
  dialog#type-damage-host .td-host-bar,
  dialog#soft-scope-host .ss-host-bar { flex-wrap: wrap; gap: 0; }
  #unlicensed-operator-host .uo-host-bar > span,
  #unlicensed-operator-host .uo-site-label,
  #type-damage-host .td-host-bar > span,
  #type-damage-host .td-site-label,
  #soft-scope-host .ss-host-bar > span,
  #soft-scope-host .ss-site-label { display: contents; }
  :is(#unlicensed-operator-host, #type-damage-host, #soft-scope-host) :is(.dev-home, .dev-glyph) { margin-right: 11px; }
  #unlicensed-operator-host .uo-site-label > span:first-child,
  #type-damage-host .td-site-label > span:first-child,
  #soft-scope-host .ss-site-label > span:first-child { flex: 1 1 0; min-width: 0; }
  #unlicensed-operator-host .uo-host-bar > button,
  #type-damage-host .td-host-bar > button,
  #soft-scope-host .ss-host-bar > button { order: 1; }
  #unlicensed-operator-host .uo-site-note,
  #type-damage-host .td-site-note,
  #soft-scope-host .ss-site-note { order: 2; flex: 1 0 100%; padding: 0 0 8px 78px; }
}
/* ---------- the left of every bar, the same on each (device-sound.js: barName) ---------- */
/* Cyrus, 9 Oct 2026: "we should probably unify logo and left side as well", then "can we use the instrument icon
   alongside the cyrusrex logo to make it even more muscle memory which is which": the site's logo, a link home, a fine
   rule, the device's own glyph from the devices list (its lines in the bar's ink, its one accent in the logo's orange,
   as in the list), then its name, in the bar's own type on every device. The device's own logo inside it is put away
   over the site, so there is one. Close, at the bar's other end, in the same type on every device */
dialog:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [class$="-host-bar"] > .dev-name { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.4px; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-home { display: block; flex: none; padding-right: 11px; border-right: 1px solid color-mix(in srgb, currentColor 24%, transparent); color: inherit; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-home:hover { color: inherit; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-logo { display: block; width: auto; height: 22px; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-glyph { flex: none; width: 22px; height: 22px; --accent: #fd501b; --ink-30: color-mix(in srgb, currentColor 40%, transparent); }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-title { min-width: 0; overflow-wrap: anywhere; }
dialog:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [class$="-host-bar"] > button { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; letter-spacing: normal; }
/* on a narrow phone the three with a line under the name lay their parts out in the bar's own rows (above): the name
   on the first, with Close, and the line under it after the tools */
@media (max-width: 520px) {
  dialog:is(#unlicensed-operator-host, #type-damage-host, #soft-scope-host) [class$="-host-bar"] > .dev-name { display: contents; }
  :is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-name { letter-spacing: 0.8px; }
}
/* ---------- a device's sound, in one place on each (device-sound.js) ---------- */
/* Room Service, Unlicensed Operator and Soft Scope wait for their own Enable sound, each in a place of its own; each
   bar has it now at its top right, before Close, in one group with the synth's Vintage and Future (Cyrus, 9 Oct 2026:
   "Any audio tool that requires hitting enable audio needs to be clear where that button is or we can unify placement
   of button across devices in top menus"). Its words in the bar's own type, as Vintage and Future have them: while the
   sound is off, Enable sound, the words and the line round them in the logo's orange and its light blinking (still, for
   reduced motion); once it is on, Sound on, in the bar's own colour, the light steady. A full finger tall to tap. On a
   phone and in a window too narrow for the bar's one row, the group takes the row under the name, at its right, under
   Close (Vintage and Future at its left, lined up with the name), so nothing in the bar is squeezed */
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0 6px 0 auto; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound { position: relative; display: inline-flex; align-items: center; gap: 9px; min-width: 0; min-height: 30px; margin: 0; padding: 6px 11px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: #fd501b; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound::before { content: ''; position: absolute; inset: -7px 0; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound:hover { color: #ff7a4d; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound.is-on { color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound.is-on:hover { color: #ff602b; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound:disabled { opacity: 0.45; cursor: default; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-sound:disabled:hover { color: #fd501b; }
.dev-sound i { flex: none; width: 6px; height: 6px; background: #fd501b; animation: dev-sound-call 1.4s steps(1, end) infinite; }
.dev-sound.is-on i, .dev-sound:disabled i { animation: none; }
.dev-sound-say { display: grid; }
.dev-sound-say > span { grid-area: 1 / 1; }
.dev-sound .dev-sound-on, .dev-sound.is-on .dev-sound-off { visibility: hidden; }
.dev-sound.is-on .dev-sound-on { visibility: visible; }
@keyframes dev-sound-call { 0% { opacity: 1; } 60% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .dev-sound i { animation: none; } }
@media (max-width: 720px) {
  dialog#room-service-host .rs-host-bar,
  dialog#unlicensed-operator-host .uo-host-bar,
  dialog#soft-scope-host .ss-host-bar,
  dialog#type-damage-host .td-host-bar,
  dialog#polite-disorder-host .pd-host-bar,
  dialog#registration-error-host .re-host-bar,
  dialog#wrong-division-host .wd-host-bar,
  dialog#evidence-kit-host .ek-host-bar,
  dialog#matter-field-host .mf-host-bar { flex-wrap: wrap; }
}
/* the group in the bar's one row, between the name and Close, where they all fit there with the name whole; else, as on
   most phones for the devices with a sound, in the row under the name, at its right (device-sound.js measures each bar
   and marks it data-tools="under") */
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] { flex-wrap: wrap; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] > .dev-tools { order: 2; flex: 1 0 100%; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; margin: 0 0 8px; }
/* on the narrowest phones the row under the name a little closer set, so a design tool's four (its presets, Generate,
   Describe, Library) stay on one row at 375 px */
@media (max-width: 400px) {
  :is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] > .dev-tools { column-gap: 6px; }
  :is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] > .dev-tools > :is(.dev-gen, .dev-say-btn, .dev-lib-btn), :is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] > .dev-tools > .dev-pre > .dev-pre-pick { padding-left: 9px; padding-right: 9px; }
}
#unlicensed-operator-host [data-tools="under"] .uo-site-look { margin-right: auto; }
@media (max-width: 520px) {
  :is(#soft-scope-host .ss-site-note, #type-damage-host .td-site-note) { order: 3; }
}
/* ---------- the library in each tool (device-library.js, docs/LIBRARY.md) ---------- */
/* Library, in each bar's group before the sound, in the bar's own type as Vintage, Future and Enable sound have it;
   filled faintly while its panel is open */
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-lib-btn { position: relative; display: inline-flex; align-items: center; min-width: 0; min-height: 30px; margin: 0; padding: 6px 11px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 0; background: transparent; color: inherit; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-lib-btn::before { content: ''; position: absolute; inset: -7px 0; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-lib-btn:hover { color: #ff602b; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-lib-btn[aria-expanded='true'] { background: color-mix(in srgb, currentColor 14%, transparent); }
/* Describe (device-describe.js), in a design tool's bar after its Generate: as Library is */
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-say-btn { position: relative; display: inline-flex; align-items: center; min-width: 0; min-height: 30px; margin: 0; padding: 6px 11px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 0; background: transparent; color: inherit; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-say-btn::before { content: ''; position: absolute; inset: -7px 0; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-say-btn:hover { color: #ff602b; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-say-btn[aria-expanded='true'] { background: color-mix(in srgb, currentColor 14%, transparent); }
/* ---------- a device's presets and its Generate, first in each bar's group (device-presets.js) ---------- */
/* Presets: the one before, the list, the one after, joined in one frame as Vintage and Future are; the list is the
   device's own menu, opened over the name of the one loaded, its type 16px so a phone does not zoom in on it. The name
   has the room of the longest in the list (each of them there, unseen), so the frame keeps its width and the arrows
   stay put as it is stepped through; where the bar's row is narrower than that (a phone), the frame is as wide as the
   row and a long name takes a second line rather than being cut. Generate as Library is. Each a full finger tall to
   tap, its edges reaching past its frame */
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre { display: inline-flex; flex: none; align-items: stretch; margin: 0; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > button,
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick,
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-gen { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 30px; margin: 0; padding: 6px 11px; border: 0; border-radius: 0; background: transparent; color: inherit; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-gen { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > .dev-pre-step { padding: 6px 9px; font-size: 13px; line-height: 1; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick { border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-caret { font-style: normal; font-size: 9px; opacity: 0.7; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > .dev-pre-step { flex: none; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick { justify-content: space-between; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-say { display: inline-grid; grid-template-columns: minmax(0, max-content); min-width: 0; text-align: left; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools :is(.dev-pre-now, .dev-pre-room > span) { grid-area: 1 / 1; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-now { width: 0; min-width: 100%; white-space: normal; overflow-wrap: anywhere; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-room { display: contents; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-room > span { height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) [data-tools="under"] > .dev-tools > .dev-pre { flex: 0 1 auto; min-width: 0; max-width: 100%; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-menu { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color: #111; background: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > button::before,
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick::before,
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-gen::before { content: ''; position: absolute; inset: -7px 0; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > button:hover:not(:disabled),
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick:hover:has(.dev-pre-menu:not(:disabled)),
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-gen:hover:not(:disabled) { color: #ff602b; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick:has(.dev-pre-menu:focus-visible) { outline: 2px solid #fd501b; outline-offset: 2px; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre > button:disabled,
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-pick:has(.dev-pre-menu:disabled),
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-gen:disabled { opacity: 0.45; cursor: default; }
:is(#room-service-host, #unlicensed-operator-host, #soft-scope-host, #type-damage-host, #polite-disorder-host, #registration-error-host, #wrong-division-host, #evidence-kit-host, #matter-field-host) .dev-tools .dev-pre-menu:disabled { cursor: default; }
/* the panel: over the tool and under its bar, as the first card is, in the page's own colours. The list scrolls within
   it; a field's type is 16px, so a phone does not zoom in on it */
.dev-lib { box-sizing: border-box; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: start center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: oklch(0.13 0.003 70 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dev-help-veil 0.25s var(--ease) both; }
.dev-lib-card { box-sizing: border-box; width: min(34rem, 100%); margin: 0 auto auto; padding: 14px 16px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.08); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-align: left; text-transform: none; animation: dev-help-in 0.34s var(--ease) both; }
.dev-lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.dev-lib-kicker { margin: 0; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); }
.dev-lib-name { margin: 3px 0 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.dev-lib-x { flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.dev-lib-x:hover { color: var(--accent-text); }
.dev-lib-lead { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-70); }
.dev-lib-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(42vh, 24rem); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--rule); }
/* its buttons beside its name where both fit, else under it, to the right */
.dev-lib-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dev-lib-what { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev-lib-what b { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.dev-lib-what .mono { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-50); overflow-wrap: anywhere; }
.dev-lib-acts { flex: none; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dev-lib-acts button, .dev-lib-row button { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: none; color: var(--ink); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.dev-lib-acts button:hover { border-color: var(--accent); color: var(--accent-text); }
.dev-lib-acts button:disabled, .dev-lib-row button:disabled { opacity: 0.5; cursor: default; }
.dev-lib-acts .dev-lib-rm { color: var(--ink-50); }
.dev-lib-empty { padding: 14px 0; font-size: 0.88rem; color: var(--ink-50); }
.dev-lib-save { margin-top: 16px; }
.dev-lib-h { margin: 0; font-size: 0.6rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.dev-lib-note { margin: 6px 0 0; font-size: 0.85rem; }
.dev-lib-link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dev-lib-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.dev-lib-input { box-sizing: border-box; flex: 1 1 11rem; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; }
.dev-lib-row button { min-height: 40px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.dev-lib-row button:hover { filter: brightness(1.07); }
.dev-lib-notice { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 0.72rem; line-height: 1.45; color: var(--ink-70); }
.dev-lib-status { min-height: 1.2em; margin: 10px 0 0; font-size: 0.82rem; color: var(--ink); }
.dev-lib-status:empty { display: none; }
/* Describe's panel (device-describe.js): the Library's, with a field for the words, what is left today and Make; after a
   study is made, what it is and the way back; where pictures are on, Picture, and the picture to save */
.dev-say-words { display: block; width: 100%; min-height: 5.6em; margin: 14px 0 0; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.dev-say-words:disabled { opacity: 0.6; }
.dev-say-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.dev-say-left { margin: 0; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); }
.dev-say-acts { display: flex; gap: 8px; margin-left: auto; }
.dev-say-acts button { min-height: 40px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: none; color: var(--ink); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.dev-say-acts .dev-say-make { padding: 0 20px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.dev-say-acts button:hover:not(:disabled) { border-color: var(--accent); }
.dev-say-acts .dev-say-make:hover:not(:disabled) { filter: brightness(1.07); }
/* a tool's other way to make, beside its first (Name / Form had Three new beside Change this mark), plain as Picture is */
.dev-say-acts .dev-say-make.dev-say-alt { padding: 0 16px; border-color: var(--rule-strong); background: none; color: var(--ink); }
.dev-say-acts .dev-say-make.dev-say-alt:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.dev-say-acts button:disabled { opacity: 0.5; cursor: default; }
/* waiting on the gateway (device-describe.js: waitStrip): the device's glyph at work, a bar in the logo's orange filling
   toward the usual time over a ruler of tenths, and the seconds gone */
.dev-wait { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 12px 0 2px; border-top: 1px solid var(--rule); --accent: #fd501b; }
.dev-wait-glyph { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--rule-strong); border-radius: 6px; color: var(--ink); }
.dev-wait-glyph .lab-glyph { width: 32px; height: 32px; }
.dev-wait-body { flex: 1; min-width: 0; }
.dev-wait-line { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); }
.dev-wait-say { color: var(--ink); }
.dev-wait-secs { font-variant-numeric: tabular-nums; }
.dev-wait-track { position: relative; display: block; height: 6px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 10%), var(--rule); }
.dev-wait-fill { position: absolute; inset: 0; background: #fd501b; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; }
.dev-say-after:empty, .dev-say-code:empty { display: none; }
.dev-say-after { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.dev-say-picture { margin: 12px 0 0; }
.dev-say-picture img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); }
.dev-say-picture .dev-lib-link { display: inline-block; margin-top: 8px; font-size: 0.85rem; }
.dev-say-code { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.dev-say-code .dev-lib-note { margin-top: 0; font-size: 0.8rem; color: var(--ink-70); }
/* ---------- a word on each device, the first time it opens (main.js, #device-help in index.html) ---------- */
/* over the device, under its bar: a veil, and on it a card in the devices list's own terms (its tile and glyph, its
   number, its name), then what it is, what sets it apart and what to do first. On a phone it is the width less 16 px a
   side; a screen too short for it scrolls the veil. Play lab's waits for its panel to have opened */
.dev-help { box-sizing: border-box; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: oklch(0.13 0.003 70 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dev-help-veil 0.25s var(--ease) both; }
.dev-help-card { box-sizing: border-box; width: min(26rem, 100%); margin: auto; padding: 14px 16px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.08); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-align: left; text-transform: none; animation: dev-help-in 0.34s var(--ease) both; }
.dev-help.is-late, .dev-help.is-late .dev-help-card { animation-delay: 0.32s; }
.dev-help-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.dev-help-kicker { margin: 0; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-50); }
.dev-help-name { margin: 3px 0 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.dev-help-words { margin: 13px 0 0; }
.dev-help-words dt { margin: 0; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--ink-50); }
.dev-help-words dd + dt { margin-top: 12px; }
.dev-help-words dt.dev-help-first { color: var(--accent-text); }
.dev-help-words dd { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink); }
/* a card's points and steps (Matter / Field's, 12 Oct 2026, Cyrus: "too long to read quick explain"): each point after
   a small square, each step numbered in mono, and the card's note under them, quieter */
.dev-help-points, .dev-help-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dev-help-points li { position: relative; padding-left: 14px; }
.dev-help-points li::before { content: ''; position: absolute; left: 1px; top: 0.56em; width: 5px; height: 5px; background: var(--ink-30); }
.dev-help-steps { counter-reset: dev-step; }
.dev-help-steps li { counter-increment: dev-step; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; }
.dev-help-steps li::before { content: counter(dev-step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-50); }
.dev-help-note { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-70); }
.dev-help-go { display: flex; justify-content: flex-end; margin-top: 15px; }
.dev-help-go button { min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; transition: filter 0.2s var(--ease); }
.dev-help-go button:hover { filter: brightness(1.07); }
@keyframes dev-help-veil { from { opacity: 0; } }
@keyframes dev-help-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* a focus ring only for the keyboard on what focus is given back to (main.js, data-input): the header's button as a
   device closes, the devices' Close as they open, a device's first card as it shows */
html[data-input='pointer'] .dev-help-go button:focus-visible,
html[data-input='pointer'] .deck-btn:focus-visible,
html[data-input='pointer'] #room-service-host .rs-host-bar button:focus-visible,
html[data-input='pointer'] #unlicensed-operator-host .uo-host-bar > button:focus-visible,
html[data-input='pointer'] #type-damage-host .td-host-bar > button:focus-visible,
html[data-input='pointer'] #soft-scope-host .ss-host-bar > button:focus-visible,
html[data-input='pointer'] #polite-disorder-host .pd-host-bar > button:focus-visible { outline: none; }
/* and always one for the keyboard: a device closed by Escape pressed inside its frame gives focus back to the header's
   button, where the browser, which saw no key pressed on the page, would draw none */
html[data-input='keyboard'] .deck-btn:focus { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (min-width: 721px) and (min-height: 501px) {
  dialog#unlicensed-operator-host {
    width: min(1536px, calc(100vw - 32px), calc((100vh - 82px) * 1.5));
    width: min(1536px, calc(100vw - 32px), calc((100dvh - 82px) * 1.5));
    height: min(calc(100vh - 32px), calc((100vw - 34px) * 2 / 3 + 52px), 1075px);
    height: min(calc(100dvh - 32px), calc((100vw - 34px) * 2 / 3 + 52px), 1075px);
  }
  dialog#unlicensed-operator-host[data-tray] {
    width: min(1536px, calc(100vw - 32px), calc((100vh - 82px) * 1536 / 1277));
    width: min(1536px, calc(100vw - 32px), calc((100dvh - 82px) * 1536 / 1277));
    height: min(calc(100vh - 32px), calc((100vw - 34px) * 1277 / 1536 + 52px), 1328px);
    height: min(calc(100dvh - 32px), calc((100vw - 34px) * 1277 / 1536 + 52px), 1328px);
  }
}
.lightbox img { animation: lbIn 0.5s var(--ease) both; }
@keyframes lbIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--ink); padding: clamp(2.5rem, 6vw, 5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); }
.foot-grid h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 0.8rem; }
.foot-grid li { padding: 4px 0; }
.foot-grid li a { display: inline-flex; min-height: 32px; align-items: center; border-bottom: 1px solid transparent; }
.foot-grid li a:hover { border-color: var(--accent); }
/* Elsewhere's marks (Cyrus, 7 Oct 2026): one beside each name, in the text's colour, so they read in both themes. Their
   soft edges may draw past their box (Cyrus: "white csmakar logo is also clipped": the disc ran to its frame's edge, and
   the frame cut its outer pixels flat); CSMAKAR's disc also has a little room inside its frame */
.foot-marks a { gap: 0.6em; }
.foot-mark { flex: none; width: 1.15em; height: 1.15em; fill: currentColor; overflow: visible; }
.foot-big { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 0.9; text-transform: uppercase; }
.foot-big span { color: var(--accent); }
.foot-contact { margin-top: 1rem; color: var(--ink-70); }
.foot-contact a { border-bottom: 1px solid var(--rule-strong); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 2rem; margin-top: clamp(2rem, 5vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-50); }
.foot-bottom .jp { letter-spacing: 0.25em; }
/* the small print's link to Part of the process (process.html), alone on its line on a phone: a taller place to
   press it, the line's height as it was */
.foot-bottom .foot-more { padding-block: 6px; margin-block: -6px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .card, .card.big { grid-column: span 1; }
  .card.big { grid-column: span 2; }
  .notes .note { grid-column: span 12; }
  .note.wide { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .site-head { grid-template-columns: 1fr auto; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 6px; padding-bottom: 2px; }
  /* the two-row header is about 112px plus the gutter (its row gap) */
  .hero { padding-top: calc(113px + var(--gutter)); }
  section[id] { scroll-margin-top: calc(124px + var(--gutter)); }
  .g-count { display: none; }
  .g-filters button { min-height: 36px; }
  .g-filters button::after { bottom: 6px; }
  .gallery { columns: 2 150px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 520px; }
  .hero-vert { display: none; }
  .sec-head { grid-template-columns: auto 1fr; }
  .sec-head .jp-label { display: none; }
  .stages, .machines, .next, .media { grid-template-columns: 1fr; }
  .media { row-gap: clamp(2.2rem, 7vw, 3rem); }
  .media-list a { grid-template-columns: 1fr auto; }
  .media-list .src { grid-column: 1 / -1; }
  .stage-media { position: static; }
  .credits .row { grid-template-columns: 3.6rem 1fr auto; grid-template-areas: 'y a l' 'y t l' 'y r l'; gap: 0.15rem 0.8rem; }
  .credits .y { grid-area: y; } .credits .a { grid-area: a; } .credits .t { grid-area: t; } .credits .r { grid-area: r; } .credits .l { grid-area: l; align-self: center; }
  .credits .hd .t, .credits .hd .r { display: none; }
  .timeline { --tl-col: 4.6rem; }
  .tl-item .yr { font-size: var(--text-lg); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
  .card.big { grid-column: span 1; }
  .foot-grid { grid-template-columns: 1fr; }
  .spec li { grid-template-columns: 1fr; gap: 0.2rem; }
  .mach-media { grid-template-columns: 1fr; }
  .mach-media figure.full, .rig { grid-column: span 1; }
  .stage-media .two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero-title .ch, .hero-media figure { clip-path: none; }
  .js .rv { opacity: 1; clip-path: none; }
  .ticker-track { animation: none; }
}