@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600&display=swap");

:root { --void:#05070a; --paper:#e4f0f3; --muted:#7f9299; --signal:#a9edff; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; overflow:hidden; color:var(--paper); background:radial-gradient(ellipse at 50% 44%,#101c22 0%,var(--void) 65%); font-family:"Space Grotesk",sans-serif; }
button, a { font:inherit; }
#field { position:fixed; inset:0; z-index:0; transform:scaleX(-1); }
.noise { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.075; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.interface { position:relative; z-index:2; min-height:100vh; padding:1.6rem clamp(1.5rem,4vw,4.5rem); pointer-events:none; transform:scaleX(-1); }
header, .hero, .glyph-trigger, .transmission { pointer-events:auto; }
header { display:flex; justify-content:space-between; align-items:center; }
.wordmark { color:var(--paper); font-size:.76rem; font-weight:600; letter-spacing:.24em; text-decoration:none; }
.sound { display:flex; gap:.55rem; align-items:center; padding:0; border:0; color:var(--muted); background:none; cursor:pointer; font:400 .66rem "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.sound__dot { width:6px; height:6px; border:1px solid var(--muted); border-radius:50%; }
.sound[aria-pressed="true"] { color:var(--signal); }.sound[aria-pressed="true"] .sound__dot { background:var(--signal); border-color:var(--signal); box-shadow:0 0 12px var(--signal); }
.hero { position:absolute; top:50%; left:50%; width:min(80vw,670px); transform:translate(-50%,-54%); text-align:center; }
.eyebrow, footer, .transmission__top, .transmission__hint { font:400 .65rem/1.5 "DM Mono",monospace; letter-spacing:.16em; }
.eyebrow { margin:0 0 1.2rem; color:var(--muted); }
h1 { margin:0; font-size:clamp(4.4rem,12vw,10.5rem); font-weight:400; letter-spacing:-.07em; line-height:.73; text-shadow:0 0 50px rgba(154,232,255,.11); }
h1 em { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.05em; }
.intro { margin:2.2rem 0 0; color:#9dadb3; font-size:.84rem; letter-spacing:.08em; }
.glyph-trigger { position:absolute; bottom:clamp(4.5rem,12vh,8rem); left:50%; display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:0; transform:translateX(-50%); border:0; color:var(--paper); background:none; cursor:pointer; font:400 .65rem "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.glyph-trigger img { width:39px; filter:drop-shadow(0 0 0 transparent); transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s; }.glyph-trigger:hover img,.glyph-trigger.is-active img { transform:rotate(45deg) scale(1.18); filter:drop-shadow(0 0 7px var(--signal)) drop-shadow(0 0 25px #20a8db); }
.transmission { position:absolute; right:clamp(1.5rem,4vw,4.5rem); bottom:clamp(4.5rem,10vh,7rem); width:min(330px,calc(100vw - 3rem)); padding:1.35rem; border:1px solid rgba(169,237,255,.24); background:rgba(6,13,17,.72); box-shadow:0 16px 60px rgba(0,0,0,.32); backdrop-filter:blur(16px); animation:appear .55s cubic-bezier(.16,1,.3,1); }
.transmission[hidden] { display:none; }.transmission__top { display:flex; justify-content:space-between; color:var(--signal); }.transmission__top button { padding:0; border:0; color:var(--signal); background:none; cursor:pointer; font-size:1.2rem; line-height:.7; }.transmission__title { margin:1.6rem 0 .65rem; font-size:1.35rem; }.transmission__copy { margin:0; color:#a8b7bc; font-size:.83rem; line-height:1.6; }.transmission__rule { height:1px; margin:1.2rem 0; background:rgba(169,237,255,.2); }.transmission__hint { margin:0; color:var(--muted); }
footer { position:fixed; z-index:2; right:clamp(1.5rem,4vw,4.5rem); bottom:1.35rem; left:clamp(1.5rem,4vw,4.5rem); display:flex; justify-content:space-between; color:#64767d; pointer-events:none; transform:scaleX(-1); }
.cursor { position:fixed; z-index:10; top:0; left:0; width:26px; height:26px; pointer-events:none; transform:translate(-100px,-100px); transition:width .2s,height .2s; }.cursor img { width:100%; filter:drop-shadow(0 0 5px rgba(169,237,255,.8)); }.cursor::after { position:absolute; inset:-12px; content:""; border:1px solid rgba(169,237,255,.25); border-radius:50%; }
@media (hover:hover) and (pointer:fine) { body, a, button, #field { cursor:none!important; } }
@keyframes appear { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media (hover:none),(pointer:coarse) { #field { cursor:auto; }.cursor { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:600px) { .hero { width:92vw; }.transmission { right:1.5rem; bottom:5.5rem; } h1 { font-size:clamp(4.1rem,20vw,6rem); } }