:root{--bg:#fff8ec;--ink:#2b2a4c;--muted:#8a87a8;--card:#fff;--accent:#ff9f1c;--accent-ink:#7a3e00;--good:#2bb673;--bad:#e4572e;--highlight:#ffe8a3;--key:#fff;--key-shadow:#e6dccb;--cell:clamp(44px, 13vw, 84px);--bubble-room:4rem;color:var(--ink);background:var(--bg);font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;-webkit-text-size-adjust:100%;height:100%;margin:0}body{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.app{height:100dvh;padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:8px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:8px;min-height:44px;display:flex}.badges{flex-direction:column;align-items:flex-start;gap:3px;display:flex}.total,.streak{white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--card);box-shadow:0 2px 0 var(--key-shadow);border-radius:999px;font-weight:800}.total{padding:2px 14px;font-size:1.35rem}.streak{padding:0 10px;font-size:.95rem}.icon-button{background:var(--card);width:48px;height:48px;box-shadow:0 2px 0 var(--key-shadow);border-radius:50%;font-size:1.5rem}.play{flex-direction:column;flex:1;gap:12px;min-height:0;display:flex}.stage{flex-direction:column;flex:1;align-items:center;gap:8px;min-height:0;display:flex}.problem-area{flex-direction:column;flex:1 1 0;justify-content:safe center;align-self:stretch;align-items:center;min-height:0;display:flex}.problem-anchor{margin-top:var(--bubble-room);position:relative}@supports (container-type:size){.problem-area{container-type:size}.problem-anchor{--cell:min(84px, 100cqw / 5.8, (100cqh - var(--bubble-room) - 22px) / 3.46)}}.controls{flex-direction:column;align-self:center;gap:10px;width:100%;max-width:460px;display:flex}@media (orientation:landscape) and (width>=700px){.play{flex-direction:row;align-items:stretch}.controls{justify-content:center;width:42%}:root{--cell:clamp(44px, 9vh, 96px)}}.problem{flex-direction:column;align-items:flex-end;display:flex}.row{grid-template-columns:repeat(var(--cols), var(--cell));font-size:calc(var(--cell) * .8);height:calc(var(--cell) * .92);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.15;display:grid}.cell{border-radius:12px;justify-content:center;align-items:center;display:flex}.cell.highlight{background:var(--highlight)}.op{color:var(--accent)}.scratch-row{font-size:calc(var(--cell) * .4);height:calc(var(--cell) * .7)}.scratch-row .cell{padding:4px}.scratch{border:3px dashed var(--muted);width:80%;height:100%;color:var(--accent-ink);background:#fff9;border-radius:10px}.scratch.focused{border-style:solid;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px #ff9f1c40}.struck{color:var(--muted);text-decoration:line-through;text-decoration-thickness:4px;-webkit-text-decoration-color:var(--bad);text-decoration-color:var(--bad)}.rule{border-top:6px solid var(--ink);border-radius:3px;align-self:stretch;margin:4px 0 8px}.answer-wrap{position:relative}.ghost-row{pointer-events:none;position:absolute;inset:0}.ghost{color:var(--muted);opacity:.45}.answer-row .cell{background:var(--card);box-shadow:inset 0 -4px 0 var(--key-shadow);margin:0 3px}.answer-row .cell:empty{background:#ffffff8c}.row.answer-row .cell:first-child{box-shadow:none;background:0 0}.answer-row.focused .cell:not(:first-child){box-shadow:inset 0 -4px 0 var(--accent)}.answer-row.faded{color:var(--bad);opacity:.5}.answer-row.correct{color:var(--good);animation:.5s bounce}.answer-row:not(:empty) .cell:not(:empty){z-index:1;position:relative}.message{min-height:1.6em;color:var(--bad);text-align:center;font-size:1.3rem;font-weight:700}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake{animation:.4s shake}@keyframes bounce{0%,to{transform:scale(1)}40%{transform:scale(1.18)}}.pad{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.key{background:var(--key);height:clamp(64px,9dvh,88px);min-height:64px;box-shadow:0 4px 0 var(--key-shadow);border-radius:18px;font-size:2rem;font-weight:800;transition:transform 60ms}.key:active{box-shadow:0 1px 0 var(--key-shadow);transform:translateY(3px)}.key-submit{background:var(--good);color:#fff;box-shadow:0 4px #1d8a56}.key-back{color:var(--muted)}@media (prefers-reduced-motion:reduce){.shake,.answer-row.correct{animation:none}}.bubble{z-index:3;background:var(--card);text-align:center;width:max-content;max-width:min(520px,100vw - 32px);box-shadow:0 3px 0 var(--key-shadow);border-radius:20px;padding:12px 18px;font-size:1.25rem;font-weight:700;line-height:1.35;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.bubble:after{content:"";border:10px solid #0000;border-bottom:0;border-top-color:var(--card);position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.bubble.empty{visibility:hidden}.bubble.long{max-width:min(620px,100vw - 32px);font-size:1.05rem;line-height:1.3}@supports (container-type:size){.bubble{max-width:min(520px,100cqw)}.bubble.long{max-width:min(620px,100cqw)}}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.action{background:var(--card);min-height:56px;box-shadow:0 4px 0 var(--key-shadow);border-radius:16px;font-size:1.3rem;font-weight:800}.action:active{box-shadow:0 1px 0 var(--key-shadow);transform:translateY(3px)}.action.hint{background:var(--highlight);color:var(--accent-ink)}.action.hint:disabled{opacity:.55;font-size:1.05rem}.action.pass{color:var(--muted)}.action.next{background:var(--accent);color:#fff;grid-column:1/-1;box-shadow:0 4px #c97300}.install-tip{background:var(--highlight);color:var(--accent-ink);border-radius:16px;align-items:center;gap:12px;padding:10px 12px 10px 16px;font-weight:700;display:flex}.install-tip span{flex:1}.tip-dismiss{border-radius:50%;flex:none;width:44px;height:44px;font-size:1.2rem}@media (height<=760px){:root{--bubble-room:2.9rem}.app{padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));gap:6px}.topbar{min-height:40px}.badges{gap:3px}.total{padding:1px 12px;font-size:1.1rem}.streak{padding:0 10px;font-size:.85rem}.icon-button{width:40px;height:40px;font-size:1.25rem}.play,.controls,.pad{gap:8px}.stage{gap:4px}.key{border-radius:14px;height:clamp(44px,8dvh,64px);min-height:44px;font-size:1.6rem}.action{min-height:44px;font-size:1.1rem}.bubble{padding:8px 14px;font-size:1.05rem}.bubble.long{font-size:.9rem}.message{font-size:1.1rem}}@media (height<=760px),(width<=600px){.install-tip{z-index:10;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));font-size:.95rem;position:fixed;box-shadow:0 6px 24px #2b2a4c40}}@media (orientation:landscape) and (height<=500px){.play{flex-direction:row;align-items:stretch}.controls{align-self:stretch;width:46%;max-width:420px}.badges{flex-direction:row;align-items:center;gap:6px}.pad{flex:1;grid-auto-rows:1fr;min-height:0}.key{height:auto;min-height:0}}