*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--cerulean:#4A90D9;--phantom:#B8D4F0;--ozone:#1B3A5C;--vapor:#F0F5FA;--cirrus:#DDE8F2;--ink:#0A0A14;--vermillion:#E34234;--aqua:#7EB8DA}
body{background:var(--vapor);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.1vw,1.15rem);line-height:1.68;overflow-x:hidden;letter-spacing:0.01em}

/* Scenes */
.scene{position:relative;min-height:100vh;padding:clamp(2rem,4vw,4rem);overflow:hidden}

/* Scene 1: Splash */
.scene-splash{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.benday-bg{position:absolute;inset:0;background-image:radial-gradient(circle,var(--cerulean) 1.5px,transparent 1.5px);background-size:8px 8px;opacity:0.08}
.splash-center{position:relative;z-index:2;text-align:center}
.splash-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(5rem,12vw,10rem);color:var(--vapor);letter-spacing:0.08em;text-transform:uppercase;line-height:1}

/* Speech Bubble */
.speech-bubble{background:var(--phantom);border:3px solid var(--ink);border-radius:24px;padding:clamp(0.8rem,1.5vw,1.2rem) clamp(1.2rem,2vw,2rem);position:relative;display:inline-block;margin-top:1.5rem;background-image:radial-gradient(circle,var(--cerulean) 1.5px,transparent 1.5px);background-size:8px 8px}
.bubble-text{font-family:'Caveat',cursive;font-size:clamp(1.1rem,1.6vw,1.5rem);color:var(--ink);transform:rotate(-1.5deg)}
.bubble-text-body{font-family:'Caveat',cursive;font-size:clamp(1rem,1.4vw,1.3rem);color:var(--ink)}
.bubble-pointer{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:16px solid var(--vermillion)}
.bubble-up .bubble-pointer{top:auto;bottom:-16px;border-bottom:none;border-top:16px solid var(--vermillion)}
.pointer-right{top:50%;left:auto;right:-16px;transform:translateY(-50%);border-left:16px solid var(--vermillion);border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:none}

/* Z-Frame Grid */
.z-frame{display:grid;grid-template-columns:60% 40%;grid-template-rows:1fr 1fr;gap:12px;max-width:1100px;margin:0 auto;position:relative;z-index:2}
.z-frame-2{grid-template-columns:45% 55%}
.z-frame-3{grid-template-columns:70% 30%}
.z-panel{position:relative;border:4px solid var(--ink);padding:clamp(1.5rem,3vw,2.5rem);overflow:visible;min-height:clamp(160px,20vh,280px);display:flex;flex-direction:column;justify-content:center}
.z-tl{grid-column:1;grid-row:1}.z-tr{grid-column:2;grid-row:1}.z-bl{grid-column:1;grid-row:2}.z-br{grid-column:2;grid-row:2}
.z-tl-2{grid-column:1;grid-row:1}.z-tr-2{grid-column:2;grid-row:1}.z-bl-2{grid-column:1;grid-row:2}.z-br-2{grid-column:2;grid-row:2}
.z-tl-3{grid-column:1;grid-row:1}.z-tr-3{grid-column:2;grid-row:1}.z-bl-3{grid-column:1;grid-row:2}.z-br-3{grid-column:2;grid-row:2}

/* Panel Gutter Dots */
.panel-gutter{position:absolute;background-image:radial-gradient(circle,var(--phantom) 2px,transparent 2px);background-size:8px 8px}
.gutter-h{left:0;right:0;height:12px;top:50%;transform:translateY(-50%)}
.gutter-v{top:0;bottom:0;width:12px;left:60%;transform:translateX(-50%)}

/* Watercolor washes */
.wash{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.wash-1{width:180%;height:180%;top:-30%;left:-40%;background:radial-gradient(circle,rgba(126,184,218,0.25),transparent 60%)}
.wash-2{width:150%;height:150%;top:-20%;right:-30%;background:radial-gradient(circle,rgba(74,144,217,0.2),transparent 60%)}
.wash-3{width:160%;height:160%;top:-25%;left:-30%;background:radial-gradient(circle,rgba(74,144,217,0.2),transparent 60%)}
.wash-4{width:140%;height:140%;bottom:-20%;right:-20%;background:radial-gradient(circle,rgba(126,184,218,0.15),transparent 60%)}
.wash-5{width:170%;height:170%;top:-35%;left:-35%;background:radial-gradient(circle,rgba(221,232,242,0.4),transparent 60%)}

/* Pigment pools */
.z-panel::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;background:var(--cerulean);filter:blur(15px);opacity:0.15;bottom:10%;right:10%;pointer-events:none}

