@font-face{font-family:Montserrat;src:url('./assets/Montserrat-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('./assets/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f8f8f4;--ink:#161a35;--muted:#767887;--blue:#4f59dd;--soft:#e8e9f0;--green:#3e7962;--red:#ac5752;font-family:Montserrat,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button,summary,select,input[type=checkbox]{cursor:pointer}button{border:0;background:none;-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button{transition:background .16s,transform .16s,color .16s}button:active{transform:scale(.95)}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.app{width:min(100%,600px);margin:auto;min-height:100svh;padding:calc(24px + env(safe-area-inset-top)) 28px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.wordmark{font-weight:680;font-size:25px;letter-spacing:-1.5px}.brand-dot{color:var(--blue)}.icon-button{width:44px;height:44px;color:var(--muted);border-radius:50%}.icon-button:hover{background:var(--soft)}svg{width:24px;height:24px}.operations{display:grid;grid-template-columns:repeat(4,1fr);background:#ededee;border-radius:16px;padding:5px;gap:4px}.operations button{height:55px;font-size:30px;font-weight:450;border-radius:12px;color:#696b7b}.operations button[aria-pressed=true]{background:var(--blue);color:white;box-shadow:0 3px 8px #4f59dd22}.settings{background:#efefed;border-radius:14px;font-size:12px}.practice{margin-top:12px}summary{min-height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;list-style:none;font-weight:520;color:#636577}summary::-webkit-details-marker{display:none}summary svg{width:18px;transition:transform .2s}details[open] summary svg{transform:rotate(180deg)}.settings-content{padding:4px 18px 18px}.general{padding:18px;margin-bottom:18px}h2,.field-title{font-size:11px;font-weight:600;letter-spacing:.03em;margin:0 0 12px}.modes,.presets{display:flex;gap:5px;flex-wrap:wrap}.modes button,.presets button{padding:12px 10px;min-height:44px;border-radius:8px;background:#f9f9f6;font-size:11px;flex:1}.modes button[aria-pressed=true],.presets button[aria-pressed=true],.rows button[aria-pressed=true]{background:var(--blue);color:white}.field-title{margin-top:20px}.rows{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.rows button{background:#f9f9f6;border-radius:8px;height:44px;font-size:12px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;min-height:44px}.switch-row small{display:block;font-size:10px;line-height:1.6;color:var(--muted);margin-top:5px}.switch-row input{appearance:none;flex-shrink:0;width:38px;height:23px;border-radius:20px;background:#d4d5da;position:relative;margin:0}.switch-row input:after{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .18s}.switch-row input:checked{background:var(--blue)}.switch-row input:checked:after{transform:translateX(15px)}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}label{display:block;font-size:11px}select,#custom-limit{display:block;width:100%;min-width:0;min-height:44px;margin-top:7px;border:1px solid #dedee3;border-radius:8px;background:var(--paper);padding:9px;font-size:12px}#custom-row{margin-top:15px}.hand-note{color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:0}.exercise{padding:clamp(48px,10svh,100px) 12px 0;text-align:center;position:relative}#problem{margin:0 0 42px;font-size:clamp(42px,8vw,66px);font-weight:480;letter-spacing:-.055em;line-height:1.2;white-space:nowrap}#problem.long{font-size:clamp(23px,5.5vw,42px)}.answer-line{display:flex;align-items:center;border-bottom:4px solid var(--blue);min-height:116px;transition:border-color .2s}#answer,#recognized{font-family:'IBM Plex Mono',monospace;font-weight:400;min-width:0;background:none;border:0;outline:none;caret-color:var(--blue)}#answer{width:100%;font-size:clamp(58px,12vw,90px);text-align:center;padding:0 0 14px 44px}#submit{color:#9496a3;flex:0 0 44px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}#submit:hover{color:var(--blue)}#submit svg{width:32px;height:32px}#submit span{font-size:9px}#feedback{font-size:12px;min-height:22px;line-height:1.6;margin:22px 0 0;color:var(--muted)}.correct #feedback{color:var(--green)}.incorrect #feedback{color:var(--red)}.correct .answer-line{border-color:var(--green)}.incorrect .answer-line{border-color:var(--red)}.correct #problem{animation:yes .35s}.incorrect .answer-line{animation:no .25s}@keyframes yes{50%{transform:translateY(-4px)}}@keyframes no{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}#countdown{height:2px;background:var(--blue);width:0;margin:8px auto 0;opacity:.4}#countdown.running{animation:count 4s linear forwards}@keyframes count{from{width:100%}to{width:0}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px 12px 0}.keypad button{height:58px;background:#ededeb;border-radius:13px;font-size:23px;font-weight:450}.keypad button:hover{background:#e1e2e9}.keypad button:last-child{background:var(--blue);color:white}.keypad button[data-key=delete]{font-size:23px;color:var(--muted)}footer{margin-top:auto;padding-top:58px;text-align:center;color:#9495a0;font-size:9px;letter-spacing:.01em}.canvas-wrap{position:relative;border-bottom:4px solid var(--blue);height:180px}canvas{display:block;touch-action:none;width:100%;height:100%;cursor:crosshair}#draw-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#a1a2ae;font-size:15px}.hand-actions{display:flex;justify-content:space-between;margin-top:8px}.hand-actions button{min-height:44px;font-size:11px;color:var(--muted)}.hand-actions button:last-child{color:var(--blue)}#recognition{margin-top:14px;text-align:left}.recognition-controls{display:flex;gap:12px;align-items:center;margin-top:5px}#recognized{width:100%;font-size:32px;border-bottom:1px solid var(--blue)}#confirm-hand{min-height:44px;font-size:11px;color:var(--blue)}#unavailable{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 32px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body[data-mode=hand] .exercise,body[data-mode=bulb] .exercise{padding-top:38px}body[data-mode=bulb] #problem,body[data-mode=hand] #problem{margin-bottom:26px}body[data-mode=bulb] footer{padding-top:26px}@media(min-width:850px){.app{padding-top:40px}.exercise{padding-top:90px}header{margin-bottom:36px}body[data-mode=bulb] .exercise,body[data-mode=hand] .exercise{padding-top:50px}}@media(max-width:380px){.app{padding-left:18px;padding-right:18px}.exercise{padding-left:4px;padding-right:4px}.settings-content{padding-left:12px;padding-right:12px}.pair{gap:7px}.presets button{padding:10px 5px;font-size:10px}.keypad{margin-left:4px;margin-right:4px}.rows{gap:3px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}#countdown.running{animation:none}}