:root{
  /* Typography compliance tokens: create expressive variable drama without falling into the repository’s overused mono-only pattern. IBM Plex Mono** for checksum strings Inter** for clear narrative passages */
  --void:#07030F;
  --gold:#F6C744;
  --magenta:#D833FF;
  --cyan:#20E7FF;
  --indigo:#24125C;
  --green:#58FF7A;
  --bone:#F7E7C1;
  --display:"Kode Mono","IBM Plex Mono",monospace;
  --grotesque:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --body:Inter,system-ui,sans-serif;
  --mono:"IBM Plex Mono","Kode Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(216,51,255,.18),transparent 35%),radial-gradient(circle at 80% 30%,rgba(32,231,255,.14),transparent 38%),linear-gradient(180deg,var(--void),#030107 55%,var(--void));color:var(--bone);font-family:var(--body);overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.scan-veil{position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(180deg,rgba(247,231,193,.035) 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.55}
.scan-veil:after{content:"";position:absolute;inset:-20%;background:linear-gradient(90deg,transparent,rgba(32,231,255,.08),transparent,rgba(216,51,255,.08),transparent);animation:veilDrift 9s linear infinite}
.cursor-sigil{position:fixed;width:28px;height:28px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:60;transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(246,199,68,.35),inset 0 0 12px rgba(32,231,255,.2);opacity:.75}
.registry-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px;padding:14px 8px;border:1px solid rgba(246,199,68,.35);background:rgba(7,3,15,.72);backdrop-filter:blur(10px);box-shadow:0 0 40px rgba(216,51,255,.12)}
.rail-stamp{width:46px;height:46px;color:var(--bone);text-decoration:none;display:grid;place-items:center;position:relative;border:1px solid rgba(247,231,193,.18);background:linear-gradient(135deg,rgba(36,18,92,.8),rgba(7,3,15,.9));transition:transform .25s,border-color .25s,box-shadow .25s}
.rail-stamp span{font-family:var(--display);color:var(--gold)}
.rail-stamp em{position:absolute;left:54px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--cyan);font-style:normal;opacity:0;transition:.25s;white-space:nowrap}
.rail-stamp:hover,.rail-stamp.active{transform:translateX(5px);border-color:var(--gold);box-shadow:0 0 22px rgba(246,199,68,.25)}
.rail-stamp:hover em,.rail-stamp.active em{opacity:1}

