@import "https://fonts.googleapis.com/css2?family=Amiri&family=Readex+Pro:wght@160..700&display=swap";:root{--vh-font-sans:"Readex Pro", system-ui, sans-serif;--vh-font-doa:"Amiri", serif;--vh-surface:#fff8ee;--vh-sunken:#fcebd3;--vh-ink:#2a1f14;--vh-ink-muted:#4d3d2c;--vh-line:#8c7259;--vh-accent:#ff9a3d;--vh-accent-ink:#7a3300;--vh-accent-hover:#ffb066;--vh-on-accent:#2a1f14;--vh-mistake:#8a1f4a;--vh-scrim:#2a1f1480;--vh-map-area:#f0d3aa;--vh-accent-edge:1.5px solid #7a3300}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--vh-surface:#172231;--vh-sunken:#223044;--vh-ink:#f7efe3;--vh-ink-muted:#d0c8be;--vh-line:#7f8a99;--vh-accent:#ffa552;--vh-accent-ink:#ffb673;--vh-accent-hover:#ffb873;--vh-on-accent:#172231;--vh-mistake:#ffb0bf;--vh-scrim:#0000008c;--vh-map-area:#2e405a;--vh-accent-edge:1.5px solid transparent}}[data-theme=dark]{--vh-surface:#172231;--vh-sunken:#223044;--vh-ink:#f7efe3;--vh-ink-muted:#d0c8be;--vh-line:#7f8a99;--vh-accent:#ffa552;--vh-accent-ink:#ffb673;--vh-accent-hover:#ffb873;--vh-on-accent:#172231;--vh-mistake:#ffb0bf;--vh-scrim:#0000008c;--vh-map-area:#2e405a;--vh-accent-edge:1.5px solid transparent}[data-theme=light]{--vh-surface:#fff8ee;--vh-sunken:#fcebd3;--vh-ink:#2a1f14;--vh-ink-muted:#4d3d2c;--vh-line:#8c7259;--vh-accent:#ff9a3d;--vh-accent-ink:#7a3300;--vh-accent-hover:#ffb066;--vh-on-accent:#2a1f14;--vh-mistake:#8a1f4a;--vh-scrim:#2a1f1480;--vh-map-area:#f0d3aa;--vh-accent-edge:1.5px solid #7a3300}:root{--vh-text-caption:400 15px/22px var(--vh-font-sans);--vh-text-body:400 18px/28px var(--vh-font-sans);--vh-text-label:600 18px/24px var(--vh-font-sans);--vh-text-lead:500 22px/30px var(--vh-font-sans);--vh-text-instruction:600 28px/34px var(--vh-font-sans);--vh-text-title:600 35px/42px var(--vh-font-sans);--vh-text-doa:400 28px/56px var(--vh-font-doa)}@media (width>=1024px){:root{--vh-text-instruction:600 35px/42px var(--vh-font-sans);--vh-text-title:600 44px/52px var(--vh-font-sans)}}:root{--vh-space-1:4px;--vh-space-2:8px;--vh-space-3:12px;--vh-space-4:16px;--vh-space-6:24px;--vh-space-8:32px;--vh-space-12:48px;--vh-space-16:64px;--vh-target:48px;--vh-joystick:128px;--vh-joystick-knob:56px;--vh-radius-mark:2px;--vh-radius-inner:4px;--vh-radius-control:6px;--vh-radius-panel:12px;--vh-dur-press:.12s;--vh-dur-micro:.18s;--vh-dur-panel:.32s;--vh-dur-step:.48s;--vh-dur-reward:.8s;--vh-stagger:60ms;--vh-ease-settle:cubic-bezier(.22, 1, .36, 1);--vh-ease-leave:cubic-bezier(.55, 0, 1, .45);--vh-move:12px}@media (prefers-reduced-motion:reduce){:root{--vh-move:0px;--vh-dur-panel:var(--vh-dur-micro);--vh-dur-step:var(--vh-dur-micro);--vh-dur-reward:var(--vh-dur-micro);--vh-stagger:0s}}body{background:var(--vh-surface);color:var(--vh-ink);font:var(--vh-text-body);margin:0}:focus-visible{outline:2px solid var(--vh-accent-ink);outline-offset:2px}.vh-doa{font:var(--vh-text-doa)}html,body,#root{height:100%}body{overflow:hidden}.app{position:fixed;inset:0}.scene{cursor:grab}.scene:active{cursor:grabbing}.scene:focus-visible{outline:2px solid var(--vh-accent-ink);outline-offset:calc(-1 * var(--vh-space-1))}.backdrop{background:var(--vh-surface);opacity:0;pointer-events:none;transition:opacity var(--vh-dur-panel) var(--vh-ease-leave);position:absolute;inset:0}[data-state=loading] .backdrop,[data-state=no-webgl] .backdrop,[data-state=stopped] .backdrop{opacity:1;transition:none}.card{top:var(--vh-space-2);left:var(--vh-space-2);right:var(--vh-space-2);background:var(--vh-surface);border-radius:var(--vh-radius-panel);padding:var(--vh-space-4);gap:var(--vh-space-1);display:grid;position:absolute}@media (width>=1024px){.card{width:calc(var(--vh-space-16) * 7);max-width:calc(100% - 2 * var(--vh-space-4));box-sizing:border-box;right:auto;top:var(--vh-space-4);left:var(--vh-space-4);padding:var(--vh-space-6)}}.card-name{font:var(--vh-text-lead);color:var(--vh-ink-muted);margin:0}.card-say{font:var(--vh-text-instruction);margin:0;display:grid}.card-say>span{transition:opacity var(--vh-dur-micro) var(--vh-ease-settle);grid-area:1/1}.card-say .when-loading{opacity:0}[data-state=loading] .card-say .when-loading{opacity:1}[data-state=loading] .card-say .when-ready{opacity:0}.card-hint{font:var(--vh-text-caption);color:var(--vh-ink-muted);margin:var(--vh-space-1) 0 0;transition:opacity var(--vh-dur-micro) var(--vh-ease-settle)}[data-state=loading] .card-hint{opacity:0}.hint-touch{display:none}@media (pointer:coarse){.hint-touch{display:inline}.hint-mouse{display:none}}.card-body{font:var(--vh-text-body);margin:var(--vh-space-1) 0 0}.primary-button{box-sizing:border-box;margin-top:var(--vh-space-3);min-height:var(--vh-target);padding:0 var(--vh-space-6);border:var(--vh-accent-edge);border-radius:var(--vh-radius-control);background:var(--vh-accent);color:var(--vh-on-accent);font:var(--vh-text-label);cursor:pointer;transition:background-color var(--vh-dur-micro) var(--vh-ease-settle), transform var(--vh-dur-press) var(--vh-ease-settle);justify-content:center;justify-self:start;align-items:center;text-decoration:none;display:inline-flex}.primary-button:hover{background:var(--vh-accent-hover)}.primary-button:active{transform:scale(.98)}@media (prefers-reduced-motion:reduce){.primary-button:active{transform:none}}.readout{gap:var(--vh-space-3);display:grid}.lowest{align-items:baseline;gap:var(--vh-space-3);margin:0;display:flex}.lowest b{font:var(--vh-text-title);font-variant-numeric:tabular-nums}.lowest span{font:var(--vh-text-caption);color:var(--vh-ink-muted);max-width:16ch}.readout dl{gap:var(--vh-space-1) var(--vh-space-4);grid-template-columns:auto 1fr;margin:0;display:grid}.readout dt{font:var(--vh-text-caption);color:var(--vh-ink-muted);padding-top:var(--vh-space-1)}.readout dd{font:var(--vh-text-body);font-variant-numeric:tabular-nums;margin:0}.result{gap:var(--vh-space-2);padding-top:var(--vh-space-3);border-top:1px solid var(--vh-line);font:var(--vh-text-label);align-items:flex-start;margin:0;display:flex}.result svg{flex:none;width:24px;height:24px}.result.below{color:var(--vh-mistake)}.icon{width:var(--vh-space-6);height:var(--vh-space-6);flex:none}.top-bar{top:var(--vh-space-2);left:var(--vh-space-2);right:var(--vh-space-2);justify-content:space-between;align-items:center;gap:var(--vh-space-2);display:flex;position:absolute}.card.below-bar{top:calc(2 * var(--vh-space-2) + var(--vh-target));gap:var(--vh-space-2)}.corner{bottom:var(--vh-space-2);margin:0;position:absolute}.corner-left{left:var(--vh-space-2)}.corner-right{right:var(--vh-space-2)}@media (width>=1024px){.top-bar{top:var(--vh-space-4);left:var(--vh-space-4);right:var(--vh-space-4)}.card.below-bar{top:calc(2 * var(--vh-space-4) + var(--vh-target))}.corner{bottom:var(--vh-space-4)}.corner-left{left:var(--vh-space-4)}.corner-right{right:var(--vh-space-4)}}.corner .primary-button{margin-top:0}.switch{align-items:center;gap:var(--vh-space-3);min-height:var(--vh-target);border-radius:var(--vh-radius-control);color:var(--vh-ink);font:var(--vh-text-label);cursor:pointer;transition:background-color var(--vh-dur-micro) var(--vh-ease-settle);background:0 0;border:0;padding:0;display:inline-flex}.top-bar .switch{padding:0 var(--vh-space-3) 0 var(--vh-space-4);background:var(--vh-surface)}.top-bar .switch:hover,.icon-button:hover{background:var(--vh-sunken)}.sheet .switch .switch-label{min-width:calc(var(--vh-space-16) + var(--vh-space-6));text-align:left}.switch-track{width:calc(var(--vh-space-12) + var(--vh-space-2));height:var(--vh-space-8);box-sizing:border-box;border:1px solid var(--vh-line);border-radius:var(--vh-radius-control);background:var(--vh-sunken);transition:background-color var(--vh-dur-micro) var(--vh-ease-settle);display:block;position:relative}.switch-thumb{top:calc(var(--vh-space-1) - 1px);left:calc(var(--vh-space-1) - 1px);width:var(--vh-space-6);height:var(--vh-space-6);border-radius:var(--vh-radius-inner);background:var(--vh-ink-muted);transition:transform var(--vh-dur-micro) var(--vh-ease-settle);position:absolute}.switch[aria-checked=true] .switch-track{border:var(--vh-accent-edge);background:var(--vh-accent)}.switch[aria-checked=true] .switch-thumb{background:var(--vh-on-accent);transform:translateX(var(--vh-space-6))}.switch-word{min-width:var(--vh-space-8);color:var(--vh-ink-muted);font-weight:400}.icon-button{width:var(--vh-target);height:var(--vh-target);border-radius:var(--vh-radius-control);background:var(--vh-surface);color:var(--vh-ink);cursor:pointer;transition:background-color var(--vh-dur-micro) var(--vh-ease-settle);border:0;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.sheet .icon-button{background:var(--vh-sunken)}.card-lead-row{justify-content:space-between;align-items:center;gap:var(--vh-space-2) var(--vh-space-4);flex-wrap:wrap;display:flex}.card-lead{align-items:center;gap:var(--vh-space-2);font:var(--vh-text-lead);margin:0;display:flex}.card-mistake .card-lead{color:var(--vh-mistake)}.card-note{font:var(--vh-text-body);color:var(--vh-ink-muted);margin:0}.marks{gap:var(--vh-space-1);width:calc(var(--vh-space-16) * 2);grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.mark{height:var(--vh-space-2);box-sizing:border-box;border:1.5px solid var(--vh-line);border-radius:var(--vh-radius-mark)}.mark.now{border:var(--vh-accent-edge);background:var(--vh-accent)}.mark.done{border-color:var(--vh-ink);background:var(--vh-ink);transform-origin:0;animation:mark-fill var(--vh-dur-step) var(--vh-ease-settle)}.step{animation:step-in var(--vh-dur-step) var(--vh-ease-settle) both}@keyframes step-in{0%{opacity:0;transform:translateY(var(--vh-move))}}@keyframes mark-fill{0%{transform:scaleX(0)}}.caption-chip{box-sizing:border-box;min-height:var(--vh-target);padding:0 var(--vh-space-3);border-radius:var(--vh-radius-control);background:var(--vh-surface);font:var(--vh-text-caption);color:var(--vh-ink-muted);align-items:center;display:flex}.edge-arrow{align-items:center;gap:var(--vh-space-2);min-height:var(--vh-target);padding:0 var(--vh-space-3);border-radius:var(--vh-radius-control);background:var(--vh-surface);color:var(--vh-ink);font:var(--vh-text-caption);cursor:pointer;border:0;display:inline-flex;position:absolute;top:60%;transform:translateY(-50%)}.edge-arrow .icon{color:var(--vh-accent-ink)}.edge-left{left:var(--vh-space-2)}.edge-right{right:var(--vh-space-2)}.quiet-button{min-height:var(--vh-target);padding:0 var(--vh-space-4);border-radius:var(--vh-radius-control);color:var(--vh-accent-ink);font:var(--vh-text-label);cursor:pointer;transition:background-color var(--vh-dur-micro) var(--vh-ease-settle), transform var(--vh-dur-press) var(--vh-ease-settle);background:0 0;border:0}.quiet-button:hover{background:var(--vh-sunken)}.quiet-button:active{transform:scale(.98)}.lang-choice{gap:var(--vh-space-1);padding:calc(var(--vh-space-1) - 1px);border:1px solid var(--vh-line);border-radius:var(--vh-radius-control);background:var(--vh-sunken);display:inline-flex}.lang-choice button{min-height:var(--vh-target);padding:0 var(--vh-space-4);border-radius:var(--vh-radius-inner);color:var(--vh-ink);font:var(--vh-text-label);cursor:pointer;background:0 0;border:0;font-weight:500}.lang-choice button[aria-checked=true]{background:var(--vh-ink);color:var(--vh-surface);font-weight:600}.card .lang-row{justify-items:start;gap:var(--vh-space-2);margin-top:var(--vh-space-4);display:grid}.card .lang-row p{font:var(--vh-text-caption);color:var(--vh-ink-muted);margin:0}.scrim{background:var(--vh-scrim);animation:fade-in var(--vh-dur-panel) var(--vh-ease-settle) both;position:absolute;inset:0}.sheet{box-sizing:border-box;max-height:calc(100% - var(--vh-space-16));gap:var(--vh-space-6);padding:var(--vh-space-6) var(--vh-space-6) var(--vh-space-8);border-radius:var(--vh-radius-panel) var(--vh-radius-panel) 0 0;background:var(--vh-surface);color:var(--vh-ink);animation:sheet-in var(--vh-dur-panel) var(--vh-ease-settle) both;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}@media (width>=1024px){.sheet{width:calc(var(--vh-space-16) * 9);margin-left:calc(var(--vh-space-16) * -4.5);left:50%;right:auto}}.scrim.leaving{animation:fade-out var(--vh-dur-panel) var(--vh-ease-leave) both}.sheet.leaving{animation:sheet-out var(--vh-dur-panel) var(--vh-ease-leave) both}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes sheet-in{0%{opacity:0;transform:translateY(var(--vh-move))}}@keyframes sheet-out{to{opacity:0;transform:translateY(var(--vh-move))}}.sheet-head{justify-content:space-between;align-items:flex-start;gap:var(--vh-space-4);display:flex}.sheet-title{align-items:flex-start;gap:var(--vh-space-3);font:var(--vh-text-instruction);margin:0;display:flex}.sheet-title .icon{margin-top:var(--vh-space-1)}.sheet-sub{margin:var(--vh-space-1) 0 0;font:var(--vh-text-caption);color:var(--vh-ink-muted)}.sheet-note{font:var(--vh-text-body);color:var(--vh-ink-muted);margin:0}.sheet-label{font:var(--vh-text-label);margin:0}.sheet-group{align-items:flex-start;gap:var(--vh-space-2);flex-direction:column;display:flex}.sheet .primary-button{align-self:stretch;margin-top:0}.mistake-list{gap:var(--vh-space-2);margin:0;padding:0;list-style:none;display:grid}.mistake-list li{align-items:flex-start;gap:var(--vh-space-2);font:var(--vh-text-body);color:var(--vh-mistake);display:flex}.mistake-list .icon{height:calc(var(--vh-space-6) + var(--vh-space-1))}@media (prefers-reduced-motion:reduce){.mark.done{animation:none}.switch-thumb{transition:none}.quiet-button:active{transform:none}}