@import url('/assets/fonts/fonts.css');
:root{font-family:'DM Sans',Arial,sans-serif;color:#23464f;background:#f5f3ed;--green:#30674f;--wood:#edd2a1}*{box-sizing:border-box}body{margin:0}header{padding:18px 4%;border-bottom:1px solid #ccd3cb;background:#fffdf7}a{color:inherit}main{max-width:1180px;margin:auto;padding:26px 24px}h1{font:600 clamp(27px,4vw,40px) Literata,Georgia,serif}h2{font-size:23px}p{line-height:1.6}button,input,select{font:inherit;color:inherit;min-height:46px;border:1px solid #a8b8ae;border-radius:9px;padding:10px 14px;background:#fffdf9}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}button:hover:not(:disabled){background:#e5efdf}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1581ad;outline-offset:3px}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#204d39}label{display:block;font-weight:600;margin:12px 0}label select{display:block;width:100%;margin-top:8px}.setup{max-width:780px;background:white;padding:26px;border:1px solid #b4c6c5;border-radius:15px}.choices,.actions{display:flex;flex-wrap:wrap;gap:12px;margin:15px 0}.choices label{flex:1;min-width:150px}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:24px;align-items:start}.panel{background:#fffdf7;padding:22px;border:1px solid #c7cbbd;border-radius:13px}.wood{position:relative;background:repeating-linear-gradient(3deg,#fff1 0 6px,#98652c08 7px 9px),linear-gradient(110deg,#f6dfb4,#e4c28c);border:8px solid #bd965f;border-radius:15px;box-shadow:inset 0 2px 7px #75451d33;padding:16px;overflow:hidden}.grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;touch-action:none}.peg,.hole{min-height:0;aspect-ratio:1;padding:0;border:0;background:transparent;border-radius:50%;position:relative;touch-action:none}.peg:after{content:'';display:block;width:32%;height:32%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffedbb,#91612f);box-shadow:1px 2px 2px #573b2788;margin:auto}.hole:after{content:'';display:block;width:65%;height:65%;border-radius:50%;background:#b99968;box-shadow:inset 0 2px 3px #6b482a66;margin:auto}.hole.filled:after{background:radial-gradient(circle at 30% 25%,#ffc5ab,#c62c39 60%);box-shadow:0 2px 3px #634}.peg.chosen{background:#eb488744;box-shadow:inset 0 0 0 3px #e53684}.peg.start{outline:3px solid #9c1770}.circle-board{aspect-ratio:1;min-width:0}.round-node{position:absolute;transform:translate(-50%,-50%);width:15%;min-height:44px;padding:3px;font-size:clamp(12px,1.8vw,20px);background:#fff7df;border:2px solid #c5a370}.round-node small{display:block;font-size:12px;color:#526251}.round-node.correct,.locked{background:#e0eed9!important;border:2px solid #3e854b!important}.center-number{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 34px Literata,serif}.coins{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.coin{border-radius:50%;background:#f1dcae;border:2px solid #bd965f;font-weight:700;min-width:48px}.coin.selected{outline:3px solid #b33175}.step{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#557666}.equation{font-size:28px;font-weight:700;margin:10px 0}.message{min-height:50px;line-height:1.5;padding:12px 0}.message.success{color:#226a3a;font-weight:700}.answer{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.answer input{min-width:0;width:140px}.values{border-collapse:separate;border-spacing:8px;width:100%;text-align:center}.values th{font-size:14px}.values td{height:52px}.values button{width:100%;min-width:42px;padding:5px;background:#fff0ce}.values .active{background:#fff5c9}.band-svg{width:100%;display:block;touch-action:none}.band-svg circle{fill:#b58a53;stroke:#65451e;stroke-width:2}.band-svg .node{cursor:pointer}.band-svg .node:focus{outline:none;stroke:#147eac;stroke-width:5}.band-svg line{stroke:#da3881;stroke-width:5;pointer-events:none}.band-svg text{font:700 18px Arial;fill:#23464f;pointer-events:none}.band-svg .hit{fill:transparent;stroke:none}.explain{background:#eef2e7;padding:12px;border-radius:8px}.summary{font-size:18px;font-weight:600}.skip{position:absolute;top:-80px}.skip:focus{top:5px;background:white;z-index:20}[hidden]{display:none!important}@media(max-width:750px){main{padding:16px 12px}.workspace{grid-template-columns:1fr}.wood{max-width:610px;width:100%;margin:auto}.round-node{font-size:16px}.panel{padding:16px}.grid{gap:2px}.values{border-spacing:4px}.values th{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.grid{position:relative;gap:0}.rubber-band{position:absolute;border:4px solid #c92a76;border-radius:14px;pointer-events:none;box-shadow:0 1px 2px #70224c66}.peg.chosen{background:#ed80ae22;box-shadow:none}.peg:disabled,.hole:disabled{opacity:1}.workspace>.wood{max-width:620px}.band-svg .node{touch-action:none}
.rubber-band{display:grid;place-items:center;overflow:visible}.peg-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffbea;color:#71305a;border:2px solid #c92a76;border-radius:9px;min-width:30px;text-align:center;padding:2px 7px;font-size:clamp(16px,2.3vw,28px);font-weight:800;line-height:1.2;box-shadow:0 2px 4px #5433;pointer-events:none}