*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#e0e8f5;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1rem;line-height:1.7;overflow-x:hidden}

/* Aurora background */
.aurora-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-layer{position:absolute;inset:0}
.aurora-a{background:conic-gradient(from 180deg at 50% 120%,#0a0e1a 0%,#003344 25%,rgba(0,229,255,0.06) 40%,rgba(224,64,251,0.04) 55%,#0a0e1a 70%);animation:auroraDrift 30s ease-in-out infinite}
.aurora-b{background:conic-gradient(from 0deg at 50% 80%,transparent 0%,rgba(0,229,255,0.04) 30%,rgba(224,64,251,0.03) 50%,transparent 70%);animation:auroraDrift 22s ease-in-out infinite reverse}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-3%) scale(1.1)}100%{transform:translate(0,0) scale(1)}}

/* Mid layer */
.mid-layer{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(26,39,68,0.3) 30px,rgba(26,39,68,0.3) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(26,39,68,0.3) 30px,rgba(26,39,68,0.3) 31px);opacity:0.3}

/* Rack rail */
.rack-rail{position:fixed;left:0;top:0;bottom:0;width:56px;z-index:50;background:linear-gradient(135deg,#1a2744 0%,#111b2e 100%);border-right:1px solid #2a3f66;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 0}
.led-dot{width:12px;height:12px;border-radius:50%;background:#111b2e;border:1px solid #2a3f66;cursor:pointer;box-shadow:inset 1px 1px 2px #060a12;transition:background 0.3s ease,box-shadow 0.3s ease;padding:0}
.led-dot.active{background:#00e5ff;box-shadow:0 0 8px #00e5ff,0 0 16px rgba(0,229,255,0.3)}

/* Screwheads */
.screw{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3f66,#111b2e);position:relative}
.screw::after{content:'';position:absolute;top:3px;left:1px;width:6px;height:2px;background:linear-gradient(90deg,transparent,#060a12,transparent);border-radius:1px}
.screw-tl{position:absolute;top:8px;left:8px}
.screw-tr{position:absolute;top:8px;right:8px}
.screw-bl{position:absolute;bottom:8px;left:8px}
.screw-br{position:absolute;bottom:8px;right:8px}
.screw-top{margin-bottom:auto}
.screw-bottom{margin-top:auto}

/* Panel bays */
.panel-bay{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);padding-left:calc(56px + clamp(16px,3vw,32px))}

.panel-surface{background:linear-gradient(145deg,#1a2744 0%,#111b2e 100%);border:3px solid #2a3f66;border-radius:8px;padding:clamp(32px,5vw,60px);position:relative;box-shadow:3px 3px 0 #2a3f66,-3px -3px 0 #060a12,inset 0 0 30px rgba(6,10,18,0.5);width:100%;max-width:1100px}
.panel-compact{max-width:600px}

/* Rack gap */
.rack-gap{height:24px;background:#0a0e1a;position:relative;z-index:2;margin-left:56px}

/* Hero */
.hero-content{text-align:center}
.hero-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(3rem,8vw,6rem);letter-spacing:0.15em;color:#e0e8f5;text-shadow:2px 2px 0 #060a12,-1px -1px 0 #2a3f66;position:relative}

/* Glitch effect */
[data-glitch]{position:relative}
[data-glitch].glitching{animation:glitchShift 0.15s steps(1) 1}
@keyframes glitchShift{0%{text-shadow:2px 0 #00e5ff,-2px 0 #e040fb}33%{text-shadow:-2px 0 #00e5ff,2px 0 #e040fb}66%{text-shadow:1px 0 #00e5ff,-1px 0 #e040fb}100%{text-shadow:none}}

/* Gauge */
.gauge{width:clamp(120px,20vw,180px);height:clamp(120px,20vw,180px);border-radius:50%;margin:clamp(24px,4vw,48px) auto;position:relative;background:radial-gradient(circle,#111b2e 60%,#1a2744 100%);border:3px solid #2a3f66;box-shadow:inset 0 0 20px rgba(6,10,18,0.8),0 0 10px rgba(0,229,255,0.1)}
.gauge-ring{position:absolute;inset:8px;border-radius:50%;border:1px solid #2a3f66;background:repeating-conic-gradient(#2a3f66 0deg 2deg,transparent 2deg 15deg)}
.gauge-needle{position:absolute;bottom:50%;left:50%;width:2px;height:40%;background:#00e5ff;transform-origin:bottom center;transform:rotate(-90deg);transition:transform 2s cubic-bezier(0.25,0.1,0.25,1);box-shadow:0 0 6px #00e5ff}
.gauge-glass{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.08) 0%,transparent 60%);pointer-events:none}
.gauge-readout{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;letter-spacing:0.06em;color:#00e5ff}
.hero-gauge .gauge-needle.swept{transform:rotate(90deg)}

.embossed-label{font-family:'Varela Round',sans-serif;font-size:clamp(0.85rem,1.2vw,1rem);color:#e0e8f5;opacity:0.6;text-transform:uppercase;letter-spacing:0.06em;margin-top:clamp(16px,3vw,24px);text-shadow:1px 1px 0 #060a12}

/* Section heading */
.section-heading{font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(1.5rem,4vw,3.5rem);letter-spacing:0.04em;color:#e0e8f5;margin-bottom:clamp(16px,3vw,32px);text-shadow:1px 1px 0 #060a12}
.section-heading-inset{text-align:center}

/* CRT display */
.crt-display{background:#0a0e1a;border:2px solid #1a2744;border-radius:4px;padding:clamp(24px,4vw,40px);position:relative;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,229,255,0.03);max-width:70%;margin:0 auto}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.15) 1px,rgba(0,0,0,0.15) 2px);z-index:2}
.crt-content{position:relative;z-index:3}
.crt-text{font-family:'Quicksand',sans-serif;color:#e0e8f5;max-width:50ch;margin-bottom:clamp(12px,2vw,20px)}

.side-gauges{display:flex;gap:24px;justify-content:center;margin-top:clamp(24px,4vw,40px)}
.mini-gauge{text-align:center}
.gauge-ring.small{width:60px;height:60px;border-radius:50%;border:2px solid #2a3f66;background:repeating-conic-gradient(#2a3f66 0deg 3deg,transparent 3deg 20deg);margin-bottom:8px}
.gauge-label{font-family:'Varela Round',sans-serif;font-size:0.75rem;letter-spacing:0.08em;color:#0097a7;text-transform:uppercase}

/* Module cluster */
.module-cluster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,3vw,24px)}
.wide-module{grid-column:span 2}
.instr-module{background:linear-gradient(145deg,#1a2744,#111b2e);border:2px solid #2a3f66;border-radius:6px;padding:clamp(16px,2vw,24px);position:relative}
.module-display{background:#0a0e1a;border-radius:3px;padding:clamp(12px,2vw,20px);position:relative;overflow:hidden;box-shadow:inset 2px 2px 6px #060a12;margin-bottom:12px}
.module-display h3{font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(1rem,2vw,1.3rem);color:#00e5ff;margin-bottom:4px}
.module-display p{font-family:'Quicksand',sans-serif;font-size:0.9rem;color:#e0e8f5;opacity:0.8}

/* Toggle switch */
.toggle-switch{width:48px;height:24px;background:#0a0e1a;border-radius:12px;border:1px solid #2a3f66;box-shadow:inset 2px 2px 4px #060a12;cursor:pointer;position:relative;display:inline-block;vertical-align:middle}
.toggle-paddle{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#2a3f66,#1a2744);position:absolute;top:1px;left:1px;transition:transform 0.3s cubic-bezier(0.25,0.1,0.25,1);box-shadow:1px 1px 3px #060a12}
.toggle-switch.active .toggle-paddle{transform:translateX(24px);background:linear-gradient(135deg,#00e5ff,#0097a7)}

.module-led{width:8px;height:8px;border-radius:50%;background:#111b2e;display:inline-block;vertical-align:middle;margin-left:12px;transition:background 0.3s ease,box-shadow 0.3s ease}
.module-led.on{background:#00e5ff;box-shadow:0 0 6px #00e5ff}

/* Aurora bay */
.aurora-bay{background:transparent}
.aurora-text{font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(1.8rem,5vw,4rem);color:#e0e8f5;text-align:center;max-width:20ch;line-height:1.3;text-shadow:0 0 30px rgba(0,229,255,0.2)}

/* Tape display */
.tape-display{position:relative;background:#0a0e1a;border:2px solid #1a2744;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 20px rgba(6,10,18,0.8)}
.tape-roller{height:16px;background:linear-gradient(180deg,#2a3f66,#1a2744,#2a3f66);border-radius:8px;margin:4px 8px}
.tape-content{padding:clamp(16px,3vw,32px)}
.tape-entry{font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;letter-spacing:0.06em;color:#e0e8f5;margin-bottom:12px;padding-left:clamp(120px,15vw,180px);position:relative}
.tape-ts{position:absolute;left:0;color:#0097a7}

/* Power button */
.power-btn{width:clamp(80px,12vw,100px);height:clamp(80px,12vw,100px);border-radius:50%;background:radial-gradient(circle,#111b2e 60%,#1a2744 100%);border:3px solid #2a3f66;margin:0 auto clamp(24px,4vw,40px);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-shadow:0 0 20px rgba(0,229,255,0.1),inset 0 0 15px rgba(6,10,18,0.6)}
.power-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid #00e5ff;opacity:0.3;animation:ringPulse 3s ease-in-out infinite}
@keyframes ringPulse{0%,100%{opacity:0.2}50%{opacity:0.5}}
.power-icon{width:32px;height:32px}

/* Status row */
.status-row{display:flex;gap:clamp(24px,4vw,48px);justify-content:center;margin-bottom:clamp(16px,3vw,24px)}
.status-item{display:flex;align-items:center;gap:8px;font-family:'Varela Round',sans-serif;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:#e0e8f5;opacity:0.7}
.status-led{width:8px;height:8px;border-radius:50%}
.led-on{background:#00e5ff;box-shadow:0 0 6px #00e5ff}
.led-warm{background:#ffab40;box-shadow:0 0 6px #ffab40}

.signoff-text{font-family:'Quicksand',sans-serif;font-size:0.85rem;color:#e0e8f5;opacity:0.4;text-align:center}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
.rack-rail{width:40px}
.panel-bay{padding-left:calc(40px + 12px)}
.crt-display{max-width:100%}
.wide-module{grid-column:span 1}
.module-cluster{grid-template-columns:1fr}
.tape-entry{padding-left:0}
.tape-ts{position:static;display:block;margin-bottom:2px}
}
@media(max-width:480px){
.rack-rail{display:none}
.panel-bay{padding-left:clamp(12px,3vw,24px)}
}
