.sb{--sb-dim:color-mix(in srgb, var(--paper) 62%, transparent);--sb-line:color-mix(in srgb, var(--paper) 34%, transparent);--sb-rule:color-mix(in srgb, var(--paper) 20%, transparent);--sb-faint:color-mix(in srgb, var(--paper) 7%, transparent);--sb-lost:color-mix(in srgb, var(--red) 80%, var(--paper));--sb-pad:28px;--sb-gutter:72px;--sb-disc:64px;--sb-tape:22px;--sb-text:150px;--sb-curves:60px;--sb-sound:132px;--sb-name:48px;--sb-level:0;border:2px solid var(--sb-rule);background:var(--charcoal);max-width:1320px;color:var(--paper);font-family:var(--font-display);grid-template:"desk count""desk line""strata strata"/minmax(320px,.32fr) minmax(0,1fr);margin-inline:auto;display:grid}.sb :focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.sb audio{display:none}.sb-count,.sb-desk__label,.sb-disc__count,.sb-row__name,.sb-strata__name,.sb-strata__ticks{font:400 11px / 1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sb-dim)}.sb-count{padding:20px var(--sb-pad) 0;white-space:nowrap;grid-area:count;grid-template-columns:minmax(0,1fr) 11ch 16ch;gap:24px;margin:0;display:grid}.sb-count__where{text-overflow:ellipsis;color:var(--paper);overflow:hidden}.sb-count[data-alone] .sb-count__where{grid-column:1/-1}.sb-count__voice{color:var(--yellow)}.sb-count__words{color:var(--paper)}.sb-count__voice,.sb-count__words{text-align:right}.sb-line{height:var(--sb-text);padding:14px var(--sb-pad) 0;font:500 clamp(26px, 2.5vw, 36px) / 1.16 var(--font-display);letter-spacing:-.02em;text-wrap:pretty;grid-area:line;margin:0 0 20px;overflow:hidden}.sb-line[data-size=medium]{font-size:clamp(21px,1.9vw,27px);line-height:1.22}.sb-line[data-size=small]{letter-spacing:-.01em;font-size:clamp(17px,1.4vw,20px);line-height:1.3}.sb-line[data-quiet]{color:var(--sb-dim)}.sb-word{transition:color var(--dur-2) var(--ease-out)}.sb-word--lost{color:var(--sb-lost)}.sb-desk{grid-area:desk;grid-template-columns:var(--sb-disc) minmax(0, 1fr);grid-template-rows:var(--sb-disc) auto var(--sb-tape) auto;min-width:0;padding:20px var(--sb-pad);border-right:2px solid var(--sb-rule);grid-template-areas:"disc label""cue cue""take take""controls controls";align-content:start;gap:12px 18px;display:grid}.sb .sb-disc{width:var(--sb-disc);height:var(--sb-disc);border:2px solid var(--red);background:var(--red);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;min-height:0;transition:background-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);border-radius:50%;grid-area:disc;place-items:center;padding:0;display:grid;position:relative}.sb .sb-disc:disabled{opacity:.45;cursor:default}.sb-disc:after{content:"";border:2px solid var(--paper);opacity:0;pointer-events:none;transform:scale(calc(1 + var(--sb-level) * .22));border-radius:50%;position:absolute;inset:-5px}.sb[data-phase=listening] .sb-disc:after{opacity:1}.sb-disc__mark{background:var(--paper);opacity:0;width:18px;height:18px}.sb[data-phase=listening] .sb-disc__mark{opacity:1}.sb-disc__count{color:var(--paper);letter-spacing:0;place-items:center;font-size:22px;display:grid;position:absolute;inset:0}.sb-desk__label{color:var(--paper);grid-area:label;align-self:center;margin:0}.sb-desk__fact{color:var(--sb-dim);margin-top:6px;display:block}.sb[data-phase=running] .sb-desk__label{color:var(--sb-dim)}.sb[data-phase=listening] .sb-desk__fact{color:var(--paper)}.sb-desk__cue{height:2.7em;font:400 14px / 1.35 var(--font-display);color:var(--paper);grid-area:cue;margin:0;overflow:hidden}.sb-tape{width:100%;height:var(--sb-tape);color:var(--paper);grid-area:take;display:block}.sb-controls{grid-area:controls;gap:10px;min-width:0;display:grid}.sb-row{grid-template-columns:var(--sb-name) minmax(0, 1fr);align-items:center;min-width:0;display:grid}.sb-plates{grid-column:2;min-width:0;display:flex}.sb .sb-plate{border:1px solid var(--sb-line);min-width:0;height:34px;min-height:0;color:var(--sb-dim);font:400 11px / 1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);background:0 0;flex:1 1 0;justify-content:center;align-items:center;padding:0 6px;display:inline-flex;overflow:hidden}.sb .sb-plate+.sb-plate{margin-left:-1px}.sb .sb-plate:hover:not(:disabled){color:var(--paper)}.sb .sb-plate[aria-pressed=true]{border-color:var(--paper);background:var(--paper);color:var(--ink);position:relative}.sb .sb-plate:disabled{opacity:.4;cursor:default}.sb .sb-plate[aria-pressed=true]:disabled{opacity:.7}.sb-strata{border-top:2px solid var(--sb-rule);grid-area:strata;grid-template-columns:var(--sb-gutter) minmax(0, 1fr);padding:18px var(--sb-pad) 14px;grid-template-rows:auto auto;display:grid}.sb-strata__names{grid-template-rows:var(--sb-curves) var(--sb-sound);row-gap:10px;display:grid}.sb-strata__name{grid-column:1;display:block}.sb-strata__name--voice,.sb-strata__name--words{grid-row:1;align-self:start}.sb-strata__name--voice{color:var(--yellow)}.sb-strata__name--words{color:var(--paper);margin-top:1.6em}.sb-strata__name--sound{grid-row:2}.sb-strata__track{grid-template-rows:var(--sb-curves) var(--sb-sound);cursor:ew-resize;touch-action:pan-y;row-gap:10px;min-width:0;display:grid;position:relative}.sb-strata__curves{width:100%;height:100%;display:block;overflow:visible}.sb-strata__half{stroke:var(--sb-rule);stroke-width:1px;vector-effect:non-scaling-stroke}.sb-strata__curve{fill:none;stroke-width:2px;vector-effect:non-scaling-stroke}.sb-strata__curve--voice{stroke:var(--yellow)}.sb-strata__curve--words{stroke:var(--paper)}.sb-strata__sound{width:100%;height:100%;display:block}.sb-strata__slots{background-image:linear-gradient(to right, var(--sb-faint) 0, var(--sb-faint) calc(100% - 2px), transparent calc(100% - 2px));pointer-events:none;position:absolute;inset:0}.sb-strata__ticks{grid-column:2;height:16px;margin:8px 0 0;padding:0;font-size:10px;list-style:none;position:relative}.sb-strata__ticks li{position:absolute;transform:translate(-50%)}
@media (max-width:760px){.sb{--sb-pad:12px;--sb-gutter:0px;--sb-disc:56px;--sb-text:152px;--sb-curves:52px;--sb-sound:128px;border-width:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"count""line""desk""strata"}.sb-count{grid-template-rows:1.3em 1.3em;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding-top:12px;font-size:10px}.sb-count__where{grid-column:1/-1}.sb-count__voice{text-align:left}.sb-line{margin-bottom:12px;padding-top:10px;font-size:min(25px,6.6vw);line-height:1.18}.sb-line[data-size=medium]{font-size:min(20px,5.3vw);line-height:1.24}.sb-line[data-size=small]{font-size:min(17px,4.5vw);line-height:1.3}.sb-desk{border-right:0;border-top:2px solid var(--sb-rule);grid-template-rows:auto auto auto auto;grid-template-areas:"disc label""disc cue""take take""controls controls";gap:4px 12px;padding-block:12px}.sb-desk__label{align-self:end}.sb-desk__cue{height:2.7em;font-size:14px}.sb-tape{margin-block:6px 8px}.sb-controls{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}.sb-row{grid-template-columns:minmax(0,1fr)}.sb-row__name{display:none}.sb-plates{grid-column:1}.sb .sb-plate{letter-spacing:clamp(0px,.3vw,.08em);height:36px;padding:0 2px;font-size:10px}.sb-strata{padding-block:14px 10px}.sb-strata__names{display:none}.sb-strata__track{grid-area:1/2}.sb-strata__ticks{font-size:9px}}
.sb-notes h3{font:600 18px / 1.3 var(--font-display);margin:28px 0 8px;scroll-margin-top:24px}.sb-notes h3:first-child{margin-top:0}.sb-notes p{max-width:68ch;margin:0}.sb-notes p+p{margin-top:12px}.sb-fig{border:2px solid var(--ink);max-width:640px;margin:20px 0;padding:16px}.sb-fig__svg{width:100%;height:auto;display:block}.sb-fig__you{fill:var(--red)}.sb-fig__step,.sb-fig__arrow path{fill:none;stroke:var(--ink);stroke-width:2px}.sb-fig__arrow .sb-fig__tip{fill:var(--ink);stroke:none}.sb-fig__label,.sb-fig__note{text-anchor:middle}.sb-fig__label{font:500 15px / 1 var(--font-display);fill:var(--ink)}.sb-fig__note{font:400 10px / 1 var(--font-mono);fill:var(--dim)}.sb-sources{gap:10px;max-width:68ch;margin:0;padding-left:1.2em;font-size:14px;line-height:1.5;display:grid}.sb-out{color:inherit;text-underline-offset:3px;text-decoration:underline}.sb-out__arrow{width:.72em;height:.72em;margin-left:.28em}