:root {
  color-scheme: dark;
  --bg: #050508;
  --surface: #0b0a10;
  --surface-2: #110f18;
  --surface-3: #18161f;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --fg: #f3f2f8;
  --muted: #a7a4b7;
  --dim: #75728a;
  --accent: #6318fd;
  --accent-hi: #a483ff;
  --accent-rgb: 99, 24, 253;
  --accent-hi-rgb: 164, 131, 255;
  --hue: 0deg;
  --ok: #3ddc97;
  --warn: #ffb547;
  --bad: #ff5a76;
  --chrome: linear-gradient(176deg, #ffffff 10%, #e2e1ea 42%, #9c99ad 60%, #dedde8 80%, #ffffff 100%);
  --tint: linear-gradient(176deg, var(--accent-hi) 20%, rgba(var(--accent-hi-rgb), .62) 100%);
  --sans: 'Chakra Petch', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wide: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --nav-h: 70px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --star: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(var(--accent-rgb), .6); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--fg); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }

@property --iris { syntax: '<length>'; inherits: true; initial-value: 0px; }
.boot { display: none; }
.booting .boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.boot-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(99, 24, 253, .16), transparent 42vmax), #050508; -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--iris) - 1px), #000 var(--iris)); mask: radial-gradient(circle at 50% 50%, transparent calc(var(--iris) - 1px), #000 var(--iris)); }
.boot-veil::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--iris) * 2); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 0 1.5px rgba(164, 131, 255, .9), 0 0 40px 10px rgba(99, 24, 253, .55); opacity: 0; }
.boot-core { position: relative; display: grid; place-items: center; width: 200px; aspect-ratio: 1; animation: boot-in .5s var(--ease) both; }
.boot-core img { height: 76px; width: auto; filter: drop-shadow(0 0 22px rgba(99, 24, 253, .65)); animation: boot-breathe 1.6s ease-in-out infinite alternate; }
.boot-ring { position: absolute; inset: var(--in); border-radius: 50%; animation: boot-spin var(--t) linear infinite; }
.boot-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 58%, rgba(var(--c), .95)), rgba(255, 255, 255, .06); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.boot-ring::after { content: ''; position: absolute; left: 50%; top: 1px; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px 2px rgba(var(--c), .85); }
.boot-ring.r1 { --in: 44px; --c: 164, 131, 255; --t: 1.1s; }
.boot-ring.r2 { --in: 22px; --c: 104, 188, 242; --t: 1.7s; scale: -1 1; animation-name: boot-spin-back; }
.boot-ring.r3 { --in: 0px; --c: 224, 162, 27; --t: 2.6s; }
.boot-quick .boot-core { animation: boot-late .3s .35s both; }
.boot.out { pointer-events: none; }
.boot.out .boot-core { animation: boot-warp .6s cubic-bezier(.55, 0, .8, .2) forwards; }
.boot.out.fast .boot-core { visibility: hidden; animation: none; }
.boot.out .boot-veil { --iris: 80vmax; transition: --iris .8s cubic-bezier(.65, 0, .3, 1) .1s; }
.boot.out .boot-veil::after { opacity: 1; }
.boot-quick .boot.out .boot-veil { transition-duration: .55s; transition-delay: 0s; }
@keyframes boot-in { from { opacity: 0; scale: .7; } }
@keyframes boot-late { from { opacity: 0; } }
@keyframes boot-spin { to { rotate: 360deg; } }
@keyframes boot-spin-back { to { rotate: -360deg; } }
@keyframes boot-breathe { to { scale: 1.06; filter: drop-shadow(0 0 30px rgba(99, 24, 253, .9)); } }
@keyframes boot-warp { to { opacity: 0; scale: 2.4; filter: blur(4px); } }
.mono { font-family: var(--mono); }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tint { background: var(--tint); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(120% 70% at 50% -10%, #0d0820 0%, #07060d 45%, var(--bg) 80%); }
.nebula { position: absolute; inset: 0 0 auto; height: calc(100% + 800px); transform: translate3d(0, calc(var(--sy, 0) * -0.12px), 0); will-change: transform; }
.nebula i { position: absolute; border-radius: 50%; animation: drift-a 42s ease-in-out infinite alternate; }
.nebula .n1 { width: 78vw; height: 56vw; left: -22vw; top: -26vw; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .34), rgba(var(--accent-rgb), .1) 55%, transparent); }
.nebula .n2 { width: 64vw; height: 46vw; right: -24vw; top: 18vh; background: radial-gradient(closest-side, rgba(var(--accent-hi-rgb), .16), rgba(var(--accent-rgb), .06) 60%, transparent); animation-name: drift-b; animation-duration: 54s; }
.nebula .n3 { width: 70vw; height: 50vw; left: -18vw; top: calc(100vh + 120px); background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent); animation-duration: 60s; }
.nebula .n4 { width: 60vw; height: 44vw; right: -16vw; top: calc(100vh + 420px); background: radial-gradient(closest-side, rgba(var(--accent-hi-rgb), .14), transparent); animation-name: drift-b; animation-duration: 48s; }
@keyframes drift-a { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-5vw, -3vh, 0) scale(.92); } }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.spot::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), #000, transparent 75%); mask-image: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), #000, transparent 75%); }
.spot::after { content: ''; position: absolute; inset: 0; background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, 50%), rgba(var(--accent-rgb), .1), transparent 70%); }
.sky.lit .spot { opacity: 1; }
.grain { position: absolute; inset: 0; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; letter-spacing: 0; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .3s, background-color .2s, border-color .2s; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-primary { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(var(--accent-hi-rgb), .35), 0 12px 32px -12px rgba(var(--accent-rgb), .9); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(var(--accent-hi-rgb), .55), 0 16px 44px -10px rgba(var(--accent-rgb), 1); }
.btn-ghost { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .07); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dim); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, .16); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 181, 71, .16); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(255, 90, 118, .16); }
.dot.soon { background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(var(--accent-hi-rgb), .18); }
.dot.live { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0); } }

.badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .01em; color: var(--fg); background: rgba(8, 7, 12, .66); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1.2 var(--wide); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-hi); }
.eyebrow::before { content: ''; width: 11px; height: 11px; flex: none; background: currentColor; clip-path: var(--star); }

.ticker { position: relative; z-index: 51; height: 36px; overflow: hidden; border-bottom: 1px solid rgba(var(--accent-hi-rgb), .14); background: linear-gradient(90deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .07) 32%, rgba(var(--accent-rgb), .07) 68%, rgba(var(--accent-rgb), .28)); font-size: 12.5px; }
.ticker::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .07) 50%, transparent 58%); transform: translateX(-100%); animation: sweep 10s ease-in-out infinite; }
@keyframes sweep { 55%, 100% { transform: translateX(100%); } }
.ticker .wrap { height: 100%; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 18px; }
.tk-checked { justify-self: end; }
.tk-label { display: inline-flex; align-items: center; gap: 9px; font: 600 11px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-hi); white-space: nowrap; }
.tk-viewport { min-width: 0; height: 36px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); }
.tk-list { transition: transform .7s var(--ease); }
.tk-list li { height: 36px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.tk-item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; color: var(--muted); white-space: nowrap; }
a.tk-item:hover { color: var(--fg); }
.tk-item b { color: var(--fg); font-weight: 600; }
.tk-item i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); flex: none; }
.tk-item em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.tk-checked { font: 500 11.5px/1 var(--mono); color: var(--dim); white-space: nowrap; transition: color .2s; }
.tk-checked:hover { color: var(--fg); }

.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); padding-top: 10px; pointer-events: none; }
.nav .wrap { height: 100%; }
.bar { position: relative; height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 10px 0 12px; border-radius: 20px; pointer-events: auto; background: linear-gradient(180deg, rgba(24, 19, 40, .6), rgba(10, 9, 17, .5)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 40px -24px rgba(0, 0, 0, .9); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: background-color .3s, box-shadow .4s; }
.nav.scrolled .bar { background: linear-gradient(180deg, rgba(20, 16, 34, .86), rgba(9, 8, 14, .82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -24px rgba(0, 0, 0, .95), 0 0 50px -22px rgba(var(--accent-rgb), .7); }

@property --orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bar::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--orbit), transparent 0 64%, rgba(var(--accent-hi-rgb), .15) 72%, rgba(var(--accent-hi-rgb), .95) 84%, #fff 86%, rgba(var(--accent-hi-rgb), .4) 88%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: orbit-border 9s linear infinite; }
@keyframes orbit-border { to { --orbit: 360deg; } }

.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .12) 72%), #0b0912; box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .35), 0 0 22px -6px rgba(var(--accent-rgb), .9); }
.brand-mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.brand:hover .brand-mark::after { transform: translateX(120%); }
.brand-mark img { width: 21px; height: auto; filter: hue-rotate(var(--hue)) drop-shadow(0 0 6px rgba(var(--accent-hi-rgb), .8)); }
.brand-word { font: 700 17px/1 var(--wide); letter-spacing: .2em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-links a { position: relative; z-index: 1; padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s, background-color .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--fg); }
.nav-ind { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s; }
.nav-ind::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--accent-hi); box-shadow: 0 0 10px 1px var(--accent-hi); }
.nav-side { display: flex; align-items: center; gap: 10px; justify-self: end; }
.nav .btn-sm { height: 38px; border-radius: 12px; padding: 0 16px; gap: 8px; }
.nav .btn-sm svg { width: 17px; height: 17px; }
.nav-progress { position: absolute; left: 18px; bottom: -1px; height: 1px; width: calc((100% - 36px) * var(--p, 0)); background: linear-gradient(90deg, transparent, rgba(var(--accent-hi-rgb), .9)); pointer-events: none; }
.nav-progress::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--accent-hi); }
.nav-progress[data-empty]::after { display: none; }
.online { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); place-items: center; }
.nav-toggle span { position: relative; display: block; width: 16px; height: 1.5px; background: var(--fg); box-shadow: 0 -5px 0 var(--fg), 0 5px 0 var(--fg); transition: box-shadow .2s, transform .2s; }
.nav.open .nav-toggle span { box-shadow: none; transform: rotate(45deg); }
.nav.open .nav-toggle span::after { content: ''; position: absolute; inset: 0; background: var(--fg); transform: rotate(-90deg); }

