/* The emulator's pages (index.html, guide.html) */
/* Inter for reading; Berkeley Mono for what the device itself would print: labels, versions, keys,
   the status line. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
             src: url("fonts/inter-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Berkeley Mono"; font-style: normal; font-weight: 400; font-display: swap;
             src: local("Berkeley Mono"), local("BerkeleyMono-Regular"), url("fonts/BerkeleyMono-Regular.woff2") format("woff2"); }
@layer page {
:root { --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        --mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 
        /* the page's names for the theme's scale (ui.css): change colors there, not here */
        --room: var(--gray-1); --bar: var(--gray-2); --card: var(--gray-2); --well: var(--gray-3);
        --rule: var(--gray-6); --line: var(--gray-7); --faint: var(--gray-9); --dim: var(--gray-10);
        --text: var(--gray-11); --ink: var(--gray-12); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--room); color: var(--ink);
             font: 15px/1.5 var(--sans); font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: 12px; }
a { color: var(--accent); }
a:hover { color: var(--accent-hi); }
#panel:focus-visible { outline: none; }
:is(a, button, summary, input):not([data-slot]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(button, select, summary, .file):not([data-slot]) { min-width: 44px; min-height: 44px; }
.dim { color: var(--dim); }
code { font: 13px var(--mono); color: var(--ink); }
kbd:not([data-slot]) { display: inline-block; min-width: 1.7em; padding: 0 5px; border: 0; border-radius: 4px;
      box-shadow: var(--elevation-raised), inset 0 -1px 0 rgb(0 0 0 / .25); background: var(--well); color: var(--ink); font: 600 12px/1.6 var(--mono);
      text-align: center; }
.eyebrow { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .1em;
           text-transform: uppercase; color: var(--dim); }

/* ---------------------------------------------------------------- the site's header and footer */
.wrap { max-width: 1360px; margin: 0 auto; padding-inline: 24px; }
header.site { border-bottom: var(--border-hairline) solid var(--rule); }
header.site .wrap { padding-block: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.brand:hover { color: var(--ink); }
.logo { color: var(--accent); display: grid; place-items: center; }
header.site .actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
header.site .guide-back { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-size: 14px; }
@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  header.site .wrap { gap: 8px 12px; }
}

footer.site { margin-top: 64px; border-top: var(--border-hairline) solid var(--rule); font-size: 13px; }
footer.site .wrap { padding-block: 12px 24px; display: flex; flex-wrap: wrap; gap: 0 24px; }
footer.site a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .by { margin-left: auto; }

/* ---------------------------------------------------------------- the player: the synth, and beside it what runs */
main { max-width: 1360px; margin: 0 auto; padding: 20px 24px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (max-width: 760px) { main { padding: 14px 16px 0; gap: 36px; } }
.player { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.deck { flex: 999 1 600px; min-width: 0; display: grid; gap: 12px; }
.deck-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
h1 { font-size: 17px; font-weight: 600; margin: 0; }
#fw-pick .ver { font: 400 12px var(--mono); color: var(--ui-muted-foreground); }
#status { margin-left: auto; color: var(--ui-muted-foreground); font: 12px var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { #status { order: 3; flex-basis: 100%; margin-left: 0; white-space: normal !important; } #rec { margin-left: auto; } }
/* the synth on the page itself: the panel's own edge is its frame */
.stage { position: relative; }
/* the whole synth in view on a laptop: as wide as the room allows below the header (--above,
   --aspect: set by main.js; 60px: the line under it), never narrower than 560px */
canvas { display: block; height: auto; touch-action: none; user-select: none; margin: 0 auto;
         /* a whole number of device pixels (--dpx: main.js), so the canvas is drawn 1:1 */
         width: min(100%, max(560px, calc((100svh - var(--above, 140px) - 60px) * var(--aspect, 1.662))));
         width: round(down, min(100%, max(560px, calc((100svh - var(--above, 140px) - 60px) * var(--aspect, 1.662)))), var(--dpx, 1px)); }
/* the canvas is transparent around the synth's body (inset 14 of 1280 x 770 units, corners 57):
   its focus ring follows the body's shape, drawn by the label layer, which covers the canvas
   exactly, not as a rectangle around the empty corners */
.panel-labels::after { content: ""; position: absolute; inset: 1.818% 1.094%; border-radius: 4.553% / 7.682%;
  outline: 2px solid var(--accent); outline-offset: 2px; opacity: 0; }
.stage:has(#panel:focus-visible) .panel-labels::after { opacity: 1; }
/* the panel's labels (panel-labels.js): real type over the canvas, one panel unit = --u */
.panel-labels { position: absolute; pointer-events: none; user-select: none; z-index: 1; contain: layout style;
  font-family: var(--mono); font-variant-ligatures: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.panel-labels > span { position: absolute; translate: -50% -50%; white-space: nowrap; line-height: 1;
  text-box: trim-both cap alphabetic; }
.pl-knob { font-size: calc(var(--u) * 17); font-weight: 400; letter-spacing: .06em; color: var(--pl-silk, #cfccc5); }
.pl-btn { font-size: calc(var(--u) * 15); font-weight: 400; letter-spacing: .04em; color: var(--pl-ink, #f1eee8); transition: color .12s linear; }
.pl-key { font-size: calc(var(--u) * 11.5); letter-spacing: .04em; color: var(--pl-ink, #f1eee8); }
.pl-two { display: grid; justify-items: center; gap: calc(var(--u) * 3.5); font-size: calc(var(--u) * 12.5); text-box: normal; }
.pl-two > span { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.pl-two > span + span { padding-top: calc(var(--u) * 3.5); border-top: max(1px, calc(var(--u) * 1.4)) solid currentColor; }
#start { position: absolute; inset: 0; margin: auto; width: max-content; cursor: pointer; z-index: 2; }
#start[disabled] { opacity: .7; cursor: wait; }
.rotate { display: none; color: var(--dim); font-size: 13px; margin: 0; }
/* a phone upright: the panel is small; say that sideways gives bigger keys */
@media (orientation: portrait) and (max-width: 600px) {
  .rotate { display: block; }
}
/* a phone on its side: the panel fits the screen's height, the page around it shrinks */
@media (orientation: landscape) and (max-height: 560px) {
  main { padding-block: 8px 0; }
  canvas { width: auto; max-width: 100%; height: calc(100svh - 12px); margin: 0 auto; }
}


/* the firmware's name and version (main.js morphs them, torph) */
#title { display: inline-flex; align-items: baseline; gap: .45em; }
#title .ver:empty { display: none; }
/* while main.js loads (boot.js): bars in place of the name and status, a skeleton over the panel */
.head-skel { display: none; }
[data-loading] .head-skel { display: inline-flex; flex: none; padding-block: 4px; }
[data-loading] .head-skel > [skullet-bar] { display: block; }
.head-skel-title { width: var(--title-w, 120px); height: 20px; }
.head-skel-status { width: 200px; height: 18px; margin-left: auto; }
[data-loading] #title, [data-loading] #status, [data-loading] #start { display: none; }
[data-loading] #fw-pick svg { opacity: .35; }
#status:empty { display: none; }
#status { white-space: nowrap; line-height: 18px; }
.tick { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .head-skel-status { order: 3; flex-basis: 100%; margin-left: 0; max-width: 220px; } }
.panel-skeleton { position: absolute; pointer-events: none; z-index: 1; }
.panel-skeleton::before { content: ""; position: absolute; inset: 1.818% 1.094%; border-radius: 4.553% / 7.682%;
  border: 1px solid rgb(255 255 255 / .05); background: rgb(255 255 255 / .018); }

/* record: a dot that glows red while recording; the label becomes the take's length */
#rec { font-variant-numeric: tabular-nums; min-width: 6.5rem; justify-content: flex-start; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .7; flex: none;
  transition: background-color .2s, box-shadow .2s, opacity .2s; }
.rec-label { font: 500 13px var(--mono); letter-spacing: .02em; }
#rec[aria-pressed="true"] { color: var(--accent-hi); background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent-edge); }
#rec[aria-pressed="true"] .rec-dot { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px var(--accent-ring);
  animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { #rec[aria-pressed="true"] .rec-dot { animation: none; } }

/* the header's line about the network: offline, or a new version to reload into */
.net { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px;
  box-shadow: var(--elevation-raised); color: var(--dim); font: 12px var(--mono); margin-right: 6px; }
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.net[data-state="update"] { box-shadow: 0 0 0 1px var(--accent-edge); color: var(--accent-hi); }
.net[data-state="update"] .net-dot { background: var(--accent); }
.net-reload { all: unset; cursor: pointer; }
.net-reload:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* the recordings under the synth (main.js, recorder.js) */
.takes { display: grid; gap: 10px; border-top: var(--border-hairline) solid var(--rule); padding-top: 14px; }
.takes-head { display: flex; align-items: baseline; gap: 12px; }
.takes-note { color: var(--faint); font-size: 12px; }
#take-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.take { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px;
  padding: 6px; border-radius: 14px; background: var(--card); box-shadow: var(--elevation-raised); overflow: hidden;
  transition: box-shadow .15s ease-out; }
.take:hover { box-shadow: var(--elevation-raised-hover); }
.take-new { animation: take-in .5s cubic-bezier(.2, 0, 0, 1); }
@keyframes take-in { from { opacity: 0; transform: translateY(-4px); background: var(--accent-wash); } }
.take-play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); color: var(--ink); transition: background-color .15s, color .15s, transform .1s; }
.take-play:hover { background: var(--gray-5); }
.take-play:active { transform: scale(.94); }
.take.is-playing .take-play { background: var(--accent); color: var(--accent-ink); }
.take-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.take-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-len { font: 12px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.take-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left;
  transform: scaleX(var(--p, 0)); background: var(--accent); opacity: .8; transition: transform .25s linear; }
.take-act { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--dim); transition: background-color .15s, color .15s; }
.take-act:hover { background: var(--well); color: var(--ink); }
.take-del[data-armed] { background: var(--accent-wash); color: var(--accent-hi); }
.take :is(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-view="full"] .takes { display: none !important; }

/* under the synth: the shortcuts, and what the save is doing */
.under { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; min-height: 32px; margin-top: -4px; }
#save-status { margin-left: auto; color: var(--ui-muted-foreground); font-size: 12px; }
#save-status[data-error="true"] { color: var(--accent); }
@media (hover: none) and (pointer: coarse) { .under [data-shortcuts] { visibility: hidden; } }

/* the device can't keep up: what happens and the fix, above the synth */
#perfwarn { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
#perfwarn[hidden] { display: none; }
#perfwarn p { margin: 0; flex: 1 1 320px; min-width: 0; }
#perfwarn .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#perfwarn button[hidden] { display: none; }

/* beside the synth: the firmware, the save, MIDI. The home page works them from the command menu
   (main.js), so they show only in an embed, below the synth */
:root:not([data-embed]) .side { display: none; }
.side { flex: 1 1 300px; max-width: 100%; display: grid; gap: 0 32px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.box { border-top: var(--border-hairline) solid var(--line); padding: 12px 0 24px;
       display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.box > label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--dim); font-size: 14px; }
.box > label select { min-width: 0; max-width: 62%; }
.box .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sel { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 62%; }
.sel select { max-width: 100%; }
#about { margin: 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
#about b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
#about .links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 6px; }
#about .what { display: block; }
select { font: inherit; font-size: 16px; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: 8px;
         padding: 5px 8px; max-width: 100%; }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the page's buttons, and file pickers that look like them */
.box button, .file { font: inherit; font-size: 14px; color: var(--ink); background: var(--well);
  border: 0; box-shadow: var(--elevation-raised); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: box-shadow .15s ease-out; }
.box button:hover, .file:hover { box-shadow: var(--elevation-raised-hover); }
.file { position: relative; display: inline-flex; align-items: center; }
.file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; font-size: 16px; }
#midiact { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
#midiact.on { background: var(--accent); }
.save-controls { margin: 0; }
.save-controls summary { padding: 12px 0; font-size: 13px; font-weight: 500; color: var(--dim); cursor: pointer; }
.save-controls .save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.save-controls p { color: var(--dim); font-size: 12.5px; margin: 10px 0 0; }


/* panel controls (panel-controls.js): a dialog on the home page (web/palette.js moves .pc into it),
   a disclosure under the synth in an embed. Styled like the dialog's other shadcn parts. */
:root:not([data-embed]) .panel-controls { display: none; }
.panel-controls { border-top: var(--border-hairline) solid var(--rule); min-width: 0; }
.panel-controls > summary { padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.pc { font-size: 14px; color: var(--ui-foreground); }
#panel-controls-body { display: grid; gap: 12px; padding-bottom: 4px; }
.pc .panel-control-group { min-width: 0; margin: 0; border: var(--border-hairline) solid var(--ui-border); border-radius: 12px; padding: 12px; }
.pc .panel-control-group legend, .pc .panel-control-group > summary { padding: 0 4px; font: 400 11px/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ui-muted-foreground); }
.pc .panel-control-group > summary { padding: 0; min-height: 0; cursor: pointer; }
.pc .panel-control-group[open] > summary { margin-bottom: 12px; }
/* a chevron that turns, not the browser's triangle */
.pc .panel-control-group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.pc .panel-control-group > summary::-webkit-details-marker { display: none; }
.pc .panel-control-group > summary::after { content: ""; width: 6px; height: 6px; margin-right: 4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .15s ease-out; }
.pc .panel-control-group[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.pc .panel-control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px 16px; }
.pc details.panel-control-group .panel-control-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pc button { min-width: 36px; min-height: 36px; padding: 0 10px; font: 500 13px var(--sans); color: var(--ui-foreground);
  background: var(--ui-secondary); border: 0; box-shadow: var(--elevation-raised); border-radius: 8px; cursor: pointer;
  touch-action: manipulation; transition: background-color .15s, box-shadow .15s, color .15s; }
.pc button:hover { background: var(--ui-accent); }
.pc button:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ui-primary), 0 0 0 4px var(--accent-ring); }
.pc button[data-held="true"], .pc button:active { background: var(--ui-primary); box-shadow: none; color: var(--ui-primary-foreground); }
.pc .panel-encoder { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px; gap: 6px; align-items: center; }
.pc .panel-encoder button { padding: 0; }
.pc .panel-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
.pc .panel-range output { color: var(--ui-muted-foreground); font: 12px var(--mono); }
/* a range like shadcn's Slider: a thin track, a round thumb */
.pc .panel-range input { grid-column: 1 / -1; width: 100%; height: 20px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.pc .panel-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--gray-7); }
.pc .panel-range input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gray-7); }
.pc .panel-range input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ui-primary); }
.pc .panel-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--ui-foreground); border: 2px solid var(--ui-primary); }
.pc .panel-range input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ui-foreground); border: 2px solid var(--ui-primary); }
.pc .panel-range input:focus-visible { outline: none; }
.pc .panel-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-ring); }
.pc .panel-control-help { grid-column: 1 / -1; margin: 0; color: var(--ui-muted-foreground); font-size: 13px; }

