@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap";body{color:#f8fafc;background-color:#0f172a!important}.experiment-layout{flex-direction:column;align-items:stretch;gap:24px;max-width:1500px;margin:0 auto;padding:94px 24px 120px;display:flex}.sim-area{flex-direction:column;gap:24px;display:flex}.sim-header{grid-column:1/-1;align-items:center;gap:16px;margin-bottom:8px;display:flex}.sim-title{color:#f8fafc;margin:0;font-size:1.5rem;font-weight:700}.sim-badge{color:#a5b4fc;background:#6366f126;border:1px solid #6366f14d;border-radius:999px;padding:4px 12px;font-size:.75rem;font-weight:600}.panel-box{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:24px}.control-panel{flex-direction:column;gap:16px;display:flex}.panel-title{color:#f8fafc;border-bottom:1px solid #334155;margin-top:0;margin-bottom:12px;padding-bottom:12px;font-size:1.05rem;font-weight:600}.theory-box-mini{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:20px}.theory-title{color:#f8fafc;margin-top:0;margin-bottom:10px;font-size:.95rem;font-weight:700}.theory-text{color:#94a3b8;margin:0;font-size:.85rem;line-height:1.6}.text-slate-400{color:#94a3b8}.text-blue-400{color:#60a5fa}.text-purple-400{color:#c084fc}.font-bold{font-weight:700}.oscilloscope-workspace{background:#030408;border:1px solid #334155;border-radius:12px;height:400px;position:relative;overflow:hidden}.split-workspace{box-shadow:none;background:0 0;border:none;gap:1.5rem;padding:1.5rem;display:flex}.osc-panel{flex-direction:column;flex:1;display:flex}.osc-title{color:#94a3b8;text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:12px;font-family:Fira Code,monospace;font-size:.8rem;font-weight:600}.osc-canvas-container{background:#030408;border:1px solid #334155;border-radius:12px;flex:1;position:relative;overflow:hidden}#bezier-canvas-container{position:absolute;inset:20px}.centered-workspace{justify-content:center;align-items:center;display:flex}.oscilloscope-workspace:before,.osc-canvas-container:before{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-position:50%;background-size:40px 40px;position:absolute;inset:0}canvas{z-index:5;position:relative}.mode-tabs{gap:12px;margin-bottom:24px;display:flex}.mode-btn{color:#94a3b8;font-family:var(--font-main);cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:8px;flex:1;padding:14px 20px;font-size:.95rem;font-weight:600;transition:all .2s}.mode-btn:hover{color:#f8fafc;background:#1e293b}.mode-btn.active{color:#60a5fa;background:#60a5fa1a;border-color:#3b82f6}.synth-preset-btn{text-align:left;background:#0f172a;border:1px solid #334155;border-radius:8px;flex:none;width:100%;padding:14px 16px;font-size:.9rem}.synth-preset-btn:hover{background:#1e293b;border-color:#475569}.synth-preset-btn.active{color:#e0e7ff;border-color:#818cf8}.preset-buttons{flex-direction:column;gap:8px;margin-bottom:24px;display:flex}.play-sequence-container{background:#0f172a;border:1px solid #334155;border-radius:12px;justify-content:space-between;align-items:center;padding:20px;display:flex}.instruction-text{color:#94a3b8;margin:0;font-size:.95rem;line-height:1.5}.play-hold-container{background:#0f172a;border:1px solid #334155;border-radius:12px;justify-content:center;align-items:center;padding:24px;display:flex}.action-btn{cursor:pointer;border:none;transition:all .2s}.action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.action-btn:active{transform:translateY(1px)}.pill-btn{color:#0f172a;white-space:nowrap;background:#f8fafc;border-radius:999px;flex-shrink:0;align-items:center;gap:8px;padding:14px 40px;font-size:1.05rem;font-weight:700;display:inline-flex;box-shadow:0 4px 10px #ffffff0d}.pill-btn.primary-solid{color:#fff;background:#3b82f6;box-shadow:0 4px 10px #3b82f633}.overlay-glass{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#0f172ad9;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay-title{color:#fff;margin-bottom:16px;font-size:1.4rem;font-weight:700}.overlay-text{color:#94a3b8;margin-bottom:32px;font-size:1rem}.synth-sliders{gap:48px;margin-bottom:32px;display:flex}.control-group{flex-direction:column;flex:1;gap:12px;display:flex}.control-group label{color:#e2e8f0;justify-content:space-between;font-size:.95rem;font-weight:600;display:flex}input[type=range].styled-slider{cursor:pointer;background:#334155;border-radius:4px;outline:none;width:100%;height:6px}input[type=range].blue-slider{accent-color:#60a5fa}input[type=range].purple-slider{accent-color:#c084fc}.pagination-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;background:#0f172af2;border-top:1px solid #1e293b;justify-content:center;align-items:center;height:90px;display:flex;position:fixed;bottom:0;left:0;right:0}.pagination-inner{gap:24px;display:flex}.page-tab{color:#94a3b8;font-family:var(--font-main);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;align-items:center;gap:12px;padding:12px 24px 12px 16px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.page-tab:hover{color:#f8fafc}.page-tab.active{color:#f8fafc;background:#1e293b;border-color:#334155}.tab-number{width:28px;height:28px;font-family:var(--font-main);color:#cbd5e1;background:#334155;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;transition:all .2s;display:flex}.page-tab.active .tab-number{color:#0f172a;background:#f8fafc;font-weight:700}.page-view{opacity:0;transition:opacity .3s;display:none}.page-view.active{opacity:1;animation:.4s forwards fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}