@media (max-width: 880px) {
  .nav-toggle { display: grid; }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px; border-radius: 18px; background: radial-gradient(120% 80% at 100% 0%, #1a1230, #0c0a14 60%); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 14px; font-size: 16px; }
  .nav-links a:hover { background: rgba(255, 255, 255, .06); }
  .nav-ind { display: none; }
  .bar { grid-template-columns: 1fr auto; }
}
@media (max-width: 720px) {
  .tk-label, .tk-checked { display: none; }
  .ticker .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .brand-word { display: none; }
}

.hero { position: relative; display: grid; place-items: center; min-height: min(calc(100svh - var(--nav-h) - 36px), 960px); padding: clamp(4px, 2vh, 24px) 0 clamp(48px, 8vh, 96px); text-align: center; isolation: isolate; overflow-x: clip; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.traces { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.traces svg { position: absolute; width: min(46vw, 560px); height: auto; opacity: .55; }
.traces .tl { left: -2%; top: 6%; }
.horizon-wrap { position: absolute; inset: 0 0 -240px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent); }
.horizon { position: absolute; left: 50%; top: calc(100% - 340px); width: max(2600px, 230vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border-top: 1px solid rgba(var(--accent-hi-rgb), .6); background: linear-gradient(to bottom, rgba(5, 5, 8, .94), rgba(5, 5, 8, .6) 50px, rgba(5, 5, 8, 0) 96px); box-shadow: 0 -24px 120px -30px rgba(var(--accent-rgb), .95), inset 0 40px 70px -50px rgba(var(--accent-hi-rgb), .7); }
.traces .br { right: -2%; bottom: 4%; transform: rotate(180deg); }
.traces path { fill: none; stroke-linecap: round; }
.traces .base { stroke: rgba(var(--accent-hi-rgb), .28); stroke-width: 1.2; }
.traces .pulse { stroke: var(--accent-hi); stroke-width: 1.6; stroke-dasharray: 70 1400; animation: trace 7s linear infinite; filter: drop-shadow(0 0 6px var(--accent-hi)); }
.traces .br .pulse { animation-delay: -3.5s; }
@keyframes trace { from { stroke-dashoffset: 1470; } to { stroke-dashoffset: 0; } }

.stage { position: relative; width: min(700px, 100%, 68vh); aspect-ratio: 1000 / 520; margin: 0 auto; }
.stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .08) 60%, transparent); filter: blur(10px); }
.stage .outer { position: absolute; left: 50%; top: 50%; z-index: 0; width: 230%; height: auto; max-width: none; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.outer ellipse { fill: none; stroke: rgba(var(--accent-hi-rgb), .38); stroke-width: 1.6; stroke-dasharray: 3 14; animation: dash 80s linear infinite; }
.outer ellipse + ellipse { stroke: rgba(var(--accent-hi-rgb), .2); stroke-dasharray: 2 10; animation-duration: 110s; animation-direction: reverse; }
@keyframes dash { to { stroke-dashoffset: -1700; } }
.stage .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage .ring.back { z-index: 1; }
.stage .ring.front { z-index: 3; }
.ring ellipse, .ring path { fill: none; vector-effect: non-scaling-stroke; }
.ring.back ellipse { stroke: rgba(var(--accent-hi-rgb), .26); stroke-width: 1; }
.ring.front path { stroke: url(#ring-grad); stroke-width: 1.6; }
.mark-box { position: absolute; left: 50%; top: 50%; z-index: 2; height: 94%; aspect-ratio: 290 / 360; transform: translate(-50%, -50%); }
.mark-box img { width: 100%; height: 100%; filter: hue-rotate(var(--hue)) drop-shadow(0 0 30px rgba(var(--accent-rgb), .45)); }
.glint { position: absolute; left: 45.6%; top: 46.5%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.glint::before, .glint::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, #fff, rgba(var(--accent-hi-rgb), .9) 30%, transparent 70%); clip-path: var(--star); animation: glint 5s ease-in-out infinite; }
.glint::after { inset: 32%; background: #fff; clip-path: none; border-radius: 50%; filter: blur(4px); animation-name: glint-core; }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes glint-core { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .8; } }

.planet { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 1; border-radius: 50%; background: var(--g) center / cover no-repeat; box-shadow: 0 0 0 1.5px var(--g), 0 0 24px -2px var(--g); will-change: transform, opacity; transition: box-shadow .3s; }
.planet::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), transparent 45%), radial-gradient(circle at 70% 75%, rgba(0, 0, 0, .55), transparent 60%); }
.planet .pl-label { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; background: rgba(8, 7, 12, .85); border: 1px solid var(--line-2); font: 500 11px/1 var(--mono); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.planet.hot { box-shadow: 0 0 0 2px #fff, 0 0 34px 2px var(--g); }
.planet.hot .pl-label, .planet:hover .pl-label { opacity: 1; }

.hero h1 { margin-top: clamp(4px, 1.5vh, 16px); font-size: clamp(34px, 5.6vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; }
.hero h1 span { display: block; padding-bottom: .06em; }
.hero .lede { max-width: 580px; margin-top: 22px; font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muted); }
.hero .lede b { color: var(--fg); font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; max-width: 940px; }
.chip { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); font-size: 13.5px; font-weight: 500; transition: border-color .2s, background-color .2s; }
.chip small { font: 500 11px/1 var(--mono); color: var(--dim); }
.chip:hover, .chip.hot { border-color: color-mix(in srgb, var(--g, var(--accent-hi)) 55%, transparent); background: rgba(255, 255, 255, .05); }
.hero .members { margin-top: 18px; font: 500 12px/1 var(--mono); color: var(--dim); }

.section { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.section.tight { padding-top: clamp(24px, 4vw, 48px); }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(32px, 4vw, 52px); }
.head.center { flex-direction: column; align-items: center; text-align: center; }
.head.center .sub { margin-inline: auto; }
.h2 { margin-top: 14px; font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; }
.h2, .hero h1, .sub, .hero .lede { text-wrap: balance; }
.sub { max-width: 560px; margin-top: 16px; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }

.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.search { position: relative; flex: 1 1 240px; max-width: 340px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 14.5px; transition: border-color .2s, background-color .2s; }
.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; border-color: rgba(var(--accent-hi-rgb), .6); background: rgba(255, 255, 255, .05); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color .2s, border-color .2s, background-color .2s; }
.filter b { font: 500 11.5px/1 var(--mono); color: var(--dim); font-weight: 500; }
.filter:hover { color: var(--fg); border-color: var(--line-2); }
.filter[aria-pressed="true"] { color: var(--fg); border-color: rgba(var(--accent-hi-rgb), .5); background: rgba(var(--accent-rgb), .14); }
.status-sum { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--mono); color: var(--dim); }

.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.card { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: border-color .3s, transform .45s var(--ease), box-shadow .45s; }
.card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--g) 22%, transparent), transparent 50%); opacity: 0; transition: opacity .35s; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--g) 50%, var(--line-2)); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--g) 70%, transparent); }
.card:hover::after { opacity: 1; }
.art { position: relative; aspect-ratio: 616 / 353; overflow: hidden; background: var(--surface-2); }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .art img { transform: scale(1.05); }
.art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(11, 10, 16, .85)); }
.art .badge { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.art-fb { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--g) 55%, transparent), transparent 60%), radial-gradient(80% 80% at 0% 100%, color-mix(in srgb, var(--g) 25%, transparent), transparent 70%), #0d0b13; }
.art-fb::before { content: ''; position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 3.6; border: 1px solid color-mix(in srgb, var(--g) 60%, transparent); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.art-fb span { position: relative; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: 0; text-align: center; line-height: 1.05; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.card .body { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.card h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.card h3 a::before { content: ''; position: absolute; inset: 0; z-index: 4; }
.card p { font-size: 14.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; font: 500 12px/1.2 var(--mono); color: var(--dim); }
.card .foot .go { color: var(--fg); font-family: var(--sans); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: transform .25s var(--ease); }
.card:hover .foot .go { transform: translateX(3px); }

.request { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 20px 24px; border-radius: 18px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .015); transition: border-color .3s, background-color .3s; }
.request:hover { border-color: rgba(var(--accent-hi-rgb), .55); background: rgba(var(--accent-rgb), .06); }
.request .plus { grid-row: span 2;  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 20px; color: var(--accent-hi); }
.request h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.request p { font-size: 14.5px; color: var(--muted); }
.request .go { grid-column: 3; grid-row: 1 / span 2; font-size: 14px; font-weight: 600; white-space: nowrap; }
.request h3, .request p { grid-column: 2; }
.empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 18px; }
.more-row { display: flex; justify-content: center; margin-top: 24px; }

.features { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.features .feature:first-child { grid-row: span 2; }
.feature { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%); overflow: hidden; }
.feature h3 { font-size: 21px; font-weight: 600; letter-spacing: 0; }
.feature > p { color: var(--muted); font-size: 15px; }
.screen { margin-top: auto; padding-top: 14px; }
.ticket-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ticket-types li { display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: border-color .2s, background-color .2s; }
.ticket-types li:hover { border-color: rgba(var(--accent-hi-rgb), .35); background: rgba(var(--accent-rgb), .07); }
.tt-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; background: rgba(var(--accent-rgb), .14); font-size: 16px; }
.ticket-types b { display: block; font-weight: 600; font-size: 14.5px; }
.ticket-types small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 720px) { .ticket-types { grid-template-columns: 1fr; } .ticket-types li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center; } .tt-ic { grid-row: span 2; margin: 0; } }
.dc, .chans { font-family: 'gg sans', 'Noto Sans', 'Segoe UI', system-ui, sans-serif; }
.dc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 14px; background: #111216; border: 1px solid rgba(255, 255, 255, .06); font-size: 13px; line-height: 1.45; }
.dc > img { width: 36px; height: 36px; border-radius: 50%; }
.dc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.dc-bot { padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; }
.dc-time { color: #80848e; font-size: 11px; font-weight: 400; }
.dc-embed { margin-top: 8px; padding: 10px 12px; border-radius: 6px; background: #1b1c21; border-left: 4px solid var(--accent); display: grid; gap: 6px; }
.dc-embed b { font-weight: 600; }
.dc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: #c9cbd1; }
.dc-fields strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-btns span { padding: 5px 9px; border-radius: 6px; background: #3b3d44; font-size: 12px; font-weight: 500; }
.dc-btns .g { background: #248046; }
.dc-btns .r { background: #da373c; }
.dc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-files span { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: #1b1c21; font-size: 12px; color: #00a8fc; }
.sk { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.chans { padding: 14px; border-radius: 14px; background: #111216; border: 1px solid rgba(255, 255, 255, .06); font-size: 14px; color: #949ba4; display: grid; gap: 2px; }
.chans .cat { padding: 2px 8px 6px; font: 600 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #949ba4; }
.chans div:not(.cat) { padding: 7px 8px; border-radius: 6px; }
.chans .unread { color: #f2f3f5; background: rgba(255, 255, 255, .06); font-weight: 600; }
.chans .free { display: flex; align-items: center; gap: 8px; }
.chans .free span { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(61, 220, 151, .14); color: var(--ok); font: 600 11px/1.4 var(--mono); }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.promise { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); }
.promise .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--accent-hi); }
.promise .ic svg { width: 21px; height: 21px; }
.promise h3 { font-size: 16.5px; font-weight: 600; letter-spacing: 0; }
.promise p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rule { padding: clamp(24px, 3vw, 36px); border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.rule.yes { border-color: rgba(var(--accent-hi-rgb), .3); background: radial-gradient(90% 120% at 0% 0%, rgba(var(--accent-rgb), .2), transparent 60%), var(--surface); }
.rule h3 { font: 600 13px/1.2 var(--wide); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rule.yes h3 { color: var(--accent-hi); }
.rule ul { display: grid; gap: 14px; margin-top: 22px; }
.rule li { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.rule li::before { content: ''; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: center / 14px no-repeat; }
.rule.yes li::before { background-color: rgba(61, 220, 151, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.rule.no li::before { background-color: rgba(255, 90, 118, .13); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a76' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.rules-note { margin-top: 24px; text-align: center; font-size: 14.5px; color: var(--muted); }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { padding-top: 22px; padding-bottom: 22px; font-weight: 600; font-size: 15px; }
.compare tbody th { width: 26%; font: 500 12.5px/1.5 var(--mono); color: var(--dim); padding-top: 21px; }
.compare .us { position: relative; width: 37%; background: rgba(var(--accent-rgb), .09); border-left: 1px solid rgba(var(--accent-hi-rgb), .28); border-right: 1px solid rgba(var(--accent-hi-rgb), .28); font-weight: 500; }
.compare thead .us { border-top: 1px solid rgba(var(--accent-hi-rgb), .28); border-radius: 18px 18px 0 0; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:last-child .us { border-bottom: 1px solid rgba(var(--accent-hi-rgb), .28); border-radius: 0 0 18px 18px; }
.compare .them { color: var(--muted); }
.compare td.us::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--accent-hi); clip-path: var(--star); vertical-align: 1px; }
.compare .who { display: flex; align-items: center; gap: 10px; }
.compare .who img { width: 22px; height: auto; filter: hue-rotate(var(--hue)); }
.compare .who .q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--line-2); color: var(--dim); font-size: 12px; }
.compare-cta { display: flex; justify-content: center; margin-top: 32px; }

.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps::before { content: ''; position: absolute; left: 22px; right: calc((100% - 72px) / 4 - 22px); top: 22px; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-hi-rgb), .1), rgba(var(--accent-hi-rgb), .55) 50%, rgba(var(--accent-hi-rgb), .1)); }
.steps li { position: relative; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(var(--accent-hi-rgb), .4); font: 500 12px/1 var(--mono); color: var(--accent-hi); }
.steps li:last-child::before { background: var(--accent); border-color: var(--accent-hi); color: #fff; box-shadow: 0 0 30px rgba(var(--accent-rgb), .7); }
.steps h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.steps p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.steps b { color: var(--fg); font-weight: 500; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-size: 17px; font-weight: 600; letter-spacing: 0; cursor: pointer; list-style: none; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-hi); }
.faq details p { padding: 0 2px 22px; color: var(--muted); max-width: 640px; }
.faq code { font: 500 .9em var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--fg); }
.terms { position: sticky; top: calc(var(--nav-h) + 24px); padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.terms h3 { margin-top: 14px; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.terms ul { display: grid; gap: 14px; margin-top: 20px; }
.terms li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--muted); }
.terms li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--accent-hi); clip-path: var(--star); }
.terms b { color: var(--fg); font-weight: 600; }

.join { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; border: 1px solid rgba(var(--accent-hi-rgb), .25); background: radial-gradient(60% 90% at 100% 0%, rgba(var(--accent-rgb), .35), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(var(--accent-rgb), .18), transparent 70%), var(--surface); isolation: isolate; }
.join::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-55deg, transparent 0 46px, rgba(255, 255, 255, .025) 46px 47px); mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.join .sub { max-width: 440px; }
.invite { display: grid; justify-items: center; gap: 14px; padding: 28px 24px 24px; border-radius: 22px; background: rgba(5, 5, 8, .6); border: 1px solid var(--line-2); text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.invite > img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 0 0 1px var(--line-2), 0 10px 40px -10px rgba(var(--accent-rgb), .9); }
.invite h3 { font: 700 24px/1 var(--wide); letter-spacing: .18em; }
.invite .counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.invite .counts span { display: inline-flex; align-items: center; gap: 8px; }
.invite .counts b { color: var(--fg); font-weight: 600; }
.invite .btn { width: 100%; }
.code { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); color: var(--dim); }
.code button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 11px/1 var(--mono); color: var(--muted); transition: color .2s, border-color .2s; }
.code button:hover { color: var(--fg); border-color: rgba(255, 255, 255, .3); }

footer { border-top: 1px solid var(--line); padding: 40px 0 calc(48px + env(safe-area-inset-bottom)); margin-top: clamp(48px, 8vw, 96px); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--muted); }
footer nav a:hover { color: var(--fg); }
footer .legal { flex-basis: 100%; font-size: 13px; color: var(--dim); }