/* ---------------------------------------------------------------- the guide: its contents beside it on a wide screen */
.guide { padding-top: 16px; display: grid; gap: 28px 56px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .guide { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  nav.toc { position: sticky; top: 20px; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .guide nav.toc a { border-left: var(--border-hairline) solid var(--line); padding: 5px 0 5px 12px; }
  .guide nav.toc a:hover { border-left-color: var(--accent); }
}
nav.toc { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-start; font-size: 14px; }
nav.toc .eyebrow { width: 100%; margin-bottom: 8px; }
nav.toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); text-decoration: none; padding: 2px 10px 2px 0; }
nav.toc a:hover { color: var(--ink); }
.article { max-width: 780px; min-width: 0; display: grid; gap: 40px; }
.article section h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
section h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 600; }
section p, section li { color: var(--text); }
section p { margin: 0 0 10px; }
section b, section strong { color: var(--ink); font-weight: 600; }
section ul, section ol { margin: 0 0 10px; padding-left: 22px; }
section li { margin: 4px 0; }
.lead { font-size: 17px; line-height: 1.55; color: var(--ink) !important; }
.steps { list-style: none; padding: 0 !important; margin: 20px 0 0 !important; display: grid; gap: 16px 24px;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: step; }
.steps li { margin: 0; border-top: var(--border-hairline) solid var(--line); padding-top: 10px; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 6px; color: var(--accent);
                    font: 500 11px/1.4 var(--mono); letter-spacing: .1em; }
