@font-face{font-family:ZeroMono;src:local("SFMono-Regular"),local("Consolas"),local("Liberation Mono");font-display:swap}
@font-face{font-family:Orbitron;src:url('./assets/fonts/Orbitron-Variable.ttf') format('truetype');font-weight:400 900;font-display:swap}
:root{color-scheme:dark;--black:#030805;--green:#a6ff8e;--bright:#b7ff9e;--dim:#64816b;--line:rgba(130,190,140,.18);font-family:ZeroMono,"Courier New",monospace;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--black);color:#d7e5d9;min-width:320px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--bright);outline-offset:6px}a{color:inherit;text-decoration:none}
#rain,.vignette,.scanlines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#rain{z-index:-3}.vignette{z-index:-2;background:radial-gradient(ellipse at 50% 41%,transparent 8%,rgba(0,7,2,.25) 43%,rgba(0,4,1,.79) 93%),linear-gradient(0deg,#030805 1%,transparent 27%,transparent 72%,#030805 99%)}.scanlines{z-index:3;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.35) 4px);mix-blend-mode:multiply}
.page{min-height:100svh;display:flex;flex-direction:column;padding:28px 44px 22px;position:relative;isolation:isolate}.header{height:44px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.identity{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:-.8px}.mini-mark{width:25px;height:28px;color:var(--green)}.muted{color:#788e7e}.status{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.5px;color:#849d8a;position:absolute;left:50%;transform:translateX(-50%)}.status-dot{width:5px;height:5px;background:var(--green);box-shadow:0 0 9px #70e25588;border-radius:50%}.status-slash,.status-id{color:#53665a}.motion-button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#829d87;font-size:11px;padding:12px 0 12px 12px}.motion-button:hover{color:var(--green)}.motion-icon{font-size:22px;line-height:14px}
main{flex:1;display:flex;justify-content:center;align-items:center;position:relative;min-height:580px;padding:20px 0 27px}.hero{text-align:center;display:flex;align-items:center;flex-direction:column;position:relative;z-index:1}.eyebrow{font-size:9px;color:#85a58b;letter-spacing:4px;margin-bottom:23px}.bracket{color:#acdba7;display:inline-block;margin:0 12px}.brand-art{width:clamp(260px,29vw,354px);aspect-ratio:420/460;position:relative}.brand-art:before{content:"";position:absolute;inset:15% -5%;background:radial-gradient(ellipse,rgba(101,255,54,.07),transparent 70%);filter:blur(20px)}#mark{width:100%;height:100%;display:block;filter:drop-shadow(0 0 12px rgba(76,249,78,.19))}.wordmark-wrap{margin-top:5px;min-height:63px;display:grid;place-items:center}.wordmark{display:block;width:clamp(171px,16.5vw,222px);height:auto;color:#b8ffa3;transform-origin:50% 70%;will-change:transform,filter;filter:drop-shadow(0 0 9px rgba(109,252,74,.17))}.hero-copy{margin-top:27px}.headline{font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:500;letter-spacing:4px;margin:0}.green{color:var(--green)}.subline{font-family:Arial,"PingFang SC",sans-serif;margin:11px 0 0;font-size:11px;color:#778e7c;letter-spacing:3px}.entry{margin-top:27px}.sound-button{min-width:186px;height:43px;padding:0 14px;border:1px solid #85c46d70;color:#c4ffaf;background:#91ec6c0c;display:flex;align-items:center;justify-content:space-between;gap:22px;transition:background .2s,border-color .2s,box-shadow .2s;font-size:12px;letter-spacing:2px}.sound-button:hover{background:#a7ff7919;border-color:#a1e982;box-shadow:0 0 25px #86f9490d}.sound-button:disabled{opacity:.55;cursor:wait}.play-icon{width:16px;height:16px;display:block}.play-icon svg{width:100%;height:100%;fill:currentColor}.button-arrow{color:#729666;font-size:16px}.entry-hint{font-family:Arial,"PingFang SC",sans-serif;font-size:10px;letter-spacing:1px;color:#667a6b;margin:11px 0 0;min-height:13px}.side-note{position:absolute;top:47%;writing-mode:vertical-rl;color:#435d4b;font-size:9px;letter-spacing:3px}.side-note-left{left:0;transform:rotate(180deg)}.side-note-right{right:0}
footer{position:relative;z-index:4;width:100%;max-width:1600px;align-self:center}.audio-deck{display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;gap:34px;margin-bottom:23px}.track-info{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:9px;letter-spacing:1.3px;color:#829d8a}.track-light{height:5px;width:5px;background:#415649;border-radius:50%;flex-shrink:0}.track-light.active{background:#adff8b;box-shadow:0 0 9px #a4ff7577}.tempo{border-left:1px solid var(--line);padding-left:11px;color:#b0c6b4}.tempo span{font-size:8px;color:#566f5e;letter-spacing:.5px}.visualizer-wrap{display:flex;align-items:center;gap:16px;height:30px}#spectrum{width:100%;height:27px;min-width:0}.track-time{font-size:9px;color:#6c8672;letter-spacing:1px;min-width:33px}.volume-control{justify-self:end;display:flex;align-items:center;gap:11px;color:#729479}.volume-control svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}.volume-control input{width:84px;accent-color:#a3e08b;height:14px;cursor:pointer}.volume-control output{font-size:9px;width:21px;color:#729479}.footer-line{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#536e5b;font-size:9px;letter-spacing:1.8px}.footer-slash{color:#385142;padding:0 10px}.footer-right{display:flex;align-items:center;gap:10px}.small-cross{font-size:17px;color:#69956f}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:fixed;bottom:30px;left:20px;right:20px;background:#07150a;padding:20px;text-align:center}.paused-motion .wordmark{transform:none!important}.paused-motion #mark{filter:none}
@media(min-height:950px){main{padding-top:36px;padding-bottom:48px}.brand-art{width:385px}.hero-copy{margin-top:31px}.entry{margin-top:30px}}
@media(max-height:820px) and (min-width:701px){.page{padding-top:20px;padding-bottom:18px}main{min-height:520px;padding:12px 0 22px}.eyebrow{margin-bottom:17px}.brand-art{width:264px}.wordmark{width:183px}.wordmark-wrap{min-height:50px;margin-top:2px}.hero-copy{margin-top:15px}.entry{margin-top:19px}.headline{font-size:15px}.audio-deck{margin-bottom:15px}.footer-line{padding-top:14px}}
@media(max-width:700px){.page{padding:18px 22px 20px}.header{height:34px}.identity{font-size:17px;gap:8px}.mini-mark{width:22px}.status{left:auto;right:0;transform:none;font-size:8px;gap:7px;letter-spacing:.7px}.status-id,.status-slash{display:none}.motion-button{position:absolute;top:49px;right:0;font-size:9px}.motion-icon{font-size:18px}main{min-height:588px;padding:43px 0 30px}.eyebrow{font-size:8px;letter-spacing:3px;margin-bottom:25px}.brand-art{width:min(68vw,292px)}.wordmark{width:187px}.wordmark-wrap{margin-top:7px;min-height:49px}.hero-copy{margin-top:24px}.headline{font-size:15px;letter-spacing:3px}.subline{font-size:10px;letter-spacing:2px}.entry{margin-top:25px}.side-note{display:none}.audio-deck{grid-template-columns:1fr auto;gap:14px;margin-bottom:19px}.track-info{font-size:8px;gap:8px;letter-spacing:.8px}.visualizer-wrap{grid-row:2;grid-column:1/-1;height:22px;width:100%}#spectrum{height:23px}.volume-control input{width:66px}.volume-control{gap:7px}.volume-control output{display:none}.footer-line{font-size:8px;letter-spacing:.7px;padding-top:15px}.footer-right{font-size:0;gap:0}.small-cross{font-size:17px}.footer-slash{padding:0 7px}}
@media(max-width:700px) and (max-height:760px){main{min-height:510px;padding-top:32px}.brand-art{width:234px}.eyebrow{margin-bottom:17px}.hero-copy{margin-top:16px}.entry{margin-top:21px}.wordmark{width:171px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.wordmark{will-change:auto}}

/* Horizontal angular identity: four distinct zeros, same cuts and lean as .wtf. */
.brand-art{width:clamp(360px,67vw,850px);aspect-ratio:850/230}
.eyebrow{margin-bottom:40px}
.wordmark-wrap{margin-top:23px;min-height:66px}
.wordmark{width:238px}
.hero-copy{margin-top:32px}
.headline{font-size:17px}
.subline{font-family:ZeroMono,"Courier New",monospace;font-size:9px;letter-spacing:3px}
.entry-hint{font-family:ZeroMono,"Courier New",monospace;font-size:8px;letter-spacing:1.3px}
.sound-button{font-size:10px;min-width:181px;letter-spacing:2px}
.built-on{display:flex;align-items:center;gap:10px;color:#6d8573;font-size:9px;letter-spacing:1px;transition:color .2s}
.built-on strong{font-weight:400;color:#a4c7a9;letter-spacing:.3px}
.built-on:hover,.built-on:hover strong{color:var(--green)}
@media(min-height:950px){.brand-art{width:min(75vw,960px)}.eyebrow{margin-bottom:46px}.wordmark-wrap{margin-top:30px}.wordmark{width:265px}}
@media(max-height:820px) and (min-width:701px){.brand-art{width:min(68vw,750px)}.eyebrow{margin-bottom:30px}.wordmark-wrap{margin-top:18px;min-height:57px}.wordmark{width:220px}.hero-copy{margin-top:22px}}
@media(max-width:700px){main{min-height:568px}.brand-art{width:calc(100vw - 35px);max-width:570px}.eyebrow{margin-bottom:36px}.wordmark-wrap{margin-top:22px;min-height:58px}.wordmark{width:213px}.hero-copy{margin-top:32px}.headline{font-size:14px;letter-spacing:2.5px}.subline{font-size:8px;letter-spacing:1.8px}.entry{margin-top:30px}.footer-line{flex-wrap:wrap;gap:17px}.built-on{font-size:8px;gap:7px;letter-spacing:.5px}.built-on strong{font-size:9px}.status{right:0}}
@media(max-width:700px) and (max-height:760px){main{min-height:470px}.brand-art{width:calc(100vw - 35px)}.eyebrow{margin-bottom:30px}.wordmark-wrap{margin-top:17px}.wordmark{width:190px}.hero-copy{margin-top:24px}.entry{margin-top:23px}}

/* Quiet transport in the corner; the identity stays the focal point. */
.header-controls{display:flex;align-items:center;gap:23px}
.header-controls .motion-button{position:static;padding:9px 0;font-size:8px;color:#536c5b;gap:7px}
.header-controls .motion-icon{font-size:17px}
.sound-entry{position:relative;margin:0!important}
.sound-entry .sound-button{border:0;background:none;box-shadow:none;min-width:0;height:32px;padding:7px 0 7px 7px;font-size:8px;letter-spacing:1px;gap:8px;color:#7c9a7f;opacity:.8}
.sound-entry .sound-button:hover{opacity:1;color:#c2ffaa}
.sound-entry .play-icon{width:11px;height:11px}
.sound-entry .entry-hint{position:absolute;right:0;top:31px;width:230px;text-align:right;white-space:nowrap;font-size:7px;letter-spacing:.5px;opacity:.58;margin:0;pointer-events:none}
.headline{font-family:Orbitron,Arial,sans-serif;font-weight:900;font-size:clamp(16px,1.8vw,25px);letter-spacing:1px;transform:skewX(-13deg);color:#c2dfb4}
.hero-copy{margin-top:34px}
.subline{margin-top:15px;color:#66856e}
.credits-link{font-family:Arial,sans-serif;font-size:11px;color:#4b6855;letter-spacing:0;padding:5px}
.credits-link:hover{color:#a4d98d}
.wordmark-wrap{margin-top:30px}
@media(max-width:700px){.wordmark-wrap{margin-top:28px}}
@media(max-width:700px){.header-controls{gap:13px}.header-controls .motion-button{display:none}.status{top:58px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.sound-entry .entry-hint{max-width:220px;top:32px;font-size:6px}.headline{font-size:clamp(13px,3.6vw,19px);letter-spacing:.6px}.hero-copy{margin-top:32px}.track-info{gap:6px;letter-spacing:.4px}.tempo{padding-left:7px}.credits-link{padding:3px}.audio-deck{gap:12px}}