.g-hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + clamp(48px, 9vw, 120px)) 0 clamp(40px, 6vw, 72px); min-height: min(76svh, 720px); display: flex; align-items: flex-end; overflow: hidden; }
.g-bg { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); background: radial-gradient(70% 90% at 80% 20%, color-mix(in srgb, var(--g) 40%, transparent), transparent 70%), #0b0a10; }
.g-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.g-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 8, .94) 0%, rgba(5, 5, 8, .72) 38%, rgba(5, 5, 8, .1) 75%), linear-gradient(to top, rgba(5, 5, 8, .6) 0%, transparent 50%), linear-gradient(to bottom, rgba(5, 5, 8, .7), transparent 30%); }
.crumbs { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-hidden] { color: var(--dim); }
.g-title { margin-top: 26px; }
.g-title img { max-height: clamp(72px, 12vw, 160px); max-width: min(520px, 100%); width: auto; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6)); }
.g-title .chrome { font-size: clamp(44px, 7vw, 92px); font-weight: 700; line-height: 1; letter-spacing: .005em; text-transform: uppercase; }
.g-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.g-blurb { max-width: 560px; margin-top: 18px; font-size: clamp(16px, 1.5vw, 19px); color: #d6d4e0; }
.g-hero .cta { justify-content: flex-start; margin-top: 28px; }

.inside { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.inside-item { position: relative; padding: 18px 20px 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.inside-item::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--g, var(--accent-hi)); box-shadow: 0 0 10px var(--g, var(--accent-hi)); }
.inside-item h3 { font: 600 12.5px/1.2 var(--wide); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--g, var(--accent-hi)) 70%, #fff); }
.inside-item p { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (min-width: 1210px) { .inside-item.wide { grid-column: span 2; } }
.g-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.h3 { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.spec { margin-top: 18px; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 12.5px/1.6 var(--mono); color: var(--dim); }
.spec dd { font-size: 15.5px; }
.spec dd .badge { margin-right: 10px; vertical-align: middle; }
.spec .checked { font: 500 12.5px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.online > span { display: inline-flex; align-items: center; gap: 8px; }
.g-block { margin-top: 44px; }
.g-block p { margin-top: 10px; color: var(--muted); max-width: 560px; }
.g-block .chans { margin-top: 18px; max-width: 360px; }
.buy { position: sticky; top: calc(var(--nav-h) + 24px); padding: 28px; border-radius: 22px; border: 1px solid rgba(var(--accent-hi-rgb), .28); background: radial-gradient(100% 70% at 100% 0%, rgba(var(--accent-rgb), .22), transparent 70%), var(--surface); }
.buy h2 { font-size: 22px; font-weight: 600; letter-spacing: 0; }
.buy > p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.buy ol { display: grid; gap: 12px; margin: 22px 0 24px; counter-reset: s; }
.buy li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; counter-increment: s; }
.buy li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(var(--accent-hi-rgb), .4); font: 500 11.5px/1 var(--mono); color: var(--accent-hi); }
.buy .btn { width: 100%; }
.buy .fine { margin-top: 16px; font-size: 13px; color: var(--dim); }
.buy .online { margin-top: 14px; }
.not-found { padding: clamp(80px, 14vw, 160px) 0; text-align: center; }
.not-found .cta { margin-top: 28px; }

.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; border-radius: 999px; background: rgba(11, 10, 16, .82); border: 1px solid var(--line-2); font: 500 12.5px/1 var(--mono); color: var(--muted); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .2s, border-color .2s, transform .25s var(--ease); }
.fab:hover, .fab[aria-expanded="true"] { color: var(--fg); border-color: rgba(var(--accent-hi-rgb), .55); }
.fab .st { width: 12px; height: 12px; background: var(--accent-hi); clip-path: var(--star); transition: transform .5s var(--ease); }
.fab:hover .st, .fab[aria-expanded="true"] .st { transform: rotate(90deg); }
.fab kbd { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-2); font: 500 10.5px/1 var(--mono); color: var(--dim); }
.fab .touch { display: none; }
@media (hover: none) { .fab .key { display: none; } .fab .touch { display: inline; } }