.steps b { display: block; margin-bottom: 2px; }

/* the computer keyboard as a piano: 11 white keys, the black ones between */
.piano { display: grid; grid-template-columns: repeat(22, 1fr); gap: 3px; max-width: 460px; margin: 4px 0 12px; }
.piano span { display: grid; place-items: center; border-radius: 0 0 5px 5px; padding: 4px 0 3px; line-height: 1.15;
              font: 600 13px/1.2 var(--mono); text-align: center; }
.piano i { display: block; font: 10.5px/1.2 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--dim); }
.piano .w { grid-row: 2; grid-column-end: span 2; background: var(--gray-4); box-shadow: var(--elevation-raised); color: var(--ink); }
.piano .b { grid-row: 1; grid-column-end: span 2; margin: 0 3px; background: var(--key-dark); box-shadow: var(--elevation-raised); color: var(--key-dark-ink); position: relative; z-index: 1; }
.piano .b i { color: var(--key-dark-dim); }
.map { list-style: none; padding: 0 !important; display: grid; gap: 6px 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.map li { margin: 0; white-space: nowrap; color: var(--ink); font-size: 13px; }
.map kbd { margin-right: 4px; }

.note { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.article details { border-top: var(--border-hairline) solid var(--rule); border-bottom: var(--border-hairline) solid var(--rule); margin: 0 0 10px; }
.article details[open] { padding-bottom: 4px; }
.article summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--ink); }

