:root{color-scheme:light;--bg: #f5f1e8;--panel: rgba(248, 244, 237, .88);--panel-strong: rgba(251, 247, 241, .96);--line: rgba(52, 59, 81, .18);--line-strong: rgba(52, 59, 81, .34);--text: #22304f;--muted: #7381a1;--accent: #f85c24;--accent-soft: rgba(248, 92, 36, .18);--shadow: 0 28px 80px rgba(82, 58, 24, .14);--radius-xl: 34px;--radius-lg: 26px;--radius-md: 18px;--radius-sm: 12px;--font-body: Inter, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#f5efe6;color:var(--text);font-family:var(--font-body)}button,input,select{font:inherit}.theremin-page{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:18px;overflow:hidden}.experience-back-link{position:fixed;top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));z-index:10;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fbf7f1f0;color:#2a2a27;border:1px solid rgba(64,45,28,.14);text-decoration:none;font-size:.85rem;line-height:1;box-shadow:0 8px 24px #523a1824;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.experience-back-link:active{transform:translateY(1px)}.experience-back-link:before{content:"←";font-size:1rem;line-height:1}.device-header,.stage,.options-overlay,.options-card{position:relative;z-index:1}.device-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 4px 18px}.header-right{display:flex;align-items:center;gap:18px}.header-actions{display:flex;align-items:center;gap:12px}.play-state{display:flex;align-items:center;gap:10px;min-width:0}.status-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px #f85c241a;flex:0 0 auto}.status-button,.readout,.control-label,.options-kicker,.helper-text,.pitch-scale-labels,.pitch-scale-range,.volume-axis-label,.hand-label{font-family:var(--font-mono);letter-spacing:.08em}.status-button{border:0;padding:0;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer}.readout{margin:0;color:var(--muted);font-size:1rem;text-align:right}.device-header .primary-action,.device-header .secondary-action{padding:10px 20px}.device-header .primary-action:before{content:none}.play-state.is-paused .status-dot{background:#7381a17a;box-shadow:0 0 0 6px #7381a11f}.play-state.is-paused .status-button{color:var(--text)}.stage{flex:1 1 auto;min-height:0;border-radius:0;overflow:hidden;background:#f3ebdf}.stage-video,.stage-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.stage-canvas{z-index:2;pointer-events:none}.stage-video{z-index:1}.stage-camera-fill{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:#f0e7d8}.stage-glow{position:absolute;border-radius:999px;filter:blur(30px);opacity:.48}.stage-glow-a{inset:16% auto auto 18%;width:160px;height:160px;background:#fffaf4b8}.stage-glow-b{inset:auto 22% 18% auto;width:180px;height:180px;background:#f85c241f}.stage-glow-c{inset:48% auto auto 44%;width:200px;height:200px;background:#7381a11a}.stage-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;--overlay-pad-x: 42px;--overlay-pad-top: 46px;--overlay-pad-bottom: 84px;padding:var(--overlay-pad-top) var(--overlay-pad-x) var(--overlay-pad-bottom)}.volume-axis-label{position:absolute;left:18px;top:46%;transform:translateY(-50%) rotate(-90deg);color:var(--accent);font-size:1rem}.hand-marker{position:absolute;width:56px;height:56px;transform:translate(-50%,-50%);transition:opacity .25s ease}.hand-marker.is-hidden{opacity:0;pointer-events:none}.hand-marker-volume{left:37%;top:36%}.hand-marker-pitch{left:60%;top:54%}.hand-label{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%);color:var(--accent);white-space:nowrap;font-size:.9rem}.marker-ring,.marker-core,.marker-guide{position:absolute}.marker-ring{top:0;right:0;bottom:0;left:0;border-radius:999px;border:3px solid var(--accent);background:#ffffff61}.marker-core{left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:999px;background:var(--accent)}.marker-guide-horizontal{left:calc(100% + 12px);top:50%;width:380px;border-top:2px dashed rgba(248,92,36,.72)}.marker-guide-vertical{left:50%;top:calc(100% + 10px);border-left:2px dashed rgba(248,92,36,.72)}.pitch-scale{position:absolute;left:calc(-1 * var(--overlay-pad-x));right:calc(-1 * var(--overlay-pad-x));bottom:0;color:#fff;padding:18px var(--overlay-pad-x) 16px;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px 18px 0 0}.pitch-scale-labels,.pitch-scale-range{position:relative;height:20px}.pitch-scale-labels{margin-bottom:10px;font-size:.96rem;height:22px}.pitch-scale-note-label,.pitch-scale-g-label{position:absolute;top:0;transform:translate(-50%);white-space:nowrap}.pitch-scale-g-label{font-size:.86em;color:#ffffffe0}.pitch-scale-note-label.is-left-edge{transform:none}.pitch-scale-note-label.is-right-edge{transform:translate(-100%)}.pitch-scale-line{position:relative;height:3px;background:#ffffffe0;margin-bottom:12px}.pitch-scale-indicator{position:absolute;top:50%;left:0;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px #f85c2433,0 0 12px #f85c2466;transition:opacity .2s ease}.pitch-scale-indicator.is-hidden{opacity:0}.pitch-scale-ticks{position:absolute;top:0;right:0;bottom:0;left:0}.pitch-scale-tick{position:absolute;top:-6px;width:2px;height:14px;transform:translate(-50%);background:#ffffff80}.pitch-scale-tick.is-natural{width:4px;height:18px;top:-8px;background:#ffffffb3}.pitch-scale-tick.is-g{width:5px;height:20px;top:-9px;background:#ffffffbf}.pitch-scale-tick.is-octave{height:22px;top:-10px;width:6px;background:#ffffffd9}.pitch-scale-range{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}.primary-action,.secondary-action,.icon-button,.toggle-card,.select-wrap,.segmented-control,.waveform-preview{border:1px solid var(--line-strong)}.primary-action,.secondary-action,.icon-button,.segmented-control label,.toggle-card,.select-wrap,.status-button{transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.primary-action,.secondary-action,.icon-button{border-radius:999px;padding:16px 28px;cursor:pointer}.primary-action{border-color:transparent;background:var(--accent);color:#fff;font-weight:700}.primary-action.is-idle{background:#fffcf7d6;border-color:var(--line-strong);color:var(--text)}.primary-action:before{content:"■";margin-right:10px;font-size:.78rem;vertical-align:middle}.secondary-action,.icon-button{background:#fffcf7bd;color:var(--text)}.primary-action:hover,.secondary-action:hover,.icon-button:hover,.status-button:hover,.segmented-control label:hover,.toggle-card:hover,.select-wrap:hover{transform:translateY(-1px)}.secondary-action{min-width:128px}.options-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3}.options-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#f4efe661;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.options-card{position:absolute;top:0;right:0;bottom:0;width:min(560px,calc(100% - 36px));display:flex;flex-direction:column;gap:24px;padding:24px;overflow:auto;border-radius:var(--radius-lg);background:var(--panel-strong);box-shadow:0 24px 64px #3c34292e}.options-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.options-kicker,.control-label,.helper-text{color:var(--muted);font-size:.95rem}.options-kicker{margin:0 0 8px}.options-header h1{margin:0;font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.05}.icon-button{width:44px;height:44px;padding:0;flex:0 0 auto;font-size:1.5rem}.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}.control-group{display:flex;flex-direction:column;gap:10px}.control-group-full{grid-column:1 / -1}.segmented-control{display:grid;grid-template-columns:repeat(2,1fr);padding:4px;border-radius:16px;background:#fffaf3d9}.segmented-control input{position:absolute;opacity:0;pointer-events:none}.segmented-control label{display:grid;place-items:center;min-height:56px;padding:0 12px;border-radius:12px;cursor:pointer;text-align:center}.segmented-control input:checked+label{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px #0000000a}.toggle-card,.select-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:16px 18px;border-radius:16px;background:#fffbf6d6}.toggle-card{cursor:pointer}.toggle-switch{position:relative;flex:0 0 auto}.toggle-switch input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0}.toggle-track{position:relative;display:inline-block;width:56px;height:32px;border-radius:999px;background:#7381a138}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:999px;background:#fff;box-shadow:0 4px 10px #22304f2e;transition:transform .2s ease}.toggle-switch input:checked+.toggle-track{background:var(--accent)}.toggle-switch input:checked+.toggle-track:after{transform:translate(24px)}.select-wrap select{width:100%;border:0;background:transparent;color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.select-wrap{position:relative}.select-wrap:after{content:"▼";position:absolute;right:18px;color:var(--muted);font-size:.7rem;pointer-events:none}.harmonics-headline{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.harmonics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.harmonic-slider{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text)}.harmonic-slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:108px;height:14px;margin:44px 0;transform:rotate(-90deg);transform-origin:center;background:transparent}.harmonic-slider input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;border:1px solid var(--line-strong);background:#fbf7f1}.harmonic-slider input[type=range]::-moz-range-track{height:14px;border-radius:999px;border:1px solid var(--line-strong);background:#fbf7f1}.harmonic-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin-top:-4px;border-radius:8px;border:1px solid rgba(91,66,46,.26);background:var(--accent)}.harmonic-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:8px;border:1px solid rgba(91,66,46,.26);background:var(--accent)}.harmonic-slider span{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.08em}.options-bottom-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:20px;align-items:end}.waveform-block,.particle-block{display:flex;flex-direction:column;gap:10px}.waveform-preview{overflow:hidden;min-height:78px;border-radius:16px;background:#fffbf6d6}.waveform-svg{display:block;width:100%;height:78px}.waveform-svg path{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.toggle-card-compact{min-height:54px}.hidden{display:none}@media (max-width: 980px){.stage-overlay{--overlay-pad-x: 28px;--overlay-pad-top: 38px;--overlay-pad-bottom: 84px}.options-card{width:min(540px,calc(100% - 24px));top:0;right:0;bottom:0}.marker-guide-horizontal{width:250px}}@media (max-width: 860px){.options-grid,.options-bottom-row{grid-template-columns:1fr}.harmonics-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}@media (max-width: 720px){.theremin-page{padding:10px}.device-header{flex-direction:column;align-items:flex-start;padding-bottom:12px}.header-right{width:100%;flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:space-between}.readout{text-align:left}.stage{min-height:0}.stage-overlay{--overlay-pad-x: 20px;--overlay-pad-top: 26px;--overlay-pad-bottom: 88px}.volume-axis-label{display:none}.pitch-scale{bottom:0}.pitch-scale-range:after{width:46%;left:27%}.hand-marker-volume{left:32%;top:34%}.hand-marker-pitch{left:62%;top:49%}.marker-guide-horizontal{width:130px}.primary-action,.secondary-action{padding:14px 18px;min-width:0}.options-card{top:0;right:0;bottom:0;width:calc(100% - 20px);padding:18px}.options-header h1{font-size:1.8rem}.harmonics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-control label,.toggle-card,.select-wrap{min-height:52px}}@media (max-width: 520px){.status-button,.readout,.control-label,.options-kicker,.helper-text,.pitch-scale-labels,.pitch-scale-range,.volume-axis-label,.hand-label{letter-spacing:.04em}.status-button,.readout,.pitch-scale-labels,.pitch-scale-range{font-size:.82rem}.pitch-scale-labels{margin-bottom:8px}.options-header{align-items:center}.icon-button{width:40px;height:40px}.harmonics-grid{gap:20px 12px}.harmonic-slider input[type=range]{width:98px}}