/* SIDE A instruments — standalone styles. One design unit (--u) = 1px at 1100px wide. */

/* ── The Confluence Still ───────────────────────────────────────────── */
/* Key light: a tungsten lamp high and left. Rim light: moonlight from the window, right. */

.instrument--still {
  --brass-hi: #fde7ae; --brass: #cf9c50; --brass-lo: #6e4618; --copper: #b8652f;
  --walnut: #2b190d; --ink: #241307; --enamel: #0d1428;
  --sol: #ffb04a; --luna: #79e6dc;
  --key: rgba(255, 222, 160, .6); --rim: rgba(160, 215, 255, .35);
  --u: 1px;
  position: relative; width: 100%; max-width: 1100px; margin-inline: auto;
  container: still / inline-size;
  color: var(--brass-hi);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.instrument--still *, .instrument--still *::before, .instrument--still *::after { box-sizing: border-box; }
.instrument--still i { font-style: normal; }
.still-pan { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.still-pan::-webkit-scrollbar { display: none; }
.still-body { position: relative; width: max(100%, 1060px); aspect-ratio: 1100 / 680; container-type: inline-size; }
.still-rig { position: absolute; inset: 0; --u: calc(100cqw / 1100); }
.instrument--still .at {
  position: absolute; margin: 0;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.still-snap { position: absolute; top: 0; left: calc(var(--x) * var(--u)); width: 1px; height: 1px; scroll-snap-align: center; }
.still-hint {
  display: none; justify-content: center; gap: .6em; margin: 0 0 6px;
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #e9c98a; opacity: .75;
}
.still-hint span { animation: still-nudge 1.6s ease-in-out infinite alternate; }
@container still (max-width: 1059px) { .still-hint { display: flex; } }

.still-d0 { --hue: var(--sol); --hue-deep: #a8420f; --pos: var(--d0-pos, 0); --meter: var(--d0-meter, 0); --frac: var(--f0, 0); --spin: var(--sa0, 0deg); --sand: var(--g0, 0); --hi: var(--eq0-high, .667); --mid: var(--eq0-mid, .667); --low: var(--eq0-low, .667); }
.still-d1 { --hue: var(--luna); --hue-deep: #24527a; --pos: var(--d1-pos, 0); --meter: var(--d1-meter, 0); --frac: var(--f1, 0); --spin: var(--sa1, 0deg); --sand: var(--g1, 0); --hi: var(--eq1-high, .667); --mid: var(--eq1-mid, .667); --low: var(--eq1-low, .667); }

/* Plumbing and glass (SVG, decorative) */
.still-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.still-art .manifold { fill: url(#sa-walnut); stroke: var(--brass); stroke-width: 1.5; }
.still-art .engrave { fill: none; stroke: rgba(253, 231, 174, .2); stroke-dasharray: 1 3; }
.still-art .bolt { fill: #c99447; stroke: #2a1708; stroke-width: .8; }
.still-art .coil ellipse { fill: none; stroke: var(--copper); stroke-width: 3; }
.still-art .pipe, .still-art .pipe-cu, .still-art .pipe-hi, .still-art .glowpipe { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.still-art .pipe { stroke: #2a1206; stroke-width: 13; }
.still-art .pipe-cu { stroke: var(--copper); stroke-width: 9; }
.still-art .pipe-cu.thin { stroke-width: 4; }
.still-art .pipe-hi { stroke: #ffd6ae; stroke-width: 2.2; opacity: .6; transform: translate(-2px, -1.5px); }
.still-art .glowpipe { stroke: var(--hue); stroke-width: 2; stroke-dasharray: 2 14; opacity: calc(.06 + var(--meter) * .8); animation: still-flow .9s linear infinite; }
.still-art :is(.flange, .cap, .brass-bar, .foot-brass, .mast) { fill: url(#sa-brass); stroke: #3a2008; stroke-width: .6; }
.still-art .brass-ring { fill: none; stroke: var(--brass); stroke-width: 3.5; }
.still-art .leg { stroke: #8a5a24; stroke-width: 4; stroke-linecap: round; }
.still-art .foot { stroke: var(--brass); stroke-width: 4; stroke-linecap: round; }
.still-art .plinth { fill: url(#sa-walnut); }
.still-art .brass-line { stroke: var(--brass); stroke-width: 1.4; }
.still-art .claw { fill: #3f260e; stroke: var(--brass); stroke-width: 2.4; }
.still-art .ticks path { stroke: rgba(253, 231, 174, .65); stroke-width: 1.3; stroke-linecap: round; }
.still-art .arc-text { font: italic 600 7.5px "Fraunces", Georgia, serif; letter-spacing: 2.4px; fill: var(--brass-hi); opacity: .7; text-anchor: middle; }
.still-art .lock-halo { fill: none; stroke: #fff1c2; stroke-width: 2.5; opacity: var(--lock, 0); filter: drop-shadow(0 0 5px #ffcf70); }
.still-art .hand { stroke-width: 2.6; stroke-linecap: round; transform-box: view-box; transform-origin: 550px 226px; }
.still-art .hand--0 { stroke: var(--sol); transform: rotate(calc(var(--f0, 0) * 360deg)); }
.still-art .hand--1 { stroke: var(--luna); transform: rotate(calc(var(--f1, 0) * 360deg)); }
.still-art .sun { fill: var(--sol); stroke: #fff3d0; stroke-width: 1; }
.still-art .moon { fill: var(--luna); stroke: none; }
.still-art .lantern-cap { fill: url(#sa-brass); stroke: var(--brass); stroke-width: 2; }
.still-art .lantern-glass { fill: rgba(200, 240, 255, .07); stroke: rgba(255, 255, 255, .35); }
.still-art .lantern-glow { fill: #ffcf70; opacity: calc(var(--lock, 0) * .4); }
.still-art .lantern-flame { fill: #ffe6a8; opacity: calc(.12 + var(--lock, 0) * .88); }
.still-art .tiny { font: 600 7px "IBM Plex Mono", monospace; letter-spacing: 1.4px; fill: var(--brass-hi); opacity: .6; }
.still-art .vessel-back { fill: rgba(8, 12, 20, .6); }
.still-art .mix-sol { opacity: .92; }
.still-art .mix-luna { opacity: var(--xf, .5); }
.still-art .sediment { fill: rgba(50, 10, 4, .5); }
.still-art .surface { fill: #fff6dc; opacity: calc(.18 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .5); }
.still-art .ripple { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 550px 486px; }
.still-art .ripple--0 { stroke: #fff0c8; transform: scale(calc(.1 + var(--f0, 0) * .9)); opacity: calc((1 - var(--f0, 0)) * .95); }
.still-art .ripple--1 { stroke: #d6fff8; transform: scale(calc(.1 + var(--f1, 0) * .9)); opacity: calc((1 - var(--f1, 0)) * .95); }
.still-art .drip { transform-box: view-box; }
.still-art .drip--0 { fill: var(--sol); transform: translateY(calc(clamp(0, (var(--f0, 0) - .55) / .45, 1) * 76px)); opacity: clamp(0, (var(--f0, 0) - .5) * 12, 1); }
.still-art .drip--1 { fill: var(--luna); transform: translateY(calc(clamp(0, (var(--f1, 0) - .55) / .45, 1) * 76px)); opacity: clamp(0, (var(--f1, 0) - .5) * 12, 1); }
.still-art .vessel-glass { stroke: rgba(220, 250, 255, .5); stroke-width: 1.6; }
.still-art .vessel-glint { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
.still-art .band { fill: none; stroke: var(--brass); stroke-width: 3; opacity: .85; }

/* Engraved legends, live values, real inputs under the art */
.still-legend {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; pointer-events: none; white-space: nowrap;
  font: 600 calc(8.5 * var(--u))/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .16em;
  color: #f1d9a0; text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 230, 170, .12);
}
.instrument--still .control { display: block; cursor: grab; }
.instrument--still .control input[type="range"] {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit; touch-action: none;
}
.instrument--still .control:active { cursor: grabbing; }
.instrument--still .control output {
  position: absolute; left: 50%; top: calc(-14 * var(--u)); translate: -50% 4px; z-index: 3; pointer-events: none;
  padding: 2px 5px; border-radius: 3px; background: #120a04; box-shadow: 0 0 0 1px #6e4618;
  font: 500 calc(9 * var(--u))/1 "IBM Plex Mono", monospace; color: #ffe2a6;
  opacity: 0; transition: opacity .15s, translate .15s;
}
.instrument--still .control:is(:hover, :focus-within) output { opacity: 1; translate: -50% 0; }
.instrument--still :is(.control:has(input:focus-visible), .still-btn:focus-visible, .still-flask:focus-visible) {
  outline: 2px solid #ffe7a8; outline-offset: 3px; border-radius: calc(12 * var(--u));
}
.instrument--still :focus:not(:focus-visible) { outline: none; }

/* Flask: the stirring well. Liquid, floating label, glass rod. */
.still-flask {
  border-radius: 50%; cursor: grab; touch-action: none; z-index: 1;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .32), rgba(200, 240, 250, .05) 32%, rgba(110, 160, 180, .1) 72%, rgba(220, 250, 255, .32));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(225, 250, 255, .5), inset calc(-12 * var(--u)) calc(-16 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .4), 0 calc(22 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, .7);
}
.still-flask:active { cursor: grabbing; }
.flask-liquid {
  position: absolute; inset: calc(4 * var(--u)); border-radius: 50%; overflow: hidden;
  background: linear-gradient(transparent 36%, color-mix(in oklab, var(--hue) 80%, white) 36.5%, var(--hue) 44%, var(--hue-deep));
  opacity: .78; filter: brightness(calc(.75 + var(--meter) * .55));
}
.flask-liquid .bubbles {
  position: absolute; inset: 40% 18% 0; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.5px, transparent 2.5px) 0 0 / 18% 30%,
              radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 2px) 9% 15% / 23% 27%;
}
.instrument--still:has([data-control="play"][data-deck="0"]:is([data-on="true"], [aria-pressed="true"])) .still-flask.still-d0 .bubbles,
.instrument--still:has([data-control="play"][data-deck="1"]:is([data-on="true"], [aria-pressed="true"])) .still-flask.still-d1 .bubbles { opacity: 1; animation: still-boil 1.4s linear infinite; }
.still-flask .record-label {
  position: absolute; left: 50%; top: 50%; width: calc(68 * var(--u)); height: calc(68 * var(--u)); margin: calc(-34 * var(--u));
  border-radius: 50%; rotate: var(--spin);
  background: var(--record-art, radial-gradient(circle, var(--hue) 0 30%, var(--hue-deep))) center / cover no-repeat;
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--record-color, var(--hue)), 0 0 0 calc(4.5 * var(--u)) rgba(30, 14, 4, .8), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .55);
}
.still-flask .record-label::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #1a0d05; box-shadow: 0 0 0 1px rgba(255, 230, 180, .5); }
.flask-rod {
  position: absolute; left: calc(50% - 2.5 * var(--u)); top: 7%; width: calc(5 * var(--u)); height: 43%;
  transform-origin: 50% 100%; rotate: var(--spin); border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(190, 235, 250, .35) 60%, rgba(255, 255, 255, .6));
  box-shadow: 0 0 calc(6 * var(--u)) rgba(200, 240, 255, .5);
}
.flask-rod::before { content: ""; position: absolute; left: 50%; top: calc(-5 * var(--u)); width: calc(11 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--hue) 60%, var(--hue-deep)); }
.flask-glint { position: absolute; inset: 8% 50% 50% 12%; border-radius: 50% 0 0 0; border: solid rgba(255, 255, 255, .55); border-width: calc(3 * var(--u)) 0 0 calc(3 * var(--u)); filter: blur(.4px); pointer-events: none; }

/* Strata column: layer thickness follows each EQ valve; brightness follows the meter. */
.still-strata {
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  border-radius: calc(8 * var(--u)); padding: calc(3 * var(--u));
  background: linear-gradient(90deg, rgba(220, 250, 255, .25), rgba(120, 170, 190, .06) 35%, rgba(255, 255, 255, .02) 65%, rgba(220, 250, 255, .3));
  box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .45), inset 0 0 calc(12 * var(--u)) rgba(0, 0, 0, .5);
  filter: brightness(calc(.72 + var(--meter) * .6));
}
.still-strata > i { display: block; flex: none; border-radius: calc(4 * var(--u)); transition: height .25s ease; }
.still-strata .head { flex: 1; }
.still-strata .breath { height: calc((8 + 58 * var(--hi)) * var(--u)); background: linear-gradient(rgba(240, 230, 255, 0), rgba(226, 214, 255, .55)); }
.still-strata .body { height: calc((8 + 58 * var(--mid)) * var(--u)); background: linear-gradient(color-mix(in oklab, var(--hue) 55%, #ff7aa8), color-mix(in oklab, var(--hue) 70%, #6a1c3c)); }
.still-strata .ember { height: calc((8 + 58 * var(--low)) * var(--u)); background: radial-gradient(circle at 30% 70%, #ffcf6a 0 1.2px, transparent 2px) 0 0 / 9px 9px, linear-gradient(#c2361a, #4a0d04); }

.deck-meter {
  border-radius: 99px; overflow: hidden; background: #0b0604;
  box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .35), 0 0 0 calc(2 * var(--u)) #3a2008;
}
.deck-meter__fill {
  position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(var(--meter));
  background: linear-gradient(#fff4d6, var(--hue) 30%, var(--hue-deep)); box-shadow: 0 0 calc(10 * var(--u)) var(--hue);
}

/* Brass plates and enamel readouts */
.still-plate, .still-plaque {
  background: linear-gradient(172deg, #fde7ae, #cf9c50 38%, #9a6a2c 70%, #c99447);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(60, 30, 8, .6), 0 3px 6px rgba(0, 0, 0, .55);
  color: var(--ink);
}
.still-plate { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(5 * var(--u)); }
.still-plate b { font: 700 italic calc(17 * var(--u))/1 "Fraunces", Georgia, serif; color: var(--hue-deep); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.still-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 calc(12.5 * var(--u))/1.1 "DM Sans", sans-serif; text-shadow: 0 1px 0 rgba(255, 240, 200, .45); }
.still-plate::before, .still-plate::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c8, #7a4c18); }
.still-plate::before { left: 4px; } .still-plate::after { right: 4px; }
.still-plaque { display: grid; place-items: center; align-content: center; border-radius: 50%; }
.still-plaque b { font: 600 calc(24 * var(--u))/1 "Fraunces", Georgia, serif; color: #3a1d08; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.still-plaque em { font: italic 500 calc(11 * var(--u))/1.2 "Fraunces", Georgia, serif; letter-spacing: .12em; color: #4a2a0e; }
.still-assay {
  display: grid; grid-template: auto auto / 1fr auto; align-content: center; column-gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(9 * var(--u));
  border-radius: calc(8 * var(--u)); background: radial-gradient(120% 90% at 30% 20%, #1c2748, #070b16);
  box-shadow: inset 0 0 0 1px #000, inset 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .7), 0 0 0 calc(3 * var(--u)) #a8752f, 0 0 0 calc(4 * var(--u)) #3a2008;
  font-family: "IBM Plex Mono", monospace; color: var(--hue);
}
.assay-bpm { font-size: calc(21 * var(--u)); font-weight: 500; line-height: 1; text-shadow: 0 0 calc(8 * var(--u)) var(--hue); }
.assay-unit { align-self: end; font-size: calc(8 * var(--u)); letter-spacing: .14em; opacity: .7; }
.assay-time { font-size: calc(11 * var(--u)); opacity: .9; }
.assay-base { display: flex; align-items: center; gap: 3px; justify-self: end; font-size: calc(7.5 * var(--u)); letter-spacing: .12em; color: #e9c98a; }
.assay-base input {
  width: calc(44 * var(--u)); height: calc(18 * var(--u)); padding: 0 2px; border: 0; border-radius: 3px;
  background: rgba(255, 230, 180, .08); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .35);
  font: 500 calc(10 * var(--u)) "IBM Plex Mono", monospace; color: #ffe2a6; text-align: right; -moz-appearance: textfield;
}
.assay-base input::-webkit-inner-spin-button { opacity: .4; }
.still-rate, .still-phase { font: 500 calc(10 * var(--u))/calc(18 * var(--u)) "IBM Plex Mono", monospace; text-align: center; letter-spacing: .06em; }
.still-rate { color: #f1d9a0; }
.still-phase { color: var(--hue); text-shadow: 0 0 6px color-mix(in oklab, var(--hue) 60%, transparent); }
.still-phase.still-d0::before { content: "☉ "; } .still-phase.still-d1::before { content: "☾ "; }

/* Shelf and hourglass */
.still-shelf {
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  background:
    linear-gradient(#cf9c50, #6e4618) 0 calc(66 * var(--u)) / 100% calc(5 * var(--u)) no-repeat,
    linear-gradient(#cf9c50, #6e4618) 0 calc(130 * var(--u)) / 100% calc(5 * var(--u)) no-repeat,
    linear-gradient(#3a2414, #1d0f07);
  box-shadow: inset 0 0 0 1.5px #8a5a24, 0 8px 18px rgba(0, 0, 0, .55);
}
.still-shelf em { position: absolute; left: 0; right: 0; bottom: calc(-15 * var(--u)); text-align: center; font: italic 500 calc(11 * var(--u))/1 "Fraunces", Georgia, serif; letter-spacing: .2em; color: #e9c98a; }
.still-hourglass {
  border-block: calc(4 * var(--u)) solid #a8752f; border-radius: 2px;
  background: linear-gradient(90deg, #6e4618 0 calc(2 * var(--u)), transparent 0 calc(100% - 2 * var(--u)), #6e4618 0);
}
.still-hourglass > i { position: absolute; left: 12%; right: 12%; height: 46%; background: rgba(220, 250, 255, .1); box-shadow: inset 0 0 0 1px rgba(220, 250, 255, .4); }
.still-hourglass .sand-top { top: 2%; clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%); background: linear-gradient(transparent calc(var(--sand) * 100%), #f1c879 0) rgba(220, 250, 255, .08); }
.still-hourglass .sand-bottom { bottom: 2%; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(transparent calc((1 - var(--sand)) * 100%), #f1c879 0) rgba(220, 250, 255, .08); }
/* Buttons: every one is a real <button>; art inside is decorative. */
.still-btn {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0;
  transition: transform .08s ease, filter .2s;
}
.still-btn:active, .still-btn[data-held="true"] { transform: translateY(calc(1.5 * var(--u))); }
.still-btn[data-loading="true"] { animation: still-breathe 1s ease-in-out infinite; }
.still-btn .btn-art { position: absolute; inset: 0 0 calc(13 * var(--u)); display: grid; place-items: center; pointer-events: none; }
.still-btn svg { width: 62%; height: 62%; fill: none; stroke: #2e1806; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
:is(.still-funnel, .still-ledger, .still-ear) .btn-art {
  inset: 0 calc(4 * var(--u)) calc(13 * var(--u)); border-radius: calc(10 * var(--u));
  background: radial-gradient(130% 100% at 30% 20%, #fde7ae, #cf9c50 45%, #7a4c18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(50, 24, 6, .6), 0 3px 5px rgba(0, 0, 0, .6);
}
.still-ear[aria-pressed="true"] .btn-art, .still-ear[data-on="true"] .btn-art { box-shadow: inset 0 0 0 2px var(--hue), 0 0 calc(14 * var(--u)) var(--hue); }
.still-sigil .btn-art {
  inset: 0 calc(6.5 * var(--u)) calc(13 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2a3766, #070b16); box-shadow: 0 0 0 calc(3 * var(--u)) #a8752f, 0 0 0 calc(4 * var(--u)) #2a1406, 0 4px 8px rgba(0, 0, 0, .6);
}
.still-sigil svg { stroke: color-mix(in oklab, var(--hue) 45%, #6d6a80); stroke-width: 1.4; }
.still-sigil:is([aria-pressed="true"], [data-on="true"]) svg { stroke: var(--hue); filter: drop-shadow(0 0 4px var(--hue)); animation: still-turn 12s linear infinite; }
.still-cork .cork {
  width: 56%; height: 70%; border-radius: 22% 22% 30% 30% / 14% 14% 30% 30%;
  background: radial-gradient(circle at 30% 30%, #6b4320 0 1px, transparent 1.6px) 0 0 / 7px 6px, radial-gradient(circle at 70% 60%, #6b4320 0 .8px, transparent 1.4px) 2px 3px / 6px 7px, linear-gradient(90deg, #a6743f, #d9a868 40%, #8a5a2c);
  box-shadow: inset 0 3px 0 rgba(255, 230, 190, .5), 0 4px 6px rgba(0, 0, 0, .6);
}
.still-cork:is([data-on="true"], [data-held="true"]) .cork { box-shadow: inset 0 3px 0 rgba(255, 230, 190, .5), 0 0 0 2px var(--hue), 0 0 12px var(--hue); }
/* Spirit lamp: blue pilot when idle, a living flame when playing. */
.still-burner .font { position: absolute; left: 22%; right: 22%; bottom: 0; height: 46%; border-radius: 45% 45% 20% 20% / 60% 60% 18% 18%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(170, 220, 240, .14) 40%, rgba(80, 130, 160, .28)), linear-gradient(transparent 50%, color-mix(in oklab, var(--hue) 50%, #3a1d08) 50%); box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .5), 0 4px 8px rgba(0, 0, 0, .6); }
.still-burner .wick { position: absolute; left: calc(50% - 5 * var(--u)); width: calc(10 * var(--u)); bottom: 44%; height: 12%; border-radius: 2px; background: linear-gradient(90deg, #6e4618, #fde7ae, #6e4618); }
.still-burner .flame {
  position: absolute; left: 50%; bottom: 54%; width: calc(12 * var(--u)); height: calc(14 * var(--u)); translate: -50% 0; transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 75%, #cfe6ff, #3a6cff 60%, transparent 72%); opacity: .8;
}
.still-burner:is([aria-pressed="true"], [data-on="true"]) .flame {
  width: calc(20 * var(--u)); height: calc(34 * var(--u)); opacity: 1;
  background: radial-gradient(circle at 50% 82%, #fffbe6 0 14%, #ffd36a 30%, var(--hue) 55%, transparent 72%);
  filter: drop-shadow(0 0 calc(10 * var(--u)) var(--hue)); animation: still-flicker .18s ease-in-out infinite alternate;
}
.still-phial .btn-art { inset: 0 0 calc(12 * var(--u)); }
.still-phial .phial-cork { position: absolute; top: 4%; left: 34%; right: 34%; height: 14%; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #8a5a2c, #d9a868, #8a5a2c); }
.still-phial .phial-glass { position: absolute; top: 16%; bottom: 2%; left: 30%; right: 30%; border-radius: 2px 2px 99px 99px; overflow: hidden; background: rgba(210, 245, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .5), inset 3px 0 0 rgba(255, 255, 255, .25); }
.still-phial .phial-tincture { position: absolute; inset: 70% 0 0; background: rgba(140, 160, 170, .25); transition: inset .2s; }
.still-phial[data-assigned="true"] .phial-tincture { inset: 22% 0 0; background: linear-gradient(color-mix(in oklab, var(--hue) 70%, white), var(--hue-deep)); }
.still-phial:is([data-active="true"], [data-held="true"]) .btn-art { transform: translateY(-14%); filter: drop-shadow(0 0 8px var(--hue)); }
.still-notch {
  border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background: linear-gradient(#3a2414, #1a0d05); box-shadow: inset 0 0 0 1px #8a5a24, inset 0 2px 0 rgba(255, 220, 160, .15), 0 3px 4px rgba(0, 0, 0, .5);
}
.still-notch .still-legend { bottom: auto; top: 50%; translate: -50% -50%; font: 600 calc(14 * var(--u))/1 "Fraunces", Georgia, serif; letter-spacing: 0; color: #e9c98a; }
.still-notch[data-control="loop-exit"] .still-legend { font: 600 calc(8.5 * var(--u))/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.still-notch:is([aria-pressed="true"], [data-active="true"], [data-on="true"]) { background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--hue) 70%, white), var(--hue-deep)); box-shadow: 0 0 calc(12 * var(--u)) var(--hue), inset 0 0 0 1px #fff3d0; }
.still-notch:is([aria-pressed="true"], [data-active="true"], [data-on="true"]) .still-legend { color: #1a0d05; text-shadow: none; }
.still-tincture .cap { position: absolute; top: 2%; left: 38%; right: 38%; height: 14%; border-radius: 2px; background: linear-gradient(90deg, #6e4618, #fde7ae, #6e4618); }
.still-tincture .bottle {
  position: absolute; top: 14%; bottom: 0; left: 16%; right: 16%; border-radius: 30% 30% 16% 16% / 22% 22% 12% 12%; --ink-c: #c86bff;
  background: linear-gradient(transparent 38%, var(--ink-c) 38%, color-mix(in oklab, var(--ink-c) 50%, black)); opacity: .9;
  box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .5), inset 4px 0 0 rgba(255, 255, 255, .2);
}
.still-tincture[data-slot="1"] .bottle { --ink-c: #ff6b8b; border-radius: 50% 50% 40% 40%; }
.still-tincture[data-slot="2"] .bottle { --ink-c: #6bd1ff; border-radius: 10% 10% 6% 6%; }
.still-tincture[data-slot="3"] .bottle { --ink-c: #9dff6b; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.still-tincture[data-slot="4"] .bottle { --ink-c: #ffcf5a; border-radius: 50% 50% 18% 18% / 70% 70% 12% 12%; }
.still-tincture[data-slot="5"] .bottle { --ink-c: #5affd0; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.still-tincture[data-slot="6"] .bottle { --ink-c: #ff8f4a; border-radius: 50%; }
.still-tincture[data-slot="7"] .bottle { --ink-c: #b3a3ff; border-radius: 40% 40% 10% 10% / 16% 16% 8% 8%; }
.still-tincture:is([data-active="true"], [data-held="true"], [data-on="true"], :active) .bottle { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 8px var(--ink-c)); }
.still-bottle .glass { position: absolute; left: 24%; right: 24%; top: 2%; bottom: 0; border-radius: 22% 22% 14% 14% / 14% 14% 10% 10%; clip-path: polygon(38% 0, 62% 0, 62% 18%, 100% 34%, 100% 100%, 0 100%, 0 34%, 38% 18%); background: linear-gradient(110deg, rgba(255, 255, 255, .3), rgba(60, 90, 70, .4) 40%, rgba(20, 40, 30, .7)); box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .4); }
.still-bottle .seal { position: absolute; top: 0; left: 50%; width: calc(16 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 46% 54% 50% 50%; background: radial-gradient(circle at 35% 30%, #ff7a6a, #8a1408); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.still-bottle .bottle-time { position: relative; top: 14%; padding: 1px 4px; border-radius: 2px; background: #efe1bf; color: #3a1d08; font: 600 calc(9.5 * var(--u))/1.2 "IBM Plex Mono", monospace; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.still-bottle:is([aria-pressed="true"], [data-on="true"]) .seal { animation: still-breathe 1.2s ease-in-out infinite; box-shadow: 0 0 calc(14 * var(--u)) #ff4a32; }
/* Handwheels: the wheel turns, the lamp highlight on the bezel stays put. */
:is(.still-valve, .still-coil, .still-beat, .still-horn) .knob-art {
  position: absolute; left: 50%; top: 0; width: calc(42 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  box-shadow: 0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .65);
}
:is(.still-horn, .still-bell) .knob-art { top: calc(4 * var(--u)); }
.still-horn .knob-art { width: calc(52 * var(--u)); }
.still-coil .knob-art, .still-beat .knob-art { width: calc(46 * var(--u)); }
.wheel {
  position: absolute; inset: 0; border-radius: 50%; rotate: calc(var(--v) * 270deg - 135deg); --rim-c: var(--brass); --hub: #ffd98a;
  border: calc(4.5 * var(--u)) solid var(--rim-c);
  background: radial-gradient(circle, var(--hub) 0 17%, #3a1d08 18% 24%, transparent 25%), repeating-conic-gradient(from -6deg, var(--rim-c) 0 12deg, transparent 12deg 72deg);
}
.wheel::after { content: ""; position: absolute; left: 50%; top: calc(-7 * var(--u)); width: calc(8 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--hub) 50%, #3a1d08); box-shadow: 0 1px 2px #000; }
:is(.still-valve, .still-coil, .still-beat, .still-horn) .knob-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(60% 45% at 28% 18%, var(--key), transparent 70%), radial-gradient(40% 40% at 88% 80%, var(--rim), transparent 70%); mix-blend-mode: screen; }
.still-valve[data-label^="Breath"] .wheel { --hub: #e8dcff; }
.still-valve[data-label^="Body"] .wheel { --hub: #ff9ab6; }
.still-valve[data-label^="Ember"] .wheel { --hub: #ff5a2a; }
.still-coil .wheel { --rim-c: var(--copper); --hub: #ffb483; }
.still-beat .wheel { --rim-c: #8a5a24; --hub: var(--hue); inset: 16%; }
.still-beat .marks { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -137deg, #f1d9a0 0 4deg, transparent 4deg 90deg); mask: radial-gradient(circle, transparent 60%, #000 61% 70%, transparent 71%); }
.still-horn .wheel { --rim-c: #7b6a9e; --hub: #d9c8ff; }

/* Draw cock (trim): a petcock lever across the pipe, ±60° */
.still-tap .cock { position: absolute; left: 50%; top: calc(18 * var(--u)); width: calc(44 * var(--u)); height: calc(10 * var(--u)); margin-left: calc(-22 * var(--u)); border-radius: 99px; rotate: calc((var(--v) - .5) * 120deg); background: linear-gradient(#fde7ae, #a8752f 60%, #4a2a0e); box-shadow: 0 3px 4px rgba(0, 0, 0, .6); }
.still-tap .cock::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(16 * var(--u)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #cf9c50 45%, #4a2a0e); }

/* Moon–Sun lens (filter): one glass disc that darkens toward Moon and blazes toward Sun */
.still-lens .disc { position: absolute; left: 50%; top: 0; width: calc(62 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .45), rgba(190, 230, 245, .08) 40%, rgba(40, 70, 90, .3)); box-shadow: 0 0 0 calc(4 * var(--u)) #a8752f, 0 0 0 calc(5 * var(--u)) #2a1406, 0 5px 10px rgba(0, 0, 0, .6); }
.still-lens .disc::before, .still-lens .disc::after { content: ""; position: absolute; inset: 0; }
.still-lens .disc::before { background: radial-gradient(circle at 40% 40%, #263a7a, #070b1e); opacity: clamp(0, (.5 - var(--v)) * 1.8, .9); }
.still-lens .disc::after { background: radial-gradient(circle, #fff6d0, #ffb04a 50%, transparent 75%); opacity: clamp(0, (var(--v) - .5) * 1.8, .9); }
.still-lens .moon, .still-lens .sun { position: absolute; top: calc(22 * var(--u)); width: calc(12 * var(--u)); aspect-ratio: 1; border-radius: 50%; z-index: 1; }
.still-lens .moon { left: calc(-1 * var(--u)); background: radial-gradient(circle at 70% 40%, transparent 46%, #cfe2ff 48%); }
.still-lens .sun { right: calc(-1 * var(--u)); background: radial-gradient(circle, #ffd36a 0 34%, transparent 36%), repeating-conic-gradient(#ffd36a 0 12deg, transparent 12deg 45deg); }
.still-lens .knob-art::after { content: ""; position: absolute; left: 50%; top: calc(31 * var(--u)); width: calc(3 * var(--u)); height: calc(30 * var(--u)); translate: -50% -100%; transform-origin: 50% 100%; rotate: calc((var(--v) - .5) * 140deg); border-radius: 2px; background: linear-gradient(#fff3d0, #a8752f); box-shadow: 0 0 3px rgba(0, 0, 0, .7); }

/* Bell jar (reverb send): lowered on its chain over a brass pedestal */
.still-bell .knob-art { position: absolute; inset: 0 0 calc(12 * var(--u)); }
.still-bell .knob-art::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: calc(6 * var(--u)); border-radius: 2px; background: linear-gradient(#fde7ae, #6e4618); }
.still-bell .chain { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: calc((6 + var(--v) * 26) * var(--u)); background: repeating-linear-gradient(#cf9c50 0 3px, #4a2a0e 3px 5px); }
.still-bell .jar {
  position: absolute; left: 18%; right: 18%; top: calc((6 + var(--v) * 26) * var(--u)); height: calc(44 * var(--u));
  border-radius: 50% 50% 6% 6% / 62% 62% 6% 6%; background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .5), rgba(200, 240, 255, .06) 45%, rgba(200, 240, 255, .2));
  box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .55), 0 0 calc(var(--v) * 16 * var(--u)) color-mix(in oklab, var(--hue) 70%, transparent);
}
.still-bell .jar::before { content: ""; position: absolute; left: 50%; top: calc(-5 * var(--u)); width: calc(8 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #a8752f); }

/* Vertical levers: bellows (tempo), spout (volume), tide gauge (seek) */
:is(.still-bellows, .still-spout, .still-gauge) input[type="range"] { writing-mode: vertical-lr; direction: rtl; }
.still-bellows .knob-art, .still-spout .knob-art, .still-gauge .knob-art { position: absolute; inset: 0 0 calc(14 * var(--u)); }
.still-bellows .knob-art { border-radius: 99px; background: linear-gradient(90deg, #1d0f07, #3a2414 50%, #1d0f07); box-shadow: inset 0 0 0 1.5px #8a5a24, 0 5px 10px rgba(0, 0, 0, .6); }
.still-bellows .scale { position: absolute; inset: calc(10 * var(--u)) calc(4 * var(--u)); background: repeating-linear-gradient(transparent 0 calc(9.4 * var(--u)), rgba(241, 217, 160, .45) 0 calc(10.4 * var(--u))) left / calc(7 * var(--u)) 100% no-repeat, repeating-linear-gradient(transparent 0 calc(9.4 * var(--u)), rgba(241, 217, 160, .45) 0 calc(10.4 * var(--u))) right / calc(7 * var(--u)) 100% no-repeat; }
.still-bellows .scale::before, .still-bellows .scale::after { position: absolute; left: 0; right: 0; text-align: center; font: 600 calc(7.5 * var(--u))/1 "IBM Plex Mono", monospace; color: #f1d9a0; }
.still-bellows .scale::before { content: "+16"; top: calc(-8 * var(--u)); }
.still-bellows .scale::after { content: "−16"; bottom: calc(-8 * var(--u)); }
.still-bellows .pleats { position: absolute; left: 22%; right: 22%; bottom: calc(12 * var(--u)); top: calc((14 + (1 - var(--v)) * 160) * var(--u)); background: repeating-linear-gradient(#5a2e14 0 calc(4 * var(--u)), #2a1206 calc(4 * var(--u)) calc(7 * var(--u))); border-radius: 4px; box-shadow: inset 0 0 0 1px #000; }
.still-bellows .handle, .still-spout .lever { position: absolute; left: 4%; right: 4%; height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: linear-gradient(#fff3d0, #cf9c50 40%, #6e4618); box-shadow: 0 4px 6px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(0, 0, 0, .35); }
.still-bellows .handle { top: calc((6 + (1 - var(--v)) * 160) * var(--u)); }
.still-bellows .handle::after, .still-spout .lever::after { content: ""; position: absolute; left: 12%; right: 12%; top: 45%; height: 2px; background: var(--hue); box-shadow: 0 0 6px var(--hue); }
.still-spout .slot { position: absolute; left: calc(50% - 4 * var(--u)); width: calc(8 * var(--u)); top: calc(4 * var(--u)); bottom: calc(4 * var(--u)); border-radius: 99px; background: #0b0604; box-shadow: inset 0 0 0 1.5px #8a5a24; }
.still-spout .lever { top: calc((1 - var(--v)) * 156 * var(--u)); height: calc(26 * var(--u)); border-radius: 99px; }
.still-gauge .knob-art { border-radius: 99px; overflow: hidden; background: rgba(8, 12, 20, .65); box-shadow: inset 0 0 0 1.5px rgba(225, 250, 255, .5), 0 0 0 calc(3 * var(--u)) #a8752f, 0 0 0 calc(4 * var(--u)) #2a1406; }
.still-gauge .tide { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(calc(1 - var(--pos))); background: linear-gradient(color-mix(in oklab, var(--hue) 75%, white), var(--hue-deep)); opacity: .8; }
.still-gauge .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 calc(13 * var(--u)), rgba(255, 255, 255, .35) 0 calc(14 * var(--u))) right / 40% 100% no-repeat; }

/* Pour yoke (crossfader) and spigot (master) */
.still-yoke .knob-art { position: absolute; inset: 0 0 calc(14 * var(--u)); }
.still-yoke .beam { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(24 * var(--u)); height: calc(10 * var(--u)); border-radius: 99px; rotate: calc((var(--v) - .5) * 20deg); background: linear-gradient(#fff3d0, #cf9c50 40%, #6e4618); box-shadow: 0 5px 8px rgba(0, 0, 0, .6); }
.still-yoke .ladle { position: absolute; top: calc(6 * var(--u)); width: calc(30 * var(--u)); height: calc(20 * var(--u)); border-radius: 0 0 50% 50%; background: linear-gradient(#e8a46c, #8a4318); box-shadow: inset 0 3px 0 #3a1406; }
.still-yoke .ladle--a { left: calc(4 * var(--u)); rotate: calc((.5 - var(--v)) * 30deg); }
.still-yoke .ladle--b { right: calc(4 * var(--u)); rotate: calc((.5 - var(--v)) * 30deg); }
.still-yoke .pivot { position: absolute; left: 50%; top: calc(18 * var(--u)); width: calc(22 * var(--u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #cf9c50 45%, #3a1d08); box-shadow: 0 3px 5px rgba(0, 0, 0, .7); }
.still-spigot .tap { position: absolute; left: 50%; top: calc(6 * var(--u)); width: calc(50 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-25 * var(--u)); border-radius: 99px; rotate: calc(var(--v) * 90deg - 45deg); background: linear-gradient(#fff3d0, #cf9c50 45%, #6e4618); box-shadow: 0 4px 5px rgba(0, 0, 0, .65); }
.still-spigot .tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(20 * var(--u)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #a8752f 50%, #3a1d08); }

/* Tower room: the only two music-reactive elements are candle glow (meters) and the moon halo (lock). */
.scene--still { display: block; width: 100%; height: 100%; }
.scene--still .candle-glow { transform-box: fill-box; transform-origin: center; transform: scale(calc(.85 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .45)); opacity: calc(.5 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .5); }
.scene--still .moon-halo { opacity: calc(.4 + var(--lock, 0) * .6); }
@media (prefers-reduced-motion: reduce) { .scene--still .candle-glow { transform: none; opacity: .7; } }

@keyframes still-flow { to { stroke-dashoffset: -16; } }
@keyframes still-boil { from { background-position: 0 100%, 9% 115%; } to { background-position: 0 -40%, 9% -25%; } }
@keyframes still-flicker { from { transform: scale(.94, 1.04) skewX(-2deg); } to { transform: scale(1.04, .95) skewX(2deg); } }
@keyframes still-breathe { 50% { opacity: .55; } }
@keyframes still-turn { to { rotate: 360deg; } }
@keyframes still-nudge { to { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) {
  .instrument--still *, .instrument--still *::before, .instrument--still *::after { animation: none !important; transition: none !important; }
}
.still-hourglass .sand-stream { top: 48%; left: 48%; right: 48%; height: 6%; background: #f1c879; box-shadow: none; opacity: min(1, calc(var(--sand) * 40)); }

/* Integrated review refinements. */
.instrument--still::before{content:'';position:absolute;left:-3%;right:-3%;bottom:-18px;height:30px;background:linear-gradient(#5b3820,#342012 45%,#170f09);border-top:3px solid #825031;box-shadow:0 10px 17px #0008;z-index:-1}
.instrument--still::after{content:'';position:absolute;left:4%;right:4%;bottom:-15px;height:18px;background:#0c0805a0;filter:blur(7px);z-index:-1}
.still-legend{font-size:calc(10 * var(--u));letter-spacing:.12em}
.still-shelf em{bottom:calc(3 * var(--u));font-size:calc(8 * var(--u));letter-spacing:.04em;text-align:left;left:calc(7 * var(--u))}
.still-burner .flame{opacity:.18}
.still-zone{color:#e7cb98a0;font:500 calc(9 * var(--u))/1 'IBM Plex Mono',monospace;letter-spacing:.12em;border-bottom:1px solid #e8b35a30;text-shadow:0 1px 2px #160e08;pointer-events:none}

/* Keep the manual-grid field within its assay, clear of mirrored controls. */
.still-assay{grid-template-columns:minmax(0,1fr) auto;gap:4px 3px}
.assay-base{grid-column:1/-1;justify-self:start;gap:5px;letter-spacing:.04em}
.assay-time{grid-column:1;grid-row:2}
.assay-base{grid-row:3}
.still-assay{padding:calc(9 * var(--u));grid-template-rows:auto 12px 18px}
.assay-bpm{font-size:calc(19 * var(--u))}
.still-zone{z-index:1;font-size:calc(8 * var(--u));letter-spacing:.04em}