/* Molecular grid overlay */
.mol-grid-overlay{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='42'%3E%3Cpolygon points='24,0 48,10.5 48,31.5 24,42 0,31.5 0,10.5' fill='none' stroke='rgba(10,10,20,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");background-size:48px 42px;pointer-events:none}
.mol-grid-faint{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='42'%3E%3Cpolygon points='24,0 48,10.5 48,31.5 24,42 0,31.5 0,10.5' fill='none' stroke='rgba(10,10,20,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");background-size:48px 42px;pointer-events:none}

/* Carbon ring glyph */
.carbon-ring{display:flex;align-items:center;justify-content:center}

/* Panel headings */
.panel-heading{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);margin-bottom:0.5rem;position:relative;z-index:2}
.panel-body{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:clamp(0.85rem,1vw,1rem);color:var(--ink);max-width:45ch;position:relative;z-index:2}

/* Big numbers */
.big-number{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,8vw,8rem);color:var(--ink);line-height:1;position:relative;z-index:2}
.big-unit{font-size:0.4em;vertical-align:super;letter-spacing:0.04em}
.big-label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(0.6rem,0.8vw,0.75rem);letter-spacing:0.06em;color:var(--ozone);margin-top:0.3rem;position:relative;z-index:2}
.big-vermillion{color:var(--vermillion);font-size:clamp(5rem,10vw,10rem)}

/* Ticker band */
.ticker-band{background:var(--phantom);padding:0.8rem 0;overflow:hidden;position:relative;z-index:3;transform:rotate(-2deg);margin:-2rem -2rem 2rem;background-image:radial-gradient(circle,var(--cerulean) 1px,transparent 1px);background-size:6px 6px}
.ticker-content{display:flex;gap:3rem;white-space:nowrap;animation:ticker 20s linear infinite;font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:0.08em;color:var(--ink)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Ripple field */
.scene-ripple{min-height:80vh;display:flex;align-items:center;justify-content:center;background:var(--vapor)}
.ripple-text{font-family:'Caveat',cursive;font-size:clamp(1.5rem,2.5vw,2rem);color:var(--ink);text-align:center}
.ripple-word{display:inline-block;animation:wordBob 3s ease-in-out infinite}
.ripple-word:nth-child(1){animation-delay:0s}.ripple-word:nth-child(2){animation-delay:0.3s}.ripple-word:nth-child(3){animation-delay:0.6s}
.ripple-word:nth-child(4){animation-delay:0.9s}.ripple-word:nth-child(5){animation-delay:1.2s}.ripple-word:nth-child(6){animation-delay:1.5s}
@keyframes wordBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Closing panel */
.closing-bubble{background:var(--cerulean);border:4px solid var(--ink);border-radius:24px;padding:clamp(1.5rem,3vw,2.5rem);text-align:center;position:relative;overflow:hidden}
.closing-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,4rem);color:var(--vapor);letter-spacing:0.08em;position:relative;z-index:2}
.benday-fill{position:absolute;inset:0;background-image:radial-gradient(circle,var(--ozone) 1.5px,transparent 1.5px);background-size:8px 8px;opacity:0.15;animation:dotPulse 4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{background-size:6px 6px}50%{background-size:10px 10px}}
.exclaim{position:absolute;top:-8px;right:-8px;font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--vermillion);z-index:3;animation:hazardPulse 1.5s ease-in-out infinite}
@keyframes hazardPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Circuit traces */
.circuit-traces{position:absolute;inset:0}
.trace-draw{stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset 1.5s ease-out}
.trace-draw.drawn{stroke-dashoffset:0}

/* Dry brush edges */
.z-panel::after{content:'';position:absolute;inset:-2px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(10,10,20,0.04) 3px,rgba(10,10,20,0.04) 4px)}

/* Reveals */
[data-reveal]{opacity:0;transform:scale(0);transition:opacity 0.5s cubic-bezier(0.34,1.56,0.64,1),transform 0.5s cubic-bezier(0.34,1.56,0.64,1)}
[data-reveal].visible{opacity:1;transform:scale(1)}

/* Responsive */
@media(max-width:768px){
    .z-frame,.z-frame-2,.z-frame-3{grid-template-columns:1fr;grid-template-rows:auto}
    .z-tl,.z-tr,.z-bl,.z-br,.z-tl-2,.z-tr-2,.z-bl-2,.z-br-2,.z-tl-3,.z-tr-3,.z-bl-3,.z-br-3{grid-column:1}
    .ticker-band{transform:none;margin:0 0 1rem}
    .gutter-v{display:none}
}