:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e7e6cf;background:#0a121a;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{min-height:100vh;image-rendering:pixelated;background:#0a121a url(./page-bg-v1-640x360-n_R8JqJU.webp) 50%/cover no-repeat;grid-template-columns:minmax(0,1fr);place-items:center;margin:0;padding:24px 16px;display:grid}@media (hover:hover) and (pointer:fine){body{background-attachment:fixed}}main{isolation:isolate;text-align:center;width:min(100%,960px);min-width:0;position:relative}main:before{content:"";z-index:-1;pointer-events:none;background:#081018cc;border:2px solid #2b2a6b;position:absolute;inset:-16px}header{margin-bottom:20px}h1{margin:0;line-height:0}h1 img{width:320px;max-width:100%;height:auto;image-rendering:pixelated;margin:6px auto 0;display:block}p{margin:10px 0}.eyebrow{color:#64d6c7;letter-spacing:.16em;font-size:12px}#game{aspect-ratio:16/9;background:#213f4b;outline:2px solid #5a55c8;width:100%;overflow:hidden}#game:focus-visible{outline:3px solid #edc76c}canvas{image-rendering:pixelated;display:block}.controls{margin-top:20px;line-height:1.8}.controls strong{color:#edc76c}.note{color:#b4c4c4;font-size:13px;line-height:1.6}@media (height<=540px){body{padding:16px}header{margin-bottom:8px}h1 img{width:160px;margin-top:0}.eyebrow,.note{display:none}main{max-width:720px}}h2{margin:10px 0;font-size:clamp(18px,3vw,24px)}#navigation{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:10px 12px;margin:12px 0 18px;display:flex}button,#settings summary{--accent:#64d6c7;--face:#1d1b4a;--face-hover:#2b2870;--edge:2px;--o:10px;--o2:5px;--i:calc(var(--o) - var(--edge));--i2:calc(var(--i) / 2);isolation:isolate;color:#e7e6cf;min-height:44px;font:inherit;letter-spacing:.02em;cursor:pointer;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent));background:0 0;border:0;padding:10px 20px;font-weight:600;transition:transform .12s cubic-bezier(.23,1,.32,1);position:relative}button:before,#settings summary:before,button:after,#settings summary:after{content:"";z-index:-1;transition:background-color .12s cubic-bezier(.23,1,.32,1),box-shadow .12s cubic-bezier(.23,1,.32,1);position:absolute}button:before,#settings summary:before{background:var(--accent);clip-path:polygon(var(--o) 0, calc(100% - var(--o)) 0, calc(100% - var(--o)) var(--o2), calc(100% - var(--o2)) var(--o2), calc(100% - var(--o2)) var(--o), 100% var(--o), 100% calc(100% - var(--o)), calc(100% - var(--o2)) calc(100% - var(--o)), calc(100% - var(--o2)) calc(100% - var(--o2)), calc(100% - var(--o)) calc(100% - var(--o2)), calc(100% - var(--o)) 100%, var(--o) 100%, var(--o) calc(100% - var(--o2)), var(--o2) calc(100% - var(--o2)), var(--o2) calc(100% - var(--o)), 0 calc(100% - var(--o)), 0 var(--o), var(--o2) var(--o), var(--o2) var(--o2), var(--o) var(--o2));inset:0}button:after,#settings summary:after{inset:var(--edge);background:var(--face);clip-path:polygon(var(--i) 0, calc(100% - var(--i)) 0, calc(100% - var(--i)) var(--i2), calc(100% - var(--i2)) var(--i2), calc(100% - var(--i2)) var(--i), 100% var(--i), 100% calc(100% - var(--i)), calc(100% - var(--i2)) calc(100% - var(--i)), calc(100% - var(--i2)) calc(100% - var(--i2)), calc(100% - var(--i)) calc(100% - var(--i2)), calc(100% - var(--i)) 100%, var(--i) 100%, var(--i) calc(100% - var(--i2)), var(--i2) calc(100% - var(--i2)), var(--i2) calc(100% - var(--i)), 0 calc(100% - var(--i)), 0 var(--i), var(--i2) var(--i), var(--i2) var(--i2), var(--i) var(--i2))}button:active,#settings summary:active{transform:scale(.97)}button[aria-pressed=true],#settings[open]>summary{--edge:3px}button[aria-pressed=true]:after,#settings[open]>summary:after{background:color-mix(in srgb, var(--accent) 24%, var(--face));box-shadow:inset 0 -5px 0 var(--accent)}button:focus-visible,#settings summary:focus-visible{outline-offset:4px;outline:3px solid #f4ecc8}button[hidden]{display:none}@media (hover:hover){button:hover:after,#settings summary:hover:after{background:var(--face-hover)}button[aria-pressed=true]:hover:after,#settings[open]>summary:hover:after{background:color-mix(in srgb, var(--accent) 32%, var(--face-hover))}}[data-view=route]{--accent:#3ee8d4}[data-view=guardian]{--accent:#ff4fb8}#retry{--accent:#ff8f3f}#choose{--accent:#edc76c}#settings summary,#settings button{--accent:#9b8cff;--face:#211e55;--face-hover:#302c7c}#settings{max-width:100%}#settings summary{justify-content:center;align-items:center;gap:10px;list-style:none;display:flex}#settings summary::-webkit-details-marker{display:none}#settings .chevron{border-bottom:2px solid;border-right:2px solid;width:8px;height:8px;transition:transform .12s cubic-bezier(.23,1,.32,1);transform:translateY(-2px)rotate(45deg)}#settings[open] .chevron{transform:translateY(2px)rotate(-135deg)}.settings-panel{gap:10px;margin-top:12px;display:grid}#view-result{line-height:1.5}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){button,#settings summary,#settings .chevron,button:before,#settings summary:before,button:after,#settings summary:after{transition:none}button:active,#settings summary:active{transform:none}}.device-notice{color:#f4ecc8;overflow-wrap:anywhere;background:#122e36;border:1px solid #edc76c;margin:0 0 16px;padding:12px;line-height:1.5}.device-notice[hidden]{display:none}