:root{color-scheme:dark;--ink:#101727;--paper:#e9dcc0;--muted:#9aa7b4;--amber:#e4b774;--edge:#303946;font-family:'DM Mono',monospace;font-size:16px;background:var(--ink);color:var(--paper)}
*{box-sizing:border-box}body{margin:0;min-height:100svh}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.viewport:focus-visible{outline:2px solid var(--amber);outline-offset:6px}button{touch-action:manipulation}.masthead{max-width:1500px;margin:auto;padding:25px 40px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}.street-name{display:flex;align-items:center;gap:14px;font-size:16px;letter-spacing:.16em;text-decoration:none;font-weight:500}.street-mark{width:38px;height:42px;display:grid;place-items:center;border:1px solid #708479;background:#20392f;box-shadow:inset 0 0 0 3px #15231f;color:#e0dfc4;font-size:25px;font-family:Georgia,serif}.street-address{display:block;font-size:12px;letter-spacing:.23em;color:var(--muted);margin-top:7px}.welcome{margin:0;font-family:'Space Grotesk',sans-serif;font-size:17px;line-height:1.55;text-align:right}.welcome span{display:block;font-size:15px;color:var(--muted)}.welcome a{color:var(--paper);text-decoration-color:#62776f;text-underline-offset:4px}.viewport{overflow-x:auto;overflow-y:hidden;margin:0 auto;max-width:1500px;scrollbar-width:thin;scrollbar-color:#516166 #121b28;position:relative;overscroll-behavior-x:contain}.street{position:relative;width:100%;aspect-ratio:3/2;isolation:isolate;overflow:hidden;background:#152139}.backdrop{display:block;width:100%;height:100%;image-rendering:pixelated;user-select:none}.door-layer,#life{position:absolute;inset:0;width:100%;height:100%}#life{pointer-events:none;z-index:3;image-rendering:pixelated}.door-layer{z-index:4;pointer-events:none}.door{position:absolute;pointer-events:auto;display:block;text-decoration:none;background:transparent;border:0;transform:translate(-50%,-100%);width:6%;height:13%;cursor:pointer}.door::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:background .2s,border-color .2s}.door:hover::after,.door:focus-visible::after{border-color:#f0c88880;background:#e5b36614;box-shadow:0 0 18px #ffda781a}.door-label{position:absolute;left:50%;top:-80%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(12px,1.12vw,17px);font-weight:500;letter-spacing:.025em;text-shadow:0 2px 2px #080f1d,1px 0 #080f1d,-1px 0 #080f1d;line-height:1.6;padding:4px 10px;border:1px solid #cfb48135;background:#111b25e6;box-shadow:0 3px 0 #080f1950}.door-label small{display:block;font-size:12px;text-align:center;font-weight:400;letter-spacing:.09em;color:#9eabb2}.door:hover .door-label,.door:focus-visible .door-label{color:#ffe5aa;border-color:#e4b77499}.door[data-id="mandelbrot"] .door-label{color:#c6b5fb;border-color:#a089db55}.door[data-id="cqtodo"] .door-label{color:#a1aeb2}.cat-target{position:absolute;z-index:5;width:64px;height:50px;transform:translate(-50%,-100%);background:transparent;border:0}.cat-tip{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 12px;background:#142030;border:1px solid #c8bc9366;color:#ecd9ad;font-size:14px;opacity:0;pointer-events:none}.cat-target:hover .cat-tip,.cat-target:focus-visible .cat-tip{opacity:1}.street-footer{max-width:1500px;display:flex;justify-content:space-between;align-items:center;margin:auto;padding:20px 40px 12px;gap:20px}.hint{font-size:13px;color:var(--muted);margin:0;line-height:1.8}kbd{font:inherit;display:inline-block;margin-right:3px;color:#b6c1c9} .divider{padding:0 15px}.mobile-hint{display:none}.controls{display:flex;gap:20px;flex-shrink:0}.controls button{background:none;border:0;padding:6px 0;font-size:13px;color:#aebbc4;border-bottom:1px solid #59666d}.controls button[aria-pressed="true"]{color:var(--amber)}.status{font-size:13px;color:#9caaaf;max-width:1500px;margin:0 auto;padding:0 40px 20px;min-height:40px}.arrival{position:absolute;border:1px solid #f1dbaa99;width:20px;height:9px;border-radius:50%;pointer-events:none;opacity:0;z-index:2;transform:translate(-50%,-50%)}.arrival.ping{animation:ping .7s ease-out}.noscript{padding:30px;line-height:2}.transition{position:fixed;inset:0;z-index:20;background:#060813;display:grid;place-items:center}.transition[hidden]{display:none}.transition canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated}.transition p{position:relative;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:32px;padding:32px;background:#080d21bb;border:1px solid #a08bce44}.transition a,.transition button{display:block;font:14px 'DM Mono',monospace;margin:24px auto 0}.transition button{background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:#ccd2dc}.street.falling .backdrop{animation:collapse 1.2s ease-in forwards;transform-origin:49% 60%}@keyframes collapse{to{transform:scale(.02) rotate(120deg);filter:brightness(.1);opacity:0}}@keyframes ping{from{opacity:.9;scale:.5}to{opacity:0;scale:2}}@media(min-width:1000px){.viewport{max-width:min(1500px,calc((100svh - 185px)*1.5));min-width:920px}}@media(max-width:800px){.masthead{padding:20px 20px}.street-name{font-size:14px;gap:10px;letter-spacing:.1em}.street-mark{width:32px;height:36px;font-size:22px}.welcome{font-size:15px}.welcome span{font-size:14px}.street{width:max(100%,960px)}.viewport{max-height:calc(100svh - 205px);min-height:390px}.street{width:max(100%,calc((100svh - 205px)*1.5),760px)}.door-label{font-size:14px}.street-footer{padding:15px 20px 10px;align-items:flex-start;flex-wrap:wrap;gap:10px}.status{padding:0 20px 16px;font-size:12px;line-height:1.6}.desktop-hint{display:none}.mobile-hint{display:inline}.controls{gap:18px}.controls button{font-size:12px}.hint{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}