.gate{min-height:100vh;position:relative;isolation:isolate;overflow:hidden;padding-left:92px}
.gate:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(246,199,68,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,231,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at center,#000,transparent 75%);z-index:-2}
.split-chamber{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative}
.realm{position:relative;display:grid;place-items:center;overflow:hidden;border-inline:1px solid rgba(246,199,68,.16)}
.game-realm{background:linear-gradient(140deg,rgba(36,18,92,.9),rgba(7,3,15,.94) 58%),radial-gradient(circle at 30% 70%,rgba(88,255,122,.16),transparent 34%)}
.license-realm{background:linear-gradient(220deg,rgba(7,3,15,.95),rgba(36,18,92,.88)),radial-gradient(circle at 70% 30%,rgba(246,199,68,.18),transparent 32%)}
.realm-title{position:absolute;top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.42em;color:var(--cyan);opacity:.7}
.center-seam{--bend:0px;position:absolute;left:calc(50% + var(--bend));top:0;bottom:0;width:26px;transform:translateX(-50%);z-index:10;background:linear-gradient(180deg,transparent,var(--gold),transparent),repeating-linear-gradient(180deg,var(--cyan) 0 5px,var(--magenta) 5px 8px,transparent 8px 15px);box-shadow:0 0 35px rgba(32,231,255,.65),0 0 65px rgba(216,51,255,.35);clip-path:polygon(43% 0,72% 16%,50% 33%,80% 52%,42% 72%,62% 100%,28% 100%,45% 70%,20% 52%,48% 34%,24% 14%,36% 0);animation:seamWobble 2.7s steps(3,end) infinite}
.center-seam span{position:absolute;writing-mode:vertical-rl;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--void);animation:clauseScroll 12s linear infinite}
.wordmark-court{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;text-align:center;width:min(980px,76vw);padding:38px;border:1px solid rgba(246,199,68,.45);background:linear-gradient(90deg,rgba(7,3,15,.58),rgba(36,18,92,.42),rgba(7,3,15,.58));box-shadow:0 0 80px rgba(0,0,0,.65),inset 0 0 40px rgba(246,199,68,.08);clip-path:polygon(3% 0,97% 0,100% 14%,100% 86%,97% 100%,3% 100%,0 86%,0 14%)}
.overline{font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--gold);margin:0 0 14px;text-transform:uppercase}
.glitch-title,.glitch-heading{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;position:relative;text-shadow:2px 0 var(--magenta),-2px 0 var(--cyan),0 0 28px rgba(246,199,68,.2)}
.glitch-title{font-size:clamp(42px,8vw,116px);line-height:.86;margin:0 0 20px}.glitch-heading{font-size:clamp(36px,6vw,84px);line-height:.92;margin:10px 0 18px}
.glitch-title:before,.glitch-heading:before{content:attr(data-text);position:absolute;inset:0;color:var(--magenta);clip-path:inset(0 0 58% 0);transform:translate(3px,-2px);opacity:.55;animation:titleTear 3.8s steps(2,end) infinite}
.hero-copy,.gate-panel p,.seal-stage p{font-size:clamp(16px,1.5vw,22px);line-height:1.65;color:rgba(247,231,193,.82);max-width:760px;margin-inline:auto}
.writ-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}.writ-strip span,.micro-labels span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--void);background:linear-gradient(90deg,var(--gold),var(--bone));padding:9px 12px;box-shadow:4px 4px 0 rgba(216,51,255,.55)}
.world-map,.contract-apparatus{width:min(36vw,470px);aspect-ratio:1;position:relative;border:1px solid rgba(246,199,68,.25);box-shadow:inset 0 0 55px rgba(32,231,255,.08)}
.line-orbit{position:absolute;inset:8%;fill:none;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 8px var(--cyan));opacity:.75}.line-orbit path,.line-orbit circle{stroke-dasharray:8 12;animation:dash 12s linear infinite}
.sprite{position:absolute;width:24px;height:24px;background:var(--green);box-shadow:0 0 20px var(--green);clip-path:polygon(0 0,70% 0,70% 30%,100% 30%,100% 100%,30% 100%,30% 70%,0 70%)}.sprite.one{left:18%;top:22%;animation:float 5s infinite}.sprite.two{right:20%;top:42%;background:var(--magenta);animation:float 6s infinite reverse}.sprite.three{left:45%;bottom:18%;background:var(--gold);animation:float 4.5s infinite}
.certificate{position:absolute;left:15%;top:18%;right:18%;bottom:26%;border:2px solid var(--gold);background:rgba(247,231,193,.08);display:grid;place-items:center;font-family:var(--display);color:var(--gold);font-size:38px}.certificate i{display:block;font-family:var(--mono);font-size:11px;color:var(--cyan);font-style:normal}.wax-pixel{position:absolute;right:8%;bottom:12%;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,var(--magenta),#65007c);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--bone);box-shadow:0 0 30px rgba(216,51,255,.5)}.qr-ornament{position:absolute;left:10%;bottom:10%;width:86px;height:86px;background:conic-gradient(from 90deg,var(--gold) 0 25%,transparent 0 50%,var(--cyan) 0 75%,transparent 0);background-size:22px 22px;opacity:.75}
.crest-cloud{position:absolute;display:flex;gap:24px}.left-cloud{left:8%;bottom:12%}.right-cloud{right:8%;top:16%}.glyph{width:72px;height:72px;border:1px solid var(--gold);font-family:var(--display);font-size:32px;color:var(--gold);background:rgba(7,3,15,.72);box-shadow:0 0 22px rgba(246,199,68,.14);transition:transform .28s,box-shadow .28s,filter .28s}.relic:hover,.relic.lifted{transform:translateY(-14px) scale(1.04);box-shadow:0 16px 38px rgba(246,199,68,.28),0 0 24px rgba(32,231,255,.25);filter:drop-shadow(3px 0 0 var(--magenta)) drop-shadow(-3px 0 0 var(--cyan))}
.story-gate{display:grid;grid-template-columns:1fr 1fr}.story-gate:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,var(--gold) 0 3px,transparent 3px 12px,var(--cyan) 12px 16px,var(--magenta) 16px 20px);filter:drop-shadow(0 0 18px var(--cyan));opacity:.85;animation:seamWobble 3.5s steps(4,end) infinite}
.gate-panel{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8vw;position:relative;background:linear-gradient(135deg,rgba(36,18,92,.62),rgba(7,3,15,.86));overflow:hidden}.gate-panel:before{content:"";position:absolute;inset:7%;border:1px solid rgba(246,199,68,.18);clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}.right-dominant .right-panel,.left-dominant .left-panel{background:radial-gradient(circle at 55% 45%,rgba(32,231,255,.13),transparent 34%),linear-gradient(135deg,rgba(36,18,92,.9),rgba(7,3,15,.88))}.chapter{font-family:var(--grotesque);font-size:clamp(80px,12vw,180px);line-height:.75;color:transparent;-webkit-text-stroke:1px rgba(246,199,68,.48);text-shadow:0 0 40px rgba(216,51,255,.18)}
.dominant-relic{width:148px;height:148px;border:2px solid var(--gold);font-size:64px;color:var(--gold);background:radial-gradient(circle,rgba(246,199,68,.18),rgba(7,3,15,.85));clip-path:polygon(50% 0,92% 22%,92% 78%,50% 100%,8% 78%,8% 22%)}
.micro-labels{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.ledger-note{font-family:var(--grotesque);font-size:clamp(22px,3vw,42px)!important;color:var(--bone)!important}.mini-glyphs{display:flex;gap:22px;margin-top:28px}.mini-glyphs i{width:70px;height:70px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--gold);font-size:30px;font-style:normal;background:rgba(7,3,15,.5)}
.parchment-panel{background:linear-gradient(135deg,rgba(247,231,193,.16),rgba(36,18,92,.5))}.dark-panel{background:radial-gradient(circle at 30% 60%,rgba(216,51,255,.14),transparent 34%),rgba(7,3,15,.92)}.device-panel .altar-stack{display:grid;gap:18px;width:min(360px,70%)}.altar-stack b{height:70px;border:1px solid var(--cyan);background:linear-gradient(90deg,transparent,rgba(32,231,255,.2),transparent);box-shadow:0 0 24px rgba(32,231,255,.18)}.map-panel{background:radial-gradient(circle,rgba(32,231,255,.16),transparent 55%),rgba(7,3,15,.9)}.territory-rings{position:relative;width:340px;aspect-ratio:1;margin:auto}.territory-rings span{position:absolute;inset:calc(var(--i,0)*42px);border:1px dashed var(--gold);border-radius:50%;animation:spin 14s linear infinite}.territory-rings span:nth-child(2){--i:1;border-color:var(--cyan);animation-direction:reverse}.territory-rings span:nth-child(3){--i:2;border-color:var(--magenta)}.coin-stream{height:280px;position:relative}.coin-stream span{position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle,var(--gold),#8f670a);animation:coinRise 4s linear infinite}.coin-stream span:nth-child(2){left:25%;animation-delay:.7s}.coin-stream span:nth-child(3){left:55%;animation-delay:1.4s}.coin-stream span:nth-child(4){left:78%;animation-delay:2.1s}
.master-seal{display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,rgba(88,255,122,.13),transparent 34%),linear-gradient(90deg,rgba(36,18,92,.82),rgba(7,3,15,.96),rgba(36,18,92,.82))}.seal-stage{width:min(980px,82vw);padding:60px;border:1px solid rgba(246,199,68,.42);box-shadow:inset 0 0 60px rgba(246,199,68,.08),0 0 80px rgba(88,255,122,.1)}.rotating-seal{width:260px;height:260px;margin:20px auto 32px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(88,255,122,.22),rgba(36,18,92,.4),rgba(7,3,15,.9));animation:spin 18s linear infinite}.seal-crown,.seal-pad{position:absolute;font-size:72px;color:var(--gold);animation:counterSpin 18s linear infinite}.seal-crown{top:42px}.seal-pad{bottom:42px}.seal-ring{position:absolute;inset:28px;border-radius:50%;border:1px dashed var(--cyan);box-shadow:0 0 32px rgba(32,231,255,.32)}.final-title{font-size:clamp(46px,7vw,96px)}
.spark{position:fixed;width:6px;height:6px;background:var(--gold);box-shadow:0 0 10px var(--gold);pointer-events:none;z-index:70;animation:sparkFly .7s ease-out forwards}.spark:nth-child(odd){background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
@keyframes veilDrift{to{transform:translateX(20%)}}@keyframes seamWobble{0%,100%{filter:hue-rotate(0)}33%{transform:translateX(-45%) skewX(8deg)}66%{transform:translateX(-55%) skewX(-6deg)}}@keyframes clauseScroll{to{transform:translateY(-50%)}}@keyframes titleTear{0%,88%,100%{clip-path:inset(0 0 62% 0)}90%{clip-path:inset(34% 0 36% 0);transform:translate(-5px,2px)}94%{clip-path:inset(70% 0 8% 0);transform:translate(4px,-1px)}}@keyframes dash{to{stroke-dashoffset:-200}}@keyframes float{50%{transform:translateY(-18px) translateX(8px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes counterSpin{to{transform:rotate(-360deg)}}@keyframes coinRise{0%{bottom:-20%;opacity:0}20%,80%{opacity:1}100%{bottom:110%;opacity:0;transform:rotateY(360deg)}}@keyframes sparkFly{to{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}
@media (max-width:860px){.gate{padding-left:0}.registry-rail{left:50%;top:auto;bottom:12px;transform:translateX(-50%);flex-direction:row}.rail-stamp{width:36px;height:36px}.rail-stamp em{display:none}.split-chamber,.story-gate{grid-template-columns:1fr}.center-seam,.story-gate:after{left:auto;right:10px}.wordmark-court{width:88vw}.gate-panel{min-height:70vh;padding:96px 28px}.crest-cloud{display:none}.world-map,.contract-apparatus{width:72vw}.cursor-sigil{display:none}}