/* ?embed=1 (main.js): the device and its controls only, for a window on another site */
.embed-only { display: none; }
[data-embed] .embed-only { display: inline; margin-left: auto; font-size: 13px; }
[data-embed] header.site .wrap > :not(.embed-only), [data-embed] #fw-pick, [data-embed] #fwlabel, [data-embed] .file,
[data-embed] #bankname, [data-embed] #about, [data-embed] .under, [data-embed] .library, [data-embed] .guide,
[data-embed] footer.site, [data-embed] .save-box, [data-embed] .side .eyebrow { display: none !important; }   /* (over Tailwind's display utilities) */
[data-embed] main { padding: 8px; gap: 8px; }
[data-embed] .side { flex-basis: 100%; }
[data-embed] .box { padding: 10px 0; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
[data-embed] .box > label select { max-width: none; }


/* data-view="full" (main.js): only the synth, as large as the screen allows, and the way back */
[data-view="full"], [data-view="full"] body { height: 100%; overflow: hidden; background: var(--room); }
[data-view="full"] header.site, [data-view="full"] footer.site, [data-view="full"] .side, [data-view="full"] .library,
[data-view="full"] .guide, [data-view="full"] .deck-head, [data-view="full"] .under, [data-view="full"] .rotate,
[data-view="full"] .panel-controls { display: none !important; }
[data-view="full"] main { max-width: none; height: 100%; padding: 0; display: block; }
[data-view="full"] .player, [data-view="full"] .deck { height: 100%; display: block; }
[data-view="full"] #perfwarn { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
                               width: min(720px, calc(100vw - 32px)); }
[data-view="full"] .stage { position: relative; height: 100%; display: grid; place-items: center; padding: 56px 24px 24px;
                            border: 0; border-radius: 0; background: var(--room); }
[data-view="full"] canvas { width: round(down, min(100%, calc((100dvh - 80px) * var(--aspect, 1.662))), var(--dpx, 1px)); height: auto; }
[data-view="full"] #start { position: fixed; }
#exit-full { display: none !important; }
[data-view="full"] #exit-full { display: inline-flex !important; position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
                                z-index: 3; }
@media (orientation: landscape) and (max-height: 560px) {
  [data-view="full"] .stage { padding: 8px 8px 8px 72px; }
  [data-view="full"] canvas { width: round(down, min(100%, calc((100dvh - 16px) * var(--aspect, 1.662))), var(--dpx, 1px)); }
}
[data-embed] #enter-full { display: none !important; }

/* images: a fixed edge, black or white, never tinted */
img { outline: 1px solid var(--edge-image); outline-offset: -1px; }

/* (an element the page hides stays hidden whatever its display rule) */
[hidden] { display: none !important; }
}