:root{--canvas: #f7f9fa;--surface: #eef3f5;--surface-2: #e4ecef;--block: #91c7df;--block-strong: #4e91b2;--outline: #78909c;--text: #17242b;--text-muted: #52656f;--focus: #1f6f95;--danger: #9a4a3f;--radius: 14px;--radius-sm: 9px;--cell: clamp(26px, min(6.4vw, 5.6vh), 56px);--tray-gap: .3rem;--shadow: 0 1px 2px rgba(23, 36, 43, .08), 0 6px 18px rgba(23, 36, 43, .06);--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--text);background:linear-gradient(160deg,#f7f9fa,#eef3f6 55%,#e6eef2);background-attachment:fixed;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;line-height:1.4}#app{display:block;min-height:100vh;min-height:100dvh}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:50;background:var(--text);color:var(--canvas);padding:.55rem .9rem;border-radius:var(--radius-sm);text-decoration:none;transition:top .16s ease}.skip-link:focus{top:.5rem}.btn{font:inherit;font-weight:600;min-height:48px;padding:.6rem 1.15rem;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .08s ease,background .16s ease,box-shadow .16s ease,border-color .16s ease,color .16s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}.btn--primary{background:var(--text);color:var(--canvas);box-shadow:var(--shadow)}.btn--primary:not(:disabled):hover{background:#24363f}.btn--ghost{background:transparent;color:var(--text);border-color:var(--outline)}.btn--ghost:not(:disabled):hover{background:var(--surface);border-color:var(--text-muted)}:where(button,a,input,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}.screen{max-width:min(1180px,100%);margin:0 auto;padding:clamp(1rem,3vw,2.2rem) clamp(.9rem,4vw,2.6rem) 3rem}.level-head{text-align:center;margin-bottom:clamp(1.2rem,4vw,2rem)}.level-head__title{font-size:clamp(1.7rem,6vw,2.6rem);margin:.4rem 0 .3rem;letter-spacing:-.01em}.level-head__sub{color:var(--text-muted);margin:0;font-size:1.05rem}.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(.7rem,2vw,1.1rem)}.level-card{position:relative;display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:1.1rem 1.2rem 1.2rem;min-height:116px;background:var(--surface);border:2px solid transparent;border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);font:inherit;color:var(--text);transition:transform .12s ease,border-color .16s ease,background .16s ease}.level-card:hover{transform:translateY(-2px);background:#fff;border-color:var(--block)}.level-card--current{border-color:var(--block-strong)}.level-card__index{position:absolute;top:.7rem;right:.9rem;font-size:.85rem;color:var(--text-muted);font-weight:600}.level-card__name{font-size:1.5rem;font-weight:700}.level-card__range{font-size:1.05rem;color:var(--block-strong);font-weight:600}.level-card__desc{color:var(--text-muted);font-size:.95rem;margin-top:.35rem}.level-card__badge{margin-top:.6rem;align-self:flex-start;font-size:.78rem;font-weight:600;color:var(--block-strong);background:#dcecf3;border-radius:999px;padding:.15rem .6rem}.intro{width:min(360px,calc(100vw - 2rem));padding:1.4rem 1.6rem 1.5rem;border:1px solid var(--surface-2);border-radius:var(--radius);background:var(--canvas);color:var(--text);box-shadow:0 12px 44px #17242b3d;text-align:center;animation:menu-pop .18s ease}.intro::backdrop{background:#17242b4d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.intro__title{margin:0 0 1.1rem;font-size:1.25rem;font-weight:700}.intro__text{margin:1.1rem 0 1.3rem;color:var(--text-muted)}.intro .btn{min-width:8rem}.intro-demo{--cell: 24px;--g: 4px;--pad: 6px;--between: 10px;--drag: calc(5 * var(--cell) + 4 * var(--g) + 2 * var(--pad) + var(--between) + 3 * (var(--cell) + var(--g)));display:flex;justify-content:center;gap:1.1rem}.intro-demo__col{position:relative;display:flex;flex-direction:column;gap:var(--between)}.intro-demo__tray{padding:var(--pad);border-radius:var(--radius-sm)}.intro-demo__tray--bottom{background:var(--surface);box-shadow:inset 0 0 0 1px var(--surface-2)}.intro-demo__frame{display:grid;grid-template-columns:repeat(2,var(--cell));grid-template-rows:repeat(5,var(--cell));gap:var(--g)}.intro-demo .cell{border-radius:5px}.intro-demo__moving{position:absolute;top:var(--pad);left:var(--pad);display:flex;gap:var(--g);animation:intro-blocks 3.2s ease-in-out .4s infinite}.intro-demo__finger{position:absolute;top:calc(var(--pad) + var(--cell) / 2 - 12px);left:calc(var(--pad) + var(--cell) + var(--g) / 2 - 19px);opacity:0;transform-origin:19px 12px;animation:intro-finger 3.2s ease-in-out .4s infinite}.intro-demo__finger svg{display:block;fill:var(--text);stroke:var(--canvas);stroke-width:.9;paint-order:stroke}.intro-demo__arrow{display:none;position:absolute;top:calc(var(--pad) + var(--cell));left:calc(var(--pad) + var(--cell) + var(--g) / 2 - 1px);height:calc(var(--drag) / 2 - var(--cell));border-left:2px dashed var(--block-strong)}.intro--still .intro-demo__moving,.intro--still .intro-demo__finger{animation:none;opacity:1;transform:translateY(calc(var(--drag) / 2)) scale(.9)}.intro--still .intro-demo__moving{transform:translateY(calc(var(--drag) / 2))}.intro--still .intro-demo__arrow{display:block}@media (prefers-reduced-motion: reduce){.intro{animation:none}}@keyframes intro-blocks{0%,20%{transform:translateY(0);opacity:1}26%{transform:translateY(-3px)}62%,86%{transform:translateY(var(--drag));opacity:1}92%{transform:translateY(var(--drag));opacity:0}93%{transform:translateY(0);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes intro-finger{0%{transform:translateY(10px) scale(1);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}20%{transform:translateY(0) scale(.88)}26%{transform:translateY(-3px) scale(.88)}62%{transform:translateY(var(--drag)) scale(.88);opacity:1}70%{transform:translateY(var(--drag)) scale(1);opacity:1}80%,to{transform:translateY(calc(var(--drag) + 8px)) scale(1);opacity:0}}.menu-toggle{position:fixed;top:clamp(.6rem,1.6vw,1.1rem);right:clamp(.6rem,1.6vw,1.1rem);z-index:70;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--surface-2);background:#ffffffd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:13px;box-shadow:var(--shadow);cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .08s ease}.menu-toggle:hover{background:#fff;box-shadow:0 2px 6px #17242b1f,0 10px 24px #17242b1a}.menu-toggle:active{transform:translateY(1px)}.menu-toggle__bars{position:relative;width:20px;height:14px}.menu-toggle__bar{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--text);transition:transform .22s ease,opacity .16s ease}.menu-toggle__bar:nth-child(1){top:0}.menu-toggle__bar:nth-child(2){top:6px}.menu-toggle__bar:nth-child(3){top:12px}.menu-toggle--open .menu-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle--open .menu-toggle__bar:nth-child(2){opacity:0}.menu-toggle--open .menu-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-scrim{position:fixed;inset:0;z-index:60;background:#17242b29;animation:menu-fade .16s ease}.menu-panel{position:fixed;top:clamp(3.4rem,6vw,4rem);right:clamp(.6rem,1.6vw,1.1rem);z-index:71;width:min(340px,calc(100vw - 1.2rem));background:var(--canvas);border:1px solid var(--surface-2);border-radius:var(--radius);box-shadow:0 12px 44px #17242b3d;padding:.2rem 1.1rem 1rem;transform-origin:top right;animation:menu-pop .18s ease}.menu-panel__title{font-size:1.05rem;font-weight:700;margin:.9rem .2rem .1rem}.menu-panel__body{display:grid;gap:.1rem}.menu-panel__body .switch:first-child{border-top:none}@keyframes menu-fade{0%{opacity:0}to{opacity:1}}@keyframes menu-pop{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .2rem;border-top:1px solid var(--surface-2)}.switch__label{display:flex;flex-direction:column;cursor:pointer}.switch__name{font-weight:600}.switch__desc{font-size:.85rem;color:var(--text-muted)}.switch__control{position:relative;flex:none}.switch__input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch__track{display:block;width:52px;height:30px;border-radius:999px;background:var(--outline);transition:background .16s ease;position:relative}.switch__track:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .16s ease}.switch__input:checked+.switch__track{background:var(--block-strong)}.switch__input:checked+.switch__track:after{transform:translate(22px)}.switch__input:focus-visible+.switch__track{outline:3px solid var(--focus);outline-offset:2px}.screen--problem{display:flex;flex-direction:column;justify-content:center;gap:clamp(.8rem,2.5vw,1.6rem);min-height:100dvh}@media (min-width: 621px){.screen--problem{padding-block:1rem;gap:1rem}.screen--problem .board-scroll{flex-shrink:0}.screen--problem .board{--cell-h: min(5.6vh, calc((100dvh - 28rem)*.1) )}.screen--problem .board--numbered{--cell-h: min(5.6vh, calc((100dvh - 32rem)*.1) )}.screen--problem[data-phase=complete]{gap:clamp(.6rem,1.5vh,.9rem);padding-block:clamp(.75rem,2vh,1.25rem)}.screen--problem[data-phase=complete] .board{--cell-h: min(5.6vh, calc((100dvh - 32rem)*.1) )}.screen--problem[data-phase=complete] .board--numbered{--cell-h: min(5.6vh, calc((100dvh - 36rem)*.1) )}.screen--problem[data-phase=complete] .prompt{display:none}.screen--problem[data-phase=complete] .result__equation{font-size:clamp(2rem,6vw,3.4rem)}}@media (min-width: 621px) and (max-height: 700px){.screen--problem{padding-block:.5rem;gap:.6rem}.screen--problem[data-phase=complete] .stack--top .stack__num{display:none}}@media (min-width: 621px) and (max-height: 650px){.screen--problem[data-phase=complete]{gap:.4rem;padding-block:.5rem}.screen--problem[data-phase=complete] .board-scroll{padding-block:0}.screen--problem[data-phase=complete] .board{gap:.35rem}.screen--problem[data-phase=complete] .col-sum{font-size:1.7rem}.screen--problem[data-phase=complete] .result{padding:0}.screen--problem[data-phase=complete] .result__equation{font-size:clamp(1.7rem,5vw,2.4rem)}}.problem-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}@media (min-width: 621px) and (max-width: 1240px){.problem-head{padding-right:3.5rem}}.problem-head__title{font-size:clamp(1rem,3.2vw,1.35rem);margin:0;text-align:center;color:var(--text-muted);font-weight:600}.problem-head__eq{justify-self:end;font-size:clamp(1rem,3.4vw,1.4rem);font-weight:700;letter-spacing:.01em}@media (max-width: 620px){.screen--problem{padding-top:calc(.6rem - 1px);padding-bottom:1rem}.problem-head{grid-template-columns:1fr auto;row-gap:.15rem;margin-bottom:auto}.screen--problem>:last-child{margin-bottom:auto}.problem-head>.btn{grid-area:1 / 1;justify-self:start}.problem-head__title{grid-area:2 / 1 / 3 / 3}.problem-head__eq{grid-area:3 / 1 / 4 / 3;justify-self:center}.screen--problem .board{--cell-h: min(5.6vh, calc((100dvh - 27.5rem - 6vw)*.1) )}.prompt{min-height:3em}.screen--problem[data-phase=complete] .board{--cell-h: min(5.6vh, calc((100dvh - 13rem - 82vw)*.1) )}.screen--problem[data-phase=complete] .prompt{display:none}}@media (max-width: 620px) and (max-height: 700px){.screen--problem[data-phase=complete] .problem-head__title,.screen--problem[data-phase=complete] .problem-head__eq{display:none}.screen--problem[data-phase=complete] .board{--cell-h: min(5.6vh, calc((100dvh - 10rem - 82vw)*.1) )}}.prompt{margin:0;text-align:center;color:var(--text-muted);font-size:1.02rem;min-height:1.5em}.board-scroll{overflow-x:auto;overflow-y:hidden;padding:.4rem .2rem .8rem;-webkit-overflow-scrolling:touch}.board{display:grid;justify-content:center;align-items:center;gap:clamp(.35rem,1.6vw,.9rem);width:max-content;margin:0 auto;min-width:100%;touch-action:pan-y;--cols: 4;--cell-h: 5.6vh;--cell: clamp(16px, min(var(--cell-h), calc((100vw - 11.5rem) / (var(--cols) * 2))), 56px);transition:--cell .4s ease}@property --cell{syntax: "<length>"; inherits: true; initial-value: 40px;}.screen--problem[data-phase=combining] .board,.screen--problem[data-phase=complete] .board{touch-action:none}.grid-cell{display:flex;align-items:center;justify-content:center}.corner{display:block;width:1px;height:1px}.col-label{font-size:.82rem;color:var(--text-muted);font-weight:600;padding:.1rem .35rem;border-radius:6px}.col-label--flash{animation:label-flash 1.1s ease}@keyframes label-flash{0%,to{background:transparent;color:var(--text-muted)}25%,60%{background:#dcecf3;color:var(--block-strong)}}.operator{font-size:clamp(1.6rem,6vw,2.6rem);font-weight:400;color:var(--text-muted)}.rule{height:3px;background:var(--outline);border-radius:2px;margin-top:.2rem;align-self:stretch}.col-sum{font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800;line-height:1}.col-sum--pending{visibility:hidden}.col-sum--new{animation:fade-up .4s ease}.addend-cell--top{align-self:end}.addend-cell--bottom{align-self:start}.stack{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stack__num{font-size:clamp(1rem,3.4vw,1.5rem);font-weight:700;line-height:1;min-height:1em;color:var(--block-strong);font-variant-numeric:tabular-nums}.tray{font:inherit;border:2px solid transparent;background:transparent;padding:.35rem;border-radius:var(--radius);cursor:pointer;display:inline-block}.tray--bottom{background:var(--surface);box-shadow:inset 0 0 0 1px var(--surface-2)}.tray--top:not(.tray--empty):hover{background:#91c7df2e}.tray--top:not(.tray--empty),.stack--top .hover-blocks{cursor:grab;touch-action:none}.tray--empty{cursor:default}.tray--selected{border-color:var(--block-strong);background:#4e91b21f}.tray--target{border-color:var(--block-strong);box-shadow:0 0 0 3px #4e91b240}.tray--hover{background:#4e91b233;border-color:var(--focus)}.tray--lifted{opacity:.35}.ten-frame{display:grid;grid-template-columns:repeat(2,var(--cell));grid-template-rows:repeat(5,var(--cell));gap:var(--tray-gap)}.cell{width:var(--cell);height:var(--cell);border-radius:7px;border:2px solid transparent}.cell--empty{border:2px dashed var(--outline);background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(120,144,156,.09) 5px,rgba(120,144,156,.09) 7px)}.cell--filled{background:var(--block);border-color:var(--block-strong);box-shadow:inset 0 -3px #4e91b259,inset 0 1px #ffffff80}.tray--selected .cell--filled{background:var(--block-strong);border-color:#356b86}.hover-blocks{display:grid;grid-template-columns:repeat(2,var(--cell));gap:var(--tray-gap);margin-bottom:.3rem;animation:hover-bob 1.7s ease-in-out infinite}.cell--hover{box-shadow:0 5px 12px #17242b33,inset 0 -3px #4e91b259,inset 0 1px #ffffff80}@keyframes hover-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.cell--pour-in{animation:pour-in .34s cubic-bezier(.2,.85,.3,1) both}@keyframes pour-in{0%{transform:translateY(-160%);opacity:0}72%{transform:translateY(6%);opacity:1}to{transform:none}}.cell--settling{opacity:0}.cell--land{animation:cell-land .14s ease-out both}@keyframes cell-land{0%{opacity:0}to{opacity:1}}.tray-ghost{position:fixed;z-index:60;pointer-events:none;opacity:.94}.tray-ghost__col{will-change:transform}.tray-ghost__col .cell--filled{box-shadow:0 12px 26px #17242b47,inset 0 -3px #4e91b259,inset 0 1px #ffffff80}.fly-block{position:fixed;z-index:65;pointer-events:none;border-radius:7px;background:var(--block);border:2px solid var(--block-strong);box-shadow:0 6px 16px #17242b47,inset 0 -3px #4e91b259;will-change:transform}.fly-block--lifted{box-shadow:0 18px 30px #17242b52,inset 0 -3px #4e91b259}.merge-cell{position:fixed;z-index:64;margin:0;pointer-events:none;box-sizing:border-box;transform-origin:center;will-change:transform}.leftover-cell{z-index:63}.result{text-align:center;padding:.4rem 0;animation:fade-up .4s ease}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.result__praise{margin:0;color:var(--text-muted);font-size:1rem}.result__equation{margin:.2rem 0 0;font-size:clamp(2rem,9vw,3.4rem);font-weight:800;letter-spacing:.005em}.controls{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;padding-top:.2rem}@media (prefers-contrast: more){:root{--block: #6fb2cf;--outline: #445661;--text-muted: #33454e}.cell--filled{border-width:3px}.btn--ghost{border-color:var(--text)}}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}