:root{color-scheme:dark;--cyan:#0db7dd;--light:#03dbf6;--muted:#94a9c4;--white:#edf5ff}
*{box-sizing:border-box}
html{min-height:100%;background:#090e1d}
body{margin:0;min-height:100svh;color:var(--white);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit}
.background,.background-image,.shade,.grid,canvas,.halo{position:fixed;inset:0;pointer-events:none}
.background{z-index:-1;isolation:isolate;overflow:hidden;background:#090e1d}
.background-image{background:url('/assets/background.jpg') center/cover no-repeat;opacity:.74}
.shade{background:linear-gradient(180deg,rgba(4,8,20,.32),rgba(6,11,25,.15) 38%,rgba(4,8,20,.84)),radial-gradient(ellipse at 50% 40%,transparent 5%,#04091370 90%)}
.grid{background-image:linear-gradient(#0b9ac615 1px,transparent 1px),linear-gradient(90deg,#0b9ac615 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 52%,#000,transparent 82%)}
canvas{width:100%;height:100%;opacity:.68}
.halo{background:radial-gradient(ellipse at 50% 38%,#0785b817,transparent 48%);animation:breathe 9s ease-in-out infinite alternate}
.shell{min-height:100svh;display:flex;flex-direction:column;padding:34px 48px 25px}
main{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:65px 0 80px}
.composition{width:min(100%,900px);position:relative}
.emblem-wrap{position:relative;margin:0 auto 35px;width:154px;height:154px;display:grid;place-items:center}
.emblem-wrap:before{content:"";position:absolute;inset:-45%;background:radial-gradient(circle,#0fa6d421,transparent 64%);filter:blur(15px);animation:breathe 6s ease-in-out infinite alternate}
.emblem{position:relative;width:154px;height:154px;object-fit:contain;filter:drop-shadow(0 14px 26px #0007);animation:emblem-reveal 1.55s cubic-bezier(.22,1,.36,1) both}
.brand{display:flex;align-items:center;justify-content:center;gap:23px;width:min(100%,705px);margin:auto}
.wordmark{display:block;width:min(75%,540px);height:auto;animation:word-reveal 1s .6s cubic-bezier(.22,1,.36,1) both}
.edition{display:grid;place-items:center;position:relative;width:126px;height:72px;flex-shrink:0;border:1px solid #12bdeb50;border-radius:14px 3px 14px 3px;background:linear-gradient(125deg,#0db7dd15,#0c528d05);box-shadow:inset 0 1px 0 #70e7ff0d;animation:edition-reveal .8s 1.35s both}
.edition:after{content:"";position:absolute;bottom:-8px;left:12px;width:32px;height:2px;background:linear-gradient(90deg,#0db7dd,transparent)}
.edition svg{display:block;width:96px;height:auto;overflow:visible}
.edition .filled{animation:fill-in .7s 1.9s both}
.edition .traced{fill:none;stroke:#03dbf6;stroke-width:7;stroke-dasharray:6000;stroke-dashoffset:6000;animation:draw-in 1.2s 1.25s both}
h1{font-size:clamp(23px,2.5vw,32px);font-weight:450;letter-spacing:-.025em;margin:39px 0 16px;line-height:1.25;animation:content-reveal 1s .8s both}
.launch{display:flex;align-items:center;justify-content:center;gap:19px;margin:37px auto 0;animation:content-reveal 1s 1.35s both}
.launch-rule{width:41px;height:1px;background:linear-gradient(90deg,transparent,#1bbcea);box-shadow:0 0 8px #15bfe53b}
.launch-copy{text-align:left;font-size:13px;color:var(--muted);line-height:1.8}
.launch-copy time{display:block;font-size:19px;font-weight:500;color:#e4eefb;letter-spacing:.025em}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#748aa5;font-size:10px;letter-spacing:.05em}
@keyframes breathe{from{opacity:.5}to{opacity:1}}
@keyframes emblem-reveal{from{opacity:0;transform:scale(.82) rotate(-95deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes word-reveal{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-20px)}to{opacity:1;clip-path:inset(0);transform:translateX(0)}}
@keyframes edition-reveal{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes fill-in{from{opacity:0}to{opacity:1}}
@keyframes draw-in{0%{stroke-dashoffset:6000;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes content-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation:none!important}
body.motion-paused .traced{display:none}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) *,body:not(.motion-enabled) *:before,body:not(.motion-enabled) *:after{animation:none!important;transition:none!important}body:not(.motion-enabled) .traced{display:none}body:not(.motion-enabled) canvas{display:none}}
@media(max-width:600px){.shell{padding:24px 24px 20px}main{padding:62px 0 65px}.emblem-wrap,.emblem{width:123px;height:123px}.emblem-wrap{margin-bottom:34px}.brand{gap:13px}.wordmark{width:calc(100% - 99px)}.edition{width:83px;height:51px;border-radius:10px 3px 10px 3px}.edition svg{width:65px}.edition:after{width:22px;bottom:-6px}h1{margin-top:35px;font-size:23px}.launch{margin-top:30px;gap:14px}.launch-copy{font-size:12px}.launch-copy time{font-size:18px}footer{font-size:9px}}
@media(max-height:700px) and (min-width:601px){main{padding:35px 0}.emblem-wrap,.emblem{width:110px;height:110px}.emblem-wrap{margin-bottom:25px}h1{margin-top:25px}.launch{margin-top:25px}}
.discord-link svg,#sound-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.discord-link:focus-visible,#sound-toggle:focus-visible{outline:2px solid #36d7ee;outline-offset:5px}
.sound-control{display:flex;align-items:center;gap:12px}
#sound-status{max-width:160px;font-size:11px;letter-spacing:0}
#sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid #748aa52e;border-radius:6px;background:#090e1d60;color:#94a9c4;font-size:11px;cursor:pointer;white-space:nowrap}
#sound-toggle[hidden]{display:none}
#sound-toggle:hover{color:#e4eefb;border-color:#12bdeb70}
#sound-toggle:disabled{cursor:wait;opacity:.6}
#sound-toggle .sound-waves,#sound-toggle[aria-pressed="true"] .sound-cross{display:none}
#sound-toggle[aria-pressed="true"] .sound-waves{display:block}
@media(max-width:600px){.sound-control{gap:6px}#sound-status{max-width:100px;font-size:10px}}
/* Looping contour drawing is anchored around the actual emblem. */
.emblem-wrap{margin-bottom:57px;isolation:isolate}
.brand-sketch{position:absolute;z-index:-1;width:190%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);fill:none;pointer-events:none}
.sketch-construction{stroke:#1b7cb6;stroke-width:.18;stroke-dasharray:1 1.8;opacity:.35}
.sketch-guide{stroke:#0db7dd;stroke-width:.22;opacity:.23}
.sketch-trace{stroke:url(#sketch-blue);stroke-width:.38;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.26 .74;opacity:.65}
.sketch-tip{fill:#03dbf6;opacity:.8}
body.motion-paused .sketch-trace{stroke-dasharray:none;opacity:.15}
body.motion-paused .sketch-tip{display:none}
@media(prefers-reduced-motion:reduce){.sketch-trace{stroke-dasharray:none;opacity:.15}.sketch-tip{display:none}}
/* One opaque, legible launch panel with the Discord bell integrated. */
.launch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;width:fit-content;max-width:100%;padding:21px 24px;margin-top:32px;border:1px solid #1b7cb670;border-radius:14px 4px 14px 4px;background:linear-gradient(140deg,#0a1b29 0%,#090e1d 52%,#14152e 100%);box-shadow:0 12px 36px #0003,inset 0 1px 0 #8ce8ff0b;text-align:left}
.launch::after{content:"";position:absolute;left:24px;bottom:-1px;width:52px;height:1px;background:linear-gradient(90deg,transparent,#36d7ee,transparent);animation:launch-trace 9s ease-in-out infinite}
@keyframes launch-trace{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(110px);opacity:.85}}
.launch-copy{font-size:12px;line-height:1.7;color:#bed0e3;flex-shrink:0}
.launch-label{letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:600}
.launch-copy time{font-size:20px;letter-spacing:.01em;color:#f2f7ff}
.discord-link{display:flex;align-items:center;gap:12px;align-self:stretch;min-height:52px;padding:3px 0 3px 23px;border-left:1px solid #355369;color:#dff8ff;text-decoration:none;transition:color .2s}
.discord-link svg{width:20px;height:20px;color:#5ed9f0;flex-shrink:0}
.discord-link strong{display:block;font-size:13px;font-weight:550;line-height:1.7}
.discord-link small{display:block;font-size:11px;color:#bed0e3;line-height:1.7}
.discord-arrow{font-size:14px;margin-left:3px;color:#92c6d8}
.discord-link:hover{color:#77e6ff}
.discord-link:hover svg{filter:drop-shadow(0 0 5px #0db7dd60)}
@media(max-width:600px){.emblem-wrap{margin-bottom:51px}.launch{width:min(100%,320px);flex-direction:column;align-items:stretch;gap:16px;padding:18px 21px;margin-top:27px}.launch-copy{text-align:center}.launch-copy time{font-size:20px}.discord-link{border-left:0;border-top:1px solid #1b7cb642;padding:15px 4px 0;justify-content:center}.discord-arrow{margin-left:8px}}
@media(max-height:700px) and (min-width:601px){.emblem-wrap{margin-bottom:43px}}
/* Station-style countdown and Discord share one readable launch panel. */
.launch{width:420px;flex-direction:column;align-items:stretch;gap:19px;padding:22px 24px}
.launch-copy{text-align:center}
.launch-copy time{font-size:17px}
.launch-copy time span{color:#bed0e3;font-size:12px;white-space:nowrap}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.clock-unit{min-width:0;text-align:center}
.clock-face{position:relative;display:block;height:64px;border:1px solid #0db7dd40;border-radius:6px;background:linear-gradient(#102333 50%,#0b1829 50%);box-shadow:0 3px 0 #070f1a;perspective:250px;font-variant-numeric:tabular-nums;font-size:30px;font-weight:550;color:#f2f8ff;line-height:62px}
.clock-number{display:block}
.clock-seconds::after{content:"";position:absolute;z-index:5;left:0;right:0;top:50%;height:1px;background:#08101b;box-shadow:0 1px 0 #7095b020;pointer-events:none}
.clock-label{display:block;margin-top:9px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#bed0e3}
.flip-leaf{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d}
.flip-leaf>span{position:absolute;left:0;right:0;height:62px;line-height:62px}
.flip-top{top:0;z-index:3;transform-origin:bottom;background:#102333;border-radius:5px 5px 0 0;animation:fold-top .24s ease-in forwards}
.flip-top>span{top:0}
.flip-bottom,.flip-back{bottom:0;border-radius:0 0 5px 5px;background:#0b1829}
.flip-bottom>span,.flip-back>span{bottom:0}
.flip-back{z-index:1;animation:hide-back .24s steps(1,end) forwards}
.flip-bottom{z-index:4;transform-origin:top;transform:rotateX(90deg);animation:fold-bottom .28s .24s ease-out forwards}
@keyframes fold-top{to{transform:rotateX(-90deg);filter:brightness(.6)}}
@keyframes fold-bottom{from{transform:rotateX(90deg);filter:brightness(.6)}to{transform:rotateX(0);filter:brightness(1)}}
@keyframes hide-back{to{opacity:0}}
.clock-shift{animation:clock-shift .4s ease-out}
@keyframes clock-shift{from{transform:translateY(-7px);opacity:.25}to{transform:translateY(0);opacity:1}}
.launch .discord-link{border-left:0;border-top:1px solid #1b7cb642;justify-content:center;padding:16px 0 0}
.launch-arrived{margin:0;text-align:center;color:#dceeff;font-size:12px;line-height:1.6}
@media(max-width:600px){.launch{width:min(100%,340px);padding:19px 16px;gap:17px}.launch-copy time{font-size:16px}.launch-copy time span{display:block;font-size:11px}.countdown{gap:7px}.clock-face{font-size:25px}.clock-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.flip-leaf{display:none}}

/* Match the original cyan/blue/indigo artwork while retaining clear white text. */
.launch{box-shadow:0 14px 38px #0003,inset 0 1px 0 #03dbf61a}
.launch-label{color:#51cde4}
.clock-number,.flip-leaf>span{color:#edf8ff;text-shadow:0 0 14px #0db7dd15}
.discord-link svg{color:#0db7dd}