.dmenu { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px); z-index: 61; width: min(360px, calc(100vw - 32px)); padding: 8px; border-radius: 18px; background: rgba(11, 10, 16, .94); border: 1px solid rgba(var(--accent-hi-rgb), .35); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(var(--accent-rgb), .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: var(--mono); animation: pop .25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dm-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-hi); }
.dm-head small { font-size: 10.5px; letter-spacing: .04em; text-transform: none; color: var(--dim); }
.dm-opts { display: grid; gap: 2px; }
.opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 13px; text-align: left; transition: background-color .15s; }
.opt:hover, .opt:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.opt small { display: block; margin-top: 2px; font-size: 11px; color: var(--dim); }
.opt .v { flex: none; min-width: 42px; padding: 5px 8px; border-radius: 6px; font-size: 11px; text-align: center; background: rgba(255, 255, 255, .06); color: var(--dim); }
.opt .v.on { background: rgba(61, 220, 151, .16); color: var(--ok); }
.opt .v.pick { background: rgba(var(--accent-rgb), .2); color: var(--accent-hi); }
.dm-foot { padding: 12px 12px 8px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--dim); }
.dm-foot a { color: var(--accent-hi); }

.toasts { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 70; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { padding: 12px 18px; border-radius: 999px; background: rgba(11, 10, 16, .94); border: 1px solid rgba(var(--accent-hi-rgb), .5); font: 500 13px/1.2 var(--mono); box-shadow: 0 0 40px -10px rgba(var(--accent-rgb), .9); animation: toast 3.2s var(--ease) forwards; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.spark { position: fixed; z-index: 69; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent-hi); clip-path: var(--star); pointer-events: none; animation: spark 1.3s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2); opacity: 0; } }

