/* The People's Studio — the tools' own styles.
   Carried across unchanged from the single musical-tools page so that
   nothing about how the tools look or behave depends on which page
   they now live on. The colour variables they use are defined in
   tps.css. The only addition is the last rule: with one tool per page
   there is no tab strip, so every panel is simply shown. */

  /* Four variables the tools use that lived in the old combined page's :root
     and were lost when the tools were split out. Without them the Rap Beats
     Play button had no background at all — white on white — and the tuner
     device and drum grid lost their ground. Same values as before. */
  :root{
    --coral:#1D9E75;
    --dusk:#26215C;
    --dusk-2:#3A3170;
    --paper:#FBF6EF;
  }

  body{overflow-x:hidden;}
  header{width:100%; box-sizing:border-box;}
  header .wrap{max-width:100%; box-sizing:border-box;}
  .tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
  .tab-btn{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 22px;font-weight:500;font-size:.95rem;cursor:pointer}
  .tab-btn.active{border-color:var(--coral);color:var(--coral);background:rgba(29,158,117,.08)}
  .panel{display:none;max-width:780px;margin:0 auto;text-align:center}
  .panel.active{display:block}
  .tuner-display{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 24px;margin-bottom:20px}
  .note-name{font-family:'Comfortaa';font-weight:700;font-size:3.4rem;color:var(--ink);margin-bottom:8px}
  .freq-readout{font-size:.95rem;opacity:.65;margin-bottom:24px}
  .meter{position:relative;height:14px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:10px}
  .meter-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--ink);opacity:.3}
  .meter-needle{position:absolute;top:0;bottom:0;width:14px;border-radius:999px;background:var(--coral);left:50%;transform:translateX(-50%);transition:left .25s cubic-bezier(.22,1,.36,1),background .2s ease-out}
  .cents-label{font-size:.85rem;opacity:.7}
  .string-targets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .string-chip{border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:500}
  .string-chip.active{border-color:var(--coral);color:var(--coral);background:rgba(29,158,117,.08)}
  .status-msg{font-size:.9rem;opacity:.65;margin-top:14px}
  /* Physical tuner pedal */
  .tuner-device{max-width:400px;margin:0 auto;border-radius:26px;padding:22px 22px 30px;background:linear-gradient(160deg,var(--dusk-2),var(--dusk));box-shadow:0 24px 48px rgba(33,31,46,.35),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
  .tuner-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;opacity:.85}
  .tuner-brand img{height:1.3em;width:auto;filter:brightness(0) invert(1) opacity(.8)}
  .tuner-brand span{font-family:'Comfortaa';font-size:.68rem;letter-spacing:.12em;color:var(--paper);text-transform:uppercase;font-weight:700}
  .tuner-screen{background:#f4ede1;border-radius:16px;padding:22px 18px 16px;box-shadow:inset 0 3px 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.08);text-align:center}
  .tuner-note{font-family:'Comfortaa';font-weight:700;font-size:2.8rem;color:var(--ink);line-height:1;margin-bottom:2px;transition:color .2s}
  .tuner-freq{font-size:.8rem;opacity:.6;letter-spacing:.03em;margin-bottom:10px;font-variant-numeric:tabular-nums}
  .tuner-arc{width:100%;max-width:220px;display:block;margin:0 auto}
  .tuner-needle{transform-origin:100px 100px;transition:transform .12s cubic-bezier(.25,.8,.25,1)}
  .tuner-cents-label{font-size:.78rem;opacity:.65;margin-top:2px;min-height:1.2em}
  .tuner-idle .tuner-note,.tuner-idle .tuner-freq{opacity:.35}
  .tuner-presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:18px 0 4px}
  .tuner-preset{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--paper);border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:500;cursor:pointer;font-family:inherit;opacity:.8}
  .tuner-preset.active{background:var(--amber);border-color:var(--amber);color:var(--ink);opacity:1;font-weight:700}
  .tuner-strings{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
  .tuner-strings .string-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--paper)}
  .tuner-strings .string-chip.active{border-color:var(--coral);background:var(--coral);color:#fff}
  .tuner-footswitch{display:block;margin:24px auto 4px;width:92px;height:92px;border-radius:50%;border:none;cursor:pointer;background:radial-gradient(circle at 35% 30%,#5cc4a0,var(--coral) 65%);box-shadow:0 8px 0 #16382c,0 12px 20px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3);color:#fff;font-family:'Comfortaa';font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;transition:transform .08s,box-shadow .08s}
  .tuner-footswitch:active{transform:translateY(4px);box-shadow:0 4px 0 #16382c,0 6px 12px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3)}
  .tuner-footswitch.on{background:radial-gradient(circle at 35% 30%,#ffd699,var(--amber) 65%);box-shadow:0 8px 0 #8a5f13,0 12px 20px rgba(0,0,0,.4),0 0 22px 4px rgba(239,159,39,.55),inset 0 2px 4px rgba(255,255,255,.35)}
  .device-readout{color:var(--paper);opacity:.9;margin-top:16px;font-family:'Comfortaa';font-weight:700;font-size:1.2rem;text-align:center}
  .device-subreadout{color:var(--paper);opacity:.7;margin-top:6px;font-size:.85rem;text-align:center}
  .staff-screen{overflow-x:auto;padding:22px 14px 16px}
  .staff-screen svg{display:block}
  .tuner-preset.correct{background:var(--coral);border-color:var(--coral);color:#fff;opacity:1}
  .tuner-preset.wrong{background:#c2523f;border-color:#c2523f;color:#fff;opacity:1}
  .tuner-preset:disabled{cursor:default}
  .rhythm-pad-wrap{position:relative;width:190px;height:190px;margin:0 auto}
  .rhythm-ring{position:absolute;inset:0;border-radius:50%;border:5px solid var(--coral);opacity:0;box-sizing:border-box;pointer-events:none}
  .rhythm-drum{position:absolute;inset:18px;border-radius:50%;border:none;cursor:pointer;background:radial-gradient(circle at 35% 28%,#fff6e6,#e8d3ad 55%,#c9a765 100%);box-shadow:0 10px 0 #8a6c33,0 16px 26px rgba(0,0,0,.35),inset 0 0 0 7px rgba(139,108,51,.35);font-family:'Comfortaa';font-weight:700;color:#6b4f1f;font-size:1.05rem;letter-spacing:.05em;transition:transform .07s,box-shadow .07s}
  .rhythm-drum:active{transform:translateY(6px);box-shadow:0 4px 0 #8a6c33,0 8px 16px rgba(0,0,0,.35),inset 0 0 0 7px rgba(139,108,51,.35)}
  .rhythm-drum.hit{transform:translateY(5px)}
  .rhythm-feedback{text-align:center;margin-top:20px;font-family:'Comfortaa';font-weight:700;font-size:1.15rem;min-height:1.4em;color:var(--ink)}
  .rhythm-feedback.perfect{color:var(--coral)}
  .rhythm-feedback.good{color:var(--amber)}
  .rhythm-feedback.off{color:#c2523f}
  .instrument-panel{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 20px;max-width:700px}
  .inst-group{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-width:120px}
  .inst-group-label{font-size:11px;font-weight:600;color:var(--ink);opacity:.55;text-transform:uppercase;letter-spacing:.4px;text-align:center;margin-bottom:2px}
  .inst-btn{background:#f8f8f8;color:var(--ink);border:1.5px solid var(--line);padding:7px 12px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
  /* Same look as .inst-btn but deliberately a different class -- the mic panel buttons must
     NOT match .inst-btn, or the instrument-selector wiring (which runs later and re-binds
     every .inst-btn's onclick) silently overwrites their real handlers. Learned this the
     hard way once already on this project; not repeating it. */
  .mic-action-btn{background:#f8f8f8;color:var(--ink);border:1.5px solid var(--line);padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
  .mic-action-btn:disabled{opacity:.5;cursor:not-allowed}
  .inst-btn:hover{background:#f0f0f0}
  .inst-btn.active{background:rgba(29,158,117,.12);border-color:var(--coral);color:var(--coral)}
  .beat-lights{display:flex;gap:5px;justify-content:center;margin:0 auto 14px;max-width:520px}
  .beat-light{flex:1;height:9px;border-radius:3px;background:#e8e8e8;transition:background .07s}
  .beat-light.on{background:var(--coral)}
  .beat-light.accent{background:var(--amber)}
  .master-transport{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
  .master-transport button{border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:9px 18px;font-weight:500;font-size:.9rem;cursor:pointer;font-family:inherit}
  .master-transport button:hover{background:var(--ink);color:var(--paper)}
  .master-transport button.playing{background:var(--coral);border-color:var(--coral);color:#fff}
  .looper{max-width:640px;margin:0 auto 16px;display:flex;flex-direction:column;gap:10px}
  .tempo-bar{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:500;margin-bottom:4px}
  .tempo-bar input[type=number]{width:60px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);font-family:inherit;font-size:.9rem;text-align:center}
  .loop-track{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px}
  .loop-track.has-loop{border-color:var(--coral)}
  .loop-track.recording-row{border-color:#c2523f;background:rgba(194,82,63,.05)}
  .loop-label{font-weight:600;font-size:.9rem;min-width:52px}
  .loop-track button{font-size:.85rem;padding:7px 12px;border:1.5px solid var(--ink);background:none;border-radius:8px;cursor:pointer;font-family:inherit}
  .loop-track button:hover{background:var(--ink);color:#fff}
  .loop-track button:disabled{opacity:.4;cursor:not-allowed}
  .loop-record.recording{background:#c2523f;color:#fff;border-color:#c2523f}
  .loop-mute.muted{background:var(--ink);color:#fff}
  .loop-status{font-size:.78rem;opacity:.6;margin-left:auto;min-width:100px;text-align:right}
  .loop-vol{width:70px;accent-color:var(--coral)}
  .drum-seq{display:block;max-width:640px;margin:0 auto 18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
  .drum-seq.visible{display:block}
  .drum-seq-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.55;margin-bottom:12px;text-align:left}
  .drum-row{display:grid;grid-template-columns:72px repeat(var(--steps,16),1fr);gap:4px;margin-bottom:6px;align-items:center}
  .drum-row-label{font-size:.8rem;font-weight:500;text-align:left}
  .step-cell{aspect-ratio:1;border-radius:4px;background:#f0f0f0;border:1px solid #ddd;cursor:pointer;transition:all .1s}
  .step-cell.on{background:var(--coral);border-color:var(--coral)}
  .step-cell.playing{box-shadow:0 0 0 2px var(--amber)}
  .step-cell:hover{border-color:var(--coral)}
  .piano-wrap{overflow-x:auto;padding:10px 0 16px;position:relative}
  .piano-wrap::after{content:'← Scroll for more keys →';display:none;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:0.75rem;opacity:0.5;white-space:nowrap;pointer-events:none}
  @media(max-width:600px){.piano-wrap::after{display:block}}
  .piano{display:flex;position:relative;height:200px;min-width:960px;margin:0 auto;user-select:none;background:#f5f5f5;border:1px solid var(--line);border-radius:12px;padding:12px 8px 8px}
  .key{position:relative;cursor:pointer}
  .white{width:58px;height:180px;background:linear-gradient(to bottom,#fff 0%,#f4f4f4 100%);border:1px solid #ccc;border-radius:0 0 7px 7px;margin:0 2px;box-shadow:0 3px 0 #bbb,0 5px 10px rgba(0,0,0,.08);z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}
  .white:active,.white.active{background:linear-gradient(to bottom,#e8e8e8,#ddd);transform:translateY(2px)}
  .black{width:34px;height:110px;background:linear-gradient(to bottom,#333,#111);border-radius:0 0 5px 5px;position:absolute;top:12px;z-index:2;box-shadow:0 3px 0 #000,0 5px 8px rgba(0,0,0,.3);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;color:#aaa}
  .black:active,.black.active{background:linear-gradient(to bottom,#222,#000);transform:translateY(2px)}
  .key .label{font-size:11px;font-weight:600;opacity:.55;pointer-events:none}
  .black .label{color:#bbb;opacity:.8}
  .res-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;margin-bottom:20px;text-align:left}
  .res-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
  .res-power{display:flex;align-items:center;gap:12px}
  .res-power-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:#f8f8f8;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .res-power-btn.on{border-color:var(--coral);background:rgba(29,158,117,.12)}
  .res-power-led{width:14px;height:14px;border-radius:50%;background:#ccc}
  .res-power-btn.on .res-power-led{background:var(--coral);box-shadow:0 0 10px rgba(29,158,117,.5)}
  .res-status{font-size:.9rem;opacity:.7}
  .res-status strong{color:var(--coral)}
  .res-section-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;opacity:.55;margin-bottom:12px}
  .res-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
  .res-layer{background:#f8f8f8;border:1.5px solid var(--line);border-radius:14px;padding:16px}
  .res-layer.active{border-color:var(--coral);background:rgba(29,158,117,.06)}
  .res-layer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .res-layer-name{font-weight:600;font-size:1.05rem}
  .res-layer-hz{font-size:.8rem;opacity:.6}
  .res-toggle{width:44px;height:24px;border-radius:999px;background:#ddd;border:none;cursor:pointer;position:relative}
  .res-toggle.on{background:var(--coral)}
  .res-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
  .res-toggle.on::after{transform:translateX(20px)}
  .res-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:999px}
  .res-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--coral);cursor:pointer;border:2px solid #fff}
  .res-ambient{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .res-amb-btn{flex:1;min-width:100px;border:1.5px solid var(--line);background:#f8f8f8;border-radius:12px;padding:12px 10px;font-weight:500;font-size:.9rem;cursor:pointer}
  .res-amb-btn.active{border-color:var(--coral);background:rgba(29,158,117,.12);color:var(--coral)}
  .res-master{display:flex;align-items:center;gap:14px;margin-top:6px}
  .res-note{font-size:.85rem;opacity:.65;margin-top:18px;line-height:1.5}
  @media(max-width:600px){
    .white{width:42px;height:150px}
    .black{width:26px;height:92px}
    .piano{height:170px;min-width:480px}
    .drum-row{grid-template-columns:48px repeat(var(--steps,16),1fr);gap:2px}
    .drum-row-label{font-size:0.7rem}
    .drum-cell{min-height:32px}
  }
  @media(max-width:500px){
    .piano{min-width:400px}
    .white{width:38px;height:140px}
    .black{width:24px;height:84px}
    .drum-row{grid-template-columns:44px repeat(var(--steps,16),1fr);gap:1px}
    .drum-cell{min-height:28px}
  }
  .rb-style-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
  .rb-style-btn{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 20px;font-weight:500;font-size:.9rem;cursor:pointer;font-family:inherit}
  .rb-style-btn.active{border-color:var(--coral);background:rgba(29,158,117,.1);color:var(--coral)}
  .rb-progress-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin-bottom:18px}
  .rb-progress-labels{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;opacity:.55;margin-bottom:6px;letter-spacing:.02em}
  .rb-progress-track{position:relative;height:28px;background:#eee;border-radius:8px;overflow:hidden}
  .rb-progress-sections{display:flex;height:100%;width:100%;position:absolute;inset:0}
  .rb-sec{display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:rgba(33,31,46,.45);border-right:1px solid rgba(33,31,46,.08);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
  .rb-sec:last-child{border-right:none}
  .rb-sec.verse{background:rgba(29,158,117,.12)}
  .rb-sec.hook{background:rgba(239,159,39,.18)}
  .rb-sec.intro,.rb-sec.outro{background:rgba(38,33,92,.08)}
  .rb-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:rgba(29,158,117,.35);border-radius:8px 0 0 8px;pointer-events:none}
  .rb-progress-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--coral);left:0%;pointer-events:none}
  .rb-now{margin-top:8px;font-size:.9rem;font-weight:500;text-align:center;min-height:1.3em}
  .rb-now span{color:var(--coral)}
  .rb-stage{max-width:820px;margin:0 auto;position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(33,31,46,.25);background:#0b0e16}
  .rb-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1);display:none;z-index:1;background:#0b0e16}
  .rb-stage video.active{display:block}
  .rb-stage video.landscape-fill{object-fit:cover}
  .rb-stage canvas{display:block;width:100%;height:100%;position:relative;z-index:2;pointer-events:none}
  .rb-cam-btn.active{border-color:var(--coral);background:rgba(29,158,117,.12);color:var(--coral)}
  .rb-rec-btn.recording{border-color:#c2523f;background:#c2523f;color:#fff}
  .rb-controls{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap}
  .rb-play-btn{border:1.5px solid var(--coral);background:var(--coral);color:#fff;border-radius:999px;padding:11px 26px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit}
  .rb-play-btn.playing{background:#fff;color:var(--coral)}
  .rb-outline-btn{border:1.5px solid var(--ink);background:none;color:var(--ink);border-radius:999px;padding:11px 20px;font-weight:500;font-size:.9rem;cursor:pointer;font-family:inherit}
  .rb-outline-btn:hover{background:var(--ink);color:#fff}
  .rb-outline-btn.recording{border-color:#c2523f;background:#c2523f;color:#fff}
  .rb-vol-label{display:flex;align-items:center;gap:8px;font-size:.9rem;opacity:.75}
  .rb-vol-slider{width:100px;accent-color:var(--coral)}
  .rb-status{text-align:center;font-size:.85rem;opacity:.65;margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.5}

/* one tool per page — no tabs to switch between */
.panel{display:block}
.tabs{display:none}

/* The tools were built with their own .panel long before the site stylesheet
   had one, so without this they pick up its dark-block treatment and their
   controls end up unreadable. Put them back on the page ground. */
.panel{background:transparent;color:var(--ink);padding:0;border-radius:0}
.panel p,.panel h1,.panel h2,.panel h3,.panel summary,.panel span,.panel label{color:inherit}
.panel a{color:var(--coral)}
.panel .kick{color:inherit;letter-spacing:normal;text-transform:none;font-size:inherit;font-weight:inherit}