:root{--bg-color: #fafafa;--text-color: #1a1a1a;--primary: #1D9E75;--primary-hover: #157958;--token-filled: #F5C518;--token-empty: #d4d4d4;--border: #e5e5e5}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.nav-back{position:absolute;top:1.5rem;left:1.5rem;color:var(--text-color);text-decoration:none;font-weight:600;font-size:1.1rem;opacity:.4;transition:opacity .2s;z-index:100}.nav-back:hover{opacity:1}.view{display:none;flex:1;flex-direction:column;width:100%;height:100%;position:relative}.view.active{display:flex}.tool-explainer{max-width:65ch;width:100%;margin:0 auto;padding:2rem 2rem 3rem;border-top:1px solid var(--border)}.tool-explainer h2{font-size:1.5rem;color:var(--primary);margin:1.5rem 0 .75rem;text-align:left}.tool-explainer h3{font-size:1.15rem;color:var(--text-color);margin:1.25rem 0 .5rem}.tool-explainer p{line-height:1.7;color:var(--text-color);margin-bottom:1rem}.tool-explainer a{color:var(--primary);text-decoration:none}.tool-explainer a:hover{text-decoration:underline}.setup-container{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:500px;margin:0 auto;padding:4rem 2rem 2rem;width:100%}h1{font-size:2.5rem;text-align:center;margin-bottom:2rem;color:var(--primary)}.form-group{margin-bottom:1.5rem}label{display:block;font-weight:600;margin-bottom:.5rem;font-size:1.1rem}.option-group{display:flex;gap:.5rem}.token-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.option-btn{flex:1;padding:1rem;font-size:1.25rem;font-weight:700;border:2px solid var(--border);background:#fff;color:var(--text-color);border-radius:12px;cursor:pointer;transition:all .2s ease;min-height:60px}.option-btn.selected{border-color:var(--primary);background:#1d9e751a;color:var(--primary)}.shape-preview{width:32px;height:32px;margin:0 auto}input[type=text]{width:100%;padding:1rem;font-size:1.25rem;border:2px solid var(--border);border-radius:12px;outline:none;transition:border-color .2s;font-family:inherit}input[type=text]:focus{border-color:var(--primary)}.primary-btn{margin-top:1rem;width:100%;padding:1.25rem;font-size:1.5rem;font-weight:700;border:none;border-radius:12px;background-color:var(--primary);color:#fff;cursor:pointer;transition:background-color .2s;min-height:70px}.primary-btn:hover{background-color:var(--primary-hover)}.board-header{padding:4rem 2rem 1rem;text-align:center}#board-title{font-size:2.5rem;font-weight:700}#board-title span{color:var(--primary);word-break:break-word}.board-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 2rem}#tokens-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;max-width:1000px}.token{background:none;border:none;cursor:pointer;width:120px;height:120px;padding:10px;outline:none;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}@media(max-width:768px){.token{width:80px;height:80px}#board-title{font-size:2rem}.setup-container{padding:4.5rem 1rem 2rem}h1{font-size:2rem;margin-bottom:1.5rem}}.token-svg{width:100%;height:100%;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:all .3s}.token.empty .token-svg{stroke:var(--token-empty);fill:transparent}.token.filled .token-svg{stroke:var(--token-filled);fill:var(--token-filled);filter:drop-shadow(0 4px 8px rgba(245,197,24,.4))}#celebration-msg{margin-top:2rem;font-size:3rem;font-weight:700;color:var(--primary);text-align:center;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275)}#celebration-msg.hidden{display:none}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.board-footer{padding:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.secondary-btn{padding:1rem 2rem;font-size:1.25rem;font-weight:600;border:2px solid var(--border);background:#fff;color:var(--text-color);border-radius:12px;cursor:pointer;min-height:60px;transition:background-color .2s}.secondary-btn:hover{background:#f0f0f0}.subtle-link{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#999;text-decoration:none;font-size:.875rem}.board-link{position:static;padding-bottom:1rem}