/* Shared look for the Compose (index.html) and Examples (examples.html) pages. */
:root {
  --bg: #f6f6f4; --card: #fff; --line: #ddd; --ink: #1c1c1c; --muted: #6b6b6b; --accent: #2f6fed; --accent-ink: #fff;
  --gen: #f3f5fa; --err: #b00020; --mono: 13px/1.45 ui-monospace, Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 system-ui, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
small, .muted { color: var(--muted); }
kbd { font: inherit; color: var(--muted); }
pre { margin: 0; font: var(--mono); white-space: pre-wrap; word-break: break-word; }
code { font: var(--mono); }

/* top-level navigation: two pages, no dropdown */
.top { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; background: #1c1c1c; color: #eee; position: sticky; top: 0; z-index: 2; }
.top .brand { font-weight: 700; letter-spacing: .04em; margin-right: .5rem; color: #fff; text-decoration: none; white-space: nowrap; }
.top a { color: #bbb; text-decoration: none; padding: .25rem .5rem; border-radius: 4px; }
.top a.on { color: #fff; background: #333; }
.top a.minor { font-size: .85rem; color: #999; padding: .2rem .4rem; } /* the tools and the small print: there, not loud */
.top .sep { width: 1px; height: 1.1rem; background: #444; margin: 0 .1rem; } /* three groups: pages · tools · about */
.top .status { margin-left: auto; color: #aaa; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .status a { color: #9cf; padding: 0; }
/* desktop-only warning: a full-width row under the links on narrow windows */
.top .narrow { display: none; flex-basis: 100%; padding: .2rem .5rem; border-radius: 4px; background: #7a3b00; color: #fff; font-size: .85rem; }
@media (max-width: 60rem) { .top { flex-wrap: wrap; } .top .narrow { display: block; } }

main { max-width: 84rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* minmax(0, ...): a wide arrangement strip scrolls inside its card instead of widening the page */
/* site footer: author line, links, copyright; same width as main */
footer.site { max-width: 84rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; border-top: 1px solid var(--line); font-size: .85rem; display: grid; gap: .4rem; }
footer.site p { margin: 0; }
footer.site nav { display: flex; gap: 1rem; flex-wrap: wrap; }
/* long-form pages (about, legal) */
.prose { max-width: 46rem; }
.prose h1 { margin-bottom: .5rem; }
.prose h2 { margin-top: 1.5rem; }
.prose p, .prose ul { margin: .5rem 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; }
.card > h2, .card > header { margin-bottom: .5rem; }
.card > header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.grow { flex: 1; }
/* a segmented control: one outline, the label as its first cell, dividers between the buttons */
.group { display: inline-flex; align-items: stretch; border: 1px solid #bbb; border-radius: 6px; }
.group > * { border: 0; border-radius: 0; }
.group > * + * { border-left: 1px solid var(--line); }
.group > button:last-of-type { border-radius: 0 5px 5px 0; }
.group .lbl { display: inline-flex; align-items: center; padding: 0 .6rem; color: var(--muted); font-size: .85rem; background: var(--bg); border-radius: 5px 0 0 5px; }
.group button:hover:not(:disabled) { background: #f0f0f0; border-color: var(--line); }
.group .xstate { margin: .2rem .35rem; border-left: 0; }

button, select, input[type=text] { font: inherit; padding: .35rem .7rem; border: 1px solid #bbb; border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
button:hover:not(:disabled) { border-color: #888; }
button:disabled { cursor: not-allowed; opacity: .5; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.on { background: #e6eefc; border-color: var(--accent); }
.field { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.field select, .field button { color: var(--ink); }
#songpick { display: inline-flex; align-items: baseline; gap: .45rem; max-width: min(26rem, 50vw); } /* the song's name with the date it was made beside it; what it is waits in the menu */
#songpick b { font-weight: 600; }
#songpick small { color: #9b9b9b; font-size: .78rem; }

/* pick menu: a native popover pinned under its button; each entry is a name over its one-line description */
.menu { margin: 0; padding: .25rem; border: 1px solid #bbb; border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); max-height: 60vh; overflow-y: auto; width: 24rem; max-width: calc(100vw - 2rem); }
.menu button { display: grid; grid-template-columns: auto 1fr auto; column-gap: .6rem; align-items: center; width: 100%; border: 0; border-radius: 4px; padding: .3rem .3rem .3rem .6rem; text-align: left; line-height: 1.3; }
.menu button .pv { grid-row: span 2; } /* the kit row's play control: a span, since a button cannot nest one */
.menu button[hidden] { display: none; } /* the grid rule above would otherwise beat the hidden attribute */
.menu button img { grid-row: span 2; width: 30px; height: 30px; }
.menu.wide { width: 34rem; }
.menu .key { position: sticky; bottom: -.25rem; margin: .25rem -.25rem -.25rem; padding: .3rem .5rem; background: #fff; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .1rem .55rem; font-size: .72rem; color: var(--muted); }
.menu .key span { display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.menu .key i { font-style: normal; color: var(--line); }
.menu .key img { width: 18px; height: 18px; }
.menu input { position: sticky; top: 0; box-sizing: border-box; width: 100%; margin-bottom: .25rem; padding: .35rem .6rem; font: inherit; border: 1px solid #bbb; border-radius: 4px; background: #fff; }
.menu button:hover, .menu button:focus-visible { background: #eef3fd; outline: 0; }
.menu button[aria-selected="true"] { background: #e6eefc; }
.menu small { font-size: .8rem; color: var(--muted); }

/* transport: play/pause toggle, stop, position slider with a section tick each, readout; the readout pulses while playing */
.transport { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.transport #play { min-width: 6.5rem; border-radius: 99px; }
.transport #stop { border-radius: 99px; }
.transport #update { border-color: var(--accent); color: var(--accent); border-radius: 99px; }
.transport input[type=range] { flex: 1; min-width: 12rem; accent-color: var(--accent); }
.transport .where { font: var(--mono); min-width: 0; margin-left: -.2rem; color: var(--muted); }
.transport #scope { flex: 1.2 1 12rem; min-width: 9rem; height: 2.6rem; background: #0b0f0b; border: 1px solid #111; border-radius: 4px; box-shadow: inset 0 1px 3px #000, 0 1px 0 #48484e; } /* the master scope, an LCD like the readout */
.transport .where::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .4rem; background: #c9c9c9; vertical-align: 0; }
.transport.playing .where::before { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.transport kbd { margin-left: auto; font-size: .8rem; }

/* arrangement strip (top of the mix card): a block per section, flex-grown by its span, one thin row per layer shaded by
   density; the playing one is outlined, the pinned one is amber; the ops (pin, move, duplicate) show on the selected one */
/* the stage: the song's visual performance, a collapsible 16:9 box over the transport (closed by default), no taller than half the window; the box fullscreens as a whole so the button stays over the canvas */
.stage { padding: .4rem .75rem; }
.stage > summary h2 { font-size: 1rem; margin: 0; }
.stagebox { position: relative; width: min(100%, calc(46vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; background: #05060a; border-radius: 6px; overflow: hidden; }
.stagebox canvas { display: block; width: 100%; height: 100%; }
.stagebox #fullscreen { position: absolute; top: .4rem; right: .4rem; padding: .2rem .5rem; opacity: .45; background: #0009; color: #fff; border-color: #fff5; }
.stagebox:hover #fullscreen, .stagebox #fullscreen:focus-visible { opacity: 1; }
dialog#newdlg { background: #222225; color: #eee; border: 1px solid #111; border-radius: 6px; padding: 1rem 1.2rem; min-width: 18rem; }
dialog#newdlg::backdrop { background: #0008; }
dialog#newdlg h2 { margin: 0 0 .6rem; font-size: 1rem; }
dialog#newdlg label { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .4rem 0; color: #c8c8d0; }
dialog#newdlg input, dialog#newdlg select { font: inherit; padding: .15rem .4rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #eee; width: 11rem; }
dialog#newdlg menu { display: flex; justify-content: flex-end; gap: .5rem; margin: .8rem 0 0; padding: 0; }
.stagebox .worldbar { position: absolute; bottom: .4rem; left: .4rem; display: flex; gap: .3rem; opacity: .45; } /* the world pick, a theme pick when the world has themes, and the ✎ that writes them into the song */
.stagebox .worldbar select, .stagebox .worldbar button { padding: .15rem .3rem; background: #0009; color: #fff; border: 1px solid #fff5; border-radius: 4px; font: inherit; font-size: .85em; cursor: pointer; }
.stagebox:hover .worldbar, .stagebox .worldbar:focus-within { opacity: 1; }
.stagebox .worldbar option { background: #111; color: #fff; }
.stagebox:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.rack .strip { display: flex; gap: 3px; margin-bottom: .6rem; overflow-x: auto; padding-bottom: 2px; } /* many sections scroll the strip, not the page; the page keeps the active block in view */
.rack .panel.song { margin: 0 0 .6rem; } /* the song header pane sits above the strip */
.knobs b { display: flex; align-items: center; gap: .2rem; }
.knobs b button { border: 0; background: none; padding: 0 .2rem; color: var(--muted); line-height: 1; opacity: .5; }
.knobs b:hover button { opacity: 1; }
.strip .blk { position: relative; flex: 1 1 0; min-width: 4.5rem; display: grid; gap: 2px; padding: .3rem .45rem; border: 1px solid #111; border-radius: 5px; color: #ddd; background: linear-gradient(#2c2c30, #222225); box-shadow: inset 0 1px 0 #48484e; cursor: pointer; }
.strip .blk .nm { font-size: .65rem; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .blk .nm .form { margin-left: .4rem; font-size: .6rem; letter-spacing: 0; text-transform: none; color: #9a9aa2; } /* the check's form letter and energy glyph */
#lintlist { margin: 0; padding: .2rem 1.4rem .4rem; font-size: .8rem; color: #c8c8d0; }
#lintlist li b { color: #eee; font-weight: 600; margin-right: .3rem; }
#lintlist li.error { color: #f66; }
.strip .blk i { display: block; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: inset 0 1px 2px #000; }
.strip .blk.on { border-color: var(--accent); box-shadow: inset 0 1px 0 #48484e, 0 0 0 1px var(--accent), 0 0 8px #2f6fed88; color: #fff; }
.strip .blk.on, .strip .blk.pin { min-width: 222px; } /* the selected section gets the room; the rest shrink toward their minimum */
.strip .blk.pin { border-color: #e8a040; box-shadow: inset 0 1px 0 #48484e, 0 0 0 1px #e8a040; }
.strip .ops { position: absolute; top: .1rem; right: .15rem; display: none; gap: 0; background: inherit; border-radius: 3px; }
.strip .blk.on .ops, .strip .blk.pin .ops { display: inline-flex; } /* only the selected (or pinned) block shows its actions */
.strip .ops button { padding: 0 .2rem; font-size: .7rem; line-height: 1.4; border: 0; background: transparent; color: #9a9aa2; }
.strip .ops button:hover:not(:disabled) { color: #fff; }
.strip .blk.pin [data-op=pin] { color: #e8a040; }
/* the transport is the rack's top unit; the mixer (a <details>, open by default) is glued under it with one seam line between */
#transport.rack { padding: .6rem 1rem; }
#transport:has(+ #mix:not([hidden])) { border-radius: 8px 8px 0 0; border-bottom: 0; }
#mix:not([hidden]) { margin-top: -1rem; border-radius: 0 0 8px 8px; }
#mix > summary, details.pane > summary { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; cursor: pointer; list-style: none; }
#mix > summary::-webkit-details-marker, details.pane > summary::-webkit-details-marker { display: none; }
#mix > summary::before, details.pane > summary::before { content: '\25BE'; color: #9a9aa2; font-size: .8rem; }
#mix:not([open]) > summary::before, details.pane:not([open]) > summary::before { content: '\25B8'; }
#mix:not([open]) > summary, details.pane:not([open]) > summary { margin-bottom: 0; }
.rack #play { min-width: 7.5rem; font-weight: 600; letter-spacing: .04em; }
.rack button.primary { background: linear-gradient(#4a86ff, var(--accent)); border-color: #1a3f8f; color: #fff; box-shadow: inset 0 1px 0 #8ab0ff, 0 1px 0 #111; }
.rack button.primary:hover:not(:disabled) { background: linear-gradient(#5a92ff, #3a7aff); border-color: #1a3f8f; }
.rack.playing #play { box-shadow: inset 0 1px 0 #8ab0ff, 0 0 12px #2f6fedaa; }
.rack #pos { --d: 0%; --w: 14px; height: 28px; } /* the transport fader: fills from the start, a wider cap */
.rack #pos::-webkit-slider-thumb { height: 24px; margin-top: -10px; }
.rack #pos::-moz-range-thumb { height: 24px; }
.rack .where { color: #7fd38a; background: #0b0f0b; padding: .25rem .4rem; border: 1px solid #111; border-radius: 4px; box-shadow: inset 0 1px 3px #000, 0 1px 0 #48484e; } /* the readout as an LCD */
.rack .where::before { background: #2a3a2c; }
.rack.playing .where::before { background: #7fd38a; }
#ticks { position: absolute; left: 0; right: 0; top: .6rem; height: 28px; pointer-events: none; }
#ticks i { position: absolute; top: 21px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: #9a9aa2; }
/* the whole mix card is the plugin chassis: a lighter dark shell, the strip and knob panels sit inset in it, controls go dark */
.rack { color: #ddd; background: linear-gradient(#3a3a3f, #2e2e33); border-color: #111; box-shadow: inset 0 1px 0 #55555c, 0 2px 6px rgba(0, 0, 0, .35); }
/* scrollbars inside the rack (strip, knobs, editors) match the dark panel: a thin machined thumb in a dark groove */
.rack * { scrollbar-width: thin; scrollbar-color: #5a5a62 #1a1a1d; }
.rack ::-webkit-scrollbar { width: 8px; height: 8px; }
.rack ::-webkit-scrollbar-track { background: #1a1a1d; border-radius: 4px; box-shadow: inset 0 1px 2px #000; }
.rack ::-webkit-scrollbar-thumb { background: linear-gradient(#66666e, #4e4e56); border: 1px solid #111; border-radius: 4px; box-shadow: inset 0 1px 0 #8a8a92; }
.rack ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#7a7a82, #5e5e66); }
.rack ::-webkit-scrollbar-corner { background: #1a1a1d; }
.rack h2 { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.rack small, .rack .muted, .rack .vt th { color: #9a9aa2; }
.rack button { background: #1e1e22; border-color: #111; color: #ddd; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; }
.rack button:hover:not(:disabled) { border-color: #111; color: #fff; background: #2a2a2f; }
.rack button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rack .tag { background: #48484e; color: #ddd; }
.rack .vt .ok { color: #6fd08a; } .rack .vt .no { color: #ff7a8a; }
.rack .strip .blk:hover { border-color: #55555c; }
/* mix card: layers down, axes across, a fader per cell the layer adapts; styled like a plugin panel:
   dark inset groove, a detent tick at the .5 baseline, a fill from the detent to a machined cap (--v is the value, set by the page) */
.knobs { display: grid; grid-template-columns: 8.5rem repeat(12, minmax(4rem, 1fr)); gap: .3rem .5rem; align-items: center; overflow-x: auto; font-size: .8rem;
  padding: .6rem .8rem; border-radius: 6px; color: #ddd; background: linear-gradient(#2c2c30, #222225); border: 1px solid #111; box-shadow: inset 0 1px 0 #48484e; }
.knobs b { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #eee; }
.knobs .ax { color: #9a9aa2; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knobs .expr { color: #8a8a92; font-style: italic; text-align: center; cursor: pointer; }
.knobs .lane { width: 100%; height: 1.1em; color: #2f6fed; }
.knobs .axcell { display: flex; align-items: center; gap: .1rem; }
.knobs .axcell input[type=range] { flex: 1; }
.knobs .shape { border: 0; background: none; padding: 0 .1rem; color: var(--muted); opacity: .5; cursor: pointer; }
.knobs .shape:hover { opacity: 1; }
.rack input[type=range] { --p: calc(var(--v, .5) * (100% - var(--w, 10px)) + var(--w, 10px) / 2); width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; background: none; cursor: ew-resize; }
/* the track and cap rules are written twice: a selector list mixing -webkit- and -moz- pseudo-elements is dropped whole by both browsers */
.rack input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid #0a0a0a; box-shadow: inset 0 1px 2px #000, 0 1px 0 #3a3a40;
  background: linear-gradient(#8a8a92, #8a8a92) var(--d, 50%) 0 / 1px 100% no-repeat,
    linear-gradient(to right, transparent min(var(--d, 50%), var(--p)), var(--accent) min(var(--d, 50%), var(--p)), var(--accent) max(var(--d, 50%), var(--p)), transparent max(var(--d, 50%), var(--p))), #111; }
.rack input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; border: 1px solid #0a0a0a; box-shadow: inset 0 1px 2px #000, 0 1px 0 #3a3a40;
  background: linear-gradient(#8a8a92, #8a8a92) var(--d, 50%) 0 / 1px 100% no-repeat,
    linear-gradient(to right, transparent min(var(--d, 50%), var(--p)), var(--accent) min(var(--d, 50%), var(--p)), var(--accent) max(var(--d, 50%), var(--p)), transparent max(var(--d, 50%), var(--p))), #111; }
.rack input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -7px; width: var(--w, 10px); height: 18px; border-radius: 2px; border: 1px solid #333; box-sizing: border-box; box-shadow: 0 1px 3px #000, inset 0 1px 0 #fff;
  background: linear-gradient(#444, #444) 50% 50% / 1px 60% no-repeat, linear-gradient(#f2f2f2, #b4b4b8 60%, #9a9a9e); } /* margin: (track 6px + borders - cap 18px) / 2 */
.rack input[type=range]::-moz-range-thumb { width: var(--w, 10px); height: 18px; border-radius: 2px; border: 1px solid #333; box-sizing: border-box; box-shadow: 0 1px 3px #000, inset 0 1px 0 #fff;
  background: linear-gradient(#444, #444) 50% 50% / 1px 60% no-repeat, linear-gradient(#f2f2f2, #b4b4b8 60%, #9a9a9e); }
.rack input[type=range]:hover::-webkit-slider-thumb { background-color: #fff; }
.rack input[type=range]:hover::-moz-range-thumb { background-color: #fff; }
.rack input[type=range]:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* the pill box: pills in typed order, the input after them, the browser's datalist under it */
.pills { flex: 1 1 18rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .2rem .4rem; border: 1px solid #111; border-radius: 6px; background: #1e1e22; color: #ddd; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; }
.pills input { flex: 1; min-width: 7rem; border: 0; outline: 0; padding: .15rem .2rem; font: inherit; background: transparent; color: #eee; }
.pills input::placeholder { color: #77777f; }
.pills input.bad { color: var(--err); text-decoration: underline wavy var(--err); } /* not a word it knows: stays text, never a pill */
.pill { display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .2rem .05rem .55rem; border-radius: 99px; font-size: .85rem; background: #48484e; color: #eee; }
.pill button { border: 0; background: none; box-shadow: none; padding: 0 .2rem; line-height: 1; color: #bbb; }
.pill.layer { background: var(--accent); } .pill.mod { background: #6a4a10; } .pill.harmony { background: #1f5a33; } .pill.mood { background: #4a2a70; }
/* the "add part…" dropdown that ends the axes and materials lists */
.addpart { padding: .1rem .8rem .6rem; }
#mats .addpart { display: inline-block; vertical-align: middle; padding-right: 0; } /* on one line with the preview level box */
.addpart select { font: inherit; font-size: .8rem; padding: .15rem 1.4rem .15rem .5rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #9a9aa2; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; cursor: pointer; }
.addpart select:hover { color: #eee; }
/* collapsible inset panels in the mix card: axes (open by default) and materials (closed); the knob grid loses its own frame inside one */
.panel { margin-top: .4rem; font-size: .85rem; border-radius: 6px; border: 1px solid #111; background: linear-gradient(#2c2c30, #222225); box-shadow: inset 0 1px 0 #48484e; }
.panel summary { cursor: pointer; padding: .45rem .8rem; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: #9a9aa2; list-style: none; }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::before { content: '\25B8'; margin-right: .4rem; }
.panel[open] summary::before { content: '\25BE'; }
.panel[open] summary { border-bottom: 1px solid #111; box-shadow: 0 1px 0 #3a3a40; }
#matlist, #wordbox { padding: .4rem .8rem .6rem; }
.panel .knobs { border: 0; border-radius: 0; background: none; box-shadow: none; }
.panel .cm-editor { max-height: 24rem; }
.panel .cm-scroller { overflow: auto; }
.panel summary small { margin-left: .4rem; text-transform: none; letter-spacing: 0; color: #c8c8d0; } /* the section pane names its section (and says pinned) */
.panel summary .tweak { float: right; text-transform: none; letter-spacing: 0; color: #c8c8d0; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.panel summary .tweak input { margin: 0; }
.panel:not([open]) > summary .tweak { display: none; } /* a closed pane has no controls to toggle */
.panel summary .addkey { float: right; margin-left: .6rem; font: inherit; font-size: .65rem; text-transform: none; letter-spacing: 0; padding: 0 .4rem; color: #c8c8d0; background: #1e1e22; border: 1px solid #111; border-radius: 4px; cursor: pointer; }
.panel:not([open]) > summary .addkey { display: none; }
.matrow button.addkey { color: #9a9aa2; }
.matrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .3rem 0; }
.matrow b { min-width: 4.5rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #eee; }
.matrow label { display: inline-flex; align-items: center; gap: .3rem; color: #9a9aa2; }
.matrow label.voice { gap: .15rem; }
.matrow input.snd, .matrow select { font: inherit; font-size: .85rem; padding: .15rem .4rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #eee; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; }
.matrow input.snd::placeholder { color: #77777f; }
.matrow input.snd { width: 7.5rem; }
.matrow label.voice input.snd { width: 5.5rem; }
.matrow input.snd.wide { width: 15rem; font-family: ui-monospace, monospace; }
.matrow input.snd.num { width: 4.8rem; } /* the digits, the spin buttons and the play button on the right all share it */
.matrow button.pick, .rack .cm-hll-ctl button.pick, .rack .cm-hll-ctl input[type=number] { font: inherit; font-size: .85rem; padding: .15rem .4rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #eee; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; min-width: 4rem; text-align: left; }
.matrow button.pick i, .rack .cm-hll-ctl button.pick i { color: #77777f; }
/* the editors' inline widgets (web/cm-widgets.mjs): the pick button (a kit shows its icon), a spinner, a toggle for booleans, the chord row. Dark in the rack, the page's light controls in the source pane */
.cm-hll-ctl button.pick img { width: 16px; height: 16px; vertical-align: -3px; margin-right: .3rem; }
.cm-hll-ctl input[type=number] { min-width: 0; width: 3.6rem; padding-right: .1rem; }
.cm-hll-ctl .pickw { display: inline-flex; align-items: center; gap: .15rem; }
.cm-hll-ctl .tokens button.pick { min-width: 0; padding: .1rem .35rem; }
.cm-hll-ctl .tokens button.add { color: #9a9aa2; padding: .1rem .3rem; }
.cm-hll-ctl input[type=checkbox], .matrow input[type=checkbox] { appearance: none; position: relative; width: 1.7rem; height: .95rem; border-radius: 1rem; border: 1px solid #111; background: #1e1e22; box-shadow: inset 0 1px 0 #3c3c42; cursor: pointer; vertical-align: middle; }
.cm-hll-ctl input[type=checkbox]::before, .matrow input[type=checkbox]::before { content: ''; position: absolute; top: 1px; left: 1px; width: .72rem; height: .72rem; border-radius: 50%; background: #9a9aa2; transition: left .12s; }
.cm-hll-ctl input[type=checkbox]:checked, .matrow input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.cm-hll-ctl input[type=checkbox]:checked::before, .matrow input[type=checkbox]:checked::before { left: calc(100% - .8rem); background: #fff; }
/* quiet until pointed at: a faint outline and muted text, the full button on hover or focus */
/* the YouTube card: a header row per block with its copy button, and a bounded pre (the description is long) */
.ytblock { margin-top: .6rem; }
.ytblock header { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.ytblock pre { max-height: 14rem; overflow: auto; padding: .4rem .6rem; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; }
.ytblock .ytcopy { font: inherit; font-size: .75rem; padding: .05rem .5rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
.ytblock .ytcopy:hover, .ytblock .ytcopy:focus-visible { border-color: var(--accent); }
.pane .cm-hll-ctl button.pick, .pane .cm-hll-ctl input[type=number] { font: inherit; font-size: .85rem; padding: .1rem .4rem; border: 1px solid #e6e6e6; border-radius: 4px; background: transparent; color: var(--muted); min-width: 0; text-align: left; transition: border-color .12s, color .12s, background .12s; }
.pane .cm-hll-ctl button.pick:hover, .pane .cm-hll-ctl button.pick:focus-visible, .pane .cm-hll-ctl input[type=number]:hover, .pane .cm-hll-ctl input[type=number]:focus { border-color: #bbb; background: #fff; color: var(--ink); outline: none; }
.pane .cm-hll-ctl button.pick i { color: #aaa; }
.pane .cm-hll-ctl button.pick img { opacity: .7; }
.pane .cm-hll-ctl input[type=number] { padding-right: .1rem; width: 3.2rem; }
.pane .cm-hll-ctl .tokens button.pick { padding: .1rem .35rem; }
.pane .cm-hll-ctl .pv { color: #bbb; font-size: .65rem; }
.pane .cm-hll-ctl .pv:hover, .pane .cm-hll-ctl .pv.on { color: var(--accent-ink); background: var(--accent); }
.pane .cm-hll-ctl input[type=checkbox] { width: 1.5rem; height: .85rem; border-color: #bbb; background: #e4e6ec; box-shadow: none; }
.pane .cm-hll-ctl input[type=checkbox]::before { width: .62rem; height: .62rem; background: #fff; box-shadow: 0 1px 2px #0003; }
.pane .cm-hll-ctl input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.pane .cm-hll-ctl input[type=checkbox]:checked::before { left: calc(100% - .7rem); }
.pane .cm-hll-ctl input[type=checkbox]:hover { border-color: var(--accent); }
.pane .cm-hll-ctl input[type=checkbox]:checked:hover { background: var(--accent); }
/* the song source pane's sliders: a hairline track and a small thumb, quiet next to the code; the accent only on hover */
.pane .cm-hll-ctl input[type=range] { appearance: none; -webkit-appearance: none; width: 5em; height: 10px; margin: 0; background: none; cursor: ew-resize; }
.pane .cm-hll-ctl input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: #ccc; }
.pane .cm-hll-ctl input[type=range]::-moz-range-track { height: 2px; border-radius: 1px; background: #ccc; }
.pane .cm-hll-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -3px; width: 8px; height: 8px; border-radius: 50%; border: 0; background: #888; }
.pane .cm-hll-ctl input[type=range]::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; border: 0; background: #888; }
.pane .cm-hll-ctl input[type=range]:hover::-webkit-slider-thumb, .pane .cm-hll-ctl input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.pane .cm-hll-ctl input[type=range]:hover::-moz-range-thumb, .pane .cm-hll-ctl input[type=range]:focus-visible::-moz-range-thumb { background: var(--accent); }
.pane .cm-hll-ctl input[type=range]:focus-visible { outline: none; }
#picklist .row img { width: 22px; height: 22px; }
/* the song source pane: the same editor, light, sized and resizable like the textarea it replaced; its controls checkbox in the header */
.pane .cm-editor { height: 26rem; border: 1px solid var(--line); border-radius: 6px; resize: vertical; overflow: hidden; }
.pane .cm-scroller { overflow: auto; }
.pane header .tweak { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); cursor: pointer; }
.pane header .tweak input { margin: 0; }
.matrow label.lvl { margin-left: auto; }
.matrow label.lvl input { width: 6rem; accent-color: var(--accent); }
.matrow label.lvl output { min-width: 2.6rem; font-size: .8rem; font-variant-numeric: tabular-nums; color: #ccc; }
/* audition buttons: on a text box only while it has focus (or is playing); on a menu row always, at the right */
.pv { font: inherit; font-size: .7rem; line-height: 1; padding: .2rem .35rem; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }
.pv:hover, .pv.on { color: var(--accent-ink); background: var(--accent); }
.matrow .tb { position: relative; display: inline-flex; }
.matrow .tb input.snd { padding-right: 1.5rem; }
.matrow .tb .pv { position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); display: none; color: #ccc; }
.matrow .tb:focus-within .pv, .matrow .tb .pv.on { display: inline-block; }
.pvlvl { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 .1rem; font-size: .8rem; color: #9a9aa2; }
.pvlvl input { position: static; width: 7rem; margin: 0; padding: 0; border: 0; accent-color: var(--accent); }
.pvlvl output { min-width: 2.2rem; font-variant-numeric: tabular-nums; color: #ccc; }
#mats .pvlvl { display: inline-flex; width: auto; white-space: nowrap; margin: .1rem .8rem .6rem; padding: .3rem .7rem; border: 1px solid #111; border-radius: 5px; background: #1e1e22; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; } /* under the part rows: its own small box, like the other dark controls */
.menu .pvlvl { padding: 0 .6rem .3rem; color: var(--muted); }
.pvlvl[hidden] { display: none; } /* the flex rule above would otherwise beat the hidden attribute (a menu without play buttons) */
.menu .pvlvl output { color: var(--ink); }
.menu .row { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem .2rem .6rem; border-radius: 4px; cursor: pointer; line-height: 1.3; }
.menu .row span { flex: 1; min-width: 0; }
.menu .row small { display: block; color: #9b9b9b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the second line: lighter than the name and one line, however long the note is */
.menu .row small.when { display: inline; margin-left: .45rem; } /* the date stays on the name's line */
.menu .row:hover { background: #eef3fd; }
.menu .row[aria-selected="true"] { background: #e6eefc; }
.menu .row[hidden] { display: none; }
.menu .row .pv { display: inline-block; width: auto; }
.matrow i { color: #8a8a92; font-style: italic; }
#code + .err { margin-top: .25rem; }
.pane header button { padding: .1rem .45rem; line-height: 1.2; }
.vt { border-collapse: collapse; font: var(--mono); margin-top: .5rem; }
.vt th, .vt td { padding: .1rem .6rem; text-align: right; }
.vt th { color: var(--muted); font-weight: normal; }
#vout .row { margin-top: .5rem; }
#vout audio { height: 2rem; }

/* export badge: rendering (spinner), done (green), failed (red) */
.xstate { display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem; padding: .15rem .55rem; border-radius: 99px; font-size: .85rem; white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.xstate.busy { background: #eef3fd; color: var(--accent); }
.xstate.busy::before { content: ''; width: .7rem; height: .7rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.xstate.done { background: #e6f5ea; color: #1b6b32; }
.xstate.done a { color: inherit; }
.xstate.done small { color: inherit; opacity: .7; }
.xstate.fail { background: #fbe9ec; color: var(--err); }

/* the transport slider's lane: one dot per change comment sits above the knob */
span.lane { position: relative; flex: 1; min-width: 12rem; display: flex; align-items: center; padding-top: .6rem; margin-top: -.6rem; } /* the padding holds the dots; the negative margin keeps the slider on the buttons' centre line */
.lane input[type=range] { width: 100%; margin: 0; }
.fbbar { flex-wrap: nowrap; margin-bottom: .5rem; }
.lane.small { margin: 0; min-width: 0; }
.lane.small input { accent-color: var(--accent); }
.lane .dot { position: absolute; top: 0; width: .7rem; height: .7rem; padding: 0; border-radius: 50%; background: var(--c, var(--accent)); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c, var(--accent)); transform: translateX(-50%); cursor: grab; touch-action: none; }
.lane .dot.on { transform: translateX(-50%) scale(1.4); }
#fbnotes { list-style: none; padding-left: .25rem; }
#fbnotes .sw { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: baseline; }
.notes li.on { background: #fff6dc; border-radius: 4px; }
.notes li a { text-decoration: none; }

/* side-by-side panes, stacked when narrow */
.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 60rem) { .panes { grid-template-columns: 1fr; } }
.pane textarea, .pane pre.gen { width: 100%; height: 26rem; border: 1px solid var(--line); border-radius: 6px; padding: .5rem; overflow: auto; }
.pane textarea { font: var(--mono); resize: vertical; }
pre.gen { position: relative; background: var(--gen); color: #333; } /* relative: the changed line scrolls within the pane by its offsetTop */
pre.gen .hl { display: inline-block; width: 100%; animation: flash 20s ease-out; } /* lines the last edit changed */
@keyframes flash { from { background: #ffe58a; } to { background: transparent; } }
.err { color: var(--err); white-space: pre-wrap; }
.stale { color: #a05a00; font-size: .85rem; }
/* the song's declared sample packs: deployed ships with the site, local stays on this machine, missing will not play */
.pack { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 99px; background: #e6f5ea; color: #1b6b32; }
.pack.local { background: #fff3d6; color: #7a4b00; }
.pack.missing { background: #fbe9ec; color: var(--err); }
textarea.note { width: 100%; min-height: 4rem; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
.notes li { margin: .25rem 0; }
.prompt { margin: 0 0 .5rem; padding: .4rem .6rem; border-left: 3px solid var(--accent); background: var(--gen); font-style: italic; } /* the request the song came from */
.tag { display: inline-block; font-size: .75rem; padding: .05rem .4rem; border-radius: 99px; background: #eee; color: #555; margin-right: .25rem; }
.placeholder { border: 1px dashed #c9c9c9; border-radius: 6px; padding: .5rem .75rem; color: var(--muted); font-size: .9rem; }

/* examples page */
/* one row per arc: the arc name, then its group pills */
.subnav { display: grid; gap: .3rem; position: sticky; top: 2.6rem; z-index: 1; background: var(--bg); padding: .5rem 0; }
.subnav div { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.subnav a { text-decoration: none; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .9rem; }
.subnav b { flex: 0 0 7.5rem; color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* the overview diagram: full width of the intro card, its links the same blue as the page's */
.map { margin: 1rem 0 0; }
.map svg { width: 100%; height: auto; max-width: 62rem; }
.map svg a text { text-decoration: underline; text-underline-offset: 2px; }
.map figcaption { max-width: 62rem; margin-top: .3rem; color: var(--muted); font-size: .85rem; }
.intro p { max-width: 60rem; }
#groups { display: grid; gap: 3rem; margin-top: 1rem; }
.exgroup { display: grid; gap: .75rem; scroll-margin-top: 11rem; } /* anchors land below the sticky subnav */
.exgroup + .exgroup { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.exgroup > h2 { font-size: 1.4rem; }
.exgroup > p { max-width: 60rem; margin: 0; color: var(--muted); }
.ex .variants { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.ex pre { border: 1px solid var(--line); border-radius: 6px; padding: .5rem; overflow: auto; max-height: 20rem; }
.ex textarea.hll { display: block; width: 100%; min-height: 3.2rem; font: var(--mono); padding: .5rem; border: 1px solid var(--line); border-radius: 6px; resize: vertical; field-sizing: content; max-height: 20rem; }
.ex .body { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } /* blurb, explanation and tags stacked on the left, the 219x135 animated svg on the right */
.ex .body > div { flex: 1 1 20rem; }
.ex .body h3 { margin-bottom: .5rem; }
.ex .body p { margin: 0 0 .5rem; }
.ex .tags { margin-bottom: .5rem; }
.ex .viz { flex: none; margin: 0; }
.ex .viz svg { display: block; width: 219px; height: 135px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ex details { margin-top: .5rem; }
.ex details summary { cursor: pointer; color: var(--muted); }
.ex:not(.playing) .stop { display: none; }
.ex.playing { border-color: var(--accent); box-shadow: 0 0 0 2px #e6eefc; }
.ex.stub { border-style: dashed; background: transparent; }
.ex.stub p { color: var(--muted); }

/* renaming a section: the box takes the name's place inside the block */
.strip .rn { width: 100%; font: inherit; font-size: .75rem; padding: 0 .2rem; border: 1px solid var(--accent); border-radius: 3px; background: #fff; color: var(--ink); }

/* mute / solo on a knob row, and the A/B button: what you hear, never the source */
.knobs b { justify-content: space-between; min-width: 0; }
.knobs b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knobs b .ops { display: inline-flex; gap: .15rem; flex: none; }
.knobs b .ops button { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid transparent; border-radius: 4px; opacity: .55; }
.knobs b .ops button:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.knobs b .ops button.on { opacity: 1; color: #fff; }
.knobs b [data-mute].on { background: #a05a00; }
.knobs b [data-solo].on { background: var(--accent); }
#ab { padding: .1rem .45rem; line-height: 1.2; }
#ab.on { background: #fff3d6; border-color: #a05a00; color: #7a4b00; }

/* seeing: a part's onsets across the section's bars under its knob row; bar lines from --bars, the playhead from --ph on .knobs */
.knobs .ev { grid-column: 1 / -1; position: relative; height: 6px; margin: -.15rem 0 .15rem; border-radius: 2px; background: #141417 repeating-linear-gradient(to right, #2c2c32 0 1px, transparent 1px calc(100% / var(--bars, 1))); background-size: 100% 100%; overflow: hidden; }
.knobs .ev i { position: absolute; top: 1px; bottom: 1px; min-width: 2px; border-radius: 1px; background: var(--accent); opacity: .8; }
.knobs .ev::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--ph, -1) * 100%); width: 2px; background: #fff; opacity: .9; }
/* harmony: the key at the left, then one cell per bar of the section (the progression repeating, repeats dimmer), + at the right */
.harm { display: flex; align-items: stretch; gap: .4rem; margin: 0 0 .6rem; }
.harm .key { flex: none; align-items: center; justify-content: center; gap: .4rem; min-width: 6rem; line-height: 1.15; }
.harm .key small { color: #77777f; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.harm .bars { flex: 1; display: flex; border: 1px solid #111; border-radius: 4px; background: #1e1e22; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; overflow: hidden; }
.harm .bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .2rem 0; border: 0; border-left: 1px solid #111; border-radius: 0; background: transparent; color: #eee; line-height: 1.15; }
.harm .bar:first-child { border-left: 0; }
.harm .bar:hover { background: #2a2a30; }
.harm .bar b { font-size: .95rem; font-weight: 600; }
.harm .bar small { color: #9a9aa2; font-size: .65rem; }
.harm .bar.rep { opacity: .45; }
.harm .add { flex: none; min-width: 2rem; justify-content: center; color: #9a9aa2; }
/* the melody's line: seed stepper, the line it makes, a play button */
.matrow label.seed { gap: .35rem; }
.matrow label.seed .step { min-width: 0; padding: .1rem .35rem; }
.matrow label.seed .seedno { color: #eee; white-space: nowrap; }
.matrow label.seed .seedno small { margin-left: .25rem; color: #77777f; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.matrow label.seed code { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8e6a0; font-size: .8rem; }
.matrow label.seed .pv { color: #ccc; background: none; border: 0; padding: 0 .2rem; }
.matrow button.next { min-width: 0; margin-left: .2rem; }

/* the sampler row (a sample part in materials): the waveform with the used region lit and a line per slice, its trim sliders, a button per slice */
.matrow .wave { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; width: 100%; }
.matrow .wave canvas { display: block; width: 100%; height: 72px; background: #131316; border: 1px solid #111; border-radius: 4px; cursor: crosshair; touch-action: none; }
.matrow .wave label { gap: .4rem; min-width: 14rem; }
.matrow .wave label.snap { min-width: 0; }
.matrow .wave input[type=range] { flex: 1; min-width: 8rem; accent-color: var(--accent); }
.matrow .wave output { min-width: 3.6rem; font-variant-numeric: tabular-nums; color: #9a9aa2; }
.matrow .wave .slices { display: flex; gap: .15rem; flex-wrap: wrap; }
.matrow .wave button.sl { min-width: 1.8rem; padding: .1rem .3rem; font: inherit; font-size: .8rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #eee; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; }
.matrow .wave button.sl.on { background: var(--accent); border-color: var(--accent); }
.matrow .wave .info { color: #77777f; }
.matrow .wave .info .unsure { opacity: .6; font-style: italic; } /* a detection nothing periodic really supports */
.matrow .wave .info button.pick { min-width: 0; padding: 0 .3rem; margin-left: .2rem; }
.matrow .inh, .matrow input.inh { color: #77777f; } /* a value the part inherits from its pack's sample definition */

/* the drum template as a clickable grid: a row per voice, a button per step (web/stepgrid.mjs) */
.matrow .gridwrap { width: 100%; }
:is(.stepgrid, .roll) .row { display: grid; grid-template-columns: 2.4em repeat(var(--steps), minmax(0, 1fr)); gap: 1px; align-items: center; margin: 1px 0; }
:is(.stepgrid, .roll) .st { height: 1.25em; padding: 0; font-size: .7em; border: 1px solid #ddd; background: #f6f6f6; color: #333; }
.rack :is(.stepgrid, .roll) .st { border-color: #444; background: #2a2a2a; color: #ddd; }
:is(.stepgrid, .roll) .st.beat { border-left: 2px solid #999; }
:is(.stepgrid, .roll) .st.hit { background: #8fa6e2; } .stepgrid .st.accent { background: #2f6fed; color: #fff; } .stepgrid .st.ghost { background: #c9d4ee; }
.roll .st.hold { background: #5f7ac8; } /* the note roll (web/roll.mjs): a held note's continuation */
.matrow .rollwrap summary .pv { color: #ccc; padding: 0 .3rem; } /* the roll's own play button, always shown */

/* the transition out of a block: riser bars and the next section's hit, two small picks on the block's last line */
.strip .blk .tr { display: flex; gap: .2rem; margin-top: 3px; }
.strip .blk .tr button { flex: 1 1 0; min-width: 0; padding: 0 .3rem; font-size: .62rem; line-height: 1.5; border: 1px solid #111; border-radius: 3px; background: #1e1e22; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 #3c3c42; }
.strip .blk .tr button svg { vertical-align: -2px; }
.strip .blk .tr .w { display: none; } /* the word next to the icon only on the selected (or pinned) block; the icon alone elsewhere */
.strip .blk.on .tr .w, .strip .blk.pin .tr .w { display: inline; }
.strip .blk .tr button i { display: inline; height: auto; background: none; box-shadow: none; color: #77777f; font-style: normal; } /* a placeholder, not a density bar */
.strip .blk .tr button:hover { color: #fff; border-color: #444; }

/* the sample workshop (samples.html, local only): packs on the left, one definition's waveform and form on the right */
.workshop { grid-template-columns: 16rem 1fr; align-items: start; }
.workshop #packs h2, .workshop #packs h3 { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.workshop .wpack { margin-bottom: .8rem; }
.workshop .wpack h3 { display: flex; align-items: baseline; gap: .4rem; }
.workshop .wpack h3 button { font: inherit; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.workshop .wpack.on h3 button { color: var(--accent); }
.workshop .wpack small { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.workshop .wpack ul { list-style: none; margin: 0; padding: 0 0 0 .3rem; font-size: .85rem; }
.workshop .wpack li button { font: inherit; padding: .05rem .25rem; border: 0; border-radius: 3px; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.workshop .wpack li.snd button { color: var(--muted); } /* a pack sound: the file, not a definition of it */
.workshop .wpack li.sel button { background: var(--accent); color: var(--accent-ink); }
.workshop .wpack li.bad { color: var(--err); padding: .1rem .25rem; }
.workshop .drop { margin: .3rem 0 0; padding: .4rem; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); font-size: .8rem; text-align: center; }
.workshop .drop input { display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: .75rem; }
.workshop #newpack { display: grid; gap: .3rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.workshop #newpack input { font: inherit; font-size: .85rem; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 4px; }
.workshop #editor { display: grid; gap: .2rem; }
.workshop #editor[hidden] { display: none; } /* the id rule above would otherwise beat the hidden attribute (no pack selected) */
.workshop #wave { display: block; width: 100%; height: 160px; background: #131316; border: 1px solid #111; border-radius: 4px; cursor: crosshair; touch-action: none; }
.workshop #editor .info { color: #77777f; font-size: .85rem; min-height: 1.2em; }
.workshop #editor .info .unsure { opacity: .6; font-style: italic; }
.workshop #editor .info button.pick { min-width: 0; padding: 0 .3rem; }
.workshop #editor .slices { display: flex; gap: .15rem; flex-wrap: wrap; }
.workshop #editor button.sl { min-width: 1.8rem; padding: .1rem .3rem; font: inherit; font-size: .8rem; border: 1px solid #111; border-radius: 4px; background: #1e1e22; color: #eee; box-shadow: inset 0 1px 0 #3c3c42, 0 1px 0 #48484e; }
.workshop #editor button.sl.on, .workshop #editor button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.workshop #wstatus { min-height: 1.2em; color: #9a9aa2; font-size: .85rem; }
@media (max-width: 60rem) { .workshop { grid-template-columns: 1fr; } }

/* the listen page: one stage, two side by side, or every world at once. The boxes are .stagebox, as on the Compose
   stage, but sized by the grid rather than by the window's height. */
/* The wall: every channel is painted into this one canvas, because a canvas per channel is a layer per channel for
   the compositor, and eighteen live layers cap the whole page at about a hundred tile updates a second. The tiles
   are rectangles inside it, animated in js, so opening a world is a zoom of the moving picture and not a cut. */
/* the wall is the page here, so it takes the window's width rather than the reading measure the other pages keep */
main.wide { max-width: none; padding-bottom: 1rem; }
.listen .cells { position: relative; }
.listen #screen { position: relative; }
.listen #wall { display: block; width: 100%; background: #05060a; border-radius: 6px; }
/* one transparent button per tile: the click target, and what a keyboard and a screen reader reach */
.listen #hits { position: absolute; inset: 0; }
.listen #hits button { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.listen #hits button:hover { box-shadow: inset 0 0 0 2px #fff6; }
.listen #hits button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listen .chan { margin: .4rem 0 0; min-height: 1.2em; font-size: .85rem; }
/* the transport sits under the wall on the page, and over it in fullscreen, where it fades away until the mouse
   moves: a wall you are watching should not have a toolbar across it */
.listen .cells:fullscreen { background: #000; }
.listen .cells:fullscreen #wall { border-radius: 0; }
.listen .cells:fullscreen #screen { height: 100%; }
.listen .cells:fullscreen #bar { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .75rem 1rem;
  background: linear-gradient(transparent, #000c 40%); transition: opacity .3s; }
.listen .cells:fullscreen #bar .muted { color: #ccc; }
.listen .cells:fullscreen.idle { cursor: none; }
.listen .cells:fullscreen.idle #bar { opacity: 0; pointer-events: none; }
.listen #bar { margin-top: .5rem; }
.listen #scrub { min-width: 8rem; }