:root{--bg-color:#0b0c10;--bg-surface:#1f2833;--bg-surface-elevated:#283340;--text-primary:#c5c6c7;--text-secondary:#8c92ac;--text-heading:#fff;--accent-neon-blue:#66fcf1;--accent-neon-blue-dim:#66fcf133;--accent-neon-purple:#c700ff;--accent-neon-purple-dim:#c700ff33;--font-heading:"Outfit", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:ui-monospace, Consolas, monospace;--glass-bg:#1f283399;--glass-border:#66fcf11a;--glass-shadow:0 8px 32px 0 #0000005e;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.4s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.5s cubic-bezier(.68, -.55, .26, 1.55)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(circle at 15%,#c700ff0d,#0000 25%),radial-gradient(circle at 85% 30%,#66fcf10d,#0000 25%);min-height:100vh;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-heading);line-height:1.2}h1{letter-spacing:-.02em;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800}h2{letter-spacing:-.01em;font-size:clamp(2rem,4vw,3rem);font-weight:700}h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:600}a{color:var(--accent-neon-blue);transition:color var(--transition-fast);text-decoration:none}a:hover{color:#fff;text-shadow:0 0 8px var(--accent-neon-blue)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:2rem}.gradient-text{background:linear-gradient(135deg, var(--accent-neon-blue), var(--accent-neon-purple));color:#0000;-webkit-background-clip:text;background-clip:text}.btn-primary{background:var(--accent-neon-blue);color:var(--bg-color);font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-bounce);box-shadow:0 0 15px var(--accent-neon-blue-dim);border:none;border-radius:30px;padding:.75rem 2rem;font-size:1.1rem;font-weight:700}.btn-primary:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 0 25px #66fcf166}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%{box-shadow:0 0 15px var(--accent-neon-blue-dim)}50%{box-shadow:0 0 30px #66fcf14d}to{box-shadow:0 0 15px var(--accent-neon-blue-dim)}}.animate-fade-in-up{animation:fadeInUp .8s var(--transition-normal) forwards}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 2rem}img,video,svg,canvas{max-width:100%}.app-wrapper{flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b0c10cc;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1.5rem 0;display:flex;position:sticky;top:0}.logo{align-items:center;gap:12px;text-decoration:none;display:flex}.brand-logo{object-fit:cover;border-radius:8px;width:40px;height:40px}.brand-name{font-family:var(--font-heading);letter-spacing:2px;background:linear-gradient(135deg, #fff, var(--accent-neon-blue));color:#0000;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.nav-links{gap:2rem;display:flex}.nav-links a{color:var(--text-primary);font-family:var(--font-heading);font-size:1rem;font-weight:500}.nav-links a:hover{color:var(--accent-neon-blue);text-shadow:none}main{flex-direction:column;flex:1;gap:6rem;padding:4rem 0;display:flex}#root{max-width:100%;margin:0;padding:0}section[id]{scroll-margin-top:100px}footer{text-align:center;color:var(--text-secondary);border-top:1px solid #ffffff0d;padding:3rem 0;font-size:.9rem}@media (width<=768px){.navbar{flex-direction:column;gap:1rem;padding:1rem 0}.nav-links{flex-wrap:wrap;justify-content:center;gap:1rem}main{gap:4rem;padding:2rem 0}}.skip-link{z-index:200;background:var(--accent-neon-blue);color:#111;border-radius:0 0 8px;padding:12px 20px;font-weight:600;text-decoration:none;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;min-height:70vh;display:grid}.hero-content{flex-direction:column;align-items:flex-start;gap:1.5rem;display:flex}.badge{color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:inline-flex}.badge .accent{color:var(--accent-neon-blue);margin-right:.5rem}.hero-title{font-size:clamp(3rem,5vw,5rem);line-height:1.1}.hero-subtitle{color:var(--text-secondary);max-width:90%;margin-bottom:1rem;font-size:1.25rem}.hero-actions{gap:1rem;display:flex}.btn-secondary{color:var(--text-primary);font-family:var(--font-heading);border:1px solid var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:30px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:600;display:flex}.btn-secondary:hover{border-color:var(--text-heading);color:var(--text-heading)}.hero-visuals{background:linear-gradient(145deg,#1f283366,#0b0c10cc);justify-content:center;align-items:center;height:400px;display:flex;position:relative}.visualizer-mockup{align-items:flex-end;gap:8px;height:100px;display:flex}.bar{background:var(--accent-neon-purple);border-radius:6px;width:12px;animation:1s ease-in-out infinite alternate bounceBar}.b1{height:40%;animation-delay:.1s}.b2{height:80%;animation-delay:.2s}.b3{background:var(--accent-neon-blue);height:100%;box-shadow:0 0 15px var(--accent-neon-blue);animation-delay:.3s}.b4{height:60%;animation-delay:.4s}.b5{height:30%;animation-delay:.5s}@keyframes bounceBar{0%{transform:scaleY(.5)}to{transform:scaleY(1)}}.floating-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--font-mono);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:.5rem 1rem;font-size:.875rem;position:absolute}.fb-1{animation:4s ease-in-out infinite float;top:20%;left:10%}.fb-2{animation:4s ease-in-out 1s infinite float;bottom:20%;right:-20px}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@media (width<=900px){.hero{text-align:center;grid-template-columns:1fr}.hero-content{align-items:center}.hero-subtitle{max-width:100%}.hero-actions{justify-content:center}}.video-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000d9;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}.video-modal-content{background:#111;border:1px solid #ffffff1a;border-radius:12px;width:100%;max-width:900px;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.hero-video-player{aspect-ratio:16/9;background:#000;width:100%;display:block}.close-video-btn{color:#fff;cursor:pointer;z-index:10;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s;display:flex;position:absolute;top:15px;right:15px}.close-video-btn:hover{background:#ff4757cc}@media (width<=600px){.fb-2{right:0}}.curriculum-section{flex-direction:column;gap:4rem;display:flex}.timeline{flex-direction:column;gap:3rem;max-width:1000px;margin:0 auto;padding:2rem 0;display:flex;position:relative}.timeline-line{background:linear-gradient(to bottom, var(--accent-neon-blue), var(--accent-neon-purple));z-index:-1;border-radius:2px;width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-item{flex-direction:column;gap:1rem;width:calc(50% - 3rem);display:flex;position:relative}.clickable-card{cursor:pointer;transition:transform .2s,box-shadow .2s}.clickable-card:hover{box-shadow:0 10px 30px #66fcf133;transform:translateY(-5px)!important}.timeline-item:nth-child(odd){text-align:right;align-self:flex-start;align-items:flex-end}.timeline-item:nth-child(2n){text-align:left;align-self:flex-end;align-items:flex-start}.timeline-item:after{content:"";background:var(--bg-color);border:4px solid var(--accent-neon-blue);border-radius:50%;width:20px;height:20px;position:absolute;top:2rem}.timeline-item:nth-child(odd):after{right:-3rem;transform:translate(50%)}.timeline-item:nth-child(2n):after{left:-3rem;transform:translate(-50%)}.step-icon{background:#0000004d;border-radius:12px;padding:1rem;display:inline-flex}.step-content h3{margin-bottom:.5rem}.step-content p{color:var(--text-secondary)}@media (width<=768px){.timeline-line{left:2rem}.timeline-item{width:calc(100% - 4rem);text-align:left!important;align-self:flex-end!important;align-items:flex-start!important}.timeline-item:after{left:-2rem!important;transform:translate(-50%)!important}}.ai-trap-section{flex-direction:column;gap:4rem;display:flex}.error-gradient{background:linear-gradient(135deg,#ff4757,#ff6b81);color:#0000;-webkit-background-clip:text;background-clip:text}.traps-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.trap-card{transition:transform var(--transition-fast);border-color:#ff475733;flex-direction:column;gap:1rem;display:flex}.trap-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #ff475726}.trap-icon{color:#ff4757;background:#ff47571a;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.trap-card p{color:var(--text-secondary)}.hint-banner{border-left:4px solid var(--accent-neon-blue);background:linear-gradient(90deg,#1f2833cc,#66fcf10d);margin-top:2rem}.hint-content{align-items:center;gap:2rem;display:flex}.hint-icon{color:var(--accent-neon-blue);flex-shrink:0;animation:3s infinite pulseGlow}.hint-text h3{margin-bottom:.5rem}.hint-text p{color:var(--text-secondary)}.hint-text strong{color:var(--text-primary)}@media (width<=600px){.hint-content{text-align:center;flex-direction:column}}.module-page{flex-direction:column;gap:3rem;padding-bottom:4rem;animation:.5s fade-in;display:flex}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.module-header{margin-top:2rem}.module-header .subtitle{color:var(--text-secondary);margin-top:1rem;font-size:1.25rem}.module-content{flex-direction:column;gap:2rem;display:flex}.text-content{max-width:800px;margin:0 auto;font-size:1.1rem;line-height:1.8}.text-content h2{color:var(--accent-neon-blue);margin-bottom:1.5rem}.text-content p{margin-bottom:1rem}.workflow-step{border-left:4px solid var(--accent-neon-blue);background:#66fcf10d;border-radius:0 8px 8px 0;margin-top:2rem;padding:1.5rem}.workflow-step h3{color:var(--accent-neon-blue);align-items:center;gap:8px;margin-bottom:1rem;font-size:1.1rem;display:flex}.inline-icon{flex-shrink:0}.module-navigation{justify-content:space-between;align-items:center;margin-top:2rem;display:flex}.module-navigation .btn-primary{align-items:center;gap:8px;text-decoration:none;display:flex}.module-navigation .btn-secondary{text-decoration:none}.visual-illustration{border-color:var(--accent-neon-blue);text-align:center;background:#0b0c10cc}.visual-illustration h3{margin-bottom:2rem}.wave-comparison{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.wave-box{background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;flex:1;min-width:250px;padding:2rem}.wave-box h4{color:var(--text-secondary);margin-bottom:1.5rem}.css-waveform{justify-content:center;align-items:center;gap:4px;height:100px;margin-bottom:1.5rem;display:flex}.css-waveform .bar{background:var(--accent-neon-blue);border-radius:8px;width:15px}.dynamic-wave .bar.small{height:20%}.dynamic-wave .bar.med{height:50%}.dynamic-wave .bar.large{background:var(--accent-neon-purple);height:80%;box-shadow:0 0 10px var(--accent-neon-purple)}.dynamic-wave .bar.xl{background:#fff;height:100%;box-shadow:0 0 15px #fff}.squashed-wave .bar{background:#ff4757;box-shadow:0 0 10px #ff475780}.squashed-wave .bar.squashed{height:95%}.caption{color:var(--text-primary);font-size:.9rem}.caption.error-text{color:#ff4757}.eq-mockup{background:#111;border:1px solid #333;border-radius:12px;height:200px;position:relative;overflow:hidden}.eq-grid{background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:20px 20px;position:absolute;inset:0}.eq-curve{height:100%;position:absolute;bottom:0;left:0;right:0}.eq-path{fill:none;stroke:var(--accent-neon-blue);stroke-width:3px;filter:drop-shadow(0 0 8px var(--accent-neon-blue))}.eq-point{fill:#fff;stroke:var(--accent-neon-purple);stroke-width:3px}@media (width<=768px){.module-header h1{font-size:2rem}.module-navigation{text-align:center;flex-direction:column;align-items:stretch;gap:1.5rem}.module-navigation .btn-primary,.module-navigation .btn-secondary{justify-content:center}.wave-comparison{flex-direction:column}.wave-box{width:100%}}.interactive-tool-container{flex-direction:column;gap:1rem;margin:3rem 0;display:flex}.tool-intro{color:var(--text-secondary);margin-bottom:1rem}.plugin-window{background:#151821;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 20px 40px #00000080}.plugin-info-panel{background:#0000004d;border-left:4px solid;padding:1.5rem;transition:border-color .3s}.plugin-info-panel h4{margin-bottom:.5rem;font-size:1.2rem}.eq-graph-area{background:#0f1118;height:250px;position:relative}.eq-grid-bg{background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.freq-labels{color:#fff3;font-family:var(--font-mono);pointer-events:none;justify-content:space-between;padding:0 20px;font-size:12px;display:flex;position:absolute;bottom:5px;left:0;right:0}.eq-svg{width:100%;height:100%;position:absolute;inset:0}.eq-curve-line{fill:none;stroke:#fff6;stroke-width:3px}.eq-node-group{cursor:pointer}.eq-node{fill:#151821;stroke-width:4px;transition:all .2s}.eq-node-hitbox{fill:#0000}.eq-node-group:hover .eq-node{stroke-width:6px;filter:brightness(1.3)}.eq-node-group.active .eq-node{fill:currentColor;filter:drop-shadow(0 0 10px)}.compressor-panel{background:linear-gradient(#1f2330 0%,#151821 100%);flex-direction:column;align-items:center;gap:2.5rem;padding:2rem;display:flex}.gr-meter-container{flex-direction:column;align-items:center;gap:.5rem;display:flex}.meter-label{font-family:var(--font-mono);color:#888;text-transform:uppercase;letter-spacing:2px;font-size:10px}.gr-meter{background:#0f1118;border:1px solid #333;border-radius:4px;width:200px;height:60px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #00000080}.gr-needle{transform-origin:top;background:#ff4757;width:2px;height:150px;animation:2s ease-in-out infinite meterTwitch;position:absolute;top:-100px;left:90%;transform:rotate(5deg)}@keyframes meterTwitch{0%{transform:rotate(5deg)}10%{transform:rotate(15deg)}20%{transform:rotate(8deg)}30%{transform:rotate(20deg)}to{transform:rotate(5deg)}}.gr-scale{font-family:var(--font-mono);color:#555;justify-content:space-between;font-size:10px;display:flex;position:absolute;bottom:5px;left:10px;right:20px}.knobs-container{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.knob-group{cursor:pointer;flex-direction:column;align-items:center;gap:.5rem;transition:transform .2s;display:flex}.knob-group:hover{transform:translateY(-2px)}.knob{background:radial-gradient(circle at 30% 30%,#3a3e4a,#151821);border:2px solid #333;border-radius:50%;width:60px;height:60px;position:relative;box-shadow:0 5px 15px #0000004d,inset 0 2px 4px #ffffff1a}.knob-indicator{transform-origin:50% 20px;background:#666;border-radius:2px;width:4px;height:15px;position:absolute;top:10px;left:50%}.knob-name{text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:600}.knob-value{font-family:var(--font-mono);color:#888;font-size:12px}.limiter-panel{background:#0f1118;flex-direction:column;align-items:center;gap:2rem;padding:2rem;display:flex}.limiter-display{background:#1a1e29;border:1px solid #333;border-radius:8px;align-items:flex-end;width:100%;max-width:500px;height:200px;padding:0 20px;display:flex;position:relative}.limiter-ceiling-line{z-index:10;background:#ff4757;height:2px;position:absolute;left:0;right:0;box-shadow:0 0 10px #ff4757}.limiter-ceiling-line span{color:#ff4757;font-size:12px;font-family:var(--font-mono);position:absolute;top:-20px;right:10px}.limiter-waveform-container{justify-content:space-around;align-items:flex-end;width:100%;height:100%;padding-bottom:5px;display:flex}.limiter-bar-wrapper{width:20px;height:100%;position:relative}.limiter-bar{background:var(--accent-neon-blue);border-radius:4px;width:100%;transition:height .1s;position:absolute;bottom:0}.limiter-bar.is-clipping{background:#feca57}.limiter-bar-clipped{opacity:.6;background:#ff4757;border-radius:4px;width:100%;animation:.5s infinite alternate clipPulse;position:absolute}@keyframes clipPulse{0%{opacity:.3}to{opacity:.8}}.slider-container{flex-direction:column;gap:10px;width:100%;max-width:400px;display:flex}.slider-container label{font-family:var(--font-mono);color:var(--text-primary);text-align:center;font-size:14px}.limiter-slider{-webkit-appearance:none;background:#333;border-radius:3px;outline:none;width:100%;height:6px}.limiter-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-neon-blue);cursor:pointer;width:24px;height:24px;box-shadow:0 0 10px var(--accent-neon-blue-dim);border-radius:50%}.parametric-readout{background:#0f1118;border-top:1px solid #222;justify-content:space-around;padding:10px 20px;display:flex}.param-block{flex-direction:column;align-items:center;display:flex}.param-label{font-family:var(--font-mono);color:#666;letter-spacing:1px;font-size:10px}.param-value{font-family:var(--font-mono);font-size:14px;font-weight:600}.limiter-controls-row{justify-content:space-between;align-items:center;gap:2rem;width:100%;display:flex}.digital-readout-panel{background:#0f1118;border:1px solid #333;border-radius:8px;gap:1.5rem;padding:15px 25px;display:flex}.readout-block{flex-direction:column;align-items:flex-end;display:flex}.readout-label{font-family:var(--font-mono);color:#666;font-size:10px}.readout-value{font-family:var(--font-mono);color:#fff;font-size:18px;font-weight:700}.readout-value.danger{color:#ff4757;text-shadow:0 0 10px #ff475780}.readout-value.safe{color:#2ed573}.compressor-meters-wrapper{align-items:center;gap:1.5rem;display:flex}.io-meter{flex-direction:column;align-items:center;gap:5px;display:flex}.io-bar{background:#0f1118;border:1px solid #333;border-radius:2px;align-items:flex-end;width:15px;height:60px;padding:1px;display:flex}.io-level{background:linear-gradient(#ff4757 0%,#feca57 20%,#2ed573 100%);width:100%;transition:height .3s}@media (width<=768px){.eq-graph-area{height:180px}.freq-labels{padding:0 10px;font-size:10px}.compressor-panel,.limiter-panel{padding:1rem}.knobs-container{gap:1rem}.limiter-display{height:150px;padding:0 10px}.limiter-controls-row{flex-direction:column;gap:1rem}}
