:root{
  --bg:#000;--bg2:#0a0a0c;--fg:#ececf1;--dim:#7d7d8a;
  --pink:#ff2bd6;--cyan:#22f0e6;--line:#1c1c22;
  --mono:'Space Mono',ui-monospace,monospace;--display:'Unbounded',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing: intrinsic width/height attributes are set on
   images so the browser can reserve space and avoid layout shift, and without
   this the height attribute wins over the fluid width and stretches them. */
img{max-width:100%;height:auto;display:block}

.scanlines{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,var(--scan-alpha,.025)) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;padding:12px 24px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px}
.brand img{width:36px;height:36px;border-radius:50%}
.nav nav{display:flex;gap:18px;margin-left:auto;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.nav nav a:hover{color:var(--pink)}

.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg2);font-size:12px;letter-spacing:.12em}
.ticker-track{display:flex;gap:48px;white-space:nowrap;padding:8px 0;animation:tick 40s linear infinite;width:max-content}
.ticker-track span{color:var(--cyan)}
.ticker-track span:nth-child(even){color:var(--pink)}
@keyframes tick{to{transform:translateX(-50%)}}

.btn{display:inline-block;padding:14px 26px;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.04em;
  background:var(--pink);color:#000;border:2px solid var(--pink);box-shadow:4px 4px 0 var(--cyan);transition:.15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cyan)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg);box-shadow:none}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm{padding:8px 16px;font-size:12px;box-shadow:2px 2px 0 var(--cyan)}

main{max-width:1160px;margin:0 auto;padding:0 16px}
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:72px 0 64px}
.hero-logo{position:relative}
.hero-logo img,.hero-loop{width:100%;max-width:520px;margin:0 auto;filter:drop-shadow(0 0 40px rgba(255,43,214,.35))}
.hero-loop{display:block;border-radius:2px;background:#000}
.hero-still{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.follow-banner{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(34,240,230,.06),rgba(0,0,0,.9) 28%,rgba(0,0,0,.9) 72%,rgba(255,43,214,.08));
  padding:42px 24px 48px;text-align:center;
}
.follow-banner .eyebrow{margin-bottom:18px}
.follow-line{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,7.4vw,84px);line-height:1.05;letter-spacing:-.03em;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.28em .5em;
}
.follow-line a{color:var(--cyan)}
.follow-line a:last-of-type{color:var(--pink)}
.follow-line a:hover{color:var(--fg)}
.follow-verb{
  font-family:var(--mono);font-weight:400;font-size:.38em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg);padding:0 .1em;
}
.follow-meta{margin-top:18px;color:var(--dim);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.channel{border:1px solid var(--line);background:var(--bg2);padding:22px;display:block}
.channel:hover{border-color:var(--cyan)}
.channel b{display:block;font-family:var(--display);font-size:22px;color:var(--cyan);margin-bottom:8px}
.channel p{font-size:14px;color:#cfcfd8}
.hero-video-wrap{margin-top:18px;border:1px solid var(--line);background:#000}
.hero-video-wrap video{width:100%;display:block;max-height:360px;object-fit:cover}
.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:.2em;margin-bottom:12px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(64px,10vw,124px);line-height:.95;letter-spacing:-.02em}
.lede{margin:20px 0 28px;font-size:16px;max-width:52ch;overflow-wrap:anywhere}
.lede strong{color:var(--fg)}

.ca{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg2);padding:10px 12px;margin-bottom:22px;font-size:13px}
.ca-label{color:var(--pink);font-weight:700}
.ca code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.copy{background:transparent;border:1px solid var(--cyan);color:var(--cyan);font-family:var(--mono);font-size:11px;padding:4px 10px;cursor:pointer}
.copy:hover{background:var(--cyan);color:#000}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.socials{display:flex;gap:18px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.socials a:hover{color:var(--cyan)}

.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 0)}
.glitch::before{color:var(--pink);left:-3px;animation:g1 3s infinite linear alternate-reverse}
.glitch::after{color:var(--cyan);left:3px;animation:g2 2.7s infinite linear alternate-reverse}
@keyframes g1{0%{clip-path:inset(20% 0 60% 0)}20%{clip-path:inset(70% 0 5% 0)}40%{clip-path:inset(10% 0 80% 0)}60%{clip-path:inset(45% 0 30% 0)}80%{clip-path:inset(85% 0 2% 0)}100%{clip-path:inset(30% 0 50% 0)}}
@keyframes g2{0%{clip-path:inset(60% 0 10% 0)}20%{clip-path:inset(5% 0 85% 0)}40%{clip-path:inset(40% 0 40% 0)}60%{clip-path:inset(80% 0 5% 0)}80%{clip-path:inset(15% 0 70% 0)}100%{clip-path:inset(50% 0 20% 0)}}
.glitch-img{animation:jitter 6s infinite steps(1)}
@keyframes jitter{0%,94%{transform:none;filter:drop-shadow(0 0 40px rgba(255,43,214,.35))}95%{transform:translate(3px,-2px);filter:drop-shadow(-4px 0 0 var(--pink)) drop-shadow(4px 0 0 var(--cyan))}97%{transform:translate(-3px,1px)}98%{transform:none}}

