.machine{width:100%;height:auto;display:block;overflow:visible}.machine .stroke{stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}.machine .chute{stroke:var(--muted);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:1 9;opacity:.9}.machine .label{fill:var(--muted);font-size:9px;font-weight:800;font-family:var(--font);text-anchor:middle}.machine .locked-slot{stroke:var(--line);stroke-width:2;stroke-dasharray:6 6;fill:none;opacity:.6}.machine [class*=a-]{animation-duration:.9s;animation-timing-function:cubic-bezier(.3,.9,.4,1.1);animation-fill-mode:forwards;animation-iteration-count:1}.machine .a-drop{animation-name:m-drop}.machine .a-roll{animation-name:m-roll;transform-box:fill-box;transform-origin:center}.machine .a-topple{animation-name:m-topple;transform-box:fill-box;transform-origin:bottom left}.machine .a-tilt{animation-name:m-tilt;transform-box:fill-box;transform-origin:center}.machine .a-fling{animation-name:m-fling}.machine .a-lower{animation-name:m-lower}.machine .a-spin{animation-name:m-spin;transform-box:fill-box;transform-origin:center;animation-duration:1.4s}.machine .a-spin-ccw{animation-name:m-spin-ccw;transform-box:fill-box;transform-origin:center;animation-duration:1.4s}.machine .a-squash{animation-name:m-squash;transform-box:fill-box;transform-origin:bottom center}.machine .a-boing{animation-name:m-boing}.machine .a-swing{animation-name:m-swing;transform-box:fill-box;transform-origin:top center;animation-duration:1.6s}.machine .a-ring{animation-name:m-ring;transform-box:fill-box;transform-origin:top center}.machine .a-ding{animation-name:m-ding}.machine .a-popup{animation-name:m-popup}.machine .a-swipe{animation-name:m-swipe;transform-box:fill-box;transform-origin:top left}.machine .a-knock{animation-name:m-knock;transform-box:fill-box;transform-origin:bottom left}.machine .a-rise-pop{animation-name:m-rise-pop;transform-box:fill-box;transform-origin:center;animation-duration:1.3s}.machine .a-slide{animation-name:m-slide;animation-duration:1.2s;animation-timing-function:linear}.machine .a-launch{animation-name:m-launch;animation-duration:1.1s;animation-timing-function:cubic-bezier(.6,0,.9,.4)}.machine .a-flame{animation-name:m-flame;animation-duration:1.1s}.machine .a-arm{animation-name:m-arm;transform-box:fill-box;transform-origin:bottom left;animation-duration:1.3s}.machine .a-orbit{animation-name:m-orbit;transform-box:fill-box;transform-origin:center;animation-duration:1.4s;animation-timing-function:ease-in-out}.machine .a-burn{animation-name:m-burn;transform-box:fill-box;transform-origin:bottom center;animation-duration:1.2s}.machine .a-snap{animation-name:m-snap;animation-duration:1.2s}.machine .a-glow{animation-name:m-glow;animation-duration:1.2s}.machine .a-flag{animation-name:m-flag;animation-duration:1.2s}.machine .a-burst{animation-name:m-burst;transform-box:fill-box;transform-origin:center;animation-duration:1.2s}.machine .a-tada{animation-name:m-tada;animation-duration:1.2s;transform-box:fill-box;transform-origin:center}@keyframes m-drop{0%{transform:translateY(0)}to{transform:translateY(58px)}}@keyframes m-roll{0%{transform:translate(0) rotate(0)}to{transform:translate(96px,46px) rotate(540deg)}}@keyframes m-topple{0%{transform:rotate(0)}to{transform:rotate(75deg)}}@keyframes m-tilt{0%{transform:rotate(-16deg)}to{transform:rotate(16deg)}}@keyframes m-fling{0%{transform:translate(0);opacity:1}to{transform:translate(70px,-50px);opacity:0}}@keyframes m-lower{0%{transform:translateY(0)}to{transform:translateY(48px)}}@keyframes m-spin{0%{transform:rotate(0)}to{transform:rotate(720deg)}}@keyframes m-spin-ccw{0%{transform:rotate(0)}to{transform:rotate(-720deg)}}@keyframes m-squash{0%{transform:scaleY(1)}40%{transform:scaleY(.35)}to{transform:scaleY(1)}}@keyframes m-boing{0%{transform:translate(0)}40%{transform:translate(0)}to{transform:translate(60px,-40px)}}@keyframes m-swing{0%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}to{transform:rotate(-30deg)}}@keyframes m-ring{0%{transform:rotate(0)}25%{transform:rotate(-20deg)}50%{transform:rotate(18deg)}75%{transform:rotate(-12deg)}to{transform:rotate(0)}}@keyframes m-ding{0%{opacity:0;transform:translateY(6px)}40%{opacity:1;transform:translateY(-4px)}to{opacity:0;transform:translateY(-14px)}}@keyframes m-popup{0%{transform:translateY(0)}60%{transform:translateY(-40px)}to{transform:translateY(-32px)}}@keyframes m-swipe{0%{transform:rotate(0)}50%{transform:rotate(55deg)}to{transform:rotate(10deg)}}@keyframes m-knock{0%{transform:translate(0) rotate(0)}to{transform:translate(40px,30px) rotate(110deg)}}@keyframes m-rise-pop{0%{transform:translateY(0) scale(1);opacity:1}70%{transform:translateY(-46px) scale(1.15);opacity:1}80%{transform:translateY(-48px) scale(1.6);opacity:.6}to{transform:translateY(-48px) scale(.1);opacity:0}}@keyframes m-slide{0%{transform:translate(0)}to{transform:translate(90px)}}@keyframes m-launch{0%{transform:translateY(0)}to{transform:translateY(-140px)}}@keyframes m-flame{0%{opacity:0;transform:scaleY(.2)}30%{opacity:1;transform:scaleY(1.3)}to{opacity:1;transform:scaleY(1)}}@keyframes m-arm{0%{transform:rotate(0)}50%{transform:rotate(-35deg)}to{transform:rotate(-30deg)}}@keyframes m-orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m-burn{0%{transform:scaleY(1)}to{transform:scaleY(.2)}}@keyframes m-snap{0%{transform:translateY(0)}70%{transform:translateY(0)}to{transform:translateY(44px)}}@keyframes m-glow{0%{fill:var(--bg-2);filter:none}to{fill:var(--accent-2);filter:drop-shadow(0 0 8px var(--accent-2))}}@keyframes m-flag{0%{transform:translateY(0)}to{transform:translateY(-50px)}}@keyframes m-burst{0%{transform:scale(0);opacity:1}70%{transform:scale(1.6);opacity:1}to{transform:scale(2.2);opacity:0}}@keyframes m-tada{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}to{transform:scale(1) rotate(-3deg);opacity:1}}:root{--bg: #0f0b1e;--bg-2: #1a1433;--card: #221a45;--fg: #f4f0ff;--muted: #a396d6;--accent: #ff3d81;--accent-2: #ffe14d;--accent-3: #3df5d4;--ok: #3df5d4;--line: #3a2d6b;--radius: 18px;--tap: 56px;--shadow: 6px 6px 0 0 var(--line);--font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;--font-display: "Arial Black", "Avenir Next Heavy", "Segoe UI Black", system-ui, sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;transition:background-color .3s ease}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}a{color:var(--accent-3)}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.05;margin:0}.app{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page{flex:1;width:100%;max-width:720px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:720px;margin:0 auto;width:100%}.topbar .brand{font-family:var(--font-display);font-size:22px;text-decoration:none;color:var(--fg);display:flex;align-items:center;gap:8px}.topbar .brand .x{color:var(--accent);transform:rotate(-8deg);display:inline-block}.topbar nav{display:flex;gap:4px}.topbar nav a{color:var(--muted);text-decoration:none;font-weight:700;padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}.topbar nav a.active,.topbar nav a:hover{color:var(--fg);background:var(--bg-2)}.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 22px;border-radius:999px;font-weight:800;font-size:18px;background:var(--accent);color:#fff;border:3px solid transparent;box-shadow:4px 4px 0 0 var(--line);transition:transform .08s ease,box-shadow .08s ease;text-decoration:none}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 0 var(--line)}.btn.secondary{background:var(--bg-2);color:var(--fg);border-color:var(--line)}.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border-color:transparent}.btn.big{font-size:22px;min-height:68px;padding:0 32px}.btn:disabled{opacity:.5;cursor:default}.muted{color:var(--muted)}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg-2);color:var(--muted);font-weight:700;font-size:14px}.pill.accent{background:var(--accent-2);color:#1d1633}.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .1em}.frac>.num,.frac>.den{padding:.06em .25em}.frac>.num{border-bottom:.09em solid currentColor}.mixed{display:inline-flex;align-items:center;gap:.15em}.problem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:34vh;text-align:center}.problem .prompt{font-family:var(--font-display);font-size:clamp(44px,12vw,84px);display:flex;align-items:center;gap:.25em;flex-wrap:wrap;justify-content:center}.problem .prompt .op{color:var(--accent)}.problem .prompt .frac{font-size:.72em}.stat-chip{white-space:nowrap}.problem .hint{color:var(--muted);font-weight:700;font-size:16px}.answer-box{min-width:3ch;padding:0 .2em;border-bottom:6px solid var(--accent-3);color:var(--fg);min-height:1.1em;text-align:center}.answer-box.empty:after{content:"?";color:var(--muted);opacity:.5}.answer-box.active{border-bottom-color:var(--accent-2)}.frac-input{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-size:.72em}.frac-input .answer-box{min-width:2.2ch;border-bottom:0;border-radius:12px;background:var(--bg-2);border:3px solid var(--line);padding:0 .25em;line-height:1.25}.frac-input .answer-box.active{border-color:var(--accent-2)}.frac-input .bar{width:100%;height:.09em;min-height:5px;background:var(--fg);border-radius:3px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:380px;margin:0 auto}.keypad button{min-height:64px;border-radius:16px;background:var(--bg-2);border:3px solid var(--line);font-size:28px;font-weight:800;box-shadow:3px 3px 0 0 var(--line);transition:transform .06s ease;user-select:none}.keypad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--line)}.keypad button.go{background:var(--accent);color:#fff;border-color:transparent;grid-column:span 1}.keypad button.wide{grid-column:span 2}.keypad button.muted{color:var(--muted);font-size:22px}.feedback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:34vh;text-align:center;cursor:pointer}.feedback .big{font-family:var(--font-display);font-size:clamp(40px,10vw,72px)}.feedback.yes .big{color:var(--ok);animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}.feedback.nope .big{color:var(--fg);animation:settle .35s ease-out both}.feedback .sub{color:var(--muted);font-weight:700;font-size:18px}@keyframes pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes settle{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}.confetti i{position:absolute;top:-12px;width:10px;height:16px;border-radius:3px;animation:fall 1.4s ease-in forwards}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}.dots{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;padding:4px 0}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}.dots i.done{background:var(--accent-3)}.dots i.now{background:var(--accent-2);transform:scale(1.3)}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:8px 0;border-bottom:1px solid var(--line)}.toggle:last-child{border-bottom:0}.switch{width:58px;height:34px;border-radius:999px;background:var(--line);position:relative;flex-shrink:0;transition:background .2s ease}.switch:after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s ease}.switch[aria-checked=true]{background:var(--accent-3)}.switch[aria-checked=true]:after{transform:translate(24px)}.text-input{width:100%;min-height:var(--tap);border-radius:14px;border:3px solid var(--line);background:var(--bg-2);padding:0 14px;font-size:18px;font-weight:700}.text-input:focus{outline:none;border-color:var(--accent-3)}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.theme-swatch{border-radius:14px;border:3px solid var(--line);padding:10px;min-height:72px;display:flex;flex-direction:column;justify-content:space-between;font-weight:800;text-align:left}.theme-swatch.selected{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-2)}.theme-swatch.locked{opacity:.55}.theme-swatch .chips{display:flex;gap:4px}.theme-swatch .chips i{width:16px;height:16px;border-radius:50%;display:inline-block}.wiggle{animation:wiggle .5s ease-in-out}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);max-width:min(92vw,520px);background:var(--card);color:var(--fg);border:3px solid var(--accent-2);border-radius:16px;padding:12px 16px;font-weight:700;box-shadow:var(--shadow);z-index:100;animation:settle .25s ease-out both;cursor:pointer}.spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:99;transform:translate(-50%,-50%);animation:spark .7s ease-out forwards}@keyframes spark{to{transform:translate(-50%,-50%) scale(.1) translateY(24px);opacity:0}}html.barrel-roll{animation:barrel-roll 2s ease-in-out}@keyframes barrel-roll{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cipher-text{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(16px,4.2vw,24px);letter-spacing:.12em;line-height:1.7;overflow-wrap:normal}.cipher-text .hidden-letter{color:var(--muted);opacity:.6}.cipher-text .shown-letter{color:var(--accent-3);animation:pop .4s ease-out both;display:inline-block}.secret pre{font-size:11px;line-height:1.2;color:var(--accent-3);overflow-x:auto}.timeline{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:flex;flex-direction:column;gap:14px}.timeline:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--line)}.timeline>li{position:relative}.timeline>li:before{content:"";position:absolute;left:-22px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--accent-3);border:3px solid var(--bg)}.timeline>li.locked:before{background:var(--line)}.history-card.fresh{border-color:var(--accent-2)}.history-card h3{color:var(--accent-2)}