/* Constellations. Luke Steuber. */
@font-face{font-family:Plex;src:url(fonts/IBMPlexSans-400.woff2)}
@font-face{font-family:Mono;src:url(fonts/IBMPlexMono-500.woff2)}
:root{color-scheme:dark;--bg:#070b14;--ink:#f3f3f3;--star:#fff;--sub:#999;--line:#78879d;--thread:#ecf5ff;--wash:#ffffff0d;--scrim:#000b;font-family:Plex,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;overflow:hidden;height:100dvh}button,select,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.25;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0}
#sky,#sky-shimmer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#sky-shimmer{background:linear-gradient(125deg,transparent 43%,#d9e6ff16 50%,transparent 57%);background-size:300% 100%;opacity:0}#sky-shimmer.active{animation:sky-shimmer 1.2s ease-in-out 1}@keyframes sky-shimmer{0%{opacity:0;background-position:150% 0}25%,75%{opacity:1}100%{opacity:0;background-position:-50% 0}}
.icon{display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;border:0;padding:12px;background:none;color:var(--sub);border-radius:0}.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}@media(hover:hover) and (pointer:fine){.icon:hover:not(:disabled){color:var(--ink);background:var(--wash)}}.icon:active:not(:disabled){transform:scale(.94)}
.restart{position:fixed;top:max(4px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));z-index:5}#readout{position:fixed;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);height:44px;padding:0 8px;border:0;background:none;color:var(--sub);font:14px Mono,monospace;white-space:nowrap;z-index:5}
#stage{position:fixed;inset:max(64px,env(safe-area-inset-top)) 4px max(116px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}#board{position:relative;flex:none;touch-action:pinch-zoom;isolation:isolate}#threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}#stars{position:absolute;inset:0;pointer-events:none}
.thread{stroke:var(--thread);stroke-width:1.6;stroke-linecap:round;fill:none;opacity:.6;filter:drop-shadow(0 0 2px #b2d1ff66)}.thread.complete{opacity:1}.thread.guide{stroke-dasharray:2 7;stroke-width:1}.thread.pending{stroke:var(--ink);stroke-dasharray:4 5}.thread.removing{stroke-dasharray:1 4;opacity:.4}.thread.hint-line{stroke:var(--ink);stroke-width:2;stroke-dasharray:5 4}.cross-mark{stroke:var(--ink);stroke-width:2;fill:none}.thread.hover-route{stroke-dasharray:2 6;opacity:.5}
.star{position:absolute;width:var(--target);height:var(--target);margin:calc(var(--target)/-2) 0 0 calc(var(--target)/-2);border:0;border-radius:50%;padding:0;background:none;pointer-events:auto;z-index:2;touch-action:pinch-zoom;color:var(--star)}.star.complete{color:var(--ink)}.star svg{width:100%;height:100%;overflow:visible;display:block}.star .starlight{opacity:var(--light,.87)}.star.satisfied .starlight{opacity:.94}.star .halo{opacity:var(--halo,.7);transform-box:fill-box;transform-origin:center}.star.satisfied .halo{opacity:.78}.star.complete .halo{filter:brightness(1.3)}.star .beam{fill:#ecf5ff;transform-box:fill-box;transform-origin:0 50%;transition:transform .34s cubic-bezier(.3,.7,.25,1),opacity .34s}.star .ray.met .beam{transform:scaleX(var(--tuck));opacity:0}.star .stub{fill:none;stroke:#ecf5ff;stroke-width:var(--stub-width);stroke-linecap:round;opacity:.5}.star .facet{fill:#dce8fb;fill-opacity:.06;stroke:#8e9cb2;stroke-width:var(--mark-line);stroke-linejoin:round;transition:fill-opacity .3s,stroke .3s}.star .facet.met{fill:#f4f8ff;fill-opacity:1;stroke:#f4f8ff}.star .orbit{fill:none;stroke:#8a97ac;stroke-width:var(--mark-line);transition:stroke .3s,stroke-width .3s}.star .orbit.met{stroke:#f4f8ff;stroke-width:var(--lit);opacity:var(--fall)}[data-look=rings] .star.selected .state-ring{stroke-width:2}.star .thorns{fill:#f4f8ff;stroke:var(--bg);stroke-width:.8;stroke-linejoin:round;paint-order:stroke}.star .state-ring{fill:none;stroke:transparent;stroke-width:1.3}.star.selected .state-ring{stroke:var(--ink)}.star.hint-target .state-ring{stroke:var(--ink);stroke-dasharray:2 3;stroke-width:2}.star.conflict .state-ring,.star.refused .state-ring{stroke:var(--ink);stroke-dasharray:5 3;stroke-width:2}.star .conflict-mark{display:none;stroke:var(--bg);stroke-width:1.6;fill:none}.star.conflict .conflict-mark{display:block}.star:focus-visible{outline-offset:1px}.star.lock-source .state-ring{stroke:var(--star);stroke-dasharray:1 3}.star.overfull:not(.selected):not(.hint-target):not(.refused) .state-ring{stroke:transparent}#board.solved .star{pointer-events:none}#board.solved .star .state-ring{stroke:transparent}
.toolbar{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;z-index:5;pointer-events:none}.toolbar>div{display:flex;pointer-events:auto}#completion{position:fixed;left:50%;transform:translateX(-50%);bottom:max(62px,calc(env(safe-area-inset-bottom) + 62px));width:48px;height:48px;z-index:5}#next-btn{color:var(--ink)}
dialog{background:var(--bg);color:var(--ink);border:1px solid var(--sub);border-radius:0;padding:0;width:min(440px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto}dialog::backdrop{background:var(--scrim)}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 24px;border-bottom:1px solid var(--line)}.sheet-head h2{font:500 16px Mono,monospace;margin:0}.sheet-head form{margin:0}.sheet-body{padding:20px 24px}.sheet-body p{font-size:1rem;line-height:1.5}.sheet-body h3{font:500 14px Mono,monospace;margin:0 0 16px}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}.setting select{max-width:60%;min-height:44px;font:inherit;background:var(--bg);color:inherit;border:1px solid var(--line);padding:8px}.setting input{width:24px;height:24px;accent-color:var(--ink)}dialog footer{padding:14px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}#boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}#boards button{height:88px;min-width:44px;position:relative;border:1px solid var(--line);padding:8px;background:none}#boards button[aria-current=true]{border-color:var(--ink);outline:1px solid var(--ink);outline-offset:2px}#boards svg{width:100%;height:48px;fill:var(--ink)}#boards span{font:12px Mono,monospace;color:var(--sub)}#boards .check{position:absolute;right:4px;bottom:6px;width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.5}
:root[data-motion=still] *, .page-hidden *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-height:520px) and (min-width:560px){#stage{inset:58px 132px 8px 8px}.toolbar{left:auto;right:max(8px,env(safe-area-inset-right));top:8px;bottom:max(8px,env(safe-area-inset-bottom));flex-direction:column}.toolbar>div{flex-direction:column}#completion{top:50%;bottom:auto;left:auto;right:76px;transform:translateY(-50%)}}
@media(forced-colors:active){:root{--bg:Canvas;--ink:CanvasText;--star:CanvasText;--sub:CanvasText;--line:GrayText;--thread:CanvasText}.star svg,#threads{forced-color-adjust:none}.star .core,.star .beam,.star .facet.met,.star .thorns{fill:CanvasText}.star .stub{stroke:CanvasText}.star .facet{fill:Canvas;stroke:CanvasText}.star .orbit{stroke:GrayText}.star .orbit.met{stroke:CanvasText}.star:focus-visible{outline-color:Highlight}#sky,#sky-shimmer{display:none}}