:root{color:#f7fbff;background:#08090d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 8%,#0ff1e629,#0000 28rem),linear-gradient(145deg,#050609 0%,#111016 52%,#07090d 100%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh;padding:28px}.prototype{flex-direction:column;gap:22px;max-width:1280px;min-height:calc(100vh - 56px);margin:0 auto;display:flex}.hero{justify-content:space-between;align-items:end;gap:18px;display:flex}.eyebrow{color:#80ffe7;letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:.78rem;font-weight:800}h1,h2,p{margin:0}h1{color:#fff;letter-spacing:0;font-size:clamp(2.1rem,5vw,5rem);line-height:.95}h2{color:#fff;font-size:1.55rem;line-height:1.12}.mode-toggle{background:#ffffff14;border:1px solid #ffffff29;border-radius:999px;flex:none;gap:4px;padding:4px;display:flex}.mode-toggle button,.controls button{cursor:pointer;border:0;justify-content:center;align-items:center;display:inline-flex}.mode-toggle button{color:#c9d6dc;white-space:nowrap;background:0 0;border-radius:999px;gap:8px;min-height:42px;padding:0 16px}.mode-toggle button.active{color:#10130a;background:#b8f725}.lesson-layout{grid-template-columns:minmax(280px,.9fr) minmax(520px,1.6fr);align-items:stretch;gap:22px;display:grid}.lesson-panel,.board-section{background:#0b0d12d6;border:1px solid #91ffef33;box-shadow:0 18px 60px #00000059}.lesson-panel{border-radius:8px;flex-direction:column;gap:18px;padding:22px;display:flex}.step-count{color:#b8f725;font-size:.84rem;font-weight:800}.lesson-panel p{color:#c5d1d5;font-size:1rem;line-height:1.5}.equation-strip{color:#80ffe7;word-break:break-word;background:#071010;border:1px solid #57f5ea57;border-radius:8px;padding:16px;font-size:clamp(1.05rem,2.3vw,1.5rem);font-weight:800;line-height:1.25}.result-line{border-left:4px solid #c45cff;grid-template-columns:minmax(72px,auto) 1fr;align-items:center;gap:10px;padding-left:14px;display:grid}.result-line strong{color:#f7d84a;font-size:1.4rem}.result-line span{color:#dce8e9;line-height:1.42}.controls{flex-wrap:wrap;gap:10px;margin-top:auto;display:flex}.controls button{color:#edf6f7;background:#ffffff17;border:1px solid #ffffff29;border-radius:8px;gap:8px;min-width:94px;min-height:44px;padding:0 14px}.controls button.primary{color:#061010;background:#57f5ea;font-weight:800}.board-section{border-radius:8px;flex-direction:column;gap:18px;min-width:0;padding:22px;display:flex}.division-heading{color:#fff;text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;min-height:42px;font-size:clamp(1.15rem,2.5vw,2rem);font-weight:900;display:flex}.divider{color:#c45cff}.dot-board{background-color:#030609d6;background-image:linear-gradient(#80ffe714 1px,#0000 1px),linear-gradient(90deg,#80ffe714 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:42px 42px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:2px solid #57f5ea;border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;min-height:420px;display:grid;position:relative;overflow:hidden}.dot-column{border-right:2px solid #57f5eab8;grid-template-rows:auto 1fr auto;min-width:0;padding:16px 14px;display:grid;position:relative}.dot-column:last-child{border-right:0}.column-label{color:#80ffe7;text-align:center;font-size:1rem;font-weight:900}.dots{z-index:2;place-content:center;gap:12px;padding:28px 0;display:grid;position:relative}.dots-x2{grid-template-columns:repeat(1,28px)}.dots-x,.dots-ones{grid-template-columns:repeat(2,28px)}.dot{cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:transform .12s,box-shadow .12s;display:flex}.dot.free{background:#b8f725;box-shadow:0 0 18px #b8f725a6}.dot.free:hover{transform:scale(1.18)}.dot.free.selected{background:#57f5ea;transform:scale(1.18);box-shadow:0 0 0 4px #57f5ea73,0 0 24px #57f5eae6}.dot.circled{background:hsl(var(--group-hue,286) 90% 64%);box-shadow:0 0 0 3px hsl(var(--group-hue,286) 90% 64% / .4), 0 0 20px hsl(var(--group-hue,286) 90% 64% / .7);cursor:default;opacity:1}.group-loops{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;top:0;left:0}.group-loops path{stroke-linejoin:round;stroke-width:3px}.dot-badge{color:#000000b8;font-size:.72rem;font-weight:900}.feedback{border-radius:8px;padding:12px 14px;font-size:.95rem;line-height:1.45}.feedback-neutral{color:#dce8e9;background:#ffffff12;border:1px solid #ffffff29}.feedback-success{color:#ddff8f;background:#b8f7251a;border:1px solid #b8f72573}.feedback-error{color:#ffb3c1;background:#ff5c7a1a;border:1px solid #ff5c7a80}.reveal{background:#c45cff1f;border:1px solid #c45cff8c;border-radius:8px;gap:8px;padding:14px;display:grid}.reveal strong{color:#f7d84a;font-size:1.2rem}.reveal span{color:#ecdcf7;line-height:1.45}.column-total{color:#ffffffb8;text-align:center;font-weight:800}.quotient-bar{color:#c7d5d8;background:#ffffff14;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:12px 16px;display:flex}.quotient-bar strong{color:#f7d84a;font-size:1.55rem}.game-credit{color:#ffffff8c;text-align:center;font-size:.8rem;line-height:1.4}.game-credit a{color:#80ffe7}@media (width<=900px){.app-shell{padding:18px}.hero{flex-direction:column;align-items:start}.lesson-layout{grid-template-columns:1fr}.dot-board{min-height:360px}}@media (width<=560px){.app-shell{padding:12px}.prototype{gap:14px}.mode-toggle,.controls{width:100%}.mode-toggle button,.controls button{flex:1 1 0;min-width:0}.lesson-panel,.board-section{padding:16px}.dot-board{min-height:330px}.dot-column{padding:12px 8px}.dots{gap:9px}.dot{width:22px;height:22px}.dots-x2,.dots-x,.dots-ones{grid-template-columns:repeat(1,22px)}.result-line{grid-template-columns:1fr}}