:root{--paper:#fbfcfe;--grid:#d2ddee;--margin:#efa3ae;--pencil:#3b404c;--ink:#1e4ed0;--carry:#d2384a;--sel:#1e4ed0;--sel-bg:#1e4ed01a;--band:#1e4ed00d;--chrome:#fff;--chrome-edge:#cbd5e6;--muted:#66728c;--glow:transparent;--fur:#d6965a4d;--flame:#f59e0b;--font-ui:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hand:"Patrick Hand", "Comic Neue", "Chalkboard SE", "Comic Sans MS", cursive;--font-space:"Orbitron", "Eurostile", "Avenir Next", system-ui, sans-serif;--cell:40px}@media (width<=600px){:root{--cell:34px}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#070c1e;--grid:#18265a;--margin:#5b2c74;--pencil:#dce6ff;--ink:#45e3ff;--carry:#ff63d4;--sel:#45e3ff;--sel-bg:#45e3ff21;--band:#45e3ff0d;--chrome:#0e1636;--chrome-edge:#24366f;--muted:#8b9bcb;--glow:#45e3ff73;--fur:#ffb06e47;--flame:#ffb23e;--font-hand:var(--font-space);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#070c1e;--grid:#18265a;--margin:#5b2c74;--pencil:#dce6ff;--ink:#45e3ff;--carry:#ff63d4;--sel:#45e3ff;--sel-bg:#45e3ff21;--band:#45e3ff0d;--chrome:#0e1636;--chrome-edge:#24366f;--muted:#8b9bcb;--glow:#45e3ff73;--fur:#ffb06e47;--flame:#ffb23e;--font-hand:var(--font-space);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cell>span{transform:none!important}:root:not([data-theme=light]) .rule path{display:none}:root:not([data-theme=light]) .rule{filter:drop-shadow(0 0 4px var(--glow));background:linear-gradient(currentColor,currentColor) 50%/calc(100% - 4px) 2.4px no-repeat}}:root[data-theme=dark] .cell>span{transform:none!important}:root[data-theme=dark] .rule path{display:none}:root[data-theme=dark] .rule{filter:drop-shadow(0 0 4px var(--glow));background:linear-gradient(currentColor,currentColor) 50%/calc(100% - 4px) 2.4px no-repeat}html,body{height:100%}body{background:var(--paper);color:var(--pencil);font-family:var(--font-ui);-webkit-tap-highlight-color:transparent;margin:0;font-size:16px}*{box-sizing:border-box}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--sel);outline-offset:2px}.app{flex-direction:column;height:100%;display:flex}.bar{padding-block:10px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));background:var(--chrome);border-bottom:1px solid var(--chrome-edge);grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;display:grid}.brand{color:var(--pencil);align-items:center;gap:8px;font-size:1.2rem;font-weight:700;display:flex}.brand-mark{background:var(--ink);width:26px;height:26px;color:var(--paper);font-family:var(--font-hand);box-shadow:0 0 14px var(--glow);border-radius:7px;place-items:center;font-size:1.3rem;display:grid}.toolbar.tools{justify-self:start}.about-btn{z-index:7;border:1px solid var(--chrome-edge);background:var(--chrome);width:36px;height:36px;color:var(--muted);box-shadow:0 2px 6px #00000014, 0 0 10px var(--glow);border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;bottom:12px;right:14px}.about-btn:hover{color:var(--pencil);background:var(--band)}.about-btn svg{width:18px;height:18px}.toolbar.actions{justify-self:end}.toolbar{background:var(--paper);border:1px solid var(--chrome-edge);border-radius:12px;align-items:center;gap:2px;padding:3px;display:flex}.tb{min-width:36px;height:36px;color:var(--muted);white-space:nowrap;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 9px;font-size:.92rem;font-weight:600;display:flex}.tb svg{flex:none;width:18px;height:18px}.tb:hover,.seg button:not([aria-pressed=true]):hover{background:var(--band);color:var(--pencil)}.tb-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tb.warn{color:var(--carry);background:var(--sel-bg)}.tb.warn .tb-label{clip:auto;width:auto;height:auto;position:static;overflow:visible}.seg{gap:2px;display:flex}.seg button{white-space:nowrap;height:36px;color:var(--muted);background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;padding:0 12px;font-size:.92rem;font-weight:600;display:flex}.seg button[aria-pressed=true]{background:var(--chrome);color:var(--ink);box-shadow:0 1px 3px #0000001f, 0 0 10px var(--glow)}.seg svg{width:18px;height:18px}body:not([data-tool=pen]):not([data-tool=erase]) .seg [data-mode=erase]{display:none}.seg [data-mode=erase]{padding:0 9px}.stage{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.scroll{overscroll-behavior:contain;flex:1;min-height:0;position:relative;overflow:auto}.paper{background-color:var(--paper);background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:var(--cell) var(--cell);position:relative}.margin-line{top:0;bottom:0;left:calc(var(--cell) * 2 - 2px);background:var(--margin);pointer-events:none;width:2px;position:absolute}.paper.pen{cursor:crosshair}.paper.erase{cursor:cell}.sum{grid-auto-rows:var(--cell);display:grid;position:absolute}.cell{width:var(--cell);height:var(--cell);font-family:var(--font-hand);font-size:calc(var(--cell) * .8);background:0 0;border:0;place-items:center;margin:0;padding:0;line-height:1;display:grid;position:relative}.cell>span{text-shadow:0 0 8px var(--glow);display:inline-block}.cell.num{color:var(--pencil)}.cell.ans{color:var(--ink)}.cell.carry{color:var(--carry);font-size:calc(var(--cell) * .5);align-items:end;padding-bottom:2px}.cell.sign{color:var(--pencil);cursor:default}.cell.blank{cursor:default}.cell.band{background:var(--band)}.cell.sel{background:var(--sel-bg);box-shadow:inset 0 0 0 2.5px var(--sel), 0 0 12px var(--glow);z-index:1}.cell.crossed>span{opacity:.55}.cell.crossed:after{content:"";background:var(--carry);border-radius:2px;height:2.5px;position:absolute;top:50%;left:18%;right:18%;transform:rotate(-38deg)}.rule{pointer-events:none;height:8px;color:var(--pencil);position:absolute;left:0;overflow:visible}.sum-tools{flex-direction:column;gap:6px;display:flex;position:absolute;top:0}.tool{border:1px solid var(--chrome-edge);background:var(--chrome);touch-action:none;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;box-shadow:0 2px 6px #0000001f}.tool svg{width:18px;height:18px}.tool.grab{cursor:grab}canvas#ink{pointer-events:none;z-index:5;position:absolute;top:0;left:0}.paper.pen canvas#ink,.paper.erase canvas#ink{pointer-events:auto;touch-action:none}.sum.draft .cell{cursor:text}.cell.caret:before{content:"";background:var(--ink);width:2.5px;box-shadow:0 0 8px var(--glow);border-radius:2px;animation:1s step-end infinite blink;position:absolute;top:18%;bottom:18%;left:22%}.cell.caret{background:var(--sel-bg)}@keyframes blink{50%{opacity:0}}.cell.caret.under:before{width:auto;height:2.5px;inset:auto 20% 10%}.line-hit{cursor:ns-resize;touch-action:none;z-index:2;height:16px;position:absolute;left:0}.line-hit:after{content:"";background:var(--paper);border:2px solid var(--pencil);width:11px;height:11px;box-shadow:0 0 8px var(--glow);border-radius:50%;position:absolute;top:50%;right:-7px;transform:translateY(-50%)}.line-hit:hover:after,.line-hit.pulling:after{background:var(--ink);border-color:var(--ink)}.line-hit.pulling{background:linear-gradient(to bottom, transparent 7px, var(--sel-bg) 7px);height:var(--pull,16px)}.cell.slot:after{content:"";border:2px dashed var(--chrome-edge);pointer-events:none;border-radius:6px;position:absolute;inset:18%}.cell.slot:hover:after{border-color:var(--muted)}button.cell.signbtn{cursor:pointer;border-radius:6px}button.cell.signbtn:hover{background:var(--band)}.dock{background:var(--chrome);border-top:1px solid var(--chrome-edge);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}.dock-inner{flex-direction:column;gap:8px;max-width:760px;margin:0 auto;display:flex}.hint{text-align:center;color:var(--muted);min-height:1.2em;margin:0;font-size:.86rem}.keys{grid-template-columns:repeat(12,1fr);gap:6px;display:grid}.key{border:1px solid var(--chrome-edge);background:var(--paper);height:52px;font-family:var(--font-hand);color:var(--ink);box-shadow:0 3px 0 var(--chrome-edge);border-radius:12px;font-size:1.9rem;transition:transform 50ms,box-shadow 50ms}.key:active{box-shadow:0 1px 0 var(--chrome-edge);transform:translateY(2px)}.key.small{font-family:var(--font-ui);color:var(--pencil);font-size:.85rem;font-weight:600}.key.op{color:var(--pencil)}.key.wide{grid-column:span 4}.key.done{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 3px 0 var(--sel), 0 0 12px var(--glow)}.hint.warn{color:var(--carry);font-weight:600}@media (width<=700px){.keys{grid-template-columns:repeat(6,1fr)}.key{height:46px}.key.small{height:42px}.key.wide{grid-column:span 2}}@media (prefers-reduced-motion:reduce){.cell.caret:before{animation:none}}@media (width<=520px){.btn-label,.brand-name{display:none}.bar{gap:8px}}@media (prefers-reduced-motion:reduce){.key{transition:none}}#undoBtn{display:none}@media (hover:hover) and (pointer:fine){.dock{display:none}#undoBtn{display:flex}}.doodles{pointer-events:none;z-index:6;position:absolute;inset:0;overflow:hidden}.doodle{pointer-events:auto;cursor:pointer;color:var(--pencil);opacity:.9;position:absolute}.doodle svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:auto;display:block;overflow:visible}.doodle svg *{transform-box:view-box}.doodle .paper{fill:var(--paper)}.doodle .fur{fill:var(--fur)}.doodle .ink-fill{fill:currentColor;stroke:none}.doodle .shine{fill:var(--paper);stroke:none}.doodle .thin{stroke-width:1.2px}.doodle text{fill:currentColor;stroke:none;font-family:var(--font-hand);text-anchor:middle}.marshall{left:calc(var(--cell) * .25);width:calc(var(--cell) * 1.5);bottom:6px}.kid{width:calc(var(--cell) * 1.35);bottom:6px;right:62px}.bike{width:calc(var(--cell) * 2.6);top:8px;right:18px}.marshall .name{font-size:11px}.m-tail{transform-origin:56px 72px;animation:5s ease-in-out infinite m-wag}.m-head{transform-origin:40px 44px;animation:7s ease-in-out infinite m-tilt}.m-ear-l{transform-origin:24px 27px;animation:7s ease-in-out infinite m-ear-l}.m-ear-r{transform-origin:56px 27px;animation:7s ease-in-out infinite m-ear-r}.m-tongue{stroke:var(--carry);stroke-width:1.8px;opacity:0}.m-sock .sock-stripe{stroke:var(--carry);stroke-width:1.6px}.m-sock .sock-toe{fill:var(--ink);stroke:none;opacity:.75}.m-sock-sway{transform-origin:42px 39px;animation:3.2s ease-in-out infinite alternate m-sock-sway}@keyframes m-sock-sway{0%{transform:rotate(-5deg)}to{transform:rotate(6deg)}}.m-sock{transform-origin:42px 39px}.m-woof{opacity:0;transform-origin:56px 22px}.m-woof .bubble{fill:var(--paper);stroke:var(--ink);stroke-width:1.4px}.m-woof text{fill:var(--ink);font-size:8px}@keyframes m-wag{0%,24%,to{transform:rotate(0)}4%,12%{transform:rotate(20deg)}8%,16%{transform:rotate(-12deg)}20%{transform:rotate(12deg)}}@keyframes m-tilt{0%,60%,92%,to{transform:rotate(0)}68%,84%{transform:rotate(-9deg)}}@keyframes m-ear-l{0%,60%,92%,to{transform:rotate(0)}68%,84%{transform:rotate(10deg)}}@keyframes m-ear-r{0%,60%,92%,to{transform:rotate(0)}68%,84%{transform:rotate(-4deg)}}.marshall.trick .m-hop{animation:.45s ease-out 2 m-hop}.marshall.trick .m-tail{animation:1.4s linear m-wag}.marshall.trick .m-tongue{opacity:1}.marshall.trick .m-woof{animation:1.4s ease-out pop}.marshall.trick .m-sock{animation:1.4s ease-in-out m-sock-drop}@keyframes m-sock-drop{0%,to{transform:none}18%,78%{transform:translate(-2px,41px)rotate(-80deg)}}@keyframes m-hop{50%{transform:translateY(-9px)}}@keyframes pop{0%{opacity:0;transform:scale(.4)}15%,80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.k-bounce{animation:.6s ease-in-out infinite alternate k-bounce}.k-arm-l{transform-origin:32px 32px;animation:.6s ease-in-out infinite alternate k-arm-l}.k-arm-r{transform-origin:32px 32px;animation:.6s ease-in-out infinite alternate k-arm-r}.k-leg-l{transform-origin:32px 54px;animation:.6s ease-in-out infinite alternate k-leg-l}.k-leg-r{transform-origin:32px 54px;animation:.6s ease-in-out infinite alternate k-leg-r}.k-shadow{stroke:var(--muted);stroke-width:1.2px;transform-origin:32px 90px;animation:.6s ease-in-out infinite alternate k-shadow}.k-note{fill:var(--ink);opacity:0;font-size:13px;animation:3.2s ease-out infinite k-note}.k-note-2{animation-delay:1.6s}@keyframes k-bounce{to{transform:translateY(-4px)}}@keyframes k-arm-l{0%{transform:rotate(-20deg)}to{transform:rotate(24deg)}}@keyframes k-arm-r{0%{transform:rotate(24deg)}to{transform:rotate(-20deg)}}@keyframes k-leg-l{0%{transform:rotate(6deg)}to{transform:rotate(-12deg)}}@keyframes k-leg-r{0%{transform:rotate(-6deg)}to{transform:rotate(12deg)}}@keyframes k-shadow{to{transform:scaleX(.8)}}@keyframes k-note{0%{opacity:0;transform:translate(0)}20%{opacity:.9}to{opacity:0;transform:translate(-3px,-16px)}}.k-spin{transform-origin:32px 50px}.kid.trick .k-spin{animation:.9s ease-in-out k-spin}@keyframes k-spin{to{transform:rotate(360deg)}}.b-wheel,.b-crank{animation:.9s linear infinite spin}.b-ride{animation:.35s ease-in-out infinite alternate b-ride}.b-flames{transform-origin:22px 44px;animation:.22s ease-in-out infinite alternate b-flicker}.flame-out{fill:var(--carry);stroke:none;opacity:.85}.flame-in{fill:var(--flame);stroke:none}.b-speed{stroke:var(--muted);stroke-dasharray:6 5;animation:.6s linear infinite b-speed}@keyframes spin{to{transform:rotate(360deg)}}@keyframes b-ride{to{transform:translateY(-1.2px)}}@keyframes b-flicker{0%{transform:scaleX(.82)skewY(2deg)}to{transform:scaleX(1.08)skewY(-2deg)}}@keyframes b-speed{to{stroke-dashoffset:11px}}.b-wheelie{transform-origin:34px 57px}.bike.trick .b-wheelie{animation:1.3s ease-in-out b-wheelie}.bike.trick .b-flames{animation-duration:.1s}@keyframes b-wheelie{25%,70%{transform:rotate(-16deg)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .doodle svg{filter:drop-shadow(0 0 3px var(--glow))}}:root[data-theme=dark] .doodle svg{filter:drop-shadow(0 0 3px var(--glow))}@media (prefers-reduced-motion:reduce){.doodle *{animation:none!important}}.about{color:var(--pencil);background:0 0;border:0;max-width:calc(100vw - 32px);padding:0}.about::backdrop{background:#070c1e59}.about-card{border:1px solid var(--chrome-edge);background:var(--chrome);width:260px;max-width:100%;box-shadow:0 12px 32px #0000002e, 0 0 18px var(--glow);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 22px;display:flex;position:relative}.about-card .brand-mark{margin-bottom:6px}.about-title{margin:0;font-size:1.05rem;font-weight:700}.about-copy{color:var(--muted);margin:0;font-size:.9rem}.about-close{width:32px;height:32px;color:var(--muted);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:8px;right:8px}.about-close:hover{background:var(--band);color:var(--pencil)}.about-close svg{width:16px;height:16px}