/* MAKE YOUR OWN MUSIC VIDEO */
.makewrap{max-width:1120px;margin:0 auto;padding:34px 24px 90px}
.makehead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.makehead h1{font-size:clamp(30px,4.6vw,52px);margin:10px 0 8px}
.makehead p{color:var(--muted);margin:0;max-width:46ch}

.makegrid{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:34px;align-items:start}
@media(max-width:900px){.makegrid{grid-template-columns:1fr}}

/* the screen */
.stagewrap{position:relative;position:sticky;top:84px}
@media(max-width:900px){.stagewrap{position:relative;top:0}}
/* keep the whole tool on one screen — the controls must never fall below the fold */
#stage{position:relative;aspect-ratio:9/16;max-height:min(74vh,760px);margin:0 auto;
  background:#0A0814;border:1px solid var(--line);
  overflow:hidden;box-shadow:0 30px 70px -30px #000}
#stage canvas{width:100%;height:100%;display:block}
#loopvid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#stage .scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply}

.transport{display:flex;align-items:center;gap:12px;margin-top:12px}
.transport button{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);
  padding:9px 12px;border-radius:2px;cursor:pointer;background:none}
.transport button:hover{border-color:var(--brass-lo);color:var(--brass-hi)}
.transport #pp{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--brass);
  color:#150F04;border:none;font-size:13px;display:grid;place-items:center;padding:0}
.transport #pp:hover{background:var(--brass-hi)}
.track{flex:1;min-width:0}
.track .rail{height:3px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.track .rail i{display:block;height:100%;width:0;background:var(--brass);transition:width .1s linear}
.track .meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}

/* panels */
.panel{margin-bottom:26px}
.panel h3{font-size:13px;font-family:"JetBrains Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lo);font-weight:500;margin-bottom:12px}
.panel .hint{color:var(--dim);font-size:13.5px;margin:10px 0 0}

.songrow,.bdrow{display:flex;gap:8px;flex-wrap:wrap}
.songbtn,.bdbtn{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:none;
  padding:9px 12px;border-radius:2px;cursor:pointer}
.songbtn:hover,.bdbtn:hover{border-color:var(--brass-lo);color:var(--brass-hi)}
.songbtn.on,.bdbtn.on{background:rgba(232,181,88,.14);border-color:var(--brass);color:var(--brass-hi)}

.fxrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.fx{position:relative;display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);background:none;padding:12px;border-radius:2px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.fx kbd{font-family:inherit;font-size:10px;background:#1A1438;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:3px;padding:2px 6px;color:var(--text);flex:0 0 auto}
.fx:hover{border-color:var(--brass-lo);color:var(--brass-hi)}
.fx.on{background:rgba(232,181,88,.16);border-color:var(--brass);color:var(--brass-hi);
  box-shadow:0 0 22px -6px rgba(232,181,88,.5)}
.fx.on kbd{background:var(--brass);color:#150F04;border-color:var(--brass)}

.sharerow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bigbtn{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;background:var(--brass);color:#150F04;border:none;
  padding:14px 20px;border-radius:2px;cursor:pointer}
.bigbtn:hover{background:var(--brass-hi)}

#sharebox{margin-top:14px;border:1px solid rgba(232,181,88,.35);
  background:linear-gradient(180deg,rgba(232,181,88,.07),rgba(232,181,88,.02));
  padding:16px;border-radius:2px;position:relative}
#sharebox input{width:100%;background:rgba(10,8,20,.65);border:1px solid var(--line);
  color:var(--text);font-family:"JetBrains Mono",monospace;font-size:12px;padding:11px;
  border-radius:2px;margin-bottom:9px}
#sharebox .msg{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--brass);margin:0}
#sharex{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--dim);
  cursor:pointer;font-size:13px}

#replaynote{border:1px solid rgba(232,181,88,.35);background:rgba(232,181,88,.08);
  padding:13px 15px;border-radius:2px;margin-bottom:20px;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--brass-hi);letter-spacing:.05em}
#replaynote a{color:var(--brass-hi);border-bottom:1px solid rgba(232,181,88,.5)}

@media(max-width:900px){
  .fx kbd{display:none}
  .makegrid{gap:24px}
}

/* ================= Phase 2 additions ================= */

