.theremin-lab{max-width:900px;margin:20px auto;padding:24px;background:var(--ui-panel);border:1px solid var(--ui-border);border-radius:24px;color:var(--ui-text)}.theremin-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.theremin-head h1{font-size:40px;margin:8px 0}.theremin-head p{color:var(--ui-muted);font-size:16px}.theremin-lab button{min-height:52px;border-radius:14px;padding:12px 20px;background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-border)}.theremin-lab button:focus-visible,.theremin-lab input:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}.theremin-camera{position:relative;aspect-ratio:4/3;max-height:58svh;overflow:hidden;background:#091c26;border-radius:20px;border:1px solid #497587}.theremin-camera video,.theremin-camera canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}.theremin-camera canvas{pointer-events:none}.theremin-camera #theremin-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;color:#f2fff8;background:radial-gradient(ellipse at center,#24504b,#091c26)}#theremin-placeholder>span{font-size:64px}#theremin-placeholder>strong{font-size:24px}#theremin-placeholder p{font-size:16px;padding:0 12px}.theremin-meter{display:flex;gap:12px;align-items:center;margin:20px 0;font-size:13px;font-weight:800}.theremin-meter>div{position:relative;flex:1;min-width:40px;height:12px;border-radius:20px;background:linear-gradient(90deg,#8276e7,#7fecbd);margin:0 8px}#theremin-dot{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:23px;height:23px;border:3px solid white;background:#1d665b;border-radius:50%}.theremin-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}#theremin-start{background:#9df2cb;color:#173f38;font-weight:850;flex:1}.theremin-controls label{display:flex;align-items:center;gap:12px;font-size:14px;min-height:48px}.theremin-controls input{width:130px;min-height:48px;accent-color:var(--ui-accent)}#theremin-status{min-height:48px;margin:18px 0 8px;font-size:15px;color:var(--ui-muted)}.theremin-readout{display:flex;justify-content:space-between;align-items:center;gap:12px}.theremin-readout strong{font-size:28px;font-variant-numeric:tabular-nums;color:var(--ui-accent)}.theremin-readout span{font-size:14px}.theremin-note{font-size:13px;line-height:1.6;margin:20px 0 0;color:var(--ui-muted)}.dashboard-module.theremin{--accent:#319b84;--soft:#e1f9ef}.dashboard-module.theremin .dashboard-module-art{background:radial-gradient(ellipse,#326764,#121c3b);display:grid;place-items:center}.dashboard-module.theremin .dashboard-module-art:after{content:'✋  ≋';font-size:65px;color:#a5f6d1}.dashboard-module.theremin .dashboard-module-mark{display:none}
@media(max-width:600px){.theremin-lab{padding:14px;margin:14px 0}.theremin-head h1{font-size:32px}.theremin-head{align-items:start}.theremin-head p{font-size:14px}.theremin-head button{padding:10px 12px}.theremin-camera{max-height:none}.theremin-meter{font-size:11px;gap:4px}.theremin-controls label{width:100%;justify-content:space-between}.theremin-controls input{width:65%}#theremin-placeholder>strong{font-size:20px}.theremin-readout strong{font-size:24px}.theremin-note{font-size:13px}}
.theremin-modes{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}.theremin-modes button{flex:1;min-height:48px;font-size:14px}.theremin-modes button[aria-pressed=true]{background:#e85e9e;color:#fff;border-color:#f09fc2}.breath-panel{display:grid;grid-template-columns:135px minmax(0,1fr);align-items:center;gap:18px;padding:20px;margin-bottom:18px;border-radius:20px;border:1px solid #55bada;background:var(--ui-soft)}.breath-visual svg{width:100%;height:auto}.breath-copy small{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--ui-accent)}.breath-copy h2{font-size:clamp(22px,4vw,30px);line-height:1.25;margin:10px 0}.breath-copy p{font-size:14px;color:var(--ui-muted);margin-bottom:10px}.breath-copy button{background:#55bada;color:#08243b;font-weight:800}.breath-panel[data-phase=done]{border-color:#e85e9e}.breath-panel[data-phase=place] #breath-arrow,.breath-panel[data-phase=hand] #breath-arrow,.breath-panel[data-phase=done] #breath-arrow{visibility:hidden}
@media(max-width:600px){.breath-panel{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:14px}.breath-copy h2{font-size:21px}.breath-copy p{font-size:13px}.theremin-modes{gap:8px}.theremin-modes button{font-size:13px;padding:10px}}