/* Specimens: the fifteen live components */
.specimen { --sp-max: 34rem; }
.sp { width: 100%; max-width: var(--sp-max); margin: 0 auto; display: grid; gap: 14px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 600 var(--t-sub)/1.2 var(--f-body); text-align: left; transition: box-shadow var(--d-2), transform var(--d-1) var(--ease-out); }
.sp-row:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.sp-row:active { transform: scale(.985); }
.sp-row .mono { color: var(--ink-3); font-size: .6875rem; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-cur { position: absolute; left: 0; top: 0; z-index: 8; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; transition: transform 600ms var(--ease-flow); }
.agent-cur svg { width: 20px; height: 20px; color: var(--tyrian); filter: drop-shadow(0 2px 3px oklch(0 0 0 / .3)); }
.agent-cur b { margin-top: 13px; padding: 4px 7px; border-radius: 7px; background: var(--tyrian); color: var(--on-ink); font: 600 .625rem/1 var(--f-mono); letter-spacing: .06em; }

/* Flux */
p-flux .sp { --sp-max: 30rem; justify-items: start; }
.fx-text { font: 500 1.25rem/1.5 var(--f-body); }
.fx-text .flux { font-weight: 650; }
.fx-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-state { color: var(--ink-2); }

/* Caret */
p-caret .sp { --sp-max: 64rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); align-items: start; }
.cfield { display: grid; gap: 7px; min-width: 0; }
.cf-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cf-name { font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cf-box { display: block; width: 100%; margin: 0; min-height: calc(4 * 1.5em + 22px); padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); caret-color: var(--ink); font: 500 var(--t-callout)/1.5 var(--f-body); resize: none; white-space: pre-wrap; overflow-wrap: break-word; }
.cf-box:focus { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 4px color-mix(in oklch, var(--lapis) 14%, transparent); }
.cf-model { border-style: dashed; border-color: color-mix(in oklch, var(--tyrian) 45%, var(--line)); cursor: default; }
.cf-model .flux, .cf-model .pig { font-weight: 560; }
.cf-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.duet { position: relative; }
.duet .cf-box { position: relative; z-index: 1; background: transparent; color: transparent; overflow: hidden; }
.duet-mirror { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; padding: 10px 13px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 500 var(--t-callout)/1.5 var(--f-body); white-space: pre-wrap; overflow-wrap: break-word; }
.duet-mirror .flux, .duet-mirror .pig { font-weight: 560; }

/* Shift */
p-shift .sp { --sp-max: 36rem; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sh-k { font: 700 var(--t-callout)/1.2 var(--f-display); }
.sh-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--ink-2); font-size: var(--t-foot); }
.sh-sub b { color: var(--ochre); font-weight: 650; }
.sh-wrap { overflow-x: auto; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sh-table { width: 100%; border-collapse: collapse; font-size: var(--t-foot); }
.sh-table th, .sh-table td { padding: 10px 10px; text-align: left; vertical-align: top; }
.sh-table thead th { font: 600 .625rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.sh-table tbody tr + tr > *, .sh-table tbody tr:first-child > * { border-top: 1px solid var(--line); }
.sh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-table tbody th { font: 600 var(--t-foot)/1.3 var(--f-mono); }
.sh-cell { display: grid; gap: 1px; }
.sh-table td.is-changed { cursor: pointer; border-radius: 8px; }
.sh-table td.is-changed .sh-v { font-weight: 650; }
.sh-table td.is-changed:hover, .sh-table td.is-picked { background: color-mix(in oklch, var(--tyrian) 7%, transparent); }
.sh-table td.is-picked { box-shadow: inset 0 0 0 1.5px var(--tyrian); }
.sh-old { color: var(--ink-3); font-size: .6875rem; text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--madder) 70%, transparent); }
.sh-table td.landed { animation: land var(--beat) var(--ease-flow); }
@keyframes land { 0% { box-shadow: inset 0 0 0 2px var(--tyrian); background: color-mix(in oklch, var(--tyrian) 16%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.sh-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); color: var(--ground); font-size: var(--t-foot); }
.sh-bar span { flex: 1 1 12rem; }
.sh-bar button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: color-mix(in oklch, var(--ground) 16%, transparent); color: inherit; font: 650 var(--t-foot)/1 var(--f-body); }
.sh-bar button.primary { background: var(--ground); color: var(--ink); }

