:root{--bg-dark:#0a0c14;--panel-bg:#141928cc;--accent:#38bdf8;--glass-border:#ffffff1a}body,html{background-color:var(--bg-dark);color:#e2e8f0;width:100%;height:100%;margin:0;padding:0;font-family:Outfit,sans-serif;overflow:hidden}#app-container{width:100vw;height:100vh;display:flex}#sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);z-index:100;flex-direction:column;width:320px;padding:2rem;display:flex}.logo{background:linear-gradient(90deg,#f87171,#fb923c,#fbbf24,#4ade80,#38bdf8,#818cf8,#c084fc);-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin-bottom:2.5rem;font-family:Orbitron,sans-serif;font-size:1.3rem;font-weight:700}.control-group{margin-bottom:2rem}.group-title{text-transform:uppercase;color:#64748b;letter-spacing:1px;margin-bottom:1rem;font-size:.75rem;display:block}label{margin-bottom:.8rem;font-size:.9rem;display:block}label span{color:var(--accent);float:right;font-weight:600}input[type=range]{width:100%;accent-color:var(--accent)}.hint{color:#475569;margin-top:.5rem;font-size:.75rem}.theory-panel{background:#0003;border-radius:16px;margin-top:1rem;padding:1.2rem}.theory-title{color:#94a3b8;margin-bottom:.8rem;font-size:.9rem;font-weight:600}.theory-list{color:#64748b;padding-left:1.2rem;font-size:.8rem;line-height:1.6}.math-box{color:#e2e8f0;border-top:1px solid #ffffff0d;margin-top:1rem;padding-top:1rem;font-size:.85rem}.legend{color:#64748b;margin-top:auto;font-size:.75rem}.legend-item{align-items:center;gap:8px;margin-bottom:4px;display:flex}.dot{border-radius:50%;width:8px;height:8px}.dot.red{background:#f87171}.dot.violet{background:#c084fc}#workspace{flex:1;justify-content:center;align-items:center;display:flex;position:relative}#rainbow-canvas{width:100%;height:100%}.overlay-metrics{flex-direction:column;gap:12px;display:flex;position:absolute;top:30px;right:30px}.metric-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:14px;min-width:180px;padding:12px 20px}.metric-card .label{color:#64748b;text-transform:uppercase;margin-bottom:4px;font-size:.7rem}.metric-card .value{font-family:Orbitron,sans-serif;font-size:1.4rem;font-weight:700}.metric-card .value.accent{color:#fbbf24}.instruction{color:#475569;background:#0000004d;border-radius:20px;padding:8px 16px;font-size:.8rem;position:absolute;bottom:30px}