@font-face{font-family:"Oswald";src:url(fonts/Oswald.woff) format("woff");font-weight:500 700;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist.woff) format("woff");font-weight:100 900;font-display:swap}

/* black and red, like ETERNAL CLIQUE: hairlines on black, one red signal, condensed capitals like the clique's badge */
:root{
  --bg:#070707; --screen:#000; --shelf:#0c0c0c; --line:#1f1f1f; --line-hi:#333; --chip:#171717;
  --text:#f2f0ee; --dim:#9a9696; --faint:#5e5a5a; --accent:#e3121b; --accent-ink:#0a0000; --accent-soft:rgba(227,18,27,.14);
  --display:"Oswald","Arial Narrow",sans-serif; --ui:"Geist",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:400 16px/1.45 var(--ui);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);min-height:100dvh}

/* ---------- bar ---------- */
.bar{display:flex;align-items:center;gap:28px;padding:0 28px;height:60px;border-bottom:1px solid var(--line)}
.mark{font:600 22px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap}
.mark::before{content:"";display:inline-block;width:9px;height:9px;margin:0 10px 2px 0;border-radius:50%;background:var(--accent);vertical-align:middle}
.source{display:flex;gap:4px;height:100%}
.source button{border:0;background:none;padding:0 12px;color:var(--dim);font-weight:600;font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.source button:hover{color:var(--text)}
.source button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.source button:disabled{opacity:.35;cursor:not-allowed}
.by{margin-left:auto;color:var(--dim);font-size:14px;text-decoration:none;white-space:nowrap}
.by:hover{color:var(--text)}

/* ---------- main: the screen and what's playing, the controls on the side ---------- */
.main{display:grid;grid-template-columns:minmax(0,1fr) 352px}
.stage{padding:28px;min-width:0;display:grid;gap:22px;align-content:start}
.screen{position:relative;aspect-ratio:16/9;max-height:calc(100dvh - 330px);width:100%;background:var(--screen);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.yt-frame{position:absolute;inset:0}
.yt-frame iframe,.yt-frame>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.app:not([data-has="record"]) .yt-frame{display:none}
.app[data-has="record"] .scope{display:none}
.scope{position:absolute;inset:0}
.wave{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.app[data-has="none"] .wave{cursor:default}
.idle{position:absolute;left:0;right:0;top:50%;margin:-40px 0 0;padding:0 24px;text-align:center;font:500 17px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);pointer-events:none}
.app:not([data-has="none"]) .idle{display:none}
.idle small{display:block;margin-top:10px;font:400 14px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--dim)}
/* with nothing loaded, Your audio turns the screen into the place to drop a file */
.app[data-source="match"][data-has="none"] .wave{cursor:pointer}
.app[data-source="match"][data-has="none"] .scope::before{content:"";position:absolute;inset:16px;border:1px dashed var(--line-hi);border-radius:4px;pointer-events:none}
.app[data-source="match"][data-has="none"] .idle{margin:0;transform:translateY(-50%);font-size:24px;letter-spacing:.06em;color:var(--text)}
.dropover{position:absolute;inset:0;margin:0;display:none;place-items:center;padding:24px;text-align:center;background:rgba(0,0,0,.88);border:2px dashed var(--accent);border-radius:4px;font:600 26px/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--text);pointer-events:none}
.app.dragging .dropover{display:grid}
.play{position:absolute;left:18px;bottom:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-hi);background:rgba(0,0,0,.8);display:grid;place-items:center;padding:0}
.play svg{width:20px;height:20px;fill:var(--text)}
.play .i-pause,.app.playing .play .i-play{display:none}
.app.playing .play .i-pause{display:block}
.play:hover{border-color:var(--accent)}
.time{position:absolute;right:18px;bottom:20px;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}

