*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--obsidian:#1A1A20;--chalk:#F0EDE8;--ruby:#C83050;--sapphire:#2848A0;--amethyst:#6838A0;--emerald:#28805A;--topaz:#C8882A;--smoke:#505058}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--chalk);font-family:'Nunito',sans-serif;font-weight:400;font-size:0.9375rem;line-height:1.7;overflow-x:hidden}

.geo-scatter{position:fixed;inset:0;pointer-events:none;z-index:0}
.geo{position:absolute;opacity:0.12}
.circle-r{width:60px;height:60px;border-radius:50%;background:var(--ruby);top:15%;right:10%}
.square-b{width:40px;height:40px;background:var(--sapphire);transform:rotate(45deg);top:45%;left:8%}
.tri-p{width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:50px solid var(--amethyst);opacity:0.1;bottom:20%;right:25%}

/* Boot */
.boot{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;position:relative;z-index:1}
.domain-title{font-weight:800;font-size:clamp(2rem,6vw,5rem);color:var(--chalk);letter-spacing:-0.02em}
.broken-border{width:min(300px,60vw);height:60px;border:2px solid var(--chalk);position:relative}
.broken-border::before,.broken-border::after{content:'';position:absolute;background:var(--obsidian)}
.broken-border::before{width:30%;height:4px;top:-2px;left:20%}
.broken-border::after{width:25%;height:4px;bottom:-2px;right:15%}

/* Panels */
.panels{padding:2rem;position:relative;z-index:1}
.grid-dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.panel{background:rgba(26,26,32,0.8);overflow:hidden}
.panel h2{font-weight:800;font-size:1rem;margin-bottom:0.5rem;color:var(--chalk)}
.panel p,.panel pre{font-size:0.8125rem;color:var(--chalk);opacity:0.85}
.mono{font-family:'Inconsolata',monospace;font-size:0.8125rem}
.small{font-size:0.75rem}
.kanji-display{font-size:clamp(3rem,8vw,6rem);display:block;text-align:center;opacity:0.6}

.border-ruby{border:2px solid var(--ruby)}
.border-sapphire{border:2px solid var(--sapphire)}
.border-amethyst{border:2px solid var(--amethyst)}
.border-emerald{border:2px solid var(--emerald)}
.border-topaz{border:2px solid var(--topaz)}

/* Glitch */
.glitch{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:4rem 2rem;position:relative;z-index:1}
.crossing-circle{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--ruby);opacity:0.08;left:50%;top:50%;transform:translate(-50%,-50%);animation:drift 20s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-30%,-50%)}}
.glitch-text{max-width:600px;text-align:center;font-size:clamp(1rem,2vw,1.25rem);line-height:1.8}

/* Final */
.final-panel{padding:2rem;display:flex;justify-content:center;position:relative;z-index:1}
.single{max-width:600px;margin:0 auto}

/* Typewriter */
.typewriter-text{opacity:0}
.typewriter-text.typed{opacity:1}

@media(max-width:768px){
.grid-dashboard{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.typewriter-text{opacity:1}
}