:root{--peach: #f5e6dc;--lavender: #e4dff0;--mint: #c8f0d8;--butter: #f5efc0;--pinkb: #f0d4e0;--sky: #d2e6f2;--coral: #f09070;--coral-deep: #e0704e;--grape: #9b8dc4;--paper: #fffdfa;--ink: #2b2340;--t2: #6d6157;--board-ink: #2b2340;--operand-blue: #2f6fd6;--mult-orange: #e8793e;--carry-pink: #d84d8b;--write-green: #2e9e61;--place-gray: #8b95a5;--add-a: #6d5bd0;--add-b: #9c4fd6;--card-shadow: 0 18px 44px rgba(43, 35, 64, .13);--chip-shadow: 0 10px 26px rgba(43, 35, 64, .14);--font-cn: "ZCOOL KuaiLe", "Outfit", sans-serif;--font-num: "Outfit", "ZCOOL KuaiLe", sans-serif;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-cn);color:var(--ink);background:radial-gradient(720px 420px at 12% -6%,var(--lavender) 0%,transparent 62%),radial-gradient(820px 480px at 96% 12%,var(--pinkb) 0%,transparent 58%),radial-gradient(700px 500px at 50% 108%,var(--mint) 0%,transparent 55%),var(--peach);-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid var(--coral);outline-offset:2px;border-radius:12px}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column}.screen[hidden]{display:none}#screen-input{max-width:720px;width:100%;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(14px,4vw,28px) 24px;gap:16px}.hero{text-align:center}.hero-badge{width:72px;height:72px;margin:0 auto 10px;display:grid;place-items:center;font-size:38px;background:var(--paper);border-radius:24px;box-shadow:var(--card-shadow);transform:rotate(-6deg)}.hero h1{font-size:clamp(30px,6vw,44px);letter-spacing:.04em}.hero-sub{margin-top:6px;font-size:clamp(14px,2.6vw,17px);color:var(--t2)}.setup-card,.extra-card{background:var(--paper);border-radius:26px;box-shadow:var(--card-shadow);padding:clamp(16px,3vw,26px)}.problem-line{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,20px)}.num-box{min-width:clamp(120px,26vw,190px);height:clamp(72px,14vw,96px);padding:0 18px;font-family:var(--font-num);font-weight:800;font-size:clamp(38px,8vw,56px);color:var(--ink);background:#2b23400a;border:4px dashed rgba(43,35,64,.22);border-radius:22px;transition:all .25s var(--ease-spring)}.num-box.active{border:4px solid var(--coral);background:#f090701a;box-shadow:0 0 0 6px #f0907026}.num-box.empty{color:#2b23404d}.times-sign{font-family:var(--font-num);font-weight:800;font-size:clamp(30px,6vw,44px);color:var(--grape)}.input-hint{text-align:center;margin-top:10px;font-size:clamp(13px,2.4vw,15px);color:var(--t2);min-height:1.4em}.input-hint.warn{color:var(--coral-deep)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,12px);max-width:380px;margin:14px auto 0}.keypad button{height:clamp(52px,9vw,64px);font-family:var(--font-num);font-weight:700;font-size:clamp(22px,4.5vw,28px);background:var(--paper);border-radius:18px;box-shadow:0 6px 16px #2b23401f,inset 0 0 0 2px #2b23400f;transition:transform .15s var(--ease-spring),box-shadow .15s}.keypad button:active{transform:scale(.92);box-shadow:0 2px 8px #2b23401f}.keypad .key-side{background:var(--lavender);font-size:clamp(19px,4vw,24px)}.go-btn{display:block;width:min(380px,100%);margin:16px auto 0;padding:14px 0;font-size:clamp(20px,4vw,26px);letter-spacing:.08em;color:#fff;background:var(--coral-deep);border-radius:999px;box-shadow:0 14px 30px #e0704e59;transition:all .25s var(--ease-spring)}.go-btn:not(:disabled):hover{transform:translateY(-2px)}.go-btn:disabled{opacity:.4;cursor:not-allowed}.extra-title{font-size:clamp(15px,2.8vw,18px);margin-bottom:10px}.extra-title+.diff-row,.extra-title+.preset-row{margin-bottom:14px}.diff-row,.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.diff-row button{padding:8px 16px;min-height:44px;font-size:clamp(13px,2.4vw,15px);background:#2b23400d;border-radius:999px;transition:all .2s}.diff-row button.on{background:var(--butter);box-shadow:inset 0 0 0 2px #e0704e80}.preset-row button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;font-family:var(--font-num);font-weight:700;font-size:clamp(15px,3vw,18px);background:var(--sky);border-radius:16px;box-shadow:var(--chip-shadow);transition:transform .2s var(--ease-spring)}.preset-row button:hover{transform:translateY(-2px)}.preset-row button small{font-family:var(--font-cn);font-weight:400;font-size:12px;color:var(--t2)}.preset-row button:nth-child(2){background:var(--mint)}.preset-row button:nth-child(3){background:var(--butter)}.preset-row button:nth-child(4){background:var(--pinkb)}.foot{text-align:center;font-size:12px;color:var(--t2);padding:8px 0 14px}#screen-stage{min-height:100vh;min-height:100dvh}.stage-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px clamp(12px,3vw,24px) 6px}.stage-title{font-family:var(--font-num);font-weight:800;font-size:clamp(20px,4vw,28px)}.stage-stages{display:flex;gap:6px}.stage-chip{font-size:clamp(11px,2vw,13px);padding:4px 10px;border-radius:999px;background:#2b23400f;color:var(--t2);transition:all .3s}.stage-chip.on{background:var(--butter);color:var(--ink);box-shadow:inset 0 0 0 2px #e0704e73}.stage-chip.past{background:var(--mint);color:var(--ink)}.stage-progress{display:flex;align-items:center;gap:8px;margin-left:auto}.pg-bar{width:clamp(70px,14vw,140px);height:10px;border-radius:999px;background:#2b23401a;overflow:hidden}.pg-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--coral);transition:width .35s var(--ease-out)}#pg-text{font-size:clamp(12px,2.2vw,14px);color:var(--t2);white-space:nowrap}.stage-main{flex:1;display:flex;align-items:flex-start;justify-content:center;gap:clamp(14px,2.5vw,30px);padding:6px clamp(12px,3vw,24px) 12px}.board-zone{display:flex;justify-content:center;padding-top:clamp(120px,16vh,156px);max-width:100%;overflow-x:auto}.side-panel{display:flex;flex-direction:column;gap:10px;width:min(380px,40vw);padding-top:clamp(120px,16vh,156px)}@media(max-width:760px),(orientation:portrait){.stage-main{flex-direction:column;align-items:center}.side-panel{width:min(520px,100%);padding-top:0}}.controls{position:sticky;bottom:0;display:flex;justify-content:center;gap:clamp(6px,1.6vw,12px);padding:10px clamp(10px,3vw,20px) calc(10px + env(safe-area-inset-bottom));background:#fffdfae0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -8px 24px #2b234014}.ctl{padding:12px clamp(12px,2.6vw,22px);font-size:clamp(15px,2.8vw,19px);border-radius:999px;transition:all .2s var(--ease-spring);white-space:nowrap}.ctl:active{transform:scale(.94)}.ctl-ghost{background:var(--paper);box-shadow:var(--chip-shadow)}.ctl-primary{color:#fff;background:var(--coral-deep);box-shadow:0 12px 26px #e0704e66;font-size:clamp(17px,3.2vw,22px);padding:12px clamp(20px,4.5vw,36px)}.ctl-primary.is-complete{background:var(--write-green);box-shadow:0 12px 26px #2e9e6159}.ctl:disabled{opacity:.35;cursor:not-allowed}.ctl-ghost[aria-pressed=true]{background:var(--butter);box-shadow:inset 0 0 0 2px #e0704e80,var(--chip-shadow)}.vm-board{position:relative;background:#fff;border-radius:clamp(20px,3vw,32px);box-shadow:var(--card-shadow);padding:clamp(14px,2.6vw,26px) clamp(16px,3vw,32px) clamp(12px,2.2vw,20px);color:var(--board-ink);--sgn: clamp(46px, 9vw, 84px);--cw: clamp(64px, 13vw, 120px);--ch: clamp(56px, 11vw, 100px);--fd: clamp(40px, 8.5vw, 74px);--gp: clamp(4px, .8vw, 10px);--crh: clamp(30px, 5.5vw, 48px)}.vm-board.vm-cols-3{--cw: clamp(56px, 11vw, 100px);--ch: clamp(48px, 9.5vw, 84px);--fd: clamp(34px, 7vw, 62px)}.vm-board.vm-cols-4{--cw: clamp(48px, 9.5vw, 86px);--ch: clamp(42px, 8vw, 72px);--fd: clamp(30px, 6vw, 52px)}.vm-board.vm-cols-5{--cw: clamp(42px, 8vw, 74px);--ch: clamp(38px, 7vw, 62px);--fd: clamp(26px, 5.2vw, 46px)}.vm-board.vm-two{--ch: clamp(32px, 6.6vh, 66px);--fd: clamp(24px, 5vh, 50px);--crh: clamp(22px, 3.8vh, 38px)}.vm-grid{display:grid;gap:var(--gp);align-items:center}.vm-cols{margin-bottom:2px}.vm-colhead{font-size:clamp(11px,2vw,16px);color:#565f6e;text-align:center;background:var(--lavender);border-radius:999px;padding:3px 0;opacity:0;transform:translateY(-10px);transition:all .4s var(--ease-spring)}.vm-colhead.show{opacity:1;transform:none}.vm-colhead.target-col{background:var(--butter);color:var(--board-ink);box-shadow:0 0 0 4px #e0704e2e;animation:targetPulse 1.1s ease-in-out infinite}.vm-row{border-radius:14px;transition:background .35s,box-shadow .35s,opacity .35s}.vm-row.row-current{background:#f5efc09e;box-shadow:0 8px 18px #2b23401a}.vm-row.row-done{background:#c8f0d86b;opacity:.62}.vm-row.row-win{background:var(--mint);box-shadow:0 8px 20px #2b23401f;opacity:1}.vm-cell{height:var(--ch);display:flex;align-items:center;justify-content:center;border-radius:12px;position:relative;transition:background .3s,box-shadow .3s,transform .3s var(--ease-spring)}.vm-cell.focus-top{background:#2f6fd61f;box-shadow:inset 0 0 0 4px #2f6fd680;animation:flashTop .7s ease-in-out 2}.vm-cell.focus-mult{background:#e8793e24;box-shadow:inset 0 0 0 4px #e8793e80;animation:flashMult .7s ease-in-out 2}.vm-cell.focus-write{background:#2e9e6126;box-shadow:inset 0 0 0 4px #2e9e618c;animation:writePulse .85s ease-in-out infinite}.vm-cell.focus-add-a{background:#6d5bd021;box-shadow:inset 0 0 0 4px #6d5bd080;animation:flashAddA .7s ease-in-out 2}.vm-cell.focus-add-b{background:#9c4fd621;box-shadow:inset 0 0 0 4px #9c4fd680;animation:flashAddB .7s ease-in-out 2}.vm-sign-slot{height:var(--ch);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.vm-sign{font-family:var(--font-num);font-weight:800;font-size:calc(var(--fd) * .66);line-height:1;color:var(--grape);transition:all .3s var(--ease-spring)}.vm-sign.op-active{color:var(--mult-orange);transform:scale(1.15);filter:drop-shadow(0 6px 10px rgba(232,121,62,.28))}.vm-sign.plus-active{color:var(--add-a);transform:scale(1.18);filter:drop-shadow(0 6px 10px rgba(109,91,208,.3))}.vm-sign.hid,.vm-line.hid{opacity:0;transition:opacity .4s ease}.vm-sign.hid.show,.vm-line.hid.show{opacity:1}.vm-line{height:clamp(4px,.8vw,7px);border-radius:4px;background:var(--board-ink);margin:4px 0}.row-tag{font-size:clamp(10px,1.8vw,14px);line-height:1.15;padding:4px 6px;border-radius:10px;background:var(--lavender);color:var(--board-ink);text-align:center;white-space:nowrap}.dg{font-family:var(--font-num);font-weight:800;font-size:var(--fd);line-height:1;color:var(--board-ink);transition:all .3s var(--ease-spring)}.dg.hid{opacity:0;transform:scale(.2)}.dg.hid.show{opacity:1;transform:scale(1);animation:popKey .5s var(--ease-spring)}.dg.hid.show.role-write{animation:dgDrop .6s var(--ease-out)}.vm-board.has-focus .dg{opacity:.22;filter:saturate(.3)}.dg.rest{position:relative}.vm-board .dg.rest{opacity:.16!important;filter:grayscale(1)!important;transform:scale(.92)}.dg.rest:after{content:"💤";position:absolute;top:calc(var(--fd) * -.18);right:calc(var(--fd) * -.3);font-size:calc(var(--fd) * .34);opacity:.85;filter:none}.vm-board.has-focus .dg.hid:not(.show){opacity:0}.vm-board.has-focus .dg.ghostz:not(.show){opacity:0}.vm-board.has-focus .dg.role-top,.vm-board.has-focus .dg.role-mult,.vm-board.has-focus .dg.role-write,.vm-board.has-focus .dg.role-add-a,.vm-board.has-focus .dg.role-add-b{opacity:1;filter:none;transform:scale(1.14)}.dg.role-top{color:var(--operand-blue)}.dg.role-mult{color:var(--mult-orange)}.dg.role-write{color:var(--write-green)}.dg.role-add-a{color:var(--add-a)}.dg.role-add-b{color:var(--add-b)}.dg.res{color:var(--write-green)}.dg.ghostz{opacity:0}.dg.ghostz.show{opacity:.58;color:var(--place-gray);border:3px dashed var(--place-gray);border-radius:12px;padding:0 calc(var(--fd) * .12);animation:popKey .5s var(--ease-spring)}.dg.ghostz.role-write,.dg.ghostz.role-add-a,.dg.ghostz.role-add-b{color:var(--place-gray)}.vm-carryrow{min-height:var(--crh);margin-bottom:1px;align-items:end}.cr-label{font-size:clamp(9px,1.6vw,13px);color:var(--carry-pink);opacity:0;transition:opacity .3s;white-space:nowrap;text-align:center;align-self:center}.cr-label.show{opacity:1}.cr-wrap{display:flex;align-items:flex-end;justify-content:center}.cr{font-family:var(--font-num);font-weight:800;font-size:calc(var(--fd) * .44);color:var(--carry-pink);background:#f0d4e0d9;border-radius:10px;padding:1px calc(var(--fd) * .18);width:fit-content;opacity:0;transform:scale(.35);transition:all .65s var(--ease-spring)}.cr.show{opacity:1;transform:translate(0) scale(1)}.vm-board.has-focus .cr.show:not(.role-carry){opacity:.14;filter:grayscale(1)}.vm-board.has-focus .cr-label.show{opacity:.25}.cr.role-carry{color:#fff;background:var(--carry-pink);box-shadow:0 0 0 5px #d84d8b26;animation:carryPulse 1s ease-in-out infinite}.cr.used{opacity:.26;transform:scale(.82);text-decoration:line-through}.add-party{box-shadow:0 0 0 5px #6d5bd06b!important;animation:targetPulse 1s ease-in-out infinite!important;opacity:1!important;filter:none!important}.vm-prod{position:absolute;top:-10px;left:50%;width:clamp(128px,24vw,170px);background:#fff;border-radius:20px;box-shadow:var(--chip-shadow);padding:10px 12px 12px;text-align:center;z-index:6;opacity:0;transform:translate(-50%,-100%) scale(.4);transition:all .4s var(--ease-spring);pointer-events:none}.vm-prod.show{opacity:1;transform:translate(-50%,-100%) scale(1)}.vm-prod:before{content:"";position:absolute;left:50%;bottom:-11px;transform:translate(-50%);border:12px solid transparent;border-bottom:none;border-top-color:#fff}.vm-prod-label{font-size:clamp(13px,2.4vw,17px);color:var(--t2);font-family:var(--font-num);font-weight:700}.vm-prod-digits{display:flex;justify-content:center;gap:10px;margin-top:4px}.pd{display:flex;flex-direction:column;align-items:center;transition:all .45s var(--ease-spring)}.pd b{font-family:var(--font-num);font-weight:800;font-size:clamp(28px,5.5vw,42px);line-height:1}.pd small{font-size:clamp(10px,1.8vw,13px);color:var(--t2);margin-top:2px}.pd-t b{color:var(--carry-pink)}.pd-o b{color:var(--write-green)}.pd-t.gone{opacity:.14;transform:translateY(-20px) scale(.8)}.pd-o.gone{opacity:.14;transform:translateY(20px) scale(.8)}.vm-action{min-height:62px;background:var(--paper);border-radius:20px;padding:10px 14px;box-shadow:var(--chip-shadow);display:flex;align-items:center;flex-wrap:wrap;gap:10px}.vm-opbadge{flex:none;border-radius:999px;padding:7px 13px;font-size:clamp(14px,2.6vw,17px);color:#fff;background:var(--ink);transition:background .3s}.vm-opbadge.mode-multiply{background:var(--mult-orange)}.vm-opbadge.mode-add{background:var(--add-a)}.vm-opbadge.mode-carry{background:var(--carry-pink)}.vm-opbadge.mode-write{background:var(--write-green)}.vm-opbadge.mode-place{background:var(--place-gray)}.vm-action-eq{font-family:var(--font-num);font-weight:800;font-size:clamp(18px,3.6vw,26px);line-height:1.2;color:var(--ink);flex:1;min-width:120px}.vm-action.pop{animation:popKey .4s var(--ease-spring)}.vm-temp{font-size:clamp(12px,2.2vw,15px);border-radius:999px;padding:6px 11px;background:var(--butter);color:var(--ink);opacity:0;transform:scale(.4);transition:all .35s var(--ease-spring);white-space:nowrap}.vm-temp.show{opacity:1;transform:scale(1)}.vm-temp.role-temp{background:#f1c84b;box-shadow:0 0 0 5px #f1c84b33}.vm-koujue{background:var(--butter);border-radius:16px;padding:10px 15px;font-size:clamp(15px,2.8vw,19px);line-height:1.45;color:#2b2340;box-shadow:0 8px 18px #2b23401a;min-height:58px}.vm-koujue b{color:#b0472a;font-weight:400}.vm-koujue.k-go{background:var(--mint)}.vm-koujue.k-win{background:var(--pinkb)}.vm-koujue.pop{animation:popKey .38s var(--ease-spring)}.vm-legend{display:flex;gap:6px;flex-wrap:wrap}.vm-legend span{font-size:clamp(11px,2vw,13px);padding:5px 10px;border-radius:999px;background:var(--paper);color:var(--t2)}.vm-legend .lg-top{box-shadow:inset 0 0 0 2px #2f6fd673}.vm-legend .lg-mult{box-shadow:inset 0 0 0 2px #e8793e73}.vm-legend .lg-carry{box-shadow:inset 0 0 0 2px #d84d8b73}.vm-legend .lg-write{box-shadow:inset 0 0 0 2px #2e9e6173}.vm-legend .lg-add-a{box-shadow:inset 0 0 0 2px #6d5bd080}.vm-legend .lg-add-b{box-shadow:inset 0 0 0 2px #9c4fd680}@keyframes targetPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes writePulse{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}@keyframes carryPulse{0%,to{transform:scale(1)}50%{transform:scale(1.14)}}@keyframes flashTop{0%,to{background:#2f6fd61f}50%{background:#2f6fd661}}@keyframes flashMult{0%,to{background:#e8793e24}50%{background:#e8793e66}}@keyframes flashAddA{0%,to{background:#6d5bd021}50%{background:#6d5bd061}}@keyframes flashAddB{0%,to{background:#9c4fd621}50%{background:#9c4fd661}}@keyframes dgDrop{0%{opacity:0;transform:translateY(-64px) scale(.5)}62%{opacity:1;transform:translateY(9px) scale(1.08)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes popKey{0%{transform:scale(.55)}60%{transform:scale(1.08)}to{transform:scale(1)}}.no-anim,.no-anim *{animation:none!important;transition:none!important}@media(prefers-color-scheme:dark){:root{--paper: #38304f;--ink: #f3eefb;--t2: #b9aecf;--card-shadow: 0 18px 44px rgba(0, 0, 0, .4);--chip-shadow: 0 10px 26px rgba(0, 0, 0, .45)}body{background:radial-gradient(720px 420px at 12% -6%,#3d3560 0%,transparent 62%),radial-gradient(820px 480px at 96% 12%,#4a3350 0%,transparent 58%),radial-gradient(700px 500px at 50% 108%,#2f4a41 0%,transparent 55%),#241d38}.num-box{background:#ffffff0f;border-color:#f3eefb4d;color:var(--ink)}.num-box.empty{color:#f3eefb59}.num-box.active{border-color:var(--coral);background:#f0907029}.diff-row button{background:#ffffff14}.diff-row button.on{background:#5c5530}.preset-row button{color:#2b2340}.preset-row button small{color:#6d6157}.keypad button{box-shadow:0 6px 16px #0006,inset 0 0 0 2px #ffffff14}.controls{background:#241d38e0;box-shadow:0 -8px 24px #0006}.ctl-ghost[aria-pressed=true]{background:#5c5530;color:#f3eefb}.diff-row button.on,.stage-chip.on{color:#f3eefb}.stage-chip{background:#ffffff14}.stage-chip.on{background:#5c5530}.stage-chip.past{background:#2f5443;color:#f3eefb}.pg-bar{background:#ffffff24}.vm-board,.vm-prod{background:#fff}.vm-prod-label,.pd small{color:#6d6157}.vm-koujue{color:#2b2340}.vm-legend span{background:#ffffff1a;color:var(--t2)}.vm-action-eq{color:var(--ink)}.vm-temp{color:#2b2340}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}.vm-prod,.vm-prod.show{transform:translate(-50%,-100%)}}