.utb{padding-block:clamp(6rem,16svh,10rem) clamp(4rem,10svh,6.5rem)}.utb-head{justify-items:start;gap:.875rem;margin-bottom:clamp(2rem,5svh,3rem);display:grid}.utb-lede{max-width:31em}.utb-stage{display:grid}.utb-film{--film-position:50% 50%;aspect-ratio:4/5;width:100%}.utb-film:after{content:"";background:linear-gradient(to bottom, transparent 62%, color-mix(in srgb, var(--ground) 50%, transparent) 84%, var(--ground));pointer-events:none;position:absolute;inset:0}.utb-rest{justify-items:start;gap:.75rem;margin-top:1.5rem;display:grid}.utb-clock{gap:1rem;display:inline-grid}.utb-timer{color:var(--ink)}.utb-track{background:var(--unlit);border-radius:999px;height:3px;position:relative;overflow:hidden}.utb-track-fill{border-radius:inherit;background:var(--accent);will-change:transform;position:absolute;inset:0;transform:translate(-100%)}.utb-when,.utb-rest-caption{transition:color .3s var(--ease-settle)}@media (hover:hover){.utb-stage:hover .utb-rest-caption{color:var(--ink)}.utb:has(.utb-stage:hover) .utb-when{color:var(--ink)}}@media (min-width:48rem){.utb-film{aspect-ratio:16/9}.utb-film:after{background:linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--ground) 55%, transparent) 70%, color-mix(in srgb, var(--ground) 88%, transparent) 88%, var(--ground))}.utb-stage>*{grid-area:1/1}.utb-rest{z-index:1;align-self:end;margin-top:0;padding-bottom:clamp(1.5rem,5svh,3rem);position:relative}.utb-rest-caption{color:#f2eee6b8}.utb-rest-caption strong,.utb-timer{color:var(--color-bone)}.utb-track{background:#f2eee629}.utb-track-fill{background:var(--color-moss)}}@media (min-width:48rem) and (hover:hover){.utb-stage:hover .utb-rest-caption{color:var(--color-bone)}}@media (min-width:64rem){.utb-film{--film-position:50% 72%;aspect-ratio:auto;height:min(50vw, calc(100svh - var(--hud) - 2rem))}}.utb-row{gap:3.5rem;margin-top:clamp(3rem,9svh,5.5rem);display:grid}@media (min-width:64rem){.utb-row{grid-template-columns:minmax(0,28rem) minmax(0,30rem);justify-content:space-between;align-items:center}}.utb-note{border-radius:var(--radius-card);background:var(--card);gap:.75rem;width:100%;max-width:28rem;margin:0;padding:1.125rem;display:grid}@media (min-width:48rem){.utb-note{gap:.875rem;padding:1.25rem}}.utb-note-head{align-items:center;gap:.875rem;display:flex}.utb-face{border-radius:999px;flex:none;width:3.5rem;height:3.5rem;overflow:hidden}.utb-note-who{gap:.125rem;min-width:0;display:grid}.utb-note-name{letter-spacing:-.01em;font-size:1.0625rem;font-weight:600;line-height:1.25}.utb-note-when{color:var(--ink-62);font-size:.9375rem;line-height:1.3}.utb-note-dot{width:.5rem;height:.5rem;transition:opacity .3s var(--ease-settle);flex:none;margin-left:auto}.utb-scene:not([data-phase=ready]) .utb-note-dot{opacity:0}.utb-note-play{align-items:center;gap:.75rem;display:flex}.utb-play{background:var(--accent);width:2.5rem;height:2.5rem;color:var(--ground);border-radius:999px;flex:none;place-items:center;display:grid}.utb-glyph{fill:currentColor;width:1.125rem;height:1.125rem;transition:opacity .25s var(--ease-settle), scale .25s var(--ease-settle);grid-area:1/1}.utb-glyph-pause,.utb-scene[data-phase=note] .utb-glyph-play{opacity:0;scale:.8}.utb-scene[data-phase=note] .utb-glyph-pause{opacity:1;scale:1}.utb-wave{flex:auto;align-items:center;gap:2px;min-width:0;height:1.5rem;display:flex;position:relative;overflow:hidden}.utb-wave-bar{background:var(--accent);border-radius:999px;flex:1 1 0;min-width:0}.utb-wave-shade{background:var(--card);opacity:.65;will-change:transform;position:absolute;inset:0;transform:translate(0)}.utb-note-length{color:var(--ink-62);font-variant-numeric:tabular-nums;flex:none;font-size:.9375rem;line-height:1}.utb-note-words{font-family:var(--font-serif);letter-spacing:-.005em;color:var(--ink);text-wrap:pretty;margin:0;font-size:clamp(1.25rem,1.5vw,1.4375rem);line-height:1.22}.utb-load{justify-items:start;gap:1rem;display:grid}.utb-bar{aspect-ratio:2200/450;touch-action:manipulation;width:min(100%,30rem);height:auto;overflow:hidden}@media (hover:hover) and (prefers-reduced-motion:no-preference){.utb-bar{transition:translate .45s var(--ease-settle)}.utb-bar:hover{translate:0 -4px}}.utb-steel{fill:var(--color-steel)}.utb-plate{fill:var(--color-plate-blue)}.utb-hit{fill:#0000}