:root{color-scheme:dark;--ink:#f4edff;--muted:#c6bbda;--base:#222039;--panel:#302b4a;--line:#6b5e87;--gold:#f5dca0;--draft:#f5dca0;font-family:system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 25% 4%,#42345b,var(--base) 70%);color:var(--ink)}main{width:min(100%,920px);margin:auto;padding:14px 24px 46px}
header,.round,.draft,.actions{display:flex;align-items:center;gap:8px}header,.round{justify-content:space-between}header{border-bottom:1px solid var(--line);padding-bottom:10px;font-size:.77rem;color:var(--muted)}header>div{display:flex;align-items:center;gap:8px}a{color:var(--gold);text-underline-offset:4px}
.intro{padding:23px 0 13px}.intro h1{font:400 clamp(2.9rem,8vw,5.5rem)/.94 "Instrument Serif",Georgia,serif;letter-spacing:-.07em;margin:0}.intro h1 em{font-weight:400;color:var(--gold)}.intro p,p,footer{color:var(--muted);font-size:.84rem;line-height:1.48;margin:7px 0}
.round{padding:7px 0 13px;align-items:end}.round p{margin:2px 0 0}.round strong{font:400 1.25rem Georgia,serif}.round label{display:grid;gap:3px;font-size:.69rem;color:var(--muted)}select,button{color:var(--ink);background:#42395c;border:1px solid var(--line);border-radius:6px;font:inherit;min-height:44px;padding:8px 10px}select,button{font-size:.82rem}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--gold)}button:disabled{opacity:.48;cursor:default}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);color:#2e2334;border-color:var(--gold);font-weight:750}
#layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px;align-items:start}.play,.side{min-width:0}.side{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:12px}
#board{position:relative;display:grid;grid-template-columns:repeat(var(--size,6),1fr);grid-template-rows:repeat(var(--size,6),1fr);gap:5px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid var(--line);padding:5px;border-radius:9px;background:#211d36}
.tile{display:grid;place-items:center;position:relative;z-index:1;min-height:0;padding:0;border:1px solid #6b5e87;background:#443a60;border-radius:7px;font:700 clamp(1.1rem,4.7vw,2.15rem)/1 "IBM Plex Mono",ui-monospace,monospace}.tile.selected,.tile.claimed{background:var(--snake);border-color:var(--snake);color:#241d2a}.tile.selected{--snake:var(--draft)}.tile.flagged{box-shadow:inset 0 0 0 3px #982d36}.tile.start::before{position:absolute;content:'';width:5px;height:5px;border-radius:50%;background:currentColor;top:6px;left:6px;opacity:.65}.tile:focus-visible{z-index:3;outline-offset:1px}.bridge{position:absolute;z-index:0;pointer-events:none;background:var(--snake);height:8px;border-radius:9px;transform-origin:0 50%}
.draft{margin-top:9px;min-width:0}.draft output{flex:1;min-width:0;overflow-wrap:anywhere;font:.89rem ui-monospace,monospace;color:var(--gold)}.draft button{flex-shrink:0}#status{min-height:2.6em}.actions{flex-wrap:wrap}.side h2{font:400 1.25rem Georgia,serif;margin:13px 0 7px}#placed{list-style:none;margin:0;padding:0}#placed li{display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid #584d70;padding:4px 0}#placed li button{font-size:.72rem}#placed code{color:var(--snake);font-size:.86rem}#placed .decoy code{text-decoration:line-through}details{border-top:1px solid #5e5278;padding-top:10px;margin-top:10px;font-size:.8rem}summary{cursor:pointer}footer{margin-top:18px;padding-top:10px;border-top:1px solid var(--line);font-size:.72rem}
[hidden]{display:none!important}@media(max-width:680px){main{padding:10px 12px 30px}.intro{padding-top:17px}.intro h1{font-size:clamp(2.5rem,10vw,3.75rem)}#layout{grid-template-columns:1fr;gap:8px}.side{padding:9px}.draft button{padding:7px 9px}.draft output{font-size:.8rem}.tile{border-radius:5px}#board{gap:4px;padding:4px}.round{padding-bottom:8px}.round label{font-size:.63rem}.round select{max-width:166px}}

#board{--wrong:#f4a7ad}
.tile.selected.rejected{background:var(--wrong);border-color:var(--wrong)}
#board.solved{border-color:#b9e2cf;box-shadow:0 0 0 2px #b9e2cf38}
#status[data-tone="wrong"]{color:#ffc3ca}
#status[data-tone="right"]{color:#b9e2cf}
#status[data-tone="solved"]{color:#b9e2cf;font-weight:750}

.confetti{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;border-radius:inherit}
.confetti i{position:absolute;top:50%;left:50%;width:5px;height:8px;border-radius:2px;opacity:0}
.confetti i:nth-child(3n){width:6px;height:6px;border-radius:50%}

/* Sumthing. */
:root{
  --ink:#f4f6ff;--muted:#b7c0d9;--base:#171b29;--panel:#202638;
  --line:#45516b;--gold:#b9f98b;--draft:#d5f995;
  font-family:"Instrument Sans",system-ui,sans-serif;
}
body{background:radial-gradient(ellipse at 16% 0%,#2c3750,transparent 62%),var(--base)}
main{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
.studio{font:700 .86rem ui-monospace,monospace;text-decoration:none;color:var(--ink)}
.studio span{color:var(--gold)}
.intro{display:flex;align-items:center;gap:14px;padding:20px 0 14px}
.mark{width:64px;height:64px;background:#202638;border:1px solid var(--line);border-radius:17px}
.intro h1{font:850 clamp(2.45rem,7vw,4.45rem)/.92 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.082em}
.intro h1 span{color:var(--gold)}
.intro p{margin:6px 0 0}
.round strong,.side h2{font:750 1rem "Instrument Sans",system-ui,sans-serif}
.round label{font-weight:650}
select,button{background:#2b344a}
.primary{color:#18271b;background:var(--gold)}
#board{background:#121624;border-radius:12px}
.tile{background:#303a53;border-color:#485775}
.tile.selected{background:var(--draft);border-color:var(--draft)}
#board.solved{border-color:var(--gold);box-shadow:0 0 0 2px #b9f98b44}
#status[data-tone="right"],#status[data-tone="solved"]{color:var(--gold)}
#placed li,details{border-color:var(--line)}
#board[aria-busy="true"]{overflow:hidden}
.loading-cell{border:1px solid #394861;border-radius:6px;background:#253048}
#install-help{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;width:min(90%,390px)}
#install-help h2{margin:0 0 8px}
#install-help form{margin-top:14px}
#install-help::backdrop{background:#101422cc}
@media(max-width:680px){
  .intro{gap:10px;padding:14px 0 10px}
  .mark{width:51px;height:51px;border-radius:12px}
  .intro p{font-size:.77rem}
}
@media(prefers-reduced-motion:no-preference){
  .loading-cell{animation:loading-coil 840ms ease-in-out infinite alternate;animation-delay:calc(var(--step) * 42ms)}
  @keyframes loading-coil{to{background:#536f65;border-color:#749584}}
}