/* remix.css — the ManyHand remix studio.
   Site chrome stays in the cream ManyHand palette; the studio itself is a dark
   console, matching the DJ tool, so waveform colours and meters read properly. */

:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --brand:#0e386d; --brand2:#0b7d74; --line:#e8ddc9;

  --bg:#0a0c11; --panel:#141821; --panel2:#1a1f2a; --panel3:#212836;
  --edge:#2a3140; --edge2:#39435a;
  --text:#e9eef6; --dim:#8b95a7; --faint:#6d7788;
  --accent:#ffb62e; --a-blue:#4fa8ff; --a-orange:#ff9d3c;
  --green:#39d98a; --red:#ff4d4d;
  --radius:14px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.5;
  display:flex; flex-direction:column; min-height:100%;
}

header.site{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px;
  border-bottom:1.5px solid var(--line); background:var(--paper); }
header.site .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em;
  color:var(--brand); text-decoration:none; display:flex; align-items:center; gap:8px; }
header.site .brand span{ color:var(--brand2); }
header.site .back{ font-size:13px; font-weight:700; color:var(--brand); text-decoration:none; }

main{ width:100%; max-width:1280px; margin:0 auto; padding:20px 14px calc(36px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:29px; text-align:center; margin:2px 0 2px; }
.sub{ text-align:center; color:var(--inksoft); font-size:14.5px; margin-bottom:18px; }

.hidden{ display:none !important; }

/* ---------------------------------------------------------------- upload */
.panel{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.step-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand2); margin:0 0 12px; }

.drop{ border:2px dashed var(--line); border-radius:14px; padding:38px 18px; text-align:center; cursor:pointer;
  transition:border-color .12s, background .12s; }