.section{padding:64px 0;border-top:1px solid var(--line)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,44px);margin-bottom:28px}
.dim{color:var(--dim);font-family:var(--mono);font-weight:400;font-size:.5em;letter-spacing:.1em}
h3{font-family:var(--display);font-size:16px;color:var(--cyan);margin-bottom:8px}

.fragments{list-style:none;max-width:70ch;font-size:clamp(16px,2vw,20px)}
.fragments li{display:flex;gap:18px;padding:14px 0;border-bottom:1px dashed var(--line)}
.fragments span{color:var(--pink);font-weight:700;flex:0 0 3ch}
.sig{margin-top:20px;color:var(--cyan);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px}
.card{border:1px solid var(--line);background:var(--bg2);padding:20px;font-size:14px;position:relative}
.card::after{content:"◢";position:absolute;right:10px;bottom:6px;color:var(--pink);opacity:.4}
.feed{border:1px solid var(--line);background:var(--bg2)}
.feed-head{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.15em}
.live{color:var(--pink);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.feed ul{list-style:none}
.feed li{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:16px}
.feed time{color:var(--dim);font-size:12px;flex:0 0 10ch}

.tok{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.donut{width:220px;height:220px;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:6}
.ring{stroke:var(--line)}
.seg.s1{stroke:var(--pink)}.seg.s2{stroke:var(--cyan)}
.legend{margin-top:16px;font-size:13px;display:grid;gap:6px}
.sw{display:inline-block;width:10px;height:10px;margin-right:8px}
.sw.s1{background:var(--pink)}.sw.s2{background:var(--cyan)}.sw.s3{background:var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:400;width:40%}
.quote{margin-top:28px;color:var(--cyan);font-style:italic;text-align:center}

.timeline{list-style:none;display:grid;gap:0;border-left:2px solid var(--pink);margin-left:8px}
.timeline li{padding:14px 0 14px 24px;position:relative;font-size:14px}
.timeline li::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;background:#000;border:2px solid var(--cyan)}
.timeline b{display:block;font-family:var(--display);font-size:15px;color:var(--fg);margin-bottom:4px}
.timeline li:last-child::before{background:var(--pink);border-color:var(--pink)}

.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:20px}
.asset{border:1px solid var(--line);background:var(--bg2);padding:12px;text-align:center;font-size:12px;transition:.15s}
.asset img{margin:0 auto 10px;max-height:140px;object-fit:contain}
.asset:hover{border-color:var(--cyan);color:var(--cyan)}

footer{border-top:1px solid var(--line);padding:40px 16px;max-width:1160px;margin:0 auto;font-size:12px;color:var(--dim);display:grid;gap:10px}
footer strong{color:var(--fg)}

@media (max-width:820px){
  .nav{flex-wrap:wrap;gap:10px 16px}
  .nav nav{display:flex;flex-basis:100%;order:3;flex-wrap:wrap;gap:8px 14px;margin-left:0;padding-top:6px;font-size:11px}
  .hero{grid-template-columns:1fr;padding:32px 0 48px;text-align:center}
  .lede{margin-inline:auto;font-size:14px}.cta-row,.socials{justify-content:center}
  .follow-banner{padding:28px 16px 32px}
  .tok{grid-template-columns:1fr}.donut-wrap{justify-self:center}
}

/* --- Hyperstition Engine promo on the landing page --- */
.engine-promo{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.engine-promo p{margin-bottom:12px;font-size:14px}
.engine-promo .lede{font-size:17px;max-width:none;margin-bottom:14px}
.engine-promo .btn{margin-top:8px}
.engine-shot{position:relative;display:block;aspect-ratio:3/2;border:1px solid var(--line);background:#000;overflow:hidden}
.engine-shot:hover{border-color:var(--cyan)}
.shot-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.shot-lanes i{border-right:1px solid rgba(255,255,255,.09)}
.shot-lanes i:nth-child(odd){background:rgba(255,255,255,.045)}
.shot-glyphs{position:absolute;top:26%;left:0;right:0;text-align:center;font-size:26px;letter-spacing:.5em;color:var(--pink);text-shadow:0 0 16px var(--pink)}
.shot-line{position:absolute;left:0;right:0;bottom:22%;height:2px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
@media (max-width:820px){.engine-promo{grid-template-columns:1fr}}

/* ── Lexicon, verification and press-kit blocks on the landing page ── */
.lex{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px;margin-top:8px}
.lex dt{font-family:var(--display);font-size:14px;color:var(--cyan);margin-top:18px}
.lex dd{font-size:14px;line-height:1.7;color:#cfcfd8;padding-top:5px;border-bottom:1px solid var(--line);padding-bottom:14px}
.lex dd b{color:var(--fg)}
.steps{list-style:none;counter-reset:s;margin-top:8px}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 46px;font-size:14px;line-height:1.7;color:#cfcfd8}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-weight:700;color:var(--pink);font-size:13px;border:1px solid var(--line);padding:3px 7px}
.steps li b{color:var(--fg)}
.kit-lead{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0 6px}
.kit-lead .count{color:var(--dim);font-size:12px}
.footer-nav{flex-wrap:wrap;gap:14px 18px;margin-bottom:14px}
.fine{font-size:11px;color:var(--dim);letter-spacing:.04em;margin-top:6px}
.fine a{color:#c4c4d0;border-bottom:1px solid #35353f}
.fine a:hover,.fine a:focus-visible{color:var(--cyan)}

/* ── Footer sitemap ── */
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 28px;margin-bottom:22px;text-align:left}
.sitemap h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--pink);font-weight:400;margin-bottom:10px}
.sitemap a{display:block;font-size:13px;color:var(--dim);padding:3px 0}
.sitemap a:hover{color:var(--cyan)}


/* ── Accessibility ───────────────────────────────────────────────────────── */

/* Keyboard focus. Links inherit their colour and carry no underline, so
   without this a keyboard user has no idea where they are. */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:1px}
.btn:focus-visible{outline-offset:4px}

/* Skip link: the nav is the same on every page, so a keyboard or screen-reader
   user should not have to walk it before reaching the content. */
.skip{position:absolute;left:8px;top:-44px;z-index:60;background:var(--pink);color:#000;
  padding:9px 14px;font-size:12px;letter-spacing:.1em;font-weight:700;transition:top .12s}
.skip:focus{top:8px}

/* Decorative motion is opt-out. The ticker, the glitch split, the portrait
   jitter and the live-dot blink all run forever, which is exactly the kind of
   thing that triggers vestibular symptoms. Functional feedback in the game
   (the hit flash, the banner) keeps its opacity change but loses the movement. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .glitch::before,.glitch::after{animation:none;display:none}
  .glitch-img{animation:none}
  .live{animation:none}
  .hero-loop{display:none}
  .hero-still{position:static;width:100%;height:auto;max-width:520px;clip:auto;overflow:visible}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* <picture> must not become the flex item in the brand link, or the mark loses
   its sizing. display:contents removes the wrapper from layout entirely. */
.brand picture,.hero-logo picture,.asset picture{display:contents}

/* Unset links and the unannounced contract address. Visibly pending rather than
   dead: a link that looks live and goes to a homepage costs more trust than a
   greyed-out one. */
.pending{color:#54545f !important;cursor:default;text-decoration:none}
.socials a.pending::after{content:" · soon";font-size:9px;letter-spacing:.1em}
code.pending{font-style:italic}
.copy:disabled{opacity:.4;cursor:not-allowed}