*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#FAFAF5;color:#0A0A0A;font-family:'Work Sans',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.8vw,1.15rem);line-height:1.65;overflow-x:hidden}

/* Scanlines */
.scanlines,.scanlines-heavy{position:absolute;inset:0;pointer-events:none;z-index:2}
.scanlines{background:repeating-linear-gradient(transparent,transparent 2px,rgba(10,10,10,0.08) 2px,rgba(10,10,10,0.08) 4px)}
.scanlines-heavy{background:repeating-linear-gradient(transparent,transparent 2px,rgba(10,10,10,0.25) 2px,rgba(10,10,10,0.25) 4px)}

/* Halftone patterns */
.halftone-bg{position:absolute;inset:0;background:radial-gradient(circle,#E91E90 25%,transparent 25%);background-size:24px 24px;opacity:0.15;transform:rotate(45deg);pointer-events:none}
.halftone-fill{position:absolute;inset:0;background:radial-gradient(circle,#E91E90 20%,transparent 20%);background-size:16px 16px;opacity:0.2;transform:rotate(45deg);pointer-events:none}
.halftone-dots{position:absolute;inset:0;background:radial-gradient(circle,#C8E619 20%,transparent 20%);background-size:20px 20px;opacity:0.15;pointer-events:none}

/* Boot Sequence */
.panel-boot{min-height:100vh;background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;text-align:center;padding:clamp(16px,4vw,48px)}
.logo-svg{width:clamp(280px,60vw,500px);height:60px;margin-bottom:2rem}
.logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:48px;fill:#C8E619;stroke:#C8E619;stroke-width:0.5;stroke-dasharray:600;stroke-dashoffset:600;animation:drawLogo 1.2s ease-out forwards 0.5s}
@keyframes drawLogo{to{stroke-dashoffset:0;fill-opacity:1}}
.boot-heading{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.5rem,7vw,5.5rem);color:#FAFAF5;text-transform:uppercase;letter-spacing:-0.02em;position:relative;z-index:3}

/* Speech Bubbles */
.speech-bubble{background:#FAFAF5;border:3px solid #0A0A0A;border-radius:20px;padding:12px 20px;position:relative;display:inline-block;box-shadow:4px 4px 0 #0A0A0A;max-width:280px}
.speech-bubble p{font-family:'Bangers',cursive;font-size:clamp(1.2rem,2.5vw,1.6rem);color:#0A0A0A}
.bubble-tail{position:absolute;bottom:-16px;left:30px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:16px solid #0A0A0A}
.bubble-tail::after{content:'';position:absolute;bottom:3px;left:-10px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #FAFAF5}
.bubble-float{animation:bobFloat 3s ease-in-out infinite alternate}
@keyframes bobFloat{0%{transform:translateY(0)}100%{transform:translateY(-12px)}}
.speech-inline{margin:1rem 0}

/* Comic Grid */
.comic-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,48px)}

/* Panels */
.panel{border:4px solid #0A0A0A;padding:clamp(16px,3vw,32px);position:relative;overflow:hidden;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s ease}
.panel:hover{transform:translate(-4px,-8px);box-shadow:8px 8px 0 #0A0A0A}
.splash-panel{grid-column:span 8;background:#E91E90;color:#FAFAF5;min-height:300px}
.splash-calm{background:#FAFAF5;color:#0A0A0A}
.splash-network{grid-column:span 12;background:#FAFAF5;display:flex;flex-direction:column;align-items:center;min-height:280px}
.story-panel{grid-column:span 4;background:#FAFAF5;min-height:200px}
.accent-panel{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-height:150px}
.accent-magenta{background:#E91E90}
.accent-chartreuse{background:#C8E619}
.accent-yellow{background:#FFD43B}

/* Panel Typography */
.panel-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.5rem,7vw,5.5rem);text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:0.5em;position:relative;z-index:3}
.panel-subtitle{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.5vw,2.5rem);margin-bottom:0.5em;position:relative;z-index:3}
.panel-body{font-family:'Work Sans',sans-serif;font-size:clamp(0.95rem,1.8vw,1.15rem);line-height:1.65;max-width:55ch;position:relative;z-index:3}

/* Sound Effects */
.sfx{font-family:'Bangers',cursive;font-size:clamp(3rem,10vw,6rem);color:#0A0A0A;text-shadow:2px 2px 0 rgba(10,10,10,0.3);transform:rotate(-3deg);display:block}
.sfx-large{font-size:clamp(3.5rem,12vw,8rem)}
.sfx-rotate{transform:rotate(5deg)}

/* Glitch Text */
.glitch-text{position:relative}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
.glitch-text::before{color:#1E90FF;clip-path:inset(0 0 65% 0);transform:translate(-4px,0);animation:glitch1 3s infinite}
.glitch-text::after{color:#C8E619;clip-path:inset(65% 0 0 0);transform:translate(4px,0);animation:glitch2 3s infinite}
@keyframes glitch1{0%,95%{transform:translate(0)}96%{transform:translate(-6px,2px)}98%{transform:translate(4px,-2px)}100%{transform:translate(0)}}
@keyframes glitch2{0%,93%{transform:translate(0)}94%{transform:translate(6px,-2px)}97%{transform:translate(-4px,2px)}100%{transform:translate(0)}}

/* Glitch panels */
.glitch-panel{clip-path:polygon(0 2%,98% 0,100% 97%,1% 100%)}
.glitch-splash{background:#C8E619;color:#0A0A0A}

/* Network Diagram */
.network-diagram{width:clamp(200px,50vw,400px);margin:1rem 0}
.nn-node{fill:#E91E90;stroke:#0A0A0A;stroke-width:2}
.nn-edge{stroke:#0A0A0A;stroke-width:1.5;opacity:0.6}

/* RGB Shift */
.rgb-shift{position:absolute;inset:0;pointer-events:none}
.rgb-shift::before,.rgb-shift::after{content:'';position:absolute;inset:0;mix-blend-mode:screen;opacity:0.15}
.rgb-shift::before{background:#1E90FF;transform:translateX(3px)}
.rgb-shift::after{background:#E91E90;transform:translateX(-3px)}

/* Sign-off */
.sign-off{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:clamp(16px,4vw,48px);background:#FAFAF5;border:4px solid #0A0A0A;max-width:1200px;margin:0 auto}
.starburst{position:absolute;width:clamp(300px,60vw,600px);height:clamp(300px,60vw,600px);background:#FFD43B;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:0.4}
.signoff-domain{font-family:'Bangers',cursive;font-size:clamp(4rem,15vw,10rem);color:#0A0A0A;transform:rotate(-2deg);position:relative;z-index:2}
.signoff-tagline{font-family:'Work Sans',sans-serif;font-weight:400;font-size:clamp(1rem,2vw,1.3rem);color:#0A0A0A;position:relative;z-index:2;margin-top:1rem}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .comic-grid{grid-template-columns:1fr}
  .splash-panel,.story-panel,.accent-panel,.splash-network{grid-column:span 1}
  .accent-panel{min-height:100px}
}