.mth{--mth-good:var(--green);--mth-good-lip:var(--green-lip);--mth-bad:var(--red);--mth-bad-lip:var(--red-lip);--mth-on-yellow:var(--ink);--mth-key-h:clamp(50px, 8.4dvh, 76px);--mth-mochi:92px;--mth-mochi-rise:50px;row-gap:var(--s3);width:100%;max-width:520px;height:100%;padding:var(--s3) var(--gutter) calc(var(--s4) + var(--lip) + env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;grid-template:"timer""console"minmax(0,1fr)"pad""keys"/minmax(0,1fr);margin-inline:auto;display:grid;position:relative}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mth{--mth-on-yellow:var(--bg)}}:root[data-theme=dark] .mth{--mth-on-yellow:var(--bg)}.mth--safe{--mth-good:var(--d-math);--mth-good-lip:var(--d-math-lip);--mth-bad:var(--d-speed);--mth-bad-lip:var(--d-speed-lip)}.mth--large{--mth-key-h:clamp(60px, 9.2dvh, 84px);--mth-answer-min:60px}.mth-timer{border-radius:var(--r-pill);background:var(--line);grid-area:timer;height:10px;overflow:hidden}.mth-timer__fill{border-radius:inherit;background:var(--dc);transform-origin:0;will-change:transform;width:100%;height:100%;transition:background var(--dur-ui)}.mth--hurry .mth-timer__fill{background:var(--mth-bad)}.mth--hurry.mth--motion .mth-timer{animation:1s ease-in-out infinite mth-hurry}@keyframes mth-hurry{50%{transform:scaleY(1.5)}}.mth-console{gap:var(--s2);min-height:0;margin-top:calc(var(--mth-mochi-rise) - var(--s3));padding:var(--s2) var(--s3) var(--s3);border-radius:var(--r-xl);background:var(--dc);box-shadow:0 var(--lip) 0 var(--dc-lip);flex-direction:column;grid-area:console;display:flex;position:relative}.mth-mochi{right:var(--s3);top:calc(var(--mth-mochi-rise) * -1);width:var(--mth-mochi);height:var(--mth-mochi);pointer-events:none;z-index:2;transform-origin:50% 100%;position:absolute}.mth-mochi img{opacity:0;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.mth-mochi img.is-on{opacity:1}.mth-bubble{right:calc(var(--mth-mochi) + var(--s3) - 4px);top:calc(var(--mth-mochi-rise) * -1 + 4px);z-index:3;max-width:calc(100% - var(--mth-mochi) - var(--s8));padding:6px var(--s3);border-radius:var(--r-md);background:var(--surface);border:2px solid var(--line-strong);box-shadow:0 var(--lip-sm) 0 var(--line-strong);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-md);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;line-height:1.25;position:absolute;overflow:hidden}.mth-bubble:after{content:"";background:var(--surface);border-right:2px solid var(--line-strong);border-top:2px solid var(--line-strong);width:12px;height:12px;margin-top:-6px;position:absolute;top:50%;right:-9px;transform:rotate(45deg)}.mth--motion .mth-bubble{animation:mth-pop .26s var(--ease-bounce);transform-origin:100%}.mth-hud{align-items:center;gap:var(--s2);min-height:40px;padding-right:calc(var(--mth-mochi) + var(--s1));display:flex}.mth-chip{height:36px;padding:0 var(--s3) 0 10px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);box-shadow:0 var(--lip-sm) 0 var(--dc-lip);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;white-space:nowrap;align-items:center;gap:6px;line-height:1;display:inline-flex;position:relative}.mth-chip svg{color:var(--dc-lip);flex:none}.mth-score{min-width:1.2ch;font-size:1.35rem}.mth-chip--streak .num{font-size:1.2rem}.mth-chip--streak svg{color:var(--orange)}.mth-plus{z-index:1;border-radius:var(--r-pill);background:var(--yellow);box-shadow:0 var(--lip-sm) 0 var(--yellow-lip);color:var(--mth-on-yellow);font-size:var(--t-md);opacity:0;pointer-events:none;animation:mth-float .7s var(--ease-out);padding:3px 8px 2px;font-weight:700;line-height:1;position:absolute;top:-12px;right:-12px}.mth--still .mth-plus{display:none}@keyframes mth-float{0%{opacity:0;transform:translateY(8px)scale(.5)}25%{opacity:1;transform:translateY(0)scale(1.1)}70%{opacity:1;transform:translateY(-6px)scale(1)}to{opacity:0;transform:translateY(-14px)scale(1)}}.mth-screen{gap:var(--s3);min-height:0;padding:var(--s3);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 4px 0 var(--line);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden;container-type:size}.mth-problem{--u:3;min-height:0;color:var(--ink);font-weight:700;font-size:clamp(2.25rem, calc(72vw / var(--u)), 6rem);font-size:min(calc(94cqw / var(--u)), 42cqh, 8rem);letter-spacing:0;white-space:nowrap;flex:1;justify-content:center;align-items:center;gap:.12em;margin:0;line-height:1;display:flex}.mth--large .mth-problem{font-size:clamp(2.5rem, calc(76vw / var(--u)), 7rem);font-size:min(calc(97cqw / var(--u)), 48cqh, 8.5rem)}.mth--motion .mth-problem{animation:mth-in .17s var(--ease-out)}@keyframes mth-in{0%{opacity:.2;transform:translateY(10px)scale(.94)}}.mth-op{width:.66em;height:.66em;color:var(--dc);flex:none}.mth-op--sign{color:currentColor;width:.5em;height:.5em;margin-right:.04em}.mth-answer{align-items:stretch;gap:var(--s2);height:64px;height:clamp(var(--mth-answer-min,56px), 26cqh, 88px);flex:none;display:flex}.mth-slot{justify-content:center;align-items:center;gap:var(--s2);min-width:0;padding-inline:var(--s2);border-radius:var(--r-md);background:var(--dc-soft);border:3px solid var(--dc);color:var(--ink);flex:1;display:flex;position:relative}.mth-slot__val{align-items:center;gap:.04em;font-size:clamp(2rem,17cqh,3.6rem);font-weight:700;line-height:1;display:inline-flex}.mth-caret{background:var(--dc);border-radius:2px;width:4px;height:.9em;margin-left:.06em}.mth--motion .mth-caret{animation:1.05s step-end infinite mth-blink}@keyframes mth-blink{50%{opacity:0}}.mth-slot--wrong{background:var(--mth-bad);border-color:var(--mth-bad-lip);color:#fff}.mth-slot__icon{flex:none;width:28px;height:28px}.mth-slot--reveal{background:var(--yellow);border-color:var(--yellow-lip);color:var(--mth-on-yellow)}.mth-slot__tag{padding:2px var(--s2);border-radius:var(--r-pill);background:var(--mth-on-yellow);color:var(--yellow);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-sm);flex:none;line-height:1.3}.mth-skip{min-width:88px;min-height:var(--mth-answer-min,48px);padding:0 var(--s2) 0 var(--s3);border-radius:var(--r-md);background:var(--surface-2);border:2px solid var(--line-strong);box-shadow:0 var(--lip-sm) 0 var(--line-strong);color:var(--ink-2);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-md);touch-action:none;flex:none;justify-content:center;align-items:center;gap:2px;line-height:1.2;transition:transform 70ms ease-out,box-shadow 70ms ease-out;display:inline-flex}.mth-skip:active,.mth-skip[data-pressed="1"]{transform:translateY(var(--lip-sm));box-shadow:0 0 0 var(--line-strong)}.mth-timeup{border-radius:inherit;background:var(--surface);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:min(18cqw,30cqh,5rem);line-height:var(--lh-display);text-align:center;place-items:center;display:grid;position:absolute;inset:0}.mth--motion .mth-timeup span{animation:mth-pop .42s var(--ease-bounce);display:inline-block}@keyframes mth-pop{0%{opacity:0;transform:scale(.5)}}.mth-pad{grid-area:pad;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.mth-key{height:var(--mth-key-h);border-radius:var(--r-md);background:var(--surface);border:2px solid var(--line);box-shadow:0 var(--lip) 0 var(--line-strong);color:var(--ink);touch-action:none;place-items:center;font-size:clamp(1.6rem,4.3dvh,2.25rem);font-weight:600;line-height:1;transition:transform 70ms ease-out,box-shadow 70ms ease-out,background 70ms;display:grid}.mth-key:active,.mth-key[data-pressed="1"]{transform:translateY(var(--lip));box-shadow:0 0 0 var(--line-strong);background:var(--dc-soft)}.mth-key--wide{grid-column:span 2}.mth-key--fn{background:var(--surface-2);color:var(--ink-2)}.mth-key__glyph{width:1.1em;height:1.1em}.mth--large .mth-key{font-size:clamp(1.9rem,5dvh,2.6rem)}.mth--over .mth-pad{opacity:.5;transition:opacity var(--dur-ui)}.mth-keys{text-align:center;font-size:var(--t-sm);color:var(--ink-3);grid-area:keys;margin:0;line-height:1.4;display:none}@media (hover:hover) and (pointer:fine){.mth-keys{display:block}}@media (orientation:portrait) and (height<=700px){.mth{--mth-mochi:76px;--mth-mochi-rise:40px;row-gap:var(--s2)}.mth-pad{gap:var(--s2)}}@media (orientation:landscape){.mth{--mth-key-h:clamp(48px, calc((100dvh - 190px) / 4.3), 78px);column-gap:var(--s6);grid-template:"timer timer""console pad"minmax(0,1fr)"keys keys"/minmax(0,1fr) minmax(250px,360px);max-width:980px}.mth--large{--mth-key-h:clamp(60px, calc((100dvh - 190px) / 4.3), 86px)}.mth-pad{align-self:center}.mth-console{max-height:560px;height:calc(100% - var(--mth-mochi-rise) + var(--s3));align-self:center}}@media (orientation:landscape) and (height>=700px){.mth{--mth-mochi:124px;--mth-mochi-rise:68px}.mth-bubble{font-size:var(--t-lg)}}@media (orientation:landscape) and (height<=500px){.mth{--mth-mochi:70px;--mth-mochi-rise:34px;row-gap:var(--s2);padding-top:var(--s2)}.mth-pad{gap:var(--s2)}.mth-keys{display:none}}