.done{--done-scale:.82;--done-giant:clamp(4.5rem, 7vw, 7rem);padding-block:clamp(6rem,16svh,10rem) clamp(5.5rem,14svh,9rem);overflow-x:clip}@media (min-width:26.25rem){.done{--done-scale:.86}}@media (min-width:48rem){.done{--done-scale:1}}@media (min-width:48rem) and (not (min-height:1049px)){.done{--done-scale:.94}}@media (min-width:48rem) and (not (min-height:996px)){.done{--done-scale:.9}}@media (min-width:48rem) and (not (min-height:961px)){.done{--done-scale:.86}}@media (min-width:48rem) and (not (min-height:926px)){.done{--done-scale:.82}}.done-device{--device-scale:var(--done-scale)}.done-scene{gap:clamp(3.5rem,9svh,5.5rem);display:grid}@media (min-width:64rem){.done-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(2rem,5vw,6rem)}}.done-words{justify-items:start;min-width:0;display:grid}.done-fade{gap:clamp(.125rem,.6vw,.5rem);margin:clamp(1.5rem,4svh,2.25rem) 0 0;padding:0;list-style:none;display:grid}.done-fig{flex-wrap:wrap;align-items:baseline;column-gap:clamp(.625rem,1vw,.875rem);display:flex}.done-fig[data-tone="45"]{color:var(--ink-45)}.done-fig[data-tone="62"]{color:var(--ink-62)}.done-fig[data-tone=best]{color:var(--accent)}.done-fig-value{font-size:var(--done-giant)}.done-fig-label{letter-spacing:-.01em;font-size:clamp(.9375rem,1.2vw,1.1875rem);font-weight:500;line-height:1.3}.done-sentence{margin-top:clamp(1.5rem,4svh,2.25rem)}.done-body{color:var(--ink-62);margin-top:.625rem;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.45}.done-note{border-radius:var(--radius-card);background:var(--card);gap:.75rem;width:100%;max-width:28rem;margin:clamp(2rem,5svh,2.75rem) 0 0;padding:1.125rem;display:grid}@media (min-width:48rem){.done-note{gap:.875rem;padding:1.25rem}}.done-note-head{align-items:center;gap:.875rem;display:flex}.done-face{background:var(--inset);border-radius:999px;flex:none;width:3.5rem;height:3.5rem;overflow:hidden}.done-face-image{object-fit:cover;width:100%;height:100%}.done-note-who{gap:.125rem;min-width:0;display:grid}.done-note-name{letter-spacing:-.01em;font-size:1.0625rem;font-weight:600;line-height:1.25}.done-note-when{color:var(--ink-62);font-size:.9375rem;line-height:1.3}.done-note-dot{width:.5rem;height:.5rem;transition:opacity .3s var(--ease-settle), scale .3s var(--ease-settle);flex:none;margin-left:auto}.done-note-play{align-items:center;gap:.75rem;display:flex}.done-play{background:var(--accent);width:2.5rem;height:2.5rem;color:var(--ground);border-radius:999px;flex:none;place-items:center;display:grid}.done-glyph{fill:currentColor;width:1.125rem;height:1.125rem;transition:opacity .25s var(--ease-settle), scale .25s var(--ease-settle);grid-area:1/1}.done-glyph-pause{opacity:0;scale:.8}.done-wave{--heard:17.6;flex:auto;align-items:center;gap:2px;min-width:0;height:1.5rem;display:flex}.done-wave-bar{min-width:0;height:var(--h);background:var(--accent);opacity:clamp(.35, (var(--heard) - var(--i)) * 4, 1);border-radius:999px;flex:1 1 0}.done-note-length{color:var(--ink-62);font-variant-numeric:tabular-nums;flex:none;font-size:.9375rem;line-height:1}.done-note-words{font-family:var(--font-serif);letter-spacing:-.005em;color:var(--ink);margin:0;font-size:clamp(1.1875rem,1.45vw,1.375rem);line-height:1.25}.done-note-words p{text-wrap:pretty;margin:0}.done-phone{justify-self:center}@media (hover:hover) and (prefers-reduced-motion:no-preference){.done-phone-lift{transition:translate .45s var(--ease-settle)}.done-phone:hover .done-phone-lift{translate:0 -4px}}@media (prefers-reduced-motion:no-preference){.done-scene[data-fade] .done-fig .readout-strip{translate:0 calc((var(--rise,0) - var(--digit)) * 1em);transition:none}.done-scene[data-fade=waiting] .done-fig{opacity:0}.done-scene[data-fade=waiting] .done-fig .readout-strip{--rise:calc(var(--digit) + 1)}.done-scene:is([data-note=waiting],[data-note=drawing]) .done-wave{--heard:0}.done-scene[data-note=waiting] .done-wave-bar{height:2px}.done-scene[data-note=drawing] .done-wave-bar{transition:height .12s linear calc(var(--i) * 30ms)}.done-scene:is([data-note=playing],[data-note=heard]) .done-wave-bar{transition:opacity .12s linear}.done-scene:is([data-note=playing],[data-note=heard]) .done-note-dot{opacity:0;scale:.6}.done-scene[data-note=playing] .done-glyph-play{opacity:0;scale:.8}.done-scene[data-note=playing] .done-glyph-pause{opacity:1;scale:1}}