/* Rail */
p-rail .sp { --sp-max: 36rem; }
.rail-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 10px; height: 280px; }
.rail-doc { position: relative; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; gap: 14px; padding: 2px 4px 2px 2px; font-size: var(--t-sub); line-height: 1.5; }
.rail-doc::-webkit-scrollbar { display: none; }
.rail-doc:focus { outline: none; }
.rail-doc:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; border-radius: 6px; }
.rail-doc section { position: relative; display: grid; gap: 3px; padding-left: 12px; }
.rail-doc section[data-who^="model"]::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--pigment-v); }
.rail-doc section[data-who="model"]::before { background-size: 100% 300%; animation: rail-flow calc(var(--beat) * 2) linear infinite; }
.rail-doc h4 { margin: 0; font: 600 .6875rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rail-doc p { margin: 0; }
.rail-doc .pig { font-weight: 560; }
.rail-doc .needs { color: var(--ochre); font: 600 .6875rem/1.4 var(--f-mono); }
.rail-doc .chip { justify-self: start; margin-top: 4px; }
.rail { position: relative; border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; touch-action: none; }
.rail-track { position: absolute; inset: 3px 4px; }
.seg { position: absolute; left: 0; right: 0; border-radius: 3px; }
.seg.person { background: var(--ink); opacity: .5; }
.seg.model-ok { background: var(--pigment-v); }
.seg.model { background: var(--pigment-v); background-size: 100% 300%; animation: rail-flow calc(var(--beat) * 2) linear infinite; }
.seg.live { box-shadow: 0 0 0 2px color-mix(in oklch, var(--tyrian) 45%, transparent); animation: rail-flow calc(var(--beat) / 2) linear infinite; }
@keyframes rail-flow { to { background-position: 0 -300%; } }
.seg .flag { position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 0 2px var(--surface-2); }
.rail-thumb { position: absolute; left: -1px; right: -1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--lapis); background: color-mix(in oklch, var(--lapis) 9%, transparent); pointer-events: none; }
.rail-new { position: absolute; right: 26px; bottom: 8px; z-index: 2; border: 0; border-radius: var(--r-pill); padding: 8px 12px; background: var(--tyrian); color: var(--on-ink); font: 650 var(--t-foot)/1 var(--f-body); box-shadow: var(--e-2); }

/* Lasso (specimen) */
p-lasso .sp { --sp-max: 34rem; position: relative; }
.lasso-doc { display: grid; gap: 10px; font-size: var(--t-callout); line-height: 1.55; }
.lasso-doc .mono { color: var(--ink-2); }
.lasso-doc ::selection { background: color-mix(in oklch, var(--lapis) 24%, transparent); }
.lasso-bar { position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--ink); color: var(--ground); box-shadow: var(--e-3); }
.lasso-bar .mm { margin: 0 4px 0 7px; }
.lasso-bar button { min-height: 36px; border: 0; background: transparent; color: inherit; font: 650 var(--t-foot)/1 var(--f-body); padding: 0 10px; border-radius: var(--r-pill); white-space: nowrap; }
.lasso-bar button:hover, .lasso-bar button:focus-visible { background: color-mix(in oklch, var(--ground) 16%, transparent); }
.lasso-answer { display: grid; gap: 9px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tyrian) 40%, var(--line)); }
.la-head { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 .6875rem/1.3 var(--f-mono); color: var(--ink-2); }
.la-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-body { font-size: var(--t-sub); line-height: 1.5; font-weight: 560; }
.lasso-hint { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font: 600 .6875rem/1.3 var(--f-mono); }

/* Ask */
p-ask .sp { --sp-max: 32rem; }
.ask { display: grid; gap: 14px; }
.ask-crumbs { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.crumb-a { padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 600 .6875rem/1 var(--f-mono); }
.crumb-a.by-m { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tyrian) 50%, var(--line)); }
.crumb-a em { font-style: normal; }
.ask-q { display: flex; align-items: baseline; gap: 10px; font: 700 1.25rem/1.3 var(--f-display); letter-spacing: -.015em; }
.ask-q .mm { flex: none; transform: translateY(2px); }
.ask-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-opts .chip { min-height: 40px; padding: 0 14px; color: var(--ink); font: 600 var(--t-foot)/1 var(--f-body); }
.ask-opts .chip:hover { border-color: var(--lapis); }
.ask-other { display: flex; gap: 6px; }
.ask-other input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 var(--t-sub)/1 var(--f-body); }
.ask-other input:focus { outline: none; border-color: var(--lapis); }
.ask-think { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font: 600 .6875rem/1 var(--f-mono); }
.ask-result { display: grid; gap: 10px; font-size: var(--t-callout); line-height: 1.5; font-weight: 600; }