.now{display:grid;gap:14px;min-width:0}
.title{margin:0;font:700 clamp(22px,2.2vw,30px)/1.15 var(--ui);letter-spacing:-.01em;overflow-wrap:anywhere;min-height:1.15em}
.byline{margin:-8px 0 0;color:var(--dim);font-size:15px;overflow-wrap:anywhere}
.facts{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px}
.facts:has(.readouts:empty):has(.actions:empty){display:none}
.readouts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0}
.readouts div{display:flex;flex-direction:column-reverse}
.readouts dt{font-size:13px;color:var(--dim)}
.readouts dd{margin:0;font:600 29px/1.1 var(--display);letter-spacing:.01em}
.readouts .tapped dd{color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.act{border:1px solid var(--line-hi);background:none;border-radius:6px;padding:8px 14px;font-weight:600;font-size:14.5px}
.act:hover{border-color:var(--text)}
.act[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.act.main-act{background:var(--text);color:var(--bg);border-color:var(--text)}
.act:disabled{opacity:.4;cursor:default}

/* the side panel scrolls on its own; Random stays at its foot */
.panel{border-left:1px solid var(--line);padding:24px 26px 0;display:flex;flex-direction:column;gap:22px;min-width:0;contain:size;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
.app[data-source="match"] .pick{display:none}
.app:not([data-source="match"]) .heard{display:none}
.label{margin:0 0 10px;font-size:13px;font-weight:400;color:var(--dim)}
.crates{display:grid;gap:14px}
.crate-group h3{margin:0 0 4px;font-size:12px;font-weight:500;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:4px 2px;margin:0 -8px}
.crate{border:0;background:none;padding:4px 8px;color:var(--dim);font-weight:600;font-size:14.5px;border-radius:4px}
.crate:hover{color:var(--text)}
.crate[aria-pressed="true"]{color:var(--text);background:var(--chip);box-shadow:inset 0 -2px 0 var(--accent)}
.filters{display:flex;flex-direction:column;gap:18px}
.about{margin:0;font-size:15px;color:var(--dim)}
.seg{display:flex;border:1px solid var(--line-hi);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;background:none;padding:7px 0;font-weight:600;font-size:13.5px;color:var(--dim);white-space:nowrap}
.seg button+button{border-left:1px solid var(--line-hi)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.select{width:100%;background:var(--bg);border:1px solid var(--line-hi);border-radius:6px;padding:8px 10px;font-weight:600;font-size:15px}
.check{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.check input{appearance:none;flex:none;width:34px;height:20px;border-radius:999px;background:var(--line-hi);position:relative;cursor:pointer;margin:0;transition:background .15s}
.check input::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--dim);transition:transform .15s,background .15s}
.check input:checked{background:var(--accent)}
.check input:checked::after{transform:translateX(14px);background:var(--accent-ink)}

/* what it hears in Your audio */
.heard{display:grid;gap:12px}
.heard:empty{display:none}
.heard .from{margin:-6px 0 0;font-size:14px;color:var(--dim);overflow-wrap:anywhere}
.heard-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:baseline}
.heard-row h3{margin:0;font-size:13px;font-weight:400;color:var(--dim)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{border:1px solid var(--line-hi);background:none;border-radius:999px;padding:3px 11px;font-size:13.5px;font-weight:600;color:var(--dim)}
.tag:hover{color:var(--text);border-color:var(--dim)}
.tag[aria-pressed="true"]{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.query{margin:0;font-size:13px;color:var(--faint);overflow-wrap:anywhere}
.query b{font-weight:500;color:var(--dim)}
.dig{justify-self:start}

.go{position:sticky;bottom:0;margin-top:auto;display:grid;gap:10px;padding:14px 0 20px;background:linear-gradient(transparent,var(--bg) 16px)}
.random{height:74px;border:0;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:700 36px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;transition:filter .12s,transform .08s}
.random:hover{filter:brightness(1.08)}
.random:active{transform:translateY(1px);filter:brightness(.92)}
.random.busy{filter:saturate(.6) brightness(.85)}
.random:disabled{filter:saturate(0) brightness(.6);cursor:not-allowed}
#choose{font-size:30px}
.app[data-source="match"] #random,.app:not([data-source="match"]) #choose{display:none}
.hint{margin:0;text-align:center;color:var(--faint);font-size:12.5px}
.hint kbd{font:inherit;color:var(--dim)}
.msg{margin:0;min-height:1.45em;font-size:14px;color:var(--text)}
.msg.error{color:#ff6b6b}

/* ---------- shelf: matches, saved, history ---------- */
.shelf{background:var(--shelf);border-top:1px solid var(--line);padding:14px 28px 18px}
.shelf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:22px}
.tabs button{border:0;background:none;padding:4px 0;font-weight:600;font-size:15px;color:var(--dim);border-bottom:2px solid transparent}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tabs span{margin-left:3px;font-weight:400;font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.shelf-tools{display:flex;gap:6px}
.tool{border:0;background:none;padding:4px 8px;font-size:13.5px;font-weight:500;color:var(--dim);border-radius:4px}
.tool:hover{color:var(--text);background:var(--chip)}
.row{display:flex;gap:10px;overflow-x:auto;padding:14px 0 2px;min-height:86px;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
.row .empty{margin:auto 0;color:var(--faint);font-size:14px}
.tile{flex:none;display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;width:240px;padding:6px;border:1px solid var(--line);border-radius:6px;background:none;text-align:left}
.tile:hover{border-color:var(--line-hi)}
.tile[aria-current="true"]{border-color:var(--accent)}
.tile .art{width:56px;height:56px;border-radius:3px;background:#161616;overflow:hidden;display:grid;place-items:center;font:600 19px/1 var(--display);color:var(--accent)}
.tile .art img{width:100%;height:100%;object-fit:cover}
.tile b{display:block;font-size:14px;font-weight:600;line-height:1.2;max-height:2.4em;overflow:hidden;overflow-wrap:anywhere}
.tile small{display:block;margin-top:3px;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.more{grid-template-columns:1fr;place-items:center;width:150px;min-height:70px;border-style:dashed;color:var(--dim);font-weight:600;font-size:14px}
.tile.more:hover{color:var(--text)}

/* ---------- phones and narrow windows ---------- */
@media (max-width:920px){
  .bar{gap:0 14px;padding:0 16px;height:auto;flex-wrap:wrap}
  .mark{padding:16px 0 4px;width:100%}
  .source{height:44px;margin-left:-12px}
  .by{display:none}
  .main{grid-template-columns:minmax(0,1fr)}
  .stage{padding:16px}
  .screen{max-height:none}
  .panel{contain:none;overflow:visible;border-left:0;border-top:1px solid var(--line);padding:20px 16px 0}
  /* the button stays under the thumb while the filters scroll past */
  .go{z-index:2;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
  .random{height:60px;font-size:30px}
  #choose{font-size:24px}
  .msg:empty{display:none}
  .hint{display:none}
  .shelf{padding:14px 16px 18px}
  .heard-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .check input,.check input::after,.random{transition:none}
}