:root{--bg: #f2efe9;--card: #ffffff;--ink: #1d1d1b;--ink-2: #5d5a55;--ink-3: #8d8983;--line: #e7e3dc;--soft: #f4f2ee;--accent: #ffcf33;--good: #2fa35a;--warn: #e0483d;--radius: 28px;--font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--font-num: "Fredoka", "Nunito", system-ui, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #2f7fe8;outline-offset:2px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 20px}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center}.brand-logo svg{width:26px;height:26px;fill:var(--accent)}.brand-title{font-family:var(--font-num);font-weight:700;font-size:20px;line-height:1.1}.brand-sub{color:var(--ink-2);font-size:14px}.steps{display:flex;gap:4px}.step-link{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:8px 12px;border-radius:999px;color:var(--ink-3);font-weight:700;font-size:15px;position:relative}.step-link .step-num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink-2);font-family:var(--font-num);font-size:13px}.step-link:hover:not(:disabled){color:var(--ink)}.step-link.active{color:var(--ink)}.step-link.active .step-num{background:var(--ink);color:#fff}.step-link.active:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:var(--ink)}.step-link:disabled{cursor:default;opacity:.7}.soon{font-size:11px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:var(--ink-3)}.top-actions{display:flex;justify-content:flex-end}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center}.icon-btn svg{width:22px;height:22px;fill:var(--ink);stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}.icon-btn .ic-off,.icon-btn.muted .ic-on{display:none}.icon-btn.muted .ic-off{display:block}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;padding:0 14px 14px}.stage-card{position:relative;background:var(--card);border-radius:var(--radius);overflow:hidden;min-height:0;background:radial-gradient(ellipse at 50% 35%,#fff,#fbfaf7 60%,#f5f3ee)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.stage canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.stage-badge{position:absolute;left:24px;top:20px;pointer-events:none}.stage-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:17px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px #00000024}.stage-toast.show{opacity:1;transform:translate(-50%)}.stage-toast.good{background:var(--good)}.stage-toast.warn{background:var(--warn)}.panel{background:var(--card);border-radius:var(--radius);display:flex;flex-direction:column;min-height:0;overflow:hidden}.panel-body{flex:1;overflow-y:auto;padding:28px 28px 12px}.panel-foot{padding:14px 16px 16px;border-top:1px solid var(--line)}.eyebrow{color:var(--ink-3);font-weight:700;font-size:15px;margin:0 0 6px}.panel h1{font-family:var(--font-num);font-weight:700;font-size:36px;line-height:1.08;margin:0 0 12px;letter-spacing:-.01em}.lead{font-size:18px;line-height:1.45;color:var(--ink-2);margin:0 0 18px}.lead b{color:var(--ink)}.lead.small{font-size:15px;margin-top:18px}.section-label{font-weight:800;font-size:15px;color:var(--ink-2);margin:22px 0 10px}.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:4px;margin-bottom:22px;border:1px solid var(--line)}.seg button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:800;color:var(--ink-2)}.seg button.on{background:var(--ink);color:#fff}.nchip{--c: #ddd;--t: #222;display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:10px;background:var(--c);color:var(--t);font-family:var(--font-num);font-weight:700;font-size:22px;box-shadow:inset 0 -4px #00000024,0 1px #0000000f}.nchip.unknown{background:transparent;color:var(--ink-2);border:2.5px dashed #b5bcc5;box-shadow:none}.nchip.ten{background:var(--ink);color:#fff}.nchip.xl{min-width:84px;height:84px;font-size:48px;border-radius:18px;box-shadow:inset 0 -8px #00000024}.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.num-btn{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:8px 0;display:grid;place-items:center;transition:transform .12s,border-color .12s}.num-btn:hover{transform:translateY(-2px);border-color:#cfcac2}.num-btn.sel{border:2px solid var(--ink)}.hint-card{display:flex;gap:10px;align-items:center;background:var(--soft);border-radius:16px;padding:14px 16px;font-weight:700;color:var(--ink-2)}.hint-ic{font-size:22px}.pager{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 14px}.big-chip{display:flex;justify-content:center;margin:4px 0 16px}.round-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--soft);font-size:22px;font-weight:800;flex:none}.round-btn:disabled{opacity:.35;cursor:default}.ghost-btn{width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:12px 16px;font-weight:800;font-size:16px}.ghost-btn:hover{border-color:#cfcac2}.equation{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--soft);border-radius:18px;padding:16px;margin:0 0 16px}.equation .nchip{min-width:48px;height:48px;font-size:26px}.equation .op{font-family:var(--font-num);font-weight:700;font-size:26px;color:var(--ink-2)}.you-need{border:1px solid var(--line);border-radius:18px;margin-bottom:14px}.you-need .row{display:flex;gap:12px;align-items:center;padding:12px 14px;font-size:15px;font-weight:700;color:var(--ink-2)}.you-need .row+.row{border-top:1px solid var(--line)}.you-need .ic{font-size:20px;width:28px;text-align:center}.pairs{display:flex;flex-wrap:wrap;gap:8px}.pair{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:12px;background:var(--soft);opacity:.35;filter:grayscale(1);font-family:var(--font-num);font-weight:700;color:var(--ink-2)}.pair .nchip{min-width:30px;height:30px;font-size:16px;border-radius:8px}.pair.got{opacity:1;filter:none}.pairs.big{flex-direction:column}.pairs.big .pair{padding:8px 10px;gap:8px}.pairs.big .nchip{min-width:40px;height:40px;font-size:22px}.progress-dots{display:flex;gap:6px;margin-top:20px;justify-content:center}.progress-dots span{width:10px;height:10px;border-radius:50%;background:var(--line)}.progress-dots span.done{background:var(--ink)}.progress-dots span.now{background:var(--accent);box-shadow:0 0 0 3px #ffcf3359}.stars{display:flex;gap:6px;font-size:40px;color:var(--line);margin-bottom:18px}.stars .on{color:var(--accent)}.cta{width:100%;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 22px 12px 12px;font-size:18px;font-weight:800;text-align:left;transition:transform .12s}.cta:hover{transform:translateY(-1px)}.cta span:nth-child(2){flex:1}.cta-check{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-size:18px}.cta-arrow{font-size:22px}.cta.muted{background:var(--soft);color:var(--ink-2);padding-left:22px;border:1px solid var(--line)}.foot-row{display:flex;gap:10px;align-items:center}@media (max-width: 1100px){.layout{grid-template-columns:minmax(0,1fr) 340px}.step-link .step-name{display:none}.step-link.active .step-name{display:inline}.panel h1{font-size:30px}}@media (max-width: 820px){body{overflow:auto;height:auto}.topbar{grid-template-columns:1fr auto;padding:10px 16px}.steps{grid-column:1 / -1;order:3;justify-content:center}.brand-sub{display:none}.layout{grid-template-columns:1fr;padding:0 10px 10px}.stage-card{height:56vh;min-height:320px;border-radius:22px}.panel{border-radius:22px;overflow:visible}.panel-body{overflow:visible;padding:22px 20px 8px}.panel h1{font-size:28px}.lead{font-size:17px}.stage-toast{font-size:15px;bottom:14px}}@media (max-width: 820px){.step-link:disabled{display:none}}