/* Ring (specimen) */
p-ring .sp { --sp-max: 46rem; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ring-form { display: grid; gap: 12px; width: 100%; max-width: 28rem; }
.ring-form label { display: grid; gap: 6px; font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ring-form :is(input, textarea) { padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 var(--t-callout)/1.45 var(--f-body); letter-spacing: 0; text-transform: none; resize: none; }
.ring-form :is(input, textarea):focus { outline: none; border-color: var(--lapis); }
.ring-preview { width: min(100%, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--surface); box-shadow: var(--e-1), inset 0 0 0 1px var(--line); }
@media (min-width: 720px) { p-ring .sp { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* Tide */
p-tide .sp { --sp-max: 26rem; justify-items: center; }
.tide { position: relative; width: 100%; }
.tide canvas { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; }
.tide input { position: relative; width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 var(--t-callout)/1 var(--f-body); outline: none; }
.tide input::placeholder { color: var(--ink-3); }
.tide-states { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tide-label { color: var(--ink-2); }

/* Morph */
p-morph .sp { --sp-max: 18rem; justify-items: center; }
.morph-pad { position: relative; width: 100%; height: 170px; display: grid; place-items: center; }
.morph-hint { position: absolute; font: 600 .6875rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hc); opacity: .8; transition: opacity var(--signal), transform var(--signal) var(--ease-spring); }
.morph-hint.n { top: 0; --hc: var(--tyrian); } .morph-hint.s { bottom: 0; --hc: var(--ochre); } .morph-hint.e { right: 0; --hc: var(--viridian); } .morph-hint.w { left: 0; --hc: var(--madder); }
.morph-hint.on { opacity: 1; transform: scale(1.12); }
/* Each edge wears its intent; dragging thickens the chosen edge until it floods the button */
.morph { --dx: 0; --dy: 0; --t: 0; --act: var(--ink-2); --en: 4px; --ee: 4px; --es: 4px; --ew: 4px; position: relative; z-index: 1; width: 136px; height: 56px; border: 0; display: grid; place-items: center;
  color: var(--ink); font: 680 var(--t-callout)/1 var(--f-display); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: color-mix(in oklch, var(--surface), var(--act) calc(var(--t) * var(--t) * 100%));
  transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(calc(1 + var(--t) * .06), calc(1 - var(--t) * .05)); border-radius: calc(15px - var(--t) * 4px);
  box-shadow: inset 0 var(--en) 0 var(--tyrian), inset calc(var(--ee) * -1) 0 0 var(--viridian), inset 0 calc(var(--es) * -1) 0 var(--ochre), inset var(--ew) 0 0 var(--madder),
    inset 0 0 0 1px var(--line), 0 calc(8px + var(--t) * 10px) calc(18px + var(--t) * 16px) -10px var(--act); }
.morph.hot { color: var(--on-ink); }
.morph.settle { transition: transform 420ms var(--ease-spring), background 300ms, border-radius 300ms, box-shadow 300ms; }

/* Seal */
p-seal .sp { --sp-max: 28rem; position: relative; }
.seal-list { display: grid; gap: 8px; }
.sbtn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 600 var(--t-sub)/1.2 var(--f-body); text-align: left;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow var(--d-2); }
.sbtn:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.sbtn .why { margin-left: auto; font: 600 .625rem/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.sbtn.seal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-flow); }
.sbtn.seal.holding::after { transform: scaleX(1); transition: transform 1200ms linear; }
.sbtn.done { color: var(--viridian); box-shadow: inset 0 0 0 1.5px var(--viridian); }
.sbtn.refuse { animation: refuse 320ms var(--ease-flow); box-shadow: inset 0 0 0 1.5px var(--madder); }
@keyframes refuse { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.seal-note { margin: -2px 2px 0; color: var(--ink-2); font: 600 .6875rem/1.4 var(--f-mono); }
.seal-note.warn { color: var(--madder); }

/* Quorum */
p-quorum .sp { --sp-max: 26rem; position: relative; justify-items: center; text-align: center; }
.qu-seal { position: relative; width: 168px; height: 168px; }
.qu-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.qu-ring circle { fill: none; stroke: var(--line); stroke-width: 8; }
.qu-ring path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 170; transition: stroke-dashoffset 220ms var(--ease-flow); }
.qu-a { stroke: var(--ink); } .qu-b { stroke: var(--ink-2); }
.qu-seal.hold-a .qu-a, .qu-seal.hold-b .qu-b { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms linear; }
.qu-seal.has-a .qu-a, .qu-seal.has-b .qu-b { stroke-dashoffset: 0; }
.qu-seal.done path { stroke: var(--viridian); }
.qu-btn { position: absolute; inset: 16px; display: grid; place-content: center; gap: 4px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--e-2), inset 0 0 0 1px var(--line);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform var(--d-1) var(--ease-out); }
.qu-btn:active { transform: scale(.97); }
.qu-amt { font: 780 1.5rem/1 var(--f-display); letter-spacing: -.03em; }
.qu-lbl { font: 600 .6875rem/1.2 var(--f-mono); color: var(--ink-2); }
.qu-seal.done .qu-lbl { color: var(--viridian); }
.qu-seal.refuse { animation: refuse 320ms var(--ease-flow); }
.qu-people { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; overflow: hidden; border-radius: var(--r-md); background: var(--line); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.qu-people li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); }
.qu-people span { display: grid; gap: 1px; }
.qu-people b { font: 650 var(--t-sub)/1.2 var(--f-body); }
.qu-people small { color: var(--ink-2); font-size: var(--t-cap); }
.qu-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex: none; }
.qu-dot.a { color: var(--ink); } .qu-dot.b { color: var(--ink-2); }
.qu-people li.ok .qu-dot { background: currentColor; }
.qu-note { color: var(--ink-2); font: 600 .6875rem/1.45 var(--f-mono); }
.qu-note.warn { color: var(--madder); }

