@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-mono-regular.ttf') format('truetype')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/roboto-mono-bold.ttf') format('truetype')}
:root{color-scheme:dark;--paper:#ececee;--muted:#99979f;--accent:#b6a3da}
*{box-sizing:border-box}body{margin:0;background:#222227;color:var(--paper);font:13px/1.7 'Roboto Mono',monospace}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
.screen{position:relative;height:100vh;height:100dvh;min-height:240px;overflow:hidden;border:15px solid #222227;background:#29292f;isolation:isolate}#network,.vignette{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.vignette{z-index:-1;background:radial-gradient(ellipse at center,rgba(41,41,47,.72) 0%,rgba(41,41,47,.2) 45%,rgba(24,24,29,.25) 100%);pointer-events:none}
header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:32px 50px;z-index:3}.logo{font-size:21px;font-weight:700;letter-spacing:.04em}.logo-dot{color:var(--accent)}nav{display:flex;gap:34px;align-items:center}nav a,nav button{padding:8px 0;position:relative}nav a::after{content:'';position:absolute;bottom:1px;left:0;width:18px;height:1px;background:var(--accent)}nav button{color:#b6b4bf;transition:color .2s}nav button:hover{color:var(--paper)}.menu-toggle{display:none}
main{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;padding:20px}h1{font-size:68px;line-height:1.3;letter-spacing:.04em;margin:10px 0 5px;font-weight:700}.subtitle{color:var(--muted);font-size:13px;min-height:24px;margin:8px 0 0;text-align:center}.cursor{margin-left:3px;animation:cursor 1s steps(1) infinite;color:var(--accent)}
.glitch{position:relative}.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}.glitch::before{color:#c8b8e5;animation:glitch-top 7s infinite steps(1)}.glitch::after{color:#a2bbb8;animation:glitch-bottom 7s infinite steps(1)}@keyframes glitch-top{0%,89%,94%,100%{opacity:0;transform:none}90%{opacity:.9;clip-path:inset(20% 0 66% 0);transform:translate(-3px,0)}91%{opacity:.8;clip-path:inset(56% 0 31% 0);transform:translate(3px,0)}93%{opacity:.7;clip-path:inset(12% 0 77% 0);transform:translate(-2px,0)}}@keyframes glitch-bottom{0%,89%,94%,100%{opacity:0;transform:none}90%{opacity:.8;clip-path:inset(66% 0 19% 0);transform:translate(3px,0)}92%{opacity:.9;clip-path:inset(40% 0 46% 0);transform:translate(-4px,0)}}@keyframes cursor{50%{opacity:0}}
footer{position:absolute;bottom:25px;left:50px;right:50px;display:flex;justify-content:space-between;align-items:center;color:#85838d;font-size:11px}#motion{display:flex;gap:10px;align-items:center;font-size:11px;padding:8px 0}.motion-icon{color:var(--accent);font-size:15px}
dialog{width:min(460px,calc(100% - 32px));background:#29292f;color:var(--paper);border:1px solid #55505f;padding:48px;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#151519b8;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:18px;top:10px;font-size:28px;color:var(--muted)}.dialog-kicker{font-size:11px;letter-spacing:.15em;color:var(--accent)}dialog h2{font-size:24px;margin:18px 0}dialog p{color:var(--muted);line-height:1.9}.return{padding:20px 0 0;color:var(--accent)}.return span{margin-left:14px}
.paused .glitch::before,.paused .glitch::after,.paused .cursor{animation-play-state:paused}.paused .glitch::before,.paused .glitch::after{visibility:hidden}
@media(min-width:1400px){.screen{border-width:25px}header{padding:35px 55px}}
@media(max-width:840px){header{padding:28px 32px}h1{font-size:52px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;width:32px;height:32px;padding:3px;z-index:5}.menu-toggle span{height:1px;width:26px;background:var(--paper);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}nav{display:none;position:absolute;top:83px;left:20px;right:20px;padding:25px;background:#29292ff5;border:1px solid #4b4656;gap:18px;align-items:flex-start;flex-direction:column}nav.open{display:flex}footer{left:32px;right:32px}}
@media(max-width:480px){.screen{border-width:10px}header{padding:22px 24px}.logo{font-size:18px}h1{font-size:clamp(36px,11vw,52px)}.subtitle{font-size:11px}footer{left:24px;right:24px;bottom:18px;font-size:9px}.motion-label{display:none}dialog{padding:35px 26px}}
@media(max-height:420px){header{padding-top:14px;padding-bottom:14px}footer{bottom:8px}h1{font-size:42px}nav{top:58px;flex-direction:row;flex-wrap:wrap;padding:15px;gap:15px}}
@media(prefers-reduced-motion:reduce){.glitch::before,.glitch::after,.cursor{animation:none}.glitch::before,.glitch::after{display:none}*{transition:none!important}}