@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Literata:wght@500;600&display=swap');
/* Material palette is kept here so the board can be reskinned independently of its learning rules. */
:root{--paper:#f5f0e7;--ink:#343d3a;--muted:#66706a;--wood:#ead0a0;--wood-edge:#be9660;--bead:#c62632;--accent:#315f56;--line:#d8d8ca;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100svh}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid #bdc4b8;border-radius:9px;padding:10px 14px;background:#fffdf8;color:var(--ink)}button{cursor:pointer;touch-action:manipulation}button:hover{background:#edf1e8}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.board-scroll:focus-visible{outline:3px solid #38728a;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 4%;border-bottom:1px solid var(--line);background:#fffcf7}header a{font-size:14px}.brand{font-size:11px;letter-spacing:2px;color:var(--accent)}header button{font-size:13px}main{max-width:1440px;margin:auto;padding:26px 4%}.intro{margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);font-weight:700}h1{font-family:'Literata',Georgia,serif;font-size:clamp(32px,4vw,46px);font-weight:500;letter-spacing:-1px;margin:7px 0 8px}.intro>p:last-child{margin:0;color:var(--muted);line-height:1.6}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr);align-items:start;gap:32px}.controls{padding:23px;border:1px solid var(--line);border-radius:15px;background:#fdfbf5}.experiences{margin:0 0 22px;padding:0;border:0}.experiences legend{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px}.experiences label{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px;font-weight:600}.experiences input,.outline-option input{accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}.select-label,.factor-card label{display:block;font-size:13px;margin-bottom:8px;font-weight:600}select{width:100%;cursor:pointer}.factor-card{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.factor-card select{margin-bottom:15px}.number-card{font-size:26px;background:#fffdf7;font-family:'Literata',Georgia,serif}.relationship{font-size:14px;line-height:1.6;margin:0 0 8px}.equation{font-family:'Literata',Georgia,serif;font-size:25px;margin:6px 0 20px}.help-card{background:#eef1e8;padding:15px;border-radius:10px}.help-card h2{font-size:15px;margin:0 0 8px;font-weight:600}.help-card p{font-size:13px;line-height:1.65;margin:0}.help-card button{width:100%;margin-top:12px;font-size:12px;padding:8px}.outline-option{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;margin-top:18px}.board-area{min-width:0}.board-toolbar{display:flex;align-items:center;gap:20px;margin-bottom:10px}.board-toolbar>span{font-size:13px;line-height:1.6;color:var(--muted)}.bead-tray{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px;flex-shrink:0;width:120px;height:60px;padding:12px;background:linear-gradient(110deg,#ddba80,#edd5aa);border:6px solid #d7b47f;box-shadow:inset 0 2px 5px #744c2855,0 2px 3px #5b472322;border-radius:3px}.bead-tray i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffb1a2 0%,#dc3c41 28%,#ad1525 72%,#7d1620);box-shadow:0 1px 2px #5b2427}.scroll-help{font-size:11px;color:var(--muted);margin:9px 0}.board-scroll{max-width:100%;overflow:auto;border-radius:10px;padding:4px 4px 12px;scrollbar-color:#b79b76 #ebe4d7}.wood-board{--cell:44px;display:grid;grid-template-columns:48px repeat(var(--size),var(--cell));grid-template-rows:48px repeat(var(--size),var(--cell));width:max-content;padding:17px;background:repeating-linear-gradient(2deg,#ffffff05 0 3px,#9c652008 4px 5px),linear-gradient(110deg,#f4dfb7,#e8ca97 48%,#f0dbb4);border:1px solid var(--wood-edge);border-bottom:5px solid var(--wood-edge);border-radius:8px;box-shadow:0 8px 15px #69503116}.corner{display:grid;place-items:center}.corner span{width:22px;height:22px;border-radius:50%;background:var(--bead);box-shadow:inset 0 2px 3px #ff8b79,0 2px 2px #7a33244d}.column-label{border:0;border-radius:50%;min-height:44px;padding:0;display:grid;place-items:center;font-weight:600;background:transparent;color:#5b442d}.column-label:hover{background:#fff6df88}.column-label[aria-pressed=true]{background:radial-gradient(circle at 30% 20%,#ec7065,var(--bead) 55%,#971d2a);color:white;border:5px solid #eed5a9;box-shadow:none}.row-label{display:grid;place-items:center;font-size:11px;color:#705332}.row-label.card{background:#fffaf1;border:1px solid #ac966f;border-radius:5px;margin:8px 5px;font-weight:700;font-size:15px;box-shadow:0 2px 2px #62432720}.hole{position:relative;width:44px;height:44px;min-height:44px;border:0;padding:0;background:transparent;border-radius:4px;display:grid;place-items:center}.hole:before{content:'';width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 55% 68%,#e4cca0,#bc9c6c 75%);box-shadow:inset 0 2px 3px #78562a55,0 1px 0 #fff6}.hole:hover{background:#ffffff35}.hole.bead:before{width:28px;height:28px;background:radial-gradient(circle at 30% 23%,#ffd4c1 0%,#f67d70 12%,#db343d 30%,var(--bead) 60%,#8e1725 90%);box-shadow:inset -1px -2px 3px #61162255,0 2px 3px #683b3244}.hole.in-array{background:#fff8d24d;box-shadow:inset 0 0 0 1px #716b4933}.hole.counting{background:#e4f2e8cc;outline:3px solid var(--accent);outline-offset:-3px}.keyboard-help{font-size:11px;color:var(--muted);line-height:1.6;margin:8px 0 16px}.board-actions{display:flex;flex-wrap:wrap;gap:9px}.board-actions button{font-size:13px}.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover{background:#244a43}.discovery{background:#fffcf5;border:1px solid var(--line);border-radius:12px;padding:17px 20px;margin-top:18px;min-height:100px}.discovery p{margin:0;line-height:1.7;font-size:14px}.discovery #addition{font-family:'Literata',Georgia,serif;color:var(--accent);margin-top:7px;overflow-wrap:anywhere}footer{text-align:center;color:var(--muted);font-size:12px;padding:22px}dialog{max-width:min(450px,90vw);border:1px solid var(--line);border-radius:14px;padding:25px;color:var(--ink);background:#fffcf5}dialog::backdrop{background:#22312b80}dialog h2{font-family:'Literata',Georgia,serif;font-size:23px;margin:0 0 15px}dialog p{line-height:1.7}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}.skip{position:fixed;top:-100px;left:12px;background:white;padding:12px;z-index:5}.skip:focus{top:12px}[hidden]{display:none!important}@media(min-width:1250px){.workspace{grid-template-columns:290px minmax(0,1fr)}}@media(max-width:850px){.workspace{grid-template-columns:1fr;gap:22px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:18px}.experiences{grid-row:span 2;margin:0}.select-label{align-self:end;margin:0}.factor-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0;padding-top:15px}.factor-card label:first-child{grid-row:1;grid-column:1}.factor-card .number-card{grid-row:2;grid-column:1}.factor-card label{margin:0}.factor-card select{margin:0}.relationship,.equation{margin:0;align-self:center}.help-card{grid-column:1/-1}.outline-option{grid-column:1/-1;margin:0}.brand{display:none}main{padding:22px 16px}.intro{margin-bottom:22px}.board-toolbar{gap:12px}.board-actions button{flex:1 1 auto}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}