/* Murmur (specimen) */
p-murmur .sp { --sp-max: 26rem; }
.murmur.is-static { animation: none; position: relative; }
.murmur.is-static .life { animation: none; transform: scaleX(.62); }

/* Reel */
p-reel .sp { --sp-max: 27rem; }
.reel { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: oklch(.2 .02 268); color: oklch(.97 .005 268); cursor: pointer; box-shadow: var(--e-2); }
.reel .bars { position: absolute; top: 11px; left: 13px; right: 13px; z-index: 3; display: flex; gap: 4px; }
.reel .bars i { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: oklch(1 0 0 / .25); }
.reel .bars i b { display: block; width: 100%; height: 100%; background: oklch(1 0 0 / .95); transform-origin: left; transform: scaleX(var(--p, 0)); }
.scene { position: absolute; inset: 0; display: grid; align-content: end; gap: 6px; padding: 32px 18px 18px; opacity: 0; transform: translateY(8px) scale(1.02); transition: opacity 500ms var(--ease-flow), transform 700ms var(--ease-flow); }
.scene.on { opacity: 1; transform: none; }
.scene .k { font: 600 .6875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.scene .big { font: 780 clamp(1.9rem, 8vw, 2.85rem)/1 var(--f-display); font-variation-settings: "wdth" 80; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.scene .sub { font-size: var(--t-foot); opacity: .82; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel .paused { position: absolute; top: 22px; right: 14px; z-index: 3; font: 600 .625rem/1 var(--f-mono); letter-spacing: .1em; opacity: 0; transition: opacity 200ms; }
.reel.is-paused .paused { opacity: .75; }

/* Bloom */
p-bloom .sp { --sp-max: 24rem; justify-items: center; }
.bloom-cv { width: 100%; height: 190px; }
.bloom-read { font: 600 var(--t-foot)/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bloom-range { width: min(100%, 280px); accent-color: var(--viridian); }

/* X-ray (specimen) */
p-xray .sp { --sp-max: 26rem; }
.xs-screen { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2), inset 0 0 0 1px var(--line); }
.xs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xs-bar b { font: 700 var(--t-callout)/1.2 var(--f-display); }
.xs-doc { font-size: var(--t-sub); line-height: 1.5; color: var(--ink); padding: 2px; }
.xs-sum { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tyrian) 40%, var(--line)); font-size: var(--t-foot); line-height: 1.45; }
.xs-sum .mm { margin-top: 3px; }
.xs-sum .pig { font-weight: 600; }
.xs-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.xs-btns button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 600 var(--t-foot)/1 var(--f-body); }
.xs-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.xs-hint { color: var(--ink-2); font-size: var(--t-foot); text-align: center; }

/* Small parts shared by several specimens */
.r-read { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--tyrian) 60%, transparent); background: radial-gradient(circle, var(--tyrian) 0 1.6px, transparent 2.2px); }
.xs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); color: var(--ground); font: 600 .6875rem/1.3 var(--f-mono); }
.xs-legend[hidden] { display: none; }
.xs-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xs-legend .r-none { box-shadow: inset 0 0 0 1.5px var(--ground); }
.xs-screen .switch { flex: none; }
.reel .k .mm { width: 9px; height: 9px; margin-right: 3px; vertical-align: -1px; }
.reel-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ochre); vertical-align: 0; }
.scene .big.reel-next { font-size: clamp(1.5rem, 6.4vw, 2.1rem); }
.ring-hint { margin: 0; color: var(--ink-2); font-size: var(--t-foot); line-height: 1.45; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-weight: 450; }
.sh-sub .mcaret { height: 1em; }
.sh-sub .mm { width: 10px; height: 10px; }