@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;--cell:64px;--ink:#fff;--sub:#aaa}*{box-sizing:border-box}body{margin:0;background:#000;color:#fff;font:16px/1.5 Plex,sans-serif;height:100dvh;overflow:hidden}button,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button:disabled{opacity:.3}button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}body>header{height:48px}#readout{position:absolute;top:15px;left:50%;transform:translateX(-50%);font:13px Mono,monospace;color:#aaa;white-space:nowrap}.icon{width:48px;height:48px;background:none;border:0;font:28px Plex,sans-serif;color:#aaa;padding:10px;display:inline-grid;place-items:center}.icon:hover,.icon:focus-visible{color:#fff}.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#restart{position:absolute;top:0;left:8px}#shell{position:absolute;inset:60px 12px 110px;display:flex;overflow:auto;overscroll-behavior:contain;padding:12px;touch-action:pan-x pan-y}#stage{position:relative;flex:none;margin:auto;padding:20px 0 70px}#board{width:calc(var(--w)*var(--cell));height:calc(var(--h)*var(--cell));position:relative;outline:1px solid #999;user-select:none;transition:transform .65s cubic-bezier(.3,.7,.2,1)}.square{position:absolute;left:calc(var(--x)*var(--cell));top:calc(var(--y)*var(--cell));width:var(--cell);height:var(--cell);background:#060606;border:0;padding:0;z-index:0}.square.inspected{background:#222}.square.mismatch{background:repeating-linear-gradient(135deg,#222 0 6px,#666 6px 7px)}.seam{position:absolute;background:transparent;border:0;padding:0;z-index:3;touch-action:none;display:block}.seam:before{content:'';position:absolute;background:#666;pointer-events:none}.seam.vertical{left:calc(var(--x)*var(--cell) - 22px);top:calc(var(--y)*var(--cell));width:44px;height:var(--cell)}.seam.horizontal{left:calc(var(--x)*var(--cell));top:calc(var(--y)*var(--cell) - 22px);width:var(--cell);height:44px}.seam.vertical:before{left:21.5px;top:0;bottom:0;width:1px}.seam.horizontal:before{top:21.5px;left:0;right:0;height:1px}.seam[aria-pressed=true]:before{background:#fff}.seam.vertical[aria-pressed=true]:before{width:2px;left:21px}.seam.horizontal[aria-pressed=true]:before{height:2px;top:21px}.seam.redundant:before{background:repeating-linear-gradient(0deg,#fff 0 3px,#222 3px 6px)}.dot{position:absolute;left:calc(var(--cx)*var(--cell));top:calc(var(--cy)*var(--cell));width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);z-index:4;pointer-events:none;box-shadow:0 0 0 2px #060606,0 0 8px #ffffff80,0 0 18px #ffffff30}.shape-ghost,.galaxy-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.shape-ghost rect{fill:#fff2;stroke:#aaa;stroke-width:.025}.galaxy-field{z-index:1;overflow:hidden;pointer-events:none}.galaxy-dust{fill:#fff}.galaxy-arm{fill:none;stroke:#fff;stroke-width:.055;opacity:.045}.galaxy-field:not(.stars) .orbit{animation:none}.stars{animation:galaxy-arrive 1.4s ease-out both}@keyframes galaxy-arrive{from{opacity:.15}to{opacity:1}}.orbit{animation:orbit 40s linear infinite;transform-box:view-box}@keyframes orbit{to{transform:rotate(360deg)}}#stage.solved #board{transform:translateY(-16px)}#next{position:absolute;bottom:0;left:calc(50% - 24px);animation:reveal .7s .2s both;color:#fff}#next[hidden]{display:none}@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}#prompt{position:absolute;bottom:64px;left:24px;right:24px;text-align:center;color:#aaa;font-size:14px;margin:0;pointer-events:none}nav{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));left:8px;right:8px;display:flex;justify-content:space-between}nav>div{display:flex}dialog{background:#000;color:#fff;border:1px solid #aaa;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0}dialog::backdrop{background:#000b}dialog header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid #333}h2{font:16px Mono,monospace;margin:0}form{margin:0}.body{padding:20px 24px}.body p{margin:0 0 16px}footer{border-top:1px solid #333;padding:12px 24px;color:#aaa}a{color:inherit}label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}select{min-height:44px;max-width:65%;border:0;background:#000}hr{border:0;border-top:1px solid #333;margin:20px 0}summary{padding:12px 0;color:#aaa}.muted{font-size:14px;color:#aaa}.turn-demo{position:relative;width:120px;height:150px;margin:20px auto;display:grid;place-items:center}.turn-demo span{width:42px;height:126px;border:1px solid #fff;animation:half-turn 5s ease-in-out infinite}.turn-demo b{position:absolute;font-size:16px}@keyframes half-turn{0%,20%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}:root[data-motion=reduce] *{animation:none!important;transition:none!important}@media(forced-colors:active){.dot{background:CanvasText;box-shadow:0 0 0 4px Canvas}.square{background:Canvas}.seam:before{background:GrayText}.seam[aria-pressed=true]:before{background:CanvasText}}.page-hidden .orbit{animation-play-state:paused}

/* Keep close and navigation available when a small screen needs scrolling. */
dialog[open]{display:flex;flex-direction:column}dialog header,dialog footer{flex:none}.body{overflow:auto;min-height:0}#restart{top:max(0px,env(safe-area-inset-top))}#readout{top:max(15px,env(safe-area-inset-top))}

#stage.solved .seam[aria-pressed=false]:before{opacity:.22}#stage.solved .dot{box-shadow:0 0 7px #fff,0 0 18px #ffffff90,0 0 32px #ffffff30}.page-hidden .galaxy-field{animation-play-state:paused}