@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Share+Tech+Mono&display=swap');

:root { color-scheme: dark; --cyan:#62f6ff; --blue:#1979ff; --ice:#d8ffff; --ink:#02050a; --muted:#6f98af; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; overflow:hidden; background:var(--ink); color:var(--ice); font-family:"Share Tech Mono",Consolas,monospace; }
button, a { font:inherit; }
.landing { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.25rem,3vw,2.75rem); background:radial-gradient(circle at 12% 18%,rgba(67,230,255,.3) 0 1px,transparent 2px),radial-gradient(circle at 74% 28%,rgba(67,230,255,.25) 0 1px,transparent 2px),radial-gradient(circle at 62% 11%,rgba(67,230,255,.26) 0 1px,transparent 2px),radial-gradient(ellipse at 50% 45%,#061d31 0,#020811 33%,#02050a 72%); background-size:21rem 18rem,28rem 24rem,16rem 18rem,auto; }
.scanlines,.grid { position:absolute; pointer-events:none; }.scanlines { z-index:0; inset:0; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(140,255,255,.15) 4px); }.grid { z-index:1; left:0; right:0; top:48%; height:70%; transform:perspective(520px) rotateX(62deg) scale(1.7); transform-origin:center top; background-image:linear-gradient(rgba(63,221,255,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(63,221,255,.38) 1px,transparent 1px); background-size:clamp(28px,4vw,60px) clamp(28px,4vw,60px); mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%); animation:grid-drift 7s linear infinite; }
.masthead,.footer { display:flex; align-items:center; gap:1rem; position:relative; z-index:4; color:var(--muted); font-size:clamp(.55rem,1vw,.68rem); letter-spacing:.16em; }.masthead { justify-content:space-between; }.monogram { color:var(--ice); font-family:"Michroma",sans-serif; font-size:1.3rem; letter-spacing:-.14em; text-decoration:none; text-shadow:0 0 13px var(--cyan); }.monogram span { color:var(--cyan); }.signal { margin:0 auto 0 0; padding-left:clamp(.5rem,2vw,2rem); }.signal i { display:inline-block; width:.42rem; height:.42rem; margin-right:.5rem; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan),0 0 22px var(--cyan); animation:pulse 1.7s infinite; }.sector { margin:0; }
.hero { position:relative; z-index:3; display:grid; place-items:center; text-align:center; margin:auto; padding:1.5rem 0 0; }.orbital-mark { position:absolute; z-index:-1; width:min(70vw,33rem); aspect-ratio:1; top:50%; left:50%; transform:translate(-50%,-58%); filter:drop-shadow(0 0 14px rgba(66,239,255,.48)); }.orbital-mark svg { width:100%; height:100%; overflow:visible; }.orbit,.arc,.slash { fill:none; stroke:var(--cyan); stroke-width:1.3; }.orbit { opacity:.35; }.orbit-one { stroke-dasharray:4 10; animation:spin 35s linear infinite; transform-origin:250px 250px; }.orbit-two { stroke-dasharray:110 24 9 28; opacity:.7; animation:spin-reverse 22s linear infinite; transform-origin:250px 250px; }.arc { stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 5px var(--cyan)); }.slash { stroke:var(--blue); stroke-width:2; }.node { fill:var(--ice); filter:drop-shadow(0 0 8px var(--cyan)); }.orbital-mark span { position:absolute; inset:0; display:grid; place-items:center; color:rgba(207,255,255,.13); font-family:"Michroma",sans-serif; font-size:clamp(3.5rem,10vw,7rem); letter-spacing:-.1em; }
.kicker { margin:0 0 1.4rem; color:var(--cyan); font-size:clamp(.58rem,1.2vw,.78rem); letter-spacing:.34em; text-shadow:0 0 12px var(--cyan); }.hero h1 { max-width:100%; margin:0; font-family:"Michroma",Arial,sans-serif; font-size:clamp(3rem,11vw,10rem); font-weight:400; line-height:.82; letter-spacing:-.1em; color:transparent; -webkit-text-stroke:1px rgba(216,255,255,.76); text-shadow:0 0 8px rgba(98,246,255,.8),0 0 30px rgba(25,121,255,.5); }.hero h1 span { display:block; transform:translateX(-.08em); }.hero h1 strong { display:block; color:var(--ice); font-weight:400; -webkit-text-stroke:0; text-shadow:0 0 9px var(--cyan),0 0 44px rgba(25,121,255,.72); }.lede { margin:clamp(1.4rem,4vw,2.7rem) 0 1.6rem; color:#a6c6d6; font-size:clamp(.75rem,1.4vw,.95rem); line-height:1.7; letter-spacing:.07em; }.enter { position:relative; overflow:hidden; min-width:13.7rem; padding:.9rem 1rem .85rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:2.1rem; border:1px solid var(--cyan); background:rgba(2,18,30,.62); color:var(--ice); cursor:pointer; font-size:.7rem; font-weight:700; letter-spacing:.2em; box-shadow:inset 0 0 22px rgba(98,246,255,.14),0 0 20px rgba(98,246,255,.25); transition:color .25s,background .25s,box-shadow .25s,transform .25s; }.enter::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 18%,rgba(152,255,255,.86) 50%,transparent 82%); transform:translateX(-120%); transition:transform .55s; }.enter span,.enter b { position:relative; z-index:1; }.enter b { font-size:1.35rem; line-height:.5; color:var(--cyan); }.enter:hover,.enter:focus-visible,.enter.is-active { outline:none; color:#00121a; background:var(--cyan); transform:translateY(-3px); box-shadow:0 0 12px var(--cyan),0 0 38px rgba(25,121,255,.9); }.enter:hover::before,.enter:focus-visible::before,.enter.is-active::before { transform:translateX(120%); }.enter:hover b,.enter:focus-visible b,.enter.is-active b { color:#00121a; }.status { min-height:1rem; margin:1.4rem 0 0; color:#4c7286; font-size:.57rem; letter-spacing:.22em; }.status.connected { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
.footer { justify-content:space-between; padding-top:1rem; border-top:1px solid rgba(94,224,255,.16); font-size:clamp(.44rem,.8vw,.58rem); }.footer span:nth-child(2) { color:var(--cyan); }
@keyframes grid-drift { to { background-position:0 60px; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes spin-reverse { to { transform:rotate(-360deg); } } @keyframes pulse { 50% { opacity:.35; box-shadow:0 0 3px var(--cyan); } }
@media (max-width:550px) { .landing { padding:1.25rem; }.signal { display:none; }.footer span:last-child { display:none; }.hero { padding-top:2rem; }.orbital-mark { width:98vw; }.hero h1 { font-size:clamp(3rem,16vw,5.5rem); }.lede { max-width:18rem; }.grid { top:55%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }

/* Energy cursor and access layer */
@media (pointer:fine) { body,button,a { cursor:none; } }
.energy-cursor { position:fixed; z-index:100; top:0; left:0; width:1.35rem; height:1.35rem; pointer-events:none; opacity:0; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:opacity .18s; }.energy-cursor.visible { opacity:1; }.energy-cursor::before,.energy-cursor::after,.energy-cursor i,.energy-cursor b { content:""; position:absolute; inset:0; border-radius:50%; }.energy-cursor::before { border:1px solid var(--ice); box-shadow:0 0 8px var(--cyan),0 0 22px var(--blue); }.energy-cursor::after { inset:30%; background:var(--ice); box-shadow:0 0 9px 4px var(--cyan),0 0 20px 9px var(--blue); }.energy-cursor i { inset:-.55rem; border:1px solid rgba(98,246,255,.56); animation:cursor-spin 1.3s linear infinite; clip-path:polygon(50% 0,62% 34%,100% 50%,62% 66%,50% 100%,38% 66%,0 50%,38% 34%); }.energy-cursor b { inset:-1.5rem; opacity:0; background:conic-gradient(from 0deg,transparent 0 8%,var(--cyan) 9% 10%,transparent 11% 25%,var(--blue) 26% 28%,transparent 29%); }.energy-cursor.burst { width:3rem; height:3rem; }.energy-cursor.burst b { opacity:1; animation:burst .55s ease-out both; }.energy-cursor.burst::after { animation:flash .45s ease-out both; }.enter.energy-hit,.verify.energy-hit { animation:button-crackle .7s linear both; }.enter.energy-hit::after,.verify.energy-hit::after { content:""; position:absolute; inset:-3px; border:2px solid var(--ice); clip-path:polygon(0 36%,11% 42%,13% 10%,29% 29%,41% 0,51% 37%,68% 18%,72% 49%,100% 41%,81% 61%,94% 88%,66% 74%,57% 100%,45% 66%,22% 88%,31% 58%,0 66%); filter:drop-shadow(0 0 8px var(--cyan)); animation:crackle .65s steps(2,end) both; }
.access-dialog { width:min(30rem,calc(100vw - 2rem)); overflow:hidden; padding:0; border:1px solid rgba(98,246,255,.8); background:linear-gradient(145deg,rgba(2,15,25,.97),rgba(0,4,9,.99)); color:var(--ice); box-shadow:0 0 0 100vmax rgba(0,2,7,.72),0 0 24px rgba(98,246,255,.34),0 0 75px rgba(25,121,255,.35); }.access-dialog::backdrop { background:rgba(0,0,0,.68); }.access-dialog form { position:relative; isolation:isolate; padding:clamp(2rem,6vw,3.3rem); }.access-dialog form::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.32; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(98,246,255,.16) 4px); }.access-dialog h2 { margin:.55rem 0 1rem; font-family:"Michroma",sans-serif; font-size:clamp(1.65rem,6vw,2.7rem); letter-spacing:-.08em; text-shadow:0 0 14px var(--cyan); }.access-dialog form>p:not(.kicker) { max-width:15rem; color:#a4c9d8; font-size:.8rem; line-height:1.6; }.access-dialog label { display:block; margin:1.6rem 0 .5rem; color:var(--cyan); font-size:.63rem; letter-spacing:.17em; }.access-dialog input { width:100%; border:1px solid rgba(98,246,255,.55); border-radius:0; outline:0; padding:.8rem .9rem; background:rgba(0,7,15,.85); color:var(--ice); font:1rem "Share Tech Mono",monospace; box-shadow:inset 0 0 16px rgba(98,246,255,.08); }.access-dialog input:focus { border-color:var(--ice); box-shadow:0 0 12px rgba(98,246,255,.35),inset 0 0 16px rgba(98,246,255,.1); }.verify { position:relative; overflow:hidden; width:100%; margin-top:1rem; padding:.85rem 1rem; display:flex; justify-content:space-between; border:1px solid var(--cyan); background:rgba(4,30,43,.72); color:var(--ice); font-size:.67rem; letter-spacing:.19em; cursor:pointer; }.verify:hover,.verify:focus-visible { background:var(--cyan); color:#001018; outline:0; }.verify b { color:var(--cyan); font-size:1.2rem; }.verify:hover b { color:#001018; }.access-status { display:block; min-height:1rem; margin-top:1.15rem; color:#5d8798; font-size:.56rem; letter-spacing:.16em; }.access-status.error { color:#ff6f91; }.access-status.success { color:var(--cyan); text-shadow:0 0 9px var(--cyan); }.close-access { position:absolute; top:.45rem; right:.7rem; z-index:2; border:0; background:transparent; color:#a6cbd2; font-size:1.6rem; cursor:pointer; }.skull-mark { position:absolute; z-index:-1; right:-1.5rem; bottom:-2.5rem; width:15rem; height:15rem; opacity:.12; color:var(--cyan); transform:rotate(-10deg); filter:drop-shadow(0 0 8px var(--cyan)); }.skull-mark span { position:absolute; inset:0; display:grid; place-items:center; font-family:Arial,sans-serif; font-size:9rem; }.skull-mark i { position:absolute; top:49%; left:5%; width:90%; height:1.25rem; border-top:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(39deg); }.skull-mark i:last-child { transform:rotate(-39deg); }
.placeholder { position:fixed; z-index:50; inset:0; overflow:hidden; display:flex; flex-direction:column; padding:clamp(1.25rem,3vw,2.75rem); background:radial-gradient(ellipse at 50% 42%,#062942,#02060d 68%); color:var(--ice); }.placeholder-grid { position:absolute; z-index:-1; inset:42% -15% -22%; background-image:linear-gradient(rgba(63,221,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(63,221,255,.35) 1px,transparent 1px); background-size:4rem 4rem; transform:perspective(500px) rotateX(60deg); }.placeholder-header { display:flex; align-items:center; gap:1rem; color:#8aaebc; font-size:.62rem; letter-spacing:.16em; }.placeholder-header>span { color:var(--cyan); font:1.2rem "Michroma",sans-serif; letter-spacing:-.14em; text-shadow:0 0 10px var(--cyan); }.placeholder-header p { margin:0; }.exit-grid { margin-left:auto; border:1px solid #32556a; background:transparent; color:#b9e4ec; padding:.45rem .65rem; font:inherit; font-size:.58rem; letter-spacing:.14em; cursor:pointer; }.placeholder-body { margin:auto; text-align:center; }.placeholder-body h2 { margin:.9rem 0 1rem; font:clamp(2.7rem,10vw,8rem)/.82 "Michroma",sans-serif; letter-spacing:-.1em; color:transparent; -webkit-text-stroke:1px rgba(216,255,255,.75); text-shadow:0 0 12px rgba(98,246,255,.7); }.placeholder-body h2 strong { color:var(--ice); font-weight:400; -webkit-text-stroke:0; text-shadow:0 0 14px var(--cyan),0 0 40px var(--blue); }.placeholder-body>p:not(.kicker) { color:#9bbfce; line-height:1.6; }.placeholder-nodes { display:flex; justify-content:center; gap:1rem; margin-top:2.5rem; }.placeholder-nodes i { width:.65rem; height:.65rem; border:1px solid var(--cyan); background:#071621; box-shadow:0 0 13px var(--cyan); animation:pulse 1.4s infinite; }.placeholder-nodes i:nth-child(2){animation-delay:.18s}.placeholder-nodes i:nth-child(3){animation-delay:.36s}.placeholder-nodes i:nth-child(4){animation-delay:.54s}
.placeholder[hidden] { display:none; }
@keyframes cursor-spin { to { transform:rotate(360deg); } } @keyframes burst { from { transform:scale(.2) rotate(0); } to { transform:scale(1.8) rotate(160deg); opacity:0; } } @keyframes flash { 40% { background:var(--ice); box-shadow:0 0 35px 18px var(--cyan),0 0 70px 35px var(--blue); } } @keyframes crackle { 0%,100% { opacity:0; } 20%,70% { opacity:1; } 40% { transform:translate(2px,-1px); } } @keyframes button-crackle { 18%,50% { filter:brightness(1.65) drop-shadow(0 0 8px var(--cyan)); } }
@media(max-width:550px){.access-dialog form{padding:2rem}.placeholder-header p{display:none}.energy-cursor{display:none}}

/* Keep readable interface layers independent of the animated background stack. */
.landing > .masthead { position:absolute !important; z-index:20 !important; top:clamp(1.25rem,3vw,2.75rem); left:clamp(1.25rem,3vw,2.75rem); right:clamp(1.25rem,3vw,2.75rem); }
.landing > .hero { position:absolute !important; z-index:20 !important; inset:0; margin:0 !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; padding:clamp(4rem,10vh,7rem) 1.25rem 3rem !important; }
.landing > .footer { position:absolute !important; z-index:20 !important; left:clamp(1.25rem,3vw,2.75rem); right:clamp(1.25rem,3vw,2.75rem); bottom:clamp(1.25rem,3vw,2.75rem); }