*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Quicksand,system-ui,sans-serif;font-weight:600}a{color:inherit;text-underline-offset:3px;text-decoration:underline}a:hover{opacity:.7}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:inherit}input{font-family:inherit}h1,h2,h3{margin:0;font-family:Caprasimo,serif;font-weight:400}p{margin:0}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.display{font-family:Caprasimo,serif;font-weight:400}.muted{color:var(--ink2)}.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}.dots{background-image:radial-gradient(circle, var(--dot) 1px, transparent 1.6px);background-size:8px 8px}.sh2{box-shadow:2px 2px 0 var(--shade), 2px 2px 0 2px var(--edge)}.sh3{box-shadow:3px 3px 0 var(--shade), 3px 3px 0 2px var(--edge)}.sh4{box-shadow:4px 4px 0 var(--shade), 4px 4px 0 2px var(--edge)}.sh5{box-shadow:5px 5px 0 var(--shade), 5px 5px 0 2px var(--edge)}.sh6{box-shadow:6px 6px 0 var(--shade), 6px 6px 0 2px var(--edge)}.sh8{box-shadow:8px 8px 0 var(--shade), 8px 8px 0 2px var(--edge)}.card{background:var(--surface);border:2px solid var(--edge);border-radius:12px}.btn{border:2px solid var(--edge);background:var(--surface);height:44px;color:var(--ink);box-shadow:3px 3px 0 var(--shade), 3px 3px 0 2px var(--edge);white-space:nowrap;border-radius:9px;padding:0 16px;font-size:15px;font-weight:700}.btn:active:not(:disabled){box-shadow:1px 1px 0 var(--shade), 1px 1px 0 2px var(--edge);transform:translate(2px,2px)}.btn:disabled{opacity:.55;cursor:default}.btn.lg{height:54px;box-shadow:4px 4px 0 var(--shade), 4px 4px 0 2px var(--edge);border-radius:10px;padding:0 22px;font-size:17px}.btn.md{border-radius:10px;height:50px;font-size:16px}.btn.flat{box-shadow:none}.btn.yellow{background:var(--band-femman)}.btn.dark{background:var(--edge);color:#fbf8f4}.nav-link:hover{background:var(--surface2)!important}@media (width<=720px){.main-nav{display:none!important}header .wrap{justify-content:space-between}header .btn{padding:0 12px;font-size:14px;height:38px!important}}.link-btn{text-underline-offset:3px;background:0 0;border:none;padding:0;font-weight:700;text-decoration:underline}.field{border:2px solid var(--edge);background:var(--bg);height:50px;color:var(--ink);border-radius:10px;outline:none;width:100%;padding:0 14px;font-size:16px;font-weight:600}.field:focus{border-color:var(--accent)}.tile{border:2px solid color-mix(in srgb, var(--ink) 30%, transparent);background:var(--surface);color:var(--ink);border-radius:8px;justify-content:center;align-items:center;font-weight:700;transition:background-color .3s,color .3s,border-color .3s;display:flex}.tile.typed{border-color:var(--edge);box-shadow:3px 3px 0 var(--edge)}.tile.faint{border-color:color-mix(in srgb, var(--ink) 18%, transparent);background:0 0}.tile.hit{background:var(--hit);color:var(--onHit);border-color:var(--edge)}.tile.near{background:var(--near);color:var(--onNear);border-color:var(--edge)}.tile.miss{background:var(--miss);color:var(--onMiss);border-color:var(--edge)}[data-reduce-motion] .tile{transition:none}.board{background:var(--surface);border:3px solid var(--edge);box-shadow:6px 6px 0 var(--shade), 6px 6px 0 2px var(--edge);border-radius:12px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.toast{background:var(--ink);color:var(--bg);z-index:60;text-align:center;border-radius:10px;max-width:calc(100vw - 32px);padding:12px 18px;font-size:15px;font-weight:700;animation:.15s ease-out toast-in;position:fixed;top:86px;left:50%;transform:translate(-50%)}[data-reduce-motion] .toast{animation:none}.play-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start;gap:28px;display:grid}@media (width<=860px){.play-grid{grid-template-columns:1fr}}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}