@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#eeedf8;--muted:#a7a8bc;--violet:#b6a0ff;--line:#ffffff24}*{box-sizing:border-box}html{background:#060811;scrollbar-width:thin;scrollbar-color:#655784 #080912}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #d0beff;outline-offset:5px}button{border:0}#world,.shade{position:fixed;inset:0;width:100%;height:100%}#world{z-index:0}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(4,6,14,.88),rgba(4,6,14,.12) 65%),linear-gradient(0deg,#050710 0%,transparent 20%,transparent 75%,#06081199);z-index:1}header{position:fixed;z-index:5;top:0;left:0;width:100%;padding:30px 4%;display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:13px;letter-spacing:5px;font-weight:700;font-size:19px}.mark{display:grid;place-items:center;width:31px;height:36px;font-family:'Space Grotesk',sans-serif;font-size:30px;color:var(--violet);border:1px solid #b6a0ff66;transform:skewY(-10deg)}.brand-small{font-size:10px;font-weight:400;letter-spacing:1.9px;color:var(--muted);border-left:1px solid var(--line);padding:8px 0 8px 20px;margin-left:10px}.controls{display:flex;gap:12px}.controls button{border:1px solid var(--line);padding:10px 15px;background:#0b0c1699;border-radius:30px;font-size:13px;backdrop-filter:blur(14px)}.controls button[aria-pressed=true]{border-color:var(--violet);color:var(--violet)}.controls span{margin-left:10px}main{position:relative;z-index:2}#intro,#station{position:fixed;top:23%;left:8%;max-width:620px;width:46%;transition:opacity .5s,transform .5s}.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2.8px;color:#c3b8e7;font-weight:500}.eyebrow span{width:6px;height:6px;background:#c3a7ff;box-shadow:0 0 14px #b998ff;border-radius:50%}h1,h2{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.06em;line-height:1.03}h1{font-size:clamp(54px,6.5vw,105px);margin:25px 0}h1 em{font-style:normal;background:linear-gradient(100deg,#f0eafa,#b9a0ff 60%,#8876ce);background-clip:text;color:transparent}p{font-size:17px;line-height:1.7;color:#b5b5c8;margin:0 0 26px}h2{font-size:clamp(44px,5.5vw,80px);margin:23px 0}.primary{display:inline-flex;justify-content:space-between;gap:35px;align-items:center;padding:17px 22px;background:#e5dcff;color:#151023;border-radius:4px;font-weight:600;font-size:15px;transition:background .2s,transform .2s}.primary:hover{background:#fff;transform:translateY(-2px)}.primary span{font-size:22px}.hint{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:1.7px;color:#9594aa;margin-top:40px}.hint i{height:24px;width:14px;border:1px solid #8b889f;border-radius:10px;position:relative}.hint i:after{content:'';width:2px;height:6px;background:#bfa3ff;position:absolute;top:4px;left:5px;animation:scroll 2s infinite}.hint span{color:#666}#route{position:fixed;z-index:5;right:3.3%;top:28%;display:flex;flex-direction:column;gap:18px}#route button{display:flex;align-items:center;justify-content:flex-end;gap:15px;background:none;color:#a9a7bd;font-size:12px}#route button span{opacity:0;transition:opacity .2s;padding:5px;background:#080a12cc}#route:hover button span,#route button.active span{opacity:1}#route button i{width:5px;height:5px;border-radius:50%;background:#77778c;position:relative}#route button.active i{background:#d7c1ff;box-shadow:0 0 12px #bd94ff}#route button.active i:after{content:'';position:absolute;inset:-6px;border:1px solid #af8ae888;border-radius:50%}footer{position:fixed;z-index:5;bottom:0;width:92%;left:4%;height:78px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#aaa8c0;font-size:11px;letter-spacing:1.5px}.telemetry{display:flex;gap:20px;align-items:center}.meter{width:75px;height:14px;background:repeating-linear-gradient(90deg,#242132 0 3px,transparent 3px 6px)}.meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#b99af4 0 3px,transparent 3px 6px)}.footer-end span{margin-left:20px}#travel{position:fixed;left:8%;bottom:16%;opacity:0;transition:opacity .3s;pointer-events:none}#travel span{display:block;color:#bba1f5;font-size:11px;letter-spacing:3px;margin-bottom:12px}#travel strong{font-family:'Space Grotesk';font-size:32px;font-weight:400;letter-spacing:-1px}#station{max-width:520px;top:25%}#station-description{max-width:400px}#station-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}#station-tags span{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:7px 12px;color:#c2bcd3}.text-button{display:block;background:none;padding:19px 0;color:#bcb1d1;font-size:14px}dialog{position:fixed;margin:auto;background:#10111dee;border:1px solid #a38dc055;border-radius:12px;backdrop-filter:blur(25px);color:var(--ink);padding:40px;width:min(580px,90vw);max-height:85dvh;overflow:auto;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#02030ba6;backdrop-filter:blur(8px)}dialog h2{font-size:40px}dialog p{font-size:16px}#close{position:absolute;right:15px;top:10px;font-size:30px;background:none;color:#bbb}.detail-row{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:28px 1fr;gap:15px;font-size:15px;line-height:1.6}.detail-row b{color:#b8a0f0}.detail-row strong{display:block;font-weight:500;color:#f0e8ff}.detail-row span{color:#a5a3b7}.small{font-size:12px;margin:12px 0 0;color:#b9afd2}#loading{position:fixed;inset:0;background:#070811;z-index:20;display:grid;place-content:center;text-align:center}#loading p{font-size:14px;letter-spacing:2px;margin-top:25px}.loader{width:40px;height:40px;border:1px solid #2b2539;border-top-color:#b598f8;border-radius:50%;animation:spin 1s linear infinite;margin:auto}#scroll-track{height:1900vh;pointer-events:none}#fallback{position:fixed;top:22%;left:8%;width:75%;background:#10101c;padding:24px}#fallback h2{font-size:34px}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scroll{50%{transform:translateY(7px);opacity:.4}}@media(min-width:1600px){#intro{top:25%}}@media(max-width:700px){header{padding:23px 6%}.brand{font-size:15px;gap:9px;letter-spacing:3px}.brand-small{display:none}.controls{gap:7px}.controls button{padding:9px 10px;font-size:11px}#intro,#station{left:7%;top:22%;width:80%}h1{font-size:clamp(49px,12vw,72px)}.eyebrow{font-size:10px;letter-spacing:1.8px}p{font-size:16px;max-width:310px}.shade{background:linear-gradient(90deg,#050611b8,#05061122),linear-gradient(0deg,#050611 0%,#05061155 35%,transparent 80%)}#route{right:5%;top:34%;gap:22px}#route button span{display:none}footer{height:63px;width:88%;left:6%;font-size:9px;letter-spacing:1px}.footer-end{display:none}.telemetry{gap:10px}.meter{width:38px}#station{top:26%;width:78%}#station h2{font-size:47px}#station p{font-size:15px;line-height:1.6}.hint{font-size:9px;gap:8px;margin-top:28px}.primary{padding:14px 18px}#travel{left:7%;bottom:17%}#travel strong{font-size:27px}dialog{padding:30px 24px}dialog h2{font-size:33px}}@media(max-height:650px){#intro,#station{top:18%}h1{font-size:50px;margin:15px 0}h2{font-size:40px;margin:12px 0}.hint{margin-top:18px}p{margin-bottom:18px}#station-tags{margin-bottom:15px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Beatshredder Digital: a compact chrome wordmark across all screen sizes. */
.brand{gap:12px;letter-spacing:0}.wordmark{display:flex;flex-direction:column;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:1.5px;line-height:1.2;background:linear-gradient(160deg,#fff 12%,#a9a9c5 45%,#f2eaff 64%,#a88ad5);color:transparent;background-clip:text}.wordmark>span{font-size:11px;letter-spacing:6px;line-height:1.6;color:#baabd3}.mark{flex-shrink:0}#intro h1{font-size:clamp(48px,5.7vw,90px)}
@media(max-width:700px){header{align-items:flex-start;gap:14px;flex-wrap:wrap}.brand{gap:8px}.wordmark{font-size:16px;letter-spacing:.7px}.wordmark>span{font-size:10px;letter-spacing:4px}.mark{width:25px;height:31px;font-size:25px}.controls{margin-left:auto}.controls button{font-size:11px;padding:8px}#intro h1{font-size:clamp(40px,9.8vw,67px)}}
@media(max-width:390px){header{padding-top:18px}.controls{width:100%;justify-content:flex-end}.wordmark{font-size:17px}}