.strak{--bg:#160d24;--ink:#f7f1ff;--muted:#c9bdd6;--cream:#fff6e8;--tile-ink:#1c1224;--gold:#ffc857;--line:#f7f1ff29;--surface:#ffffff0f;--board:#1208208c;--up:#ffc857;--right:#ff6b8a;--down:#3ee0d2;--left:#9b8cff;isolation:isolate;height:100dvh;padding:max(.7rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));color:var(--ink);background:var(--bg);flex-direction:column;display:flex;position:relative;overflow:hidden}.strak[data-theme=light]{--bg:#f7f1e6;--ink:#24182c;--muted:#65586e;--cream:#fffaf3;--tile-ink:#24182c;--gold:#c47d12;--line:#24182c24;--surface:#ffffffb8;--board:#ffffffc7;--up:#d48908;--right:#e23062;--down:#0b8c86;--left:#5946d4;background:radial-gradient(circle at 12% 0%, #e2306229, transparent 28%), radial-gradient(circle at 100% 8%, #5946d429, transparent 26%), var(--bg)}.glow{filter:blur(36px);opacity:.5;pointer-events:none;z-index:0;border-radius:50%;width:min(48vw,22rem);height:min(48vw,22rem);position:absolute}.strak[data-theme=light] .glow{opacity:.28}.g1{background:var(--right);top:-8rem;left:-6rem}.g2{background:var(--left);top:-6rem;right:-7rem}.g3{background:var(--down);bottom:-9rem;left:28%}@media (prefers-reduced-motion:no-preference){.g1,.g2,.g3{animation:16s ease-in-out infinite alternate strak-drift}.g2{animation-delay:-5s}.g3{animation-delay:-9s}}@keyframes strak-drift{to{transform:translate(6vw,4vh)scale(1.12)}}.strak-top,.strak-stage,.strak-tools,.strak-note,.strak-map,.strak-pick{z-index:1;position:relative}.strak-top,.strak-note,.strak-tools{flex-shrink:0}.strak-top{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.45rem;display:grid}.strak-heading{min-width:0;margin:0}.strak-title{width:100%;color:inherit;text-align:center;background:0 0;border:none;padding:.15rem .3rem}.strak-name{font-family:var(--font-tile);letter-spacing:-.04em;font-size:clamp(1.55rem,6vw,2.15rem);font-weight:560;line-height:.95;display:block}.strak-count{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem;font-size:.82rem;display:block}.strak-side{justify-items:end;gap:.15rem;display:grid}.strak-side .back-link{background:0 0;border:none;place-items:center;min-height:44px;padding:0 .15rem;display:grid}.tries{gap:.35rem;display:flex}.try{border:1px solid var(--line);background:0 0;border-radius:999px;width:.85rem;height:.85rem}.try.on:first-child{background:var(--up);border-color:#0000}.try.on:nth-child(2){background:var(--right);border-color:#0000}.try.on:nth-child(3){background:var(--down);border-color:#0000}.strak-note{text-align:center;color:var(--muted);margin:.65rem 0 0;line-height:1.4}.strak-stage{flex:1;place-items:center;min-height:0;margin:.6rem 0;display:grid;overflow:hidden}.strak-slab{box-shadow:none;background:0 0;border:none;overflow:visible}.strak-slab[data-hot=up]{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--up) 65%, transparent))}.strak-slab[data-hot=right]{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--right) 65%, transparent))}.strak-slab[data-hot=down]{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--down) 65%, transparent))}.strak-slab[data-hot=left]{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--left) 65%, transparent))}.strak-board{filter:drop-shadow(0 10px 8px #00000038);display:block;overflow:visible}.strak-board.is-locked,.lane-line{pointer-events:none}.lane-line[data-dir=up]{--lane:var(--up)}.lane-line[data-dir=right]{--lane:var(--right)}.lane-line[data-dir=down]{--lane:var(--down)}.lane-line[data-dir=left]{--lane:var(--left)}.lane-line polyline{fill:none;stroke:var(--lane,var(--gold));stroke-linecap:round;stroke-linejoin:round;opacity:.42;stroke-dasharray:10 14}.lane-line.stop polyline{opacity:.9;stroke-dasharray:none}.lane-line circle{fill:var(--lane,var(--gold));opacity:.9}.snake{color:var(--up);cursor:pointer;transform-box:view-box;transform-origin:0 0;outline:none}.snake-ink{filter:drop-shadow(0 2px #00000059)}.snake[data-dir=up]{color:var(--up)}.snake[data-dir=right]{color:var(--right)}.snake[data-dir=down]{color:var(--down)}.snake[data-dir=left]{color:var(--left)}.snake[data-shade="1"] .snake-ink{filter:brightness(1.14)drop-shadow(0 2px #00000059)}.snake[data-shade="2"] .snake-ink{filter:brightness(.9)saturate(1.12)drop-shadow(0 2px #00000059)}.snake.is-queued .snake-ink,.snake.is-queued:hover .snake-ink{filter:brightness(1.2)drop-shadow(0 0 12px)}.snake-edge,.snake-body,.snake-belly,.snake-sheen,.snake-ghost-body{fill:none;stroke-linecap:round;stroke-linejoin:round}.snake-edge{stroke:#140a1c;opacity:.55}.snake-body{stroke:currentColor}.snake-belly{stroke:#fff;opacity:.32}.snake-head{fill:currentColor;stroke:#140a1c;stroke-width:2.5px;stroke-linejoin:round}.snake-sheen{stroke:#fff;stroke-width:3.5px;stroke-linecap:round;opacity:.55;stroke-dasharray:10 90}.snake-ghost{opacity:0;pointer-events:none}.snake-ghost-body{stroke:currentColor}.snake-ghost-head{fill:currentColor}.snake-hit{fill:#0000;stroke:#0000;pointer-events:stroke}.snake-hit+.snake-hit{pointer-events:fill}.snake:focus,.snake:focus-visible{outline:none}.snake:focus-visible .snake-ink{filter:drop-shadow(0 0 8px var(--gold))}@media (hover:hover) and (pointer:fine){.snake:hover .snake-ink{filter:drop-shadow(0 0 10px)}}@media (prefers-reduced-motion:no-preference){.strak-board:not(.is-quiet) .snake-edge,.strak-board:not(.is-quiet) .snake-body,.strak-board:not(.is-quiet) .snake-belly{animation:.7s both strak-draw;animation-delay:calc(var(--i) * 60ms)}.strak-board:not(.is-quiet) .snake-head{animation:.28s both strak-pop;animation-delay:calc(var(--i) * 60ms + .42s)}.strak-board:not(.is-quiet) .snake-sheen{animation:1.5s linear infinite strak-sheen;animation-delay:calc(var(--i) * -.17s)}.lane-line:not(.stop) polyline{animation:.75s linear infinite strak-flow}.snake.is-queued .snake-ink{animation:.9s ease-in-out infinite strak-queued}}@keyframes strak-draw{0%{stroke-dasharray:100;stroke-dashoffset:100px}to{stroke-dasharray:100;stroke-dashoffset:0}}@keyframes strak-pop{0%{opacity:0}to{opacity:1}}@keyframes strak-sheen{to{stroke-dashoffset:-100px}}@keyframes strak-flow{to{stroke-dashoffset:-48px}}.strak-board .snake.is-crawl .snake-edge,.strak-board .snake.is-crawl .snake-body,.strak-board .snake.is-crawl .snake-belly,.strak-board .snake.is-crawl .snake-head,.strak-board .snake.is-crawl .snake-sheen,.strak-board .snake.is-crawl .snake-ghost{animation:none}.snake.is-crawl .snake-ghost-head{opacity:0}.snake.is-crawl .snake-sheen{opacity:.45}.snake.is-flash{animation:.5s strak-shove}.snake.is-flash .snake-ink{animation:.5s strak-glow}.snake.is-hint .snake-ink{animation:.8s ease-in-out 2 strak-hint}@keyframes strak-shove{0%{transform:translate(0)}35%{transform:translate(calc(var(--fx) * var(--cell) * .16), calc(var(--fy) * var(--cell) * .16))}to{transform:translate(0)}}@keyframes strak-glow{35%{filter:brightness(1.8)drop-shadow(0 2px #00000059)}}@keyframes strak-hint{50%{filter:brightness(1.35)drop-shadow(0 0 12px)}}@keyframes strak-queued{50%{filter:brightness(1.35)drop-shadow(0 0 14px)}}.strak-board.is-quiet .snake-sheen,.strak-board.is-quiet .lane-line polyline,.strak-board.is-quiet .snake.is-flash,.strak-board.is-quiet .snake.is-flash .snake-ink,.strak-board.is-quiet .snake.is-hint,.strak-board.is-quiet .snake.is-hint .snake-ink,.strak-board.is-quiet .snake.is-queued .snake-ink,.strak-board.is-quiet .snake-edge,.strak-board.is-quiet .snake-body,.strak-board.is-quiet .snake-belly,.strak-board.is-quiet .snake-head{animation:none}.strak-board.is-quiet .snake-head{opacity:1}.strak-tools{flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem;display:flex}.strak-tools button,.strak-banner button,.strak-sheet button.wide{border:1px solid var(--line);background:var(--surface);border-radius:999px;min-height:48px;padding:.55rem .95rem}.strak-tools button.on,.strak-banner button.go{background:var(--cream);color:var(--tile-ink);border-color:#0000;font-weight:700}.strak-tools button:disabled{opacity:.4}.streak{font-variant-numeric:tabular-nums;place-items:center;min-height:48px;padding:0 .4rem;font-weight:700;display:grid}.streak[data-dir=up]{color:var(--up)}.streak[data-dir=right]{color:var(--right)}.streak[data-dir=down]{color:var(--down)}.streak[data-dir=left]{color:var(--left)}.strak-help{text-align:center;min-width:0;color:var(--muted);flex:1 0 100%;margin:0;font-size:.92rem;line-height:1.35}.strak-banner{z-index:5;text-align:center;background:color-mix(in srgb, var(--bg) 78%, transparent);align-content:center;place-items:center;gap:.8rem;padding:1rem;display:grid;position:absolute;inset:0}.strak-banner h2{max-width:12ch;font-family:var(--font-tile);letter-spacing:-.045em;color:var(--ink);margin:0;font-size:clamp(2.4rem,9vw,4.2rem);font-weight:560;line-height:.9}@supports ((-webkit-background-clip:text) or (background-clip:text)){.strak-banner h2{background:linear-gradient(105deg, var(--up), var(--right) 40%, var(--down) 70%, var(--left));color:#0000;-webkit-background-clip:text;background-clip:text}}.strak-banner .actions{justify-content:center;gap:.5rem;display:flex}.strak-pick{flex:1;align-content:center;justify-items:center;gap:1.15rem;min-height:0;padding:.5rem 0 1.5rem;display:grid}.strak-pick h2{text-align:center;max-width:12ch;font-family:var(--font-tile);letter-spacing:-.045em;margin:0;font-size:clamp(2.6rem,11vw,4.4rem);font-weight:560;line-height:.9}.strak-pick p{text-align:center;max-width:22rem;color:var(--muted);margin:0;line-height:1.4}.difficulty-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;width:min(100%,26rem);display:grid}.difficulty-row button{border:1px solid var(--line);background:var(--surface);min-height:4.6rem;font-family:var(--font-tile);letter-spacing:-.04em;border-radius:1.2rem;font-size:2.2rem;font-weight:560;line-height:1}.difficulty-row button:nth-child(6n+1){color:var(--up)}.difficulty-row button:nth-child(6n+2){color:var(--right)}.difficulty-row button:nth-child(6n+3){color:var(--down)}.difficulty-row button:nth-child(6n+4){color:var(--left)}.difficulty-row button:nth-child(6n+5){color:var(--gold)}.difficulty-row button:nth-child(6n+6){color:var(--right)}.difficulty-row button.on{background:var(--cream);color:var(--tile-ink);border-color:#0000}.difficulty-row.compact{grid-template-columns:repeat(6,minmax(0,1fr));width:100%}.difficulty-row.compact button{border-radius:.85rem;min-height:2.75rem;font-size:1.25rem}.strak-map{flex:1;align-content:start;gap:.45rem;min-height:0;margin-top:.8rem;display:grid;overflow:auto}.strak-map ol{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.path-row{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:1rem;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;width:100%;min-height:52px;padding:.55rem .8rem;display:grid}.path-row.now{border-color:color-mix(in srgb, var(--gold) 70%, transparent)}.path-row .idx{font-variant-numeric:tabular-nums;width:1.8rem;color:var(--muted)}.path-row strong{font-family:var(--font-tile);font-size:1.25rem;font-weight:560}.path-row .solved{color:var(--down);letter-spacing:.08em;text-transform:uppercase;font-size:.82rem}.strak-map .wide,.strak-sheet button.wide{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:100%;min-height:48px;margin-top:.35rem}.strak-sheet{z-index:6;background:#0a06129e;place-items:end center;padding:1rem;display:grid;position:fixed;inset:0}.strak-sheet>div{border:1px solid var(--line);background:color-mix(in srgb, var(--bg) 92%, white);border-radius:1.4rem;gap:.85rem;width:min(28rem,100%);max-height:min(34rem,100dvh - 2rem);padding:1rem 1rem 1.15rem;display:grid;overflow:auto}.strak-sheet h2{font-family:var(--font-tile);margin:0;font-size:1.8rem;font-weight:560}.strak button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.sr{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:700px){.difficulty-row{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,36rem)}.difficulty-row button{min-height:4.2rem}}@media (min-width:800px){.strak{padding-top:1.2rem}.strak-sheet{align-items:center}}@media (prefers-reduced-motion:reduce){.snake.is-shake,.snake.is-flash,.snake.is-hint,.snake.is-queued .snake-ink,.snake-edge,.snake-body,.snake-belly,.snake-head,.snake-sheen{animation:none}.snake.is-hint{filter:drop-shadow(0 0 8px)}.snake-head{opacity:1}}
