:root{color-scheme:light;--bg-a: #f8f7f2;--bg-b: #dff1ff;--panel: rgba(255, 255, 255, .85);--panel-border: #b6cad9;--ink-strong: #132238;--ink-soft: #4a6077;--accent: #0f766e;--accent-strong: #0b4f4a;--danger: #b91c1c}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%}body{font-family:Plus Jakarta Sans,sans-serif;color:var(--ink-strong);background:radial-gradient(circle at 8% 15%,rgba(184,242,240,.75),transparent 36%),radial-gradient(circle at 87% 8%,rgba(255,234,187,.65),transparent 35%),linear-gradient(135deg,var(--bg-a),var(--bg-b))}.app-shell{display:grid;grid-template-columns:minmax(280px,320px) 1fr minmax(280px,320px);height:100%;gap:14px;padding:14px}.sidebar,.hud-panel{border:1px solid var(--panel-border);border-radius:18px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:16px;overflow-y:auto}.title-block h1{margin:0;font-size:1.45rem}.title-block p{margin:6px 0 0;color:var(--ink-soft);font-size:.9rem}.tabs{margin-top:14px;display:grid;grid-template-columns:1fr;gap:8px}.tab{border:1px solid #abc1d3;border-radius:10px;background:#f6fbff;color:var(--ink-strong);padding:10px;text-align:left;font-weight:600;cursor:pointer}.tab.active{border-color:#0ea5a8;background:linear-gradient(120deg,#ddfffd,#edf8ff);color:var(--accent-strong)}.controls-card,.playback-card,.legend-card{margin-top:14px;border:1px solid #bfd3df;border-radius:12px;background:#ffffffd1;padding:12px}.controls-card h2,.playback-card h3,.legend-card h3,.hud-panel h2{margin:0 0 10px;font-size:1rem}.slider-row{margin-bottom:12px}.slider-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;font-size:.88rem}.slider-label strong{color:var(--accent-strong);font-family:IBM Plex Mono,monospace;font-weight:600}input[type=range]{width:100%;accent-color:var(--accent)}.mode-toggle{display:grid;grid-template-columns:1fr;gap:8px}.mode-toggle button,.playback-buttons button{border:1px solid #b1c8d8;border-radius:10px;background:#f5fbff;color:var(--ink-strong);padding:8px 10px;font-weight:600;cursor:pointer}.mode-toggle button.active{border-color:#0ea5a8;color:#0f766e;background:#e6fffd}.playback-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.canvas-panel{min-width:0;display:flex;flex-direction:column;gap:8px}.canvas-stack{position:relative;width:100%;height:100%;min-height:420px;border:1px solid var(--panel-border);border-radius:18px;overflow:hidden;background:#d9ecff;box-shadow:inset 0 0 0 1px #ffffff8c}.sim-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.canvas2d.dimmed{opacity:.12}.field{pointer-events:none;transition:opacity .12s ease}.field.hidden{opacity:0}.field.visible{opacity:1}.hud-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:.9rem}.hud-row span{color:var(--ink-soft)}.hud-row strong{font-family:IBM Plex Mono,monospace;font-size:.84rem}.hud-warning{margin:10px 0 0;color:var(--danger);font-weight:700;font-size:.88rem}.legend-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:.86rem}.dot{width:10px;height:10px;border-radius:999px;display:inline-block}.dot-wave{background:#2563eb}.dot-wavelet{border:1px solid #db2777}.dot-source{background:#d97706}.dot-envelope{background:#15803d}@media (max-width: 1220px){.app-shell{grid-template-columns:minmax(260px,300px) 1fr;grid-template-rows:1fr minmax(200px,auto)}.hud-panel{grid-column:1 / -1}}@media (max-width: 860px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:auto;min-height:100%}.sidebar,.hud-panel{max-height:none}.canvas-stack{min-height:56vh}}