:root{--bg:#f5f4f0;--grid:#6e87aa13;--ink:#1c222b;--muted:#465060;--card:#fcfbf8;--line:#cfd2d8;--line2:#b4b8bf;--blue:#24579e;--fill:#2f73d9;--track:#e2e4e9;--thumb:#fff;--thumbBorder:#3b4757;--lav:#e4dffa;--out:#dbe7fb;--outInk:#14233d;--hi:#f7d65c;--paper:#fdfbf6;--clipBorder:#b3aea4;--warn:#fbe1dc;--warnInk:#9b3324;--ok:#2c7a49;--shadow:#282e3c1a;--bubble:#ffffffb3;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#171b22;--grid:#96aac80d;--ink:#eef1f5;--muted:#b4bcc8;--card:#212833;--line:#3a4350;--line2:#4d5767;--blue:#3a76d2;--fill:#4a8ef0;--track:#38414e;--thumb:#f4f6f9;--thumbBorder:#9fb0c6;--lav:#38335c;--out:#1f3556;--outInk:#e9f1ff;--hi:#a8862a;--paper:#1f252e;--clipBorder:#4d5563;--warn:#4a2522;--warnInk:#ffb4a6;--ok:#7fd39d;--shadow:#00000059;--bubble:#212833bf;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#171b22;--grid:#96aac80d;--ink:#eef1f5;--muted:#b4bcc8;--card:#212833;--line:#3a4350;--line2:#4d5767;--blue:#3a76d2;--fill:#4a8ef0;--track:#38414e;--thumb:#f4f6f9;--thumbBorder:#9fb0c6;--lav:#38335c;--out:#1f3556;--outInk:#e9f1ff;--hi:#a8862a;--paper:#1f252e;--clipBorder:#4d5563;--warn:#4a2522;--warnInk:#ffb4a6;--ok:#7fd39d;--shadow:#00000059;--bubble:#212833bf;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}body{height:100%;color:var(--ink);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);-webkit-font-smoothing:antialiased;background-size:34px 34px;margin:0;font-family:Patrick Hand,Comic Sans MS,Segoe Print,system-ui,sans-serif}body:before{content:"";height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);position:fixed;inset:0 0 auto}sub{vertical-align:-.28em;font-size:.68em;line-height:0}button{font:inherit;color:inherit}.app{grid-template:"stage aside"minmax(400px,1fr)"tabs aside""controls controls"/minmax(0,1fr) clamp(290px,23vw,400px);gap:12px 24px;min-height:100%;padding:16px 26px 20px;display:grid;position:relative}.hero{z-index:4;pointer-events:none;grid-area:stage;place-self:start;padding:10px 0 0 18px}.title{letter-spacing:.5px;transform-origin:0 100%;margin:0;font-family:Caveat,Kalam,cursive;font-size:clamp(54px,5.6vw,104px);font-weight:700;line-height:.86;position:relative;transform:rotate(-5deg)}.title span{display:block;position:relative}.title .t2{margin-left:.06em}.title .t3{margin-left:.12em}.title .hl{z-index:-1;width:calc(100% + .5em);height:.82em;position:absolute;top:.12em;left:-.22em}.title .spark{stroke:#f2b31c;stroke-width:5px;stroke-linecap:round;fill:none;position:absolute}.sub{max-width:15em;margin:clamp(26px,3vw,52px) 0 0 4px;font-size:clamp(19px,1.55vw,27px);line-height:1.32}.stage{z-index:1;border-radius:18px;grid-area:stage;min-height:0;position:relative;overflow:hidden}.stage canvas{outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.bubble{z-index:3;pointer-events:none;color:#25324a;background:var(--bubble);text-align:center;border:2px solid #2b3a55;border-radius:50%;padding:.5em 1.1em;font-family:Caveat,Kalam,cursive;font-size:clamp(22px,2.15vw,38px);font-weight:600;line-height:1.02;position:absolute;top:7%;left:37%;transform:rotate(-9deg)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bubble{color:var(--ink);border-color:#9fb3d6}}:root[data-theme=dark] .bubble{color:var(--ink);border-color:#9fb3d6}.tagx{pointer-events:none;white-space:nowrap;will-change:transform;z-index:2;position:absolute;top:0;left:0}.pill{color:#1c222b;background:#fffffff0;border:1.5px solid #9aa0a8;border-radius:999px;padding:2px 14px 3px;font-size:clamp(15px,1.15vw,18px);box-shadow:0 2px 6px #0000001f}.load{color:#1c222b;text-align:left;background:#fffdf6;border:1.5px dashed #8f8a80;border-radius:12px;padding:4px 10px 5px;font-size:clamp(14px,1.1vw,18px);line-height:1.15}.load b{font-family:Kalam,cursive;font-weight:700}.chip{color:#1d4f9a;background:#e5eefc;border-radius:999px;margin-top:2px;padding:0 8px;font-size:.9em;display:inline-block}.chip.bad{color:#9b3324;background:#fbe1dc}.chip.ok{color:#22663b;background:#dff3e6}.flab{color:#1c222b;background:#ffffffe6;border:1.5px solid #1c222b;border-radius:8px;padding:1px 8px;font-family:Kalam,cursive;font-size:clamp(14px,1.1vw,18px);font-weight:700}.flab.f2{color:#1d4f9a;border-color:#2f73d9}.flab.w{color:#8c3a14;border-color:#c0582a}.plab{color:#fff;background:#1f5fd6;border-radius:999px;padding:1px 8px;font-family:Kalam,cursive;font-size:clamp(13px,1vw,17px);font-weight:700}.stage-tools{z-index:3;align-items:center;gap:8px;display:flex;position:absolute;top:8px;right:8px}.hint{color:var(--muted);margin-right:4px;font-size:15px}.tbtn{border:1.5px solid var(--line2);background:var(--card);cursor:pointer;border-radius:999px;align-items:center;gap:6px;height:36px;padding:0 12px;font-size:16px;display:inline-flex}.tbtn svg{stroke:currentColor;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.tbtn.icon{justify-content:center;width:36px;padding:0}.tbtn{white-space:nowrap}@media (width<=420px){#autoBtn span,#resetBtn span{display:none}#autoBtn,#resetBtn{justify-content:center;width:36px;padding:0}}.tbtn:focus-visible,.tab:focus-visible,input[type=range]:focus-visible{outline-offset:2px;outline:3px solid #7fb0ff}.ann{pointer-events:none;z-index:2;opacity:0;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;overflow:hidden}.ann path{fill:none;stroke:var(--ink);stroke-width:1.5px;stroke-linecap:round}.ann circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.6px}#notes{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:hidden}.note{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);white-space:nowrap;will-change:transform;opacity:0;border-radius:11px 15px 12px 9px/10px 12px 14px 11px;padding:3px 10px 4px;line-height:1.12;transition:opacity .25s;position:absolute;top:0;left:0;box-shadow:2px 3px #2a2f3729}.note b{font-family:Kalam,cursive;font-size:clamp(14px,1.05vw,17px);font-weight:700;display:block}.note span{color:#465060;font-size:clamp(13px,.95vw,15px);display:block}.note span.bad{color:#9b3324}.stage.notes-on .ann,.stage.notes-on .note.vis{opacity:1}.tbtn.lbl[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}.err{text-align:center;font-size:20px;position:absolute;inset:auto 0 40%}.clip{z-index:2;background:var(--paper);border:2px solid var(--clipBorder);box-shadow:0 12px 26px var(--shadow);border-radius:22px;flex-direction:column;grid-area:aside;align-self:stretch;gap:12px;margin-top:30px;padding:46px clamp(18px,1.7vw,28px) 24px;display:flex;position:relative}.clip-top{width:118px;position:absolute;top:-34px;left:50%;transform:translate(-50%)}#clipBody{flex-direction:column;gap:12px;display:flex}.clip-h{margin:0;font-family:Caveat,Kalam,cursive;font-size:clamp(34px,2.7vw,46px);font-weight:700;line-height:1}.clip-h span{padding:0 .3em;display:inline-block;position:relative}.clip-h span:before{content:"";background:var(--hi);z-index:-1;border-radius:38% 62% 46% 54%/58% 42%;position:absolute;inset:.08em -.05em .02em -.08em;transform:rotate(-2.5deg)}.clip-p{margin:0;font-size:clamp(18px,1.4vw,22px);line-height:1.34}.dia{width:100%;height:auto;display:block;overflow:visible}.dia text{fill:var(--ink);font-family:Kalam,cursive;font-size:17px}.formula{background:var(--lav);text-align:center;border-radius:28px 34px 26px 36px/30px 26px 34px 28px;padding:12px 14px;font-family:Caveat,Kalam,cursive;font-size:clamp(30px,2.4vw,40px);font-weight:700;line-height:1}.frac{vertical-align:middle;flex-direction:column;margin-left:.1em;font-size:.82em;line-height:1;display:inline-flex}.frac span:first-child{border-bottom:2px solid;padding:0 .1em .04em}.frac span:last-child{padding-top:.06em}.live{text-align:center;color:var(--muted);margin:-2px 0 0;font-size:clamp(17px,1.3vw,20px)}.live b{color:var(--ink);font-family:Kalam,cursive}.bars{gap:9px;display:grid}.bar{grid-template-columns:5.2em 1fr 4.4em;align-items:center;gap:8px;font-size:18px;display:grid}.bar i{background:var(--track);border-radius:7px;height:14px;display:block;overflow:hidden}.bar i em{background:#1c222b;border-radius:7px;height:100%;transition:width .25s;display:block}.bar.o i em{background:var(--fill)}.bar.w i em{background:#d0682f}.bar b{text-align:right;font-family:Kalam,cursive}.stats{gap:6px;margin:0;padding:0;font-size:18px;line-height:1.3;list-style:none;display:grid}.stats li{padding-left:18px;position:relative}.stats li:before{content:"";background:var(--fill);border-radius:50%;width:8px;height:8px;position:absolute;top:.55em;left:2px}.stats b{font-family:Kalam,cursive}.mini{border-top:1.5px dashed var(--line);gap:6px;padding-top:12px;font-size:18px;display:grid}.mini .row{justify-content:space-between;align-items:center;display:flex}.uses{gap:10px;margin:0;padding:0;list-style:none;display:grid}.uses li{grid-template-columns:40px 1fr;align-items:start;gap:10px;font-size:18px;line-height:1.28;display:grid}.uses svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.uses b{font-family:Kalam,cursive;font-size:19px;display:block}.tabs{z-index:2;background:var(--card);border:1.5px solid var(--line);box-shadow:0 6px 16px var(--shadow);border-radius:999px;grid-area:tabs;grid-template-columns:repeat(4,auto);justify-self:center;padding:6px;display:grid}.tab{cursor:pointer;color:var(--ink);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:10px clamp(18px,2.1vw,40px);font-size:clamp(19px,1.45vw,23px);display:flex;position:relative}.tab svg{stroke:currentColor;fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:26px;height:26px}.tab+.tab:before{content:"";border-left:1.5px solid var(--line);height:56%;position:absolute;top:22%;left:0}.tab[aria-selected=true]{background:var(--blue);color:#fff;box-shadow:0 4px 10px #24579e59}.tab[aria-selected=true]:before,.tab[aria-selected=true]+.tab:before{display:none}.controls{z-index:2;background:var(--card);border:1.5px solid var(--line);box-shadow:0 10px 24px var(--shadow);border-radius:32px;grid-area:controls;grid-template-columns:repeat(3,minmax(0,1fr)) clamp(200px,16vw,270px);align-items:center;padding:14px 16px 14px 18px;display:grid}.ctrl{border-right:1.5px dashed var(--line2);grid-template-columns:46px minmax(0,1fr);align-items:center;column-gap:16px;padding:6px 26px;display:grid}.ctrl .ic{width:46px;height:46px;stroke:var(--ink);fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ctrl-h{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.ctrl-h label{font-size:clamp(17px,1.3vw,21px);line-height:1.1}.badge{border:1.5px solid var(--line2);background:var(--paper);text-align:center;border-radius:999px;flex:none;min-width:4.4em;padding:1px 14px 2px;font-family:Kalam,cursive;font-size:clamp(16px,1.25vw,20px)}input[type=range]{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:30px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--fill) var(--p,40%),var(--track) var(--p,40%));border-radius:6px;height:12px}input[type=range]::-moz-range-track{background:var(--track);border-radius:6px;height:12px}input[type=range]::-moz-range-progress{background:var(--fill);border-radius:6px;height:12px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--thumb);border:2px solid var(--thumbBorder);border-radius:50%;width:28px;height:28px;margin-top:-8px;box-shadow:0 2px 5px #00000040}input[type=range]::-moz-range-thumb{background:var(--thumb);border:2px solid var(--thumbBorder);border-radius:50%;width:24px;height:24px;box-shadow:0 2px 5px #00000040}.out{background:var(--out);color:var(--outInk);text-align:center;border-radius:22px;margin-left:20px;padding:12px 10px 10px;transition:background .3s}.out-k{font-size:clamp(17px,1.3vw,21px)}.out-v{font-family:Kalam,cursive;font-size:clamp(34px,2.9vw,48px);font-weight:700;line-height:1.05}.out-c{opacity:.8;font-size:15px}.out.weak{background:var(--warn);color:var(--warnInk)}@media (width<=999px){.app{flex-direction:column;gap:14px;padding:12px 14px 22px;display:flex}.hero{order:0;padding:18px 4px 0 8px}.stage{order:1}.tabs{order:2}.controls{order:3}.clip{order:4}.title{transform-origin:0;font-size:clamp(46px,10vw,78px);transform:rotate(-2deg)}.title span{margin-right:.18em;display:inline-block}.title .t2,.title .t3{margin-left:0}.title .spark{display:none}.sub{max-width:none;margin-top:14px;font-size:20px}.sub br{display:none}.stage{top:env(safe-area-inset-top,0px);background:var(--bg);height:clamp(270px,46svh,540px);box-shadow:0 8px 14px -10px var(--shadow);z-index:6;flex:none;position:sticky}.bubble{padding:.45em .9em;font-size:19px;top:4%;left:3%}.tabs{border-radius:24px;grid-template-columns:repeat(4,1fr);width:100%}.tab{border-radius:18px;flex-direction:column;gap:4px;padding:8px 4px;font-size:17px}.tab svg{width:22px;height:22px}.controls{border-radius:24px;grid-template-columns:1fr 1fr;padding:10px 12px}.ctrl{border-right:0;border-bottom:1.5px dashed var(--line2);padding:12px 10px}.ctrl:nth-child(odd){border-right:1.5px dashed var(--line2)}.out{margin:12px 6px 4px}.clip{margin-top:38px}.hint{display:none}.note{padding:2px 7px 3px}.note b{font-size:13px}.note span{font-size:12px}.load{padding:2px 7px;font-size:13px}}@media (width<=640px){.stage{height:clamp(240px,36svh,400px)}.controls{grid-template-columns:1fr}.ctrl:nth-child(odd){border-right:0}.ctrl{grid-template-columns:38px minmax(0,1fr);column-gap:12px}.ctrl .ic{width:38px;height:38px}.bubble,.pill .long{display:none}}@media (width<=380px){.tab{font-size:15px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}