.drop:hover, .drop.over{ border-color:var(--brand2); background:#fffaf0; }
.drop .big{ font-size:40px; line-height:1; }
.drop h2{ font-family:"Fraunces",Georgia,serif; font-size:20px; margin:8px 0 4px; }
.drop p{ color:var(--inksoft); font-size:14px; }
.drop .browse{ color:var(--brand); font-weight:800; text-decoration:underline; }
#loadMsg{ margin-top:10px; font-size:13.5px; color:var(--inksoft); text-align:center; }
#loadMsg.bad{ color:#a3341f; font-weight:700; }

/* ---------------------------------------------------------------- console */
.console{
  background:var(--bg); border:1.5px solid #05070b; border-radius:18px;
  padding:14px; color:var(--text);
  box-shadow:0 26px 60px -30px rgba(10,12,17,.9), inset 0 1px 0 rgba(255,255,255,.05);
}

/* track bar */
.trackbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.trackbar .ic{ font-size:20px; }
.trackbar .meta{ min-width:0; flex:1 1 200px; }
.trackbar .fname{ font-weight:800; font-size:14.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trackbar .fmeta{ font-size:12px; color:var(--dim); }
.badges{ display:flex; gap:7px; flex-wrap:wrap; }
.badge{ font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:4px 9px; border-radius:999px;
  background:var(--panel3); border:1px solid var(--edge2); color:var(--text); white-space:nowrap; }
.badge.b-bpm{ color:var(--accent); }
.badge.b-key{ color:var(--a-blue); }
.chg{ font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:7px 12px; border-radius:9px;
  background:var(--panel3); border:1px solid var(--edge2); color:var(--text); }
.chg:hover{ background:var(--edge); }

/* waveform */
.wave-wrap{ position:relative; border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:#0d1017; }
canvas#wave{ display:block; width:100%; height:168px; cursor:crosshair; touch-action:none; }

/* transport */
.transport{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.tbtn{ font:inherit; font-size:15px; font-weight:800; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; gap:6px; min-width:44px; height:38px; padding:0 13px;
  border-radius:10px; background:var(--panel3); border:1px solid var(--edge2); color:var(--text); }
.tbtn:hover{ background:var(--edge); }
.tbtn.primary{ background:var(--accent); border-color:var(--accent); color:#20160a; min-width:52px; font-size:17px; }
.tbtn[aria-pressed="true"]{ background:var(--a-blue); border-color:var(--a-blue); color:#06101c; }
.tbtn.ab[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#052015; }
.times{ font-variant-numeric:tabular-nums; font-weight:800; font-size:14px; color:var(--text); }
.times .dim{ color:var(--faint); font-weight:600; }
.sel-info{ font-size:12.5px; color:var(--dim); flex:1 1 180px; min-width:0; }
.out-bpm{ font-size:12.5px; font-weight:800; color:var(--accent); }

/* ------------------------------------------------------------- presets */
.presets{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.preset{ font:inherit; cursor:pointer; text-align:left; padding:8px 12px; border-radius:11px;
  background:var(--panel2); border:1px solid var(--edge); color:var(--text);
  font-size:13.5px; font-weight:700; line-height:1.25; }
.preset small{ display:block; font-size:11px; font-weight:600; color:var(--faint); margin-top:1px; }
.preset:hover{ background:var(--panel3); }
.preset[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#20160a; }
.preset[aria-pressed="true"] small{ color:#5c4413; }

/* --------------------------------------------------------------- racks */
.racks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:10px; }
.rack{ background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:11px 12px 13px; }
.rack-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--edge); }
.rack-name{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.rack-toggles{ display:flex; gap:10px; }
.rack-note{ font-size:11.5px; color:var(--faint); margin-top:9px; line-height:1.4; }

.ctl{ margin-top:9px; }
.ctl.off{ opacity:.4; }
.ctl-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:3px; }
.ctl-top label{ font-size:12.5px; font-weight:700; color:var(--text); }
.ctl-val{ font-size:11.5px; font-weight:800; color:var(--dim); font-variant-numeric:tabular-nums; }

.rack select{ font:inherit; font-size:13px; font-weight:600; width:100%; padding:6px 8px; border-radius:8px;
  background:var(--panel3); border:1px solid var(--edge2); color:var(--text); }

/* sliders */
.rack input[type=range]{ width:100%; height:22px; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.rack input[type=range]:disabled{ cursor:default; }
.rack input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:3px; background:var(--panel3); border:1px solid var(--edge2); }
.rack input[type=range]::-moz-range-track{ height:5px; border-radius:3px; background:var(--panel3); border:1px solid var(--edge2); }
.rack input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px;
  margin-top:-6.5px; border-radius:50%; background:var(--accent); border:1px solid #8a5f10;
  box-shadow:0 1px 4px rgba(0,0,0,.55); }
.rack input[type=range]::-moz-range-thumb{ width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:1px solid #8a5f10; box-shadow:0 1px 4px rgba(0,0,0,.55); }

/* switches */
.sw{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.sw input{ position:absolute; opacity:0; width:0; height:0; }
.sw-track{ width:32px; height:18px; border-radius:999px; background:var(--panel3);
  border:1px solid var(--edge2); position:relative; transition:background .12s; flex:none; }
.sw-track::after{ content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:var(--faint); transition:transform .12s, background .12s; }
.sw input:checked + .sw-track{ background:rgba(57,217,138,.25); border-color:var(--green); }
.sw input:checked + .sw-track::after{ transform:translateX(14px); background:var(--green); }
.sw input:focus-visible + .sw-track{ outline:2px solid var(--a-blue); outline-offset:2px; }
.sw-lab{ font-size:11.5px; font-weight:700; color:var(--dim); }

canvas.meter{ display:block; width:100%; height:12px; border-radius:4px; border:1px solid var(--edge2); }

/* -------------------------------------------------------------- export */
.export-bar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px;
  background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:12px; }
.export-bar .grp{ display:flex; flex-direction:column; gap:4px; }
.export-bar .grp > span{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.export-bar select{ font:inherit; font-size:13px; font-weight:600; padding:7px 9px; border-radius:9px;
  background:var(--panel3); border:1px solid var(--edge2); color:var(--text); }
.export-bar .whatis{ font-size:12.5px; color:var(--dim); font-weight:700; }
.export-bar .whatis b{ color:var(--text); }
.btn-go{ font:inherit; font-size:14px; font-weight:800; cursor:pointer; padding:10px 18px; border-radius:11px;
  background:var(--green); border:1px solid var(--green); color:#052015; margin-left:auto; }
.btn-go:hover{ filter:brightness(1.07); }
.btn-go:disabled{ opacity:.55; cursor:default; }
.prog{ height:5px; border-radius:3px; background:var(--panel3); border:1px solid var(--edge2); overflow:hidden;
  margin-top:10px; }
.prog .fill{ height:100%; width:0; background:var(--green); transition:width .12s linear; }
#exportNote{ font-size:12.5px; color:var(--dim); margin-top:9px; }
#exportNote .warn{ color:var(--red); }

.disclaimer{ font-size:12.5px; color:var(--faint); margin-top:10px; text-align:center; }

/* ---------------------------------------------------------------- about */
.about{ margin-top:20px; }
.about h2{ font-family:"Fraunces",Georgia,serif; font-size:20px; margin:0 0 8px; }
.about p{ color:var(--inksoft); font-size:14.5px; margin-bottom:10px; }
details{ border-top:1.5px solid var(--line); padding:11px 0; }
details:last-of-type{ border-bottom:1.5px solid var(--line); }
details summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
details p{ margin-top:6px; font-size:14px; }
.about a{ color:var(--brand); font-weight:700; }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--brand); }

/* --------------------------------------------------------------- narrow */
@media (max-width:640px){
  main{ padding:14px 10px calc(30px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:23px; }
  .sub{ font-size:13.5px; margin-bottom:14px; }
  .console{ padding:10px; border-radius:14px; }
  canvas#wave{ height:130px; }
  .racks{ grid-template-columns:1fr 1fr; }
  .btn-go{ margin-left:0; width:100%; }
  .times{ font-size:13px; }
}
@media (max-width:420px){
  .racks{ grid-template-columns:1fr; }
}