:root{
  --bg:#b3b3b3;
  --panel:#2f3032;
  --accent:#ff6666;
  --light:#ead8a1;
  --ink:#0f0f10;
  --knob-size:clamp(56px,16vw,84px);
  --gap:clamp(8px,3vw,24px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#111; background:var(--bg);
}
#app{min-height:100vh; display:flex; flex-direction:column}
.stage{position:relative; flex:1; border:6px solid #111; border-radius:56px; margin:36px; background:var(--bg); overflow:hidden; clip-path: inset(0 round 56px)}
#camera{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.1)}
#hands{position:absolute; inset:0; width:100%; height:100%;}
.branding-vertical{position:absolute; left:24px; top:80px; letter-spacing:2px; font-weight:800; line-height:0.9; writing-mode:vertical-rl; transform:rotate(180deg); font-size:48px; color:#0b0b0b; opacity:0.9}

.control-deck{
  position:absolute; right:min(48px,4vw); left:min(48px,4vw); bottom:calc(16px + env(safe-area-inset-bottom, 0)); height:auto; border-radius:24px; background:rgba(47,48,50,0.8); display:flex; flex-wrap:wrap; align-items:flex-end; padding:24px; gap:var(--gap); box-shadow:0 8px 24px rgba(0,0,0,.25) inset;
}
.left-cluster{display:flex; flex-direction:column; align-items:center; gap:8px}
.circle{width:56px; height:56px; border-radius:999px; border:4px solid #111; background:#444}
.circle.red{background:var(--accent)}
.label{color:#b6b6b6; font-size:12px; text-align:center}
.visualizer{flex:1 1 200px; display:flex; justify-content:center}
#viz{width:100%; max-width:520px; height:clamp(36px,8vh,56px); border-radius:28px; background:#0b0b0b; display:block}
.right-cluster{margin-left:auto; display:flex; flex-direction:column; gap:var(--gap); flex:1 1 240px}
.row{display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-end; justify-content:flex-end}
.switch-group{display:flex; flex-direction:column; align-items:center; gap:8px}
.dial{display:flex; flex-direction:column; align-items:center; gap:8px}
.knob{appearance:none; width:var(--knob-size); height:var(--knob-size); border-radius:50%; background:var(--light); border:6px solid #1e1e1f; cursor:pointer; position:relative}
.knob.red{background:var(--accent)}
.knob[type=range]{width:var(--knob-size); height:var(--knob-size);}
/* circular range knob */
.knob::-webkit-slider-thumb{appearance:none; width:16px; height:16px; border-radius:50%; background:#007aff; border:3px solid #0b0b0b; box-shadow:0 0 0 6px rgba(0,0,0,.2);} 
.knob{background:
  radial-gradient(circle at 50% 50%, #ffe8a8 60%, rgba(0,0,0,0) 61%),
  conic-gradient(from -90deg, #ffe8a8 0 var(--angle,50%), #c9c19a var(--angle,50%) 100%);
}
.switch{background:#111;color:#eee;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
.wave-row{align-items:center}

.bottom-bar{display:flex; justify-content:flex-end; align-items:center; padding:0 min(48px,4vw) calc(16px + env(safe-area-inset-bottom, 0))}
.record-section{margin-right:auto; display:flex; align-items:center; gap:12px}
.btn{background:#111;color:#eee;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
.btn.secondary{background:#333}
.btn.danger{background:#b00020;color:#fff}
.btn:disabled{opacity:0.5; cursor:not-allowed}
.select{background:#222;color:#eee;border:1px solid #444;border-radius:8px;padding:8px 12px}
.actions button{background:#111;color:#eee;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}

@media (max-width: 900px){
  .branding-vertical{display:none}
  .control-deck{left:16px; right:16px}
}

/* Mobile layout */
@media (max-width: 420px){
  .stage{margin:12px; border-width:4px; border-radius:28px; clip-path: inset(0 round 28px)}
  .control-deck{left:12px; right:12px; bottom:16px; padding:12px; gap:12px; border-radius:16px}
  #viz{height:40px; border-radius:20px; width:100%}
  .right-cluster{gap:12px}
  .row{gap:12px; justify-content:space-between}
  .dial{gap:4px}
  .knob{width:64px; height:64px; border-width:4px}
  .knob[type=range]{width:64px; height:64px}
  .label{font-size:10px}
  .bottom-bar{padding:0 16px 16px}
  .btn{padding:10px 12px; border-radius:10px}
  .record-section{gap:8px}
  .select{padding:6px 8px}
}