.fx-wire :is(.sky, .traces, .horizon-wrap, .outer, .glint, .art-fb, .spot, .grain) { display: none !important; }
.fx-wire .stage::before, .fx-wire .ticker::after, .fx-wire .bar::before, .fx-wire .card::after, .fx-wire .art::after, .fx-wire .g-bg::after, .fx-wire .join::before { display: none !important; }
.fx-wire body { background: linear-gradient(rgba(var(--accent-hi-rgb), .07) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(var(--accent-hi-rgb), .07) 1px, transparent 1px) 0 0 / 32px 32px, #04040a; }
.fx-wire :is(.ticket-types li, .inside-item, .card, .feature, .promise, .rule, .terms, .buy, .invite, .join, .request, .dc, .chans, .search input, .filter, .chip, .btn, .badge, .compare .us, .faq details, .spec > div, .empty, .stage) { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; outline: 1px dashed rgba(var(--accent-hi-rgb), .42); outline-offset: -1px; }
.fx-wire .stage { outline-style: dotted; }
.fx-wire .bar, .fx-wire .ticker { background: rgba(4, 4, 10, .95) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; outline: 1px dashed rgba(var(--accent-hi-rgb), .42); outline-offset: -1px; }
.fx-wire .steps li::before { background: transparent; box-shadow: none; }
.fx-wire :is(.chrome, .tint) { background: none !important; color: #ece8ff !important; -webkit-text-fill-color: currentColor; }
.fx-wire .btn-primary { color: var(--accent-hi); }
.fx-wire :is(.art img, .g-bg img, .planet, .g-title img, .dc img, .invite > img) { filter: grayscale(1) brightness(1.3) contrast(1.15) !important; opacity: .3 !important; }
.fx-wire .mark-box img { filter: grayscale(1) brightness(1.4) drop-shadow(0 0 1px #fff) !important; opacity: .55; }

.esp { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.esp-box { position: absolute; left: 0; top: 0; --c: var(--accent-hi); will-change: transform; }
.esp-box::before { content: ''; position: absolute; inset: 0; filter: drop-shadow(0 0 4px var(--c)); background: linear-gradient(var(--c), var(--c)) 0 0 / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 14px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 14px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 14px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 14px no-repeat; }
.esp-tag { position: absolute; left: 0; bottom: calc(100% + 6px); display: inline-flex; align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid var(--c); background: rgba(4, 4, 10, .88); font: 600 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.esp-tag em { font-style: normal; color: #d8d4ea; }
.esp-hp { position: absolute; left: -8px; top: 0; bottom: 0; width: 3px; background: rgba(255, 255, 255, .12); }
.esp-hp i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hp, 100%); background: var(--hpc, var(--ok)); box-shadow: 0 0 6px var(--hpc, var(--ok)); }
.esp-box.small .esp-tag { bottom: calc(100% + 3px); padding: 3px 5px; font-size: 9.5px; }
.esp-box.off::before, .esp-box.off .esp-hp { display: none; }
.esp-box.off .esp-tag { position: static; }
.esp-box.lock { --c: #ff4d6d; }

.fx-overlay { position: fixed; inset: 0; z-index: 58; pointer-events: none; display: none; overflow: hidden; }
:is(.vis-nv, .vis-thermal, .vis-retro) .fx-overlay { display: block; }
.vis-nv :is(.sky, .ticker, .nav, main, footer) { filter: grayscale(1) sepia(1) hue-rotate(62deg) saturate(4.5) brightness(1.2) contrast(1.1); }
.vis-nv .fx-overlay { background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 16, 2, .9) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.vis-nv .fx-overlay::after { content: ''; position: absolute; inset: 0; background: rgba(80, 255, 110, .05); animation: flicker .14s steps(2) infinite; }
.vis-thermal :is(.sky, .ticker, .nav, main, footer) { filter: url(#fx-thermal); }
.vis-thermal .fx-overlay { background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 0, 30, .65)); }
.vis-rgb :is(.sky, .ticker, .nav, main, footer) { animation: rgb-cycle 4s linear infinite; }
@keyframes rgb-cycle { from { filter: hue-rotate(0deg) saturate(1.7); } to { filter: hue-rotate(360deg) saturate(1.7); } }
.vis-retro :is(.ticker, .nav, main, footer) { filter: contrast(1.25) saturate(1.6); }
.vis-retro :is(.hero h1, .h2, .card h3, .feature h3, .btn, .g-title) { text-shadow: -2px 0 rgba(255, 0, 90, .75), 2px 0 rgba(0, 225, 255, .75); }
.vis-retro .fx-overlay { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .38) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .8) 100%); animation: flicker 3s steps(40) infinite; }
.vis-retro .fx-overlay::after { content: ''; position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(transparent, rgba(255, 255, 255, .06), transparent); animation: roll 6s linear infinite; }
@keyframes flicker { 50% { opacity: .85; } }
@keyframes roll { to { transform: translateY(calc(100vh + 140px)); } }

.fx-grav [data-float] { animation: drift var(--fd, 5s) ease-in-out var(--fdl, 0s) infinite alternate; }
@keyframes drift { from { translate: 0 0; rotate: 0deg; } to { translate: var(--fx, 0px) var(--fy, -10px); rotate: var(--fr, 0deg); } }

.fx-big .hero h1 { font-size: clamp(46px, 8.6vw, 120px); line-height: .95; }
.fx-big .h2 { font-size: clamp(42px, 6.4vw, 84px); }
.fx-big :is(.card h3, .request h3) { font-size: 30px; }
.fx-big :is(.feature h3, .steps h3, .terms h3, .buy h2, .h3) { font-size: 32px; }
.fx-big .faq summary { font-size: 22px; }
.fx-big .brand-mark { transform: scale(1.35); }
.fx-big .brand-word { font-size: 22px; }
.fx-big .mark-box { height: 122%; }
.fx-big .g-title img { max-height: clamp(110px, 18vw, 240px); }
.fx-big .g-title .chrome { font-size: clamp(60px, 10vw, 150px); }

.fx-cam main { transform: perspective(1500px) rotateX(var(--cam-x, 0deg)) rotateY(var(--cam-y, 0deg)); transform-origin: 50% var(--cam-oy, 50%); }

.fx-aim, .fx-aim * { cursor: none !important; }
.xhair { position: fixed; left: 0; top: 0; z-index: 72; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; color: var(--accent-hi); filter: drop-shadow(0 0 4px currentColor); transition: color .15s; }
.xhair svg { width: 100%; height: 100%; transition: transform .2s var(--ease); }
.xhair.lock { color: #ff4d6d; }
.xhair.lock svg { transform: rotate(45deg) scale(.82); }
.hit { position: fixed; z-index: 73; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; animation: hit .35s ease-out forwards; }
.hit::before, .hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; margin: -1px 0 0 -15px; background: linear-gradient(90deg, #fff 0 32%, transparent 32% 68%, #fff 68%); }
.hit::before { transform: rotate(45deg); }
.hit::after { transform: rotate(-45deg); }
.hit.on::before, .hit.on::after { background: linear-gradient(90deg, #ff4d6d 0 32%, transparent 32% 68%, #ff4d6d 68%); }
@keyframes hit { from { transform: scale(1.5); opacity: 1; } to { transform: scale(.9); opacity: 0; } }
.score-pop { position: fixed; z-index: 73; pointer-events: none; font: 700 15px/1 var(--mono); color: #ffd84d; text-shadow: 0 0 10px rgba(255, 216, 77, .7); animation: score .9s ease-out forwards; }
@keyframes score { from { transform: translate(-50%, -10px); opacity: 1; } to { transform: translate(-50%, -60px); opacity: 0; } }

.hud { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 14px; padding: 9px 14px; border-radius: 12px; background: rgba(8, 7, 12, .82); border: 1px solid var(--line-2); font: 500 11.5px/1 var(--mono); color: var(--dim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud b { color: var(--ok); font-weight: 600; }
.hud .score b { color: #ffd84d; }

.dm-opts { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dm-group { padding: 12px 12px 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.dm-group:first-child { padding-top: 4px; }
.opt { gap: 10px; }
.opt kbd { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-2); font: 500 10.5px/1 var(--mono); color: var(--dim); }
.opt > span:nth-child(2) { flex: 1; min-width: 0; }
.opt .v.pick.set { background: rgba(61, 220, 151, .16); color: var(--ok); }
.dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-reset { flex: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); font: 500 11px/1 var(--mono); color: var(--muted); transition: color .2s, border-color .2s; }
.dm-reset:hover { color: var(--fg); border-color: rgba(255, 255, 255, .3); }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .features .feature:first-child { grid-column: 1 / -1; grid-row: auto; }
  .promises { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before { display: none; }
  .faq-grid, .g-grid { grid-template-columns: 1fr; }
  .terms, .buy { position: static; }
  .join { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .status-sum { margin-left: 0; flex-basis: 100%; }
  .search { max-width: none; }
  .request { grid-template-columns: auto minmax(0, 1fr); }
  .request .go { grid-column: 2; grid-row: auto; }
  .features { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 28px; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
  .steps li::before { grid-row: span 2; margin: 0; }
  .steps p { margin-top: 4px; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .compare tbody th, .compare tbody td { width: auto !important; padding: 0; border: 0 !important; background: none !important; border-radius: 0 !important; }
  .compare tbody th { padding-top: 0; margin-bottom: 8px; }
  .compare td + td { margin-top: 6px; }
  .compare td.them::before { content: 'Random download: '; color: var(--dim); }
  .compare .us { font-weight: 500; }
  .spec > div { grid-template-columns: 1fr; gap: 4px; }
  .dc-fields { grid-template-columns: 1fr; }
  .stage .planet { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .hero .cta .btn { flex: 1 1 200px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .glint { display: none; }
  .toast { animation: none !important; }
  .traces .pulse { display: none; }
  .nebula { transform: none; }
}