:root{--ground:#f1eee6;--ground-recording:#f3dacd;--paper:#fff;--sunken:#ede9e0;--ink:#211c16;--ink-rgb:33 28 22;--quiet:#6f6559;--rule:#ded7c9;--rule-soft:#c9c0b0;--clay:#b8532b;--clay-rgb:184 83 43;--green:#2c6e4c;--green-rgb:44 110 76;--amber:#a2650f;--amber-rgb:162 101 15;color:var(--ink);background:var(--ground);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{height:100%}body{background:var(--ground);min-width:320px;margin:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.categories{min-height:100dvh;padding:clamp(32px, 8vh, 72px) 20px max(32px, env(safe-area-inset-bottom));grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:18px;display:grid}.tile{aspect-ratio:167/186;background:var(--paper);border:1px solid var(--rule);box-shadow:0 4px 14px rgb(var(--ink-rgb) / 5%);border-radius:22px;place-items:center;display:grid}.tile img{object-fit:contain;width:68%;height:68%}.practice{--accent:var(--clay);--halo:rgb(var(--clay-rgb) / 16%);min-height:100dvh;padding:clamp(24px, 6vh, 56px) 20px max(28px, env(safe-area-inset-bottom));background:var(--ground);flex-direction:column;justify-content:space-between;align-items:center;transition:background .2s;display:flex}.practice[data-status=recording]{background:var(--ground-recording)}.practice[data-outcome=understood]{--accent:var(--green);--halo:rgb(var(--green-rgb) / 20%)}.practice[data-outcome=not_yet]{--accent:var(--amber);--halo:rgb(var(--amber-rgb) / 20%)}.round{background:var(--paper);border:2px solid var(--rule-soft);border-radius:999px;place-items:center;transition:color .16s,background .16s,border-color .16s;display:grid}.dots{flex:none;align-items:center;gap:10px;height:14px;display:flex}.dot{background:var(--rule);border-radius:999px;width:10px;height:10px}.dot[data-here]{background:var(--ink);width:14px;height:14px}.card{background:var(--sunken);border:3px solid var(--rule);border-radius:26px;flex-direction:column;flex:0 auto;width:350px;max-width:100%;height:clamp(248px,44dvh,366px);transition:background .2s,border-color .2s,box-shadow .2s;display:flex;overflow:hidden}.practice[data-status=playing] .card,.practice[data-outcome=not_yet] .card{background:var(--paper);border-color:var(--accent);box-shadow:0 0 0 9px var(--halo), 0 8px 24px rgb(var(--ink-rgb) / 10%)}.practice[data-status=recording] .card{opacity:.5;pointer-events:none}.picture{flex:auto;justify-content:center;align-items:center;min-height:0;padding:16px;display:flex}.picture img{object-fit:contain;max-width:100%;max-height:100%}.listen{border-top:1px solid var(--rule);flex:none;justify-content:center;align-items:center;gap:28px;height:96px;display:flex}.listen .round{width:72px;height:72px;color:var(--quiet);border-color:var(--rule-soft)}.practice[data-status=playing] .listen .round,.practice[data-outcome=not_yet] .listen .round{color:var(--ink);border-color:var(--rule)}.listen .play svg{width:30px;height:30px;margin-left:3px}.listen .slow svg{width:38px;height:38px}.practice[data-speed=normal] .play,.practice[data-speed=slow] .slow,.practice[data-outcome=not_yet] .slow{color:var(--paper);background:var(--accent);border-color:var(--accent)}.disc-slot{flex:none;place-items:center;width:168px;height:168px;display:grid;position:relative}.ring{opacity:0;width:168px;height:168px;position:absolute;inset:0;transform:rotate(-90deg)}.ring-track{stroke:rgb(var(--clay-rgb) / 22%)}.ring-fill{stroke:var(--clay);stroke-dasharray:490;stroke-dashoffset:490px}.practice[data-status=recording] .ring{opacity:1}.practice[data-status=recording] .ring-fill{animation:countdown var(--countdown) linear forwards}@keyframes countdown{to{stroke-dashoffset:0}}.disc{width:136px;height:136px;color:var(--rule-soft);background:var(--sunken);border:3px solid var(--rule);border-radius:999px;place-items:center;transition:background .16s,border-color .16s,box-shadow .16s;display:grid}.disc svg{width:60px;height:60px}.practice[data-status=ready] .disc{color:var(--clay);background:var(--paper);border-color:var(--clay);box-shadow:0 0 0 9px var(--halo), 0 8px 24px rgb(var(--clay-rgb) / 20%)}.practice[data-status=recording] .disc{color:var(--paper);background:var(--clay);border-color:var(--clay);box-shadow:0 10px 26px rgb(var(--clay-rgb) / 28%)}.practice[data-status=recording] .disc svg{width:72px;height:34px}.practice[data-status=result] .disc{color:var(--paper);background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 9px var(--halo), 0 10px 26px rgb(var(--ink-rgb) / 18%)}.practice[data-status=result] .disc svg{width:74px;height:74px}.bars rect{transform-box:fill-box;transform-origin:50%;animation:.72s ease-in-out infinite speak}.bars rect:nth-child(2){animation-delay:90ms}.bars rect:nth-child(3){animation-delay:.18s}.bars rect:nth-child(4){animation-delay:.27s}.bars rect:nth-child(5){animation-delay:.12s}.bars rect:nth-child(6){animation-delay:.24s}@keyframes speak{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.nav{flex:none;justify-content:space-between;align-items:center;width:350px;max-width:100%;height:56px;display:flex}.nav .round{width:56px;height:56px;color:var(--ink);border-color:var(--rule)}.nav .round svg{width:28px;height:28px}.practice[data-outcome=understood] .forward{color:var(--paper);background:var(--accent);border-color:var(--accent)}.practice[data-status=recording] .nav{opacity:.28;pointer-events:none}@media (prefers-reduced-motion:reduce){.bars rect{animation:none}.practice[data-status=recording] .ring-fill{stroke-dashoffset:245px;animation:none}}