:root{color-scheme:dark;--bg: #0b0f17;--panel: #121826;--text: #d9e1f2;--muted: #95a3c4;--accent: #7aa2f7;--accent-2: #86e3ce}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 80% 10%,#111a2c 0%,var(--bg) 40%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.app-root{display:grid;grid-template-rows:auto 1fr;height:100%}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:12px;background:#121826bf;border-bottom:1px solid #1d2540;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;z-index:10;min-height:56px}.brand{font-weight:700;letter-spacing:.3px}.controls{display:flex;align-items:center;gap:10px}.select-wrap{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}.select-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--panel);color:var(--text);border:1px solid #1d2540;padding:8px 10px;border-radius:8px;outline:none}.audio-btn{border:1px solid #1d2540;background:linear-gradient(180deg,#1a2338,#141b2c);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}.audio-btn:hover{border-color:#2b3862;box-shadow:0 0 0 2px #7aa2f726 inset}.app-main,.fractal-wrap{height:100%;position:relative}.fractal-canvas{width:100%;height:100%;display:block}.hint{position:absolute;left:10px;bottom:10px;color:var(--muted);font-size:12px;background:#00000040;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.06)}.placeholder{padding:24px;color:var(--muted)}.stage{position:relative;height:100%;display:flex;flex-direction:column}.stage-header{padding:10px 14px;color:var(--muted)}.drawing-area{flex:1 1 auto;margin:0 14px 14px;border:1px solid #2b3862;border-radius:10px;overflow:hidden;background:#0b0f17;position:relative}.volume-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:6px}.mute-btn{border:1px solid #1d2540;background:#171f33;color:var(--text);padding:6px 8px;border-radius:6px;cursor:pointer}.volume-slider{width:120px}.fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted)}