:root{--ink:#263c52;--accent:#6573c9;--paper:#fff8e9;color:var(--ink);background:#e2edf3}
body{background:radial-gradient(ellipse at 15% 18%,#fff8e5aa,transparent 65%),linear-gradient(135deg,#e2eef6,#d6e5ee)}
.rail{padding:22px;background:#fff8e9;border:2px solid #fffdf4;border-radius:28px;box-shadow:0 7px 0 #7390a125,0 20px 40px #52697918}
h1{font-size:29px;color:#273d54}h1 span{color:#786ac3}.rule{color:#536075;font-weight:600}
button{background:#fffaf0;border:2px solid #c9cbdf;box-shadow:0 2px 0 #48627d22}button:hover:not(:disabled){background:#edf2ff}nav{background:#dedfea}nav button{box-shadow:none}nav .active{color:#4c4e8a;background:#fff9e9}.primary{background:#6774c3;border-color:#5662ae;color:white}
#board{border:3px solid #567089;border-radius:18px;background:#e7dbc3;box-shadow:0 0 0 3px #fffbeb,0 8px 0 #54708b30,0 24px 40px #3f5e7a25;isolation:isolate}
.cell,.cell.path-used,.cell.solved{border:1px solid #ccbfa655;border-radius:6px;background:radial-gradient(circle at 1px 1px,#bdab8c1f .7px,transparent 1px),linear-gradient(140deg,#fffbee,#f1e6d0)!important;background-size:5px 7px,auto!important;box-shadow:inset 2px 2px 2px #fff9,inset -2px -3px 5px #745f3520}
.cell.selected{box-shadow:inset 0 0 0 3px #c8aa67}.cell:focus-visible{outline-color:#405b90}.path-art{overflow:hidden}
.number-token .token-content{transform-box:fill-box;transform-origin:center}.token-pop .token-content{animation:token-pop .25s ease-out}.next-token{filter:drop-shadow(0 0 4px #fffef6)}
.line-tip-halo{transform-box:fill-box;transform-origin:center;animation:tip-pulse 1.8s ease-in-out infinite}.line-tip{filter:drop-shadow(0 0 6px #fff8ae)}
.solve-wave{opacity:0;stroke-dasharray:12 88;stroke-dashoffset:12}.done .solve-wave{animation:line-sweep 1.05s ease-out both}.done .tube-body{animation:line-glow 1.05s ease-in-out both}
.line-sparks{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.line-sparks i{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:2px;background:#fff7a4;box-shadow:0 0 6px #ddbd57;animation:line-spark .7s var(--delay) both ease-out}
.line-badge{width:90px;height:90px;flex:none}.desktop-note{gap:12px;margin:18px 0;color:#6b7895}.desktop-note p{font-size:16px;line-height:1.4}.result-star .line-badge{width:120px;height:120px}.progress{color:#445b75}#status{color:#536375}#status.error{color:#a33739}dialog{background:#fff8e9;border:3px solid #b8b9d8;color:#263c52;box-shadow:0 10px 0 #3d486733,0 24px 80px #24384d55}
@keyframes token-pop{0%{scale:1}45%{scale:1.2}100%{scale:1}}@keyframes tip-pulse{50%{scale:1.2;opacity:.4}}@keyframes line-sweep{10%{opacity:.9}85%{opacity:.85}100%{stroke-dashoffset:-100;opacity:0}}@keyframes line-glow{50%{filter:drop-shadow(0 0 9px #fbed9c)}}@keyframes line-spark{0%{opacity:0;transform:scale(0) rotate(45deg)}30%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(.2) rotate(125deg)}}
@media(min-width:741px){#app{grid-template-columns:340px var(--board);gap:28px}:root{--board:min(900px,calc(100dvh - 84px),calc(100vw - 416px))}}
@media(min-width:741px) and (max-height:540px){.rail{padding:16px}.desktop-note{display:none}h1{font-size:25px}#app{grid-template-columns:310px var(--board);gap:20px;padding:14px}:root{--board:min(calc(100dvh - 74px),calc(100vw - 370px))}}
@media(max-width:740px){.rail{display:contents}.rule{font-weight:500}#board{border-radius:14px}.cell{border-radius:4px}}