/* the scrubber is now a real control */
.track .rail{position:relative;height:16px;background:none;border-radius:0;
  overflow:visible;cursor:pointer;display:flex;align-items:center;touch-action:none}
.track .rail::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:3px;transform:translateY(-50%);background:var(--line-soft);border-radius:2px}
.track .rail i#bar{position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:3px;width:0;background:var(--brass);border-radius:2px;
  transition:width .1s linear;display:block}
.track .rail:hover::before{height:5px}
.track .rail:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px}
.head{position:absolute;top:50%;width:11px;height:11px;margin-left:-5.5px;
  transform:translateY(-50%);background:var(--brass);border-radius:50%;
  box-shadow:0 0 0 3px rgba(232,181,88,.18);pointer-events:none;transition:left .1s linear}
.rail:hover .head{box-shadow:0 0 0 5px rgba(232,181,88,.26)}

/* your moves, drawn on the timeline */
.marks{position:absolute;inset:0;pointer-events:none}
.marks .mk{position:absolute;top:1px;width:1px;height:6px;margin-left:-.5px;
  background:var(--brass-hi);opacity:.75}
.marks .mk.hit{top:9px;height:6px;background:#FF9E6B;opacity:.9}

/* the performance log fills the dead space */
.logwrap{margin-top:18px;border:1px solid var(--hair,#1C1838);background:var(--deep);
  padding:12px 14px 6px}
.loghead{display:flex;justify-content:space-between;gap:12px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lo);padding-bottom:9px;
  border-bottom:1px solid var(--line-soft)}
.logrow{display:grid;grid-template-columns:52px 1fr 26px;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:11px;padding:6px 0;
  border-bottom:1px solid rgba(28,24,56,.7);color:var(--muted)}
.logrow:last-child{border-bottom:0}
.logrow .lt{color:var(--dim);font-variant-numeric:tabular-nums}
.logrow .ln{color:var(--text);letter-spacing:.06em;text-transform:uppercase}
.logrow .li{color:var(--brass);text-align:right;font-variant-numeric:tabular-nums}

/* hit effects read differently from toggles */
.fx .nm{flex:1}
.fx .ht{font-size:8.5px;letter-spacing:.14em;color:var(--dim);
  border:1px solid var(--line);padding:2px 4px;border-radius:2px}
.fx.hit.on{background:rgba(255,158,107,.2);border-color:#FF9E6B;color:#FFD2B8;
  box-shadow:0 0 24px -6px rgba(255,158,107,.6)}
.fx.hit.on .ht{border-color:#FF9E6B;color:#FFD2B8}

/* intensity + audio reactivity */
.dialrow{display:flex;align-items:center;gap:12px;margin-top:14px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lo)}
.dialrow input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  height:3px;background:var(--line-soft);border-radius:2px;outline:none;cursor:pointer}
.dialrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--brass);border:none;cursor:pointer;
  box-shadow:0 0 0 3px rgba(232,181,88,.2)}
.dialrow input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--brass);border:none;cursor:pointer}
.dialrow input[type=range]:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.dialrow output{color:var(--brass-hi);font-size:13px;width:20px;text-align:right;
  font-variant-numeric:tabular-nums}

.aurow{display:flex;align-items:center;gap:7px;margin-top:12px;flex-wrap:wrap}
.aulbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lo);margin-right:4px}
.aubtn{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:none;
  padding:6px 11px;border-radius:2px;cursor:pointer}
.aubtn:hover{border-color:var(--brass-lo);color:var(--brass-hi)}
.aubtn.on{background:rgba(232,181,88,.14);border-color:var(--brass);color:var(--brass-hi)}

.ghostbtn{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;background:none;color:var(--brass-hi);
  border:1px solid var(--brass-lo);padding:14px 20px;border-radius:2px;cursor:pointer}
.ghostbtn:hover{background:rgba(232,181,88,.14)}

#remixnote,#nogl{border:1px solid rgba(232,181,88,.35);background:rgba(232,181,88,.08);
  padding:13px 15px;border-radius:2px;margin-bottom:20px;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--brass-hi);
  letter-spacing:.04em;line-height:1.7}
#nogl{border-color:rgba(255,107,87,.4);background:rgba(255,107,87,.08);color:#FFB4A6}
body.nogl .fxrow,body.nogl .dialrow,body.nogl .aurow{opacity:.4;pointer-events:none}