:root{
  --ink:#efe7d8; --secondary:#9c9080; --muted:#8a7a66; --dim:#665b4c;
  --wood:linear-gradient(178deg,#5f4029,#33210f); --wood-border:#1a1108;
  --well:#0c0907; --accent:#c8a97a;
  --spine-h:44px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:radial-gradient(120% 100% at 20% -10%, #221b15 0%, #110e0b 55%, #070606 100%);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-top:128px;   /* room for the fixed deck */
  padding-bottom:0;
}
h2{font-family:'Archivo Narrow',sans-serif; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:700;}
button{font-family:inherit; cursor:pointer;}
.count{color:var(--dim); font-weight:400; letter-spacing:.14em; font-family:'Courier Prime',monospace; font-size:11px;}

/* ---------- now playing deck ---------- */
.deck{
  position:fixed; top:0; left:0; right:0; z-index:30;
  background:linear-gradient(180deg,#241b12,#140e08);
  border-bottom:1px solid #0a0705;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85);
}
.deck.drop-hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.85), inset 0 0 0 2px var(--accent);}
.deck:not([data-empty]) .np-cassette{cursor:grab;}
.deck:not([data-empty]) .np-cassette:active{cursor:grabbing;}
.deck-inner{ display:flex; align-items:center; gap:22px; max-width:1280px; margin:0 auto; padding:15px 32px; }
.np-cassette{
  position:relative; width:150px; height:96px; flex:none;
  border-radius:8px; overflow:hidden; background:#0e0b08;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px -8px rgba(0,0,0,.7);
  transition:opacity .3s ease;
}
.np-cassette .np-art{position:absolute; inset:0; background-size:cover; background-position:center;}
.np-cassette .np-reels{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:34px;}
.np-cassette .reel{
  width:38px; height:38px; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.85) 0 12deg, rgba(255,255,255,.25) 12deg 24deg);
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 9px rgba(20,15,10,.72), 0 0 10px rgba(0,0,0,.5);
  animation:spin 2.4s linear infinite; animation-play-state:paused;
}
.deck.playing .reel{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.np-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; color:var(--dim); font-size:11px; letter-spacing:.03em; font-family:'Courier Prime',monospace;}
.deck:not([data-empty]) .np-empty{display:none;}
.np-meta{flex:1; min-width:0;}
.np-song{font-family:'Archivo Narrow',sans-serif; font-size:22px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-album{font-size:13px; color:var(--secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-track-of{font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-top:8px;}
.np-controls{display:flex; align-items:center; gap:8px; flex:none;}
.ctl{width:38px; height:38px; border-radius:50%; background:#2a2016; color:var(--ink); border:1px solid #3d2e1f;
  font-size:14px; display:grid; place-items:center; transition:background .15s, transform .1s;}
.ctl:hover{background:#3a2c1d;}
.ctl:active{transform:scale(.92);}
.ctl-big{width:48px; height:48px; font-size:17px; background:var(--accent); color:#241300; border-color:#e6cda4;}
.ctl-big:hover{background:#e6cda4;}
.sleeve{max-width:1280px; margin:0 auto; padding:4px 32px 20px; border-top:1px dashed #3a2c1d;}
.sleeve-head{font-family:'Archivo Narrow',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--secondary); padding:12px 0 8px;}
.sleeve-tracks{list-style:none; columns:2; column-gap:40px;}
.sleeve-tracks li{display:flex; gap:10px; padding:5px 8px; border-radius:5px; font-size:13px; cursor:pointer; break-inside:avoid; color:var(--ink);}
.sleeve-tracks li:hover{background:rgba(255,255,255,.05);}
.sleeve-tracks li.current{background:rgba(200,169,122,.16); color:var(--accent);}
.sleeve-tracks .tn{color:var(--dim); width:22px; text-align:right; flex:none; font-family:'Courier Prime',monospace;}
.sleeve-tracks .tt{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sleeve-tracks .td{color:var(--dim); flex:none; font-variant-numeric:tabular-nums; font-family:'Courier Prime',monospace;}

/* ---------- layout ---------- */
main{max-width:1280px; margin:0 auto; padding:26px 32px 90px;}
body.drawer-open main{padding-bottom:48vh;}
.libline{font-family:'Archivo Narrow',sans-serif; font-size:11.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-bottom:22px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 14px;}
.btn{background:#2a2016; color:var(--ink); border:1px solid #3d2e1f; border-radius:7px; padding:7px 13px; font-size:12px;}
.btn:hover{background:#3a2c1d;}
.search{background:#140f0a; border:1px solid #33271a; border-radius:7px; color:var(--ink); padding:7px 12px; font-size:13px; width:220px; font-family:inherit;}
.search:focus{outline:none; border-color:var(--accent);}
.foot-hint{font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--dim); padding:26px 2px 0;}

/* ---------- racks: single-column stacks ---------- */
.racks-row{display:flex; gap:26px; flex-wrap:wrap; perspective:2200px; perspective-origin:0% 50%; align-items:flex-start;}
.rack{
  position:relative;
  flex:1 1 380px; min-width:330px; max-width:520px;
  padding:14px 11px 16px; border-radius:4px; border:1px solid #1a0f06;
  /* walnut: fine grain + wide figure (divergent angles) + sheen + stock */
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.22) 0 1px, rgba(255,255,255,.045) 1px 2px, rgba(0,0,0,0) 2px 6px),
    repeating-linear-gradient(89.4deg, rgba(0,0,0,.14) 0 2px, rgba(0,0,0,0) 2px 17px),
    radial-gradient(120% 60% at 18% 30%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    linear-gradient(177deg, #5b3a24, #2c1a0d);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 40px 80px -34px rgba(0,0,0,.9);
}
.rack-overlay{position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,0) 18%, rgba(0,0,0,.22));}
.rack-inner{position:relative; display:flex; flex-direction:column;}
.rack-top{display:flex; align-items:center; gap:8px; padding:0 2px 9px;}
.rack-name{font-family:'Archivo Narrow',sans-serif; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#f0e3cf; background:transparent; border:1px solid transparent; border-radius:5px; padding:2px 5px; min-width:0; flex:1;}
.rack-name:focus{outline:none; border-color:rgba(255,255,255,.2); background:rgba(0,0,0,.25);}
.rack-tool{background:rgba(0,0,0,.3); color:#e7d9c4; border:1px solid rgba(255,255,255,.08); border-radius:6px; font-size:10px; padding:4px 8px; flex:none;
  font-family:'Courier Prime',monospace; letter-spacing:.08em;}
.rack-tool:hover{background:rgba(0,0,0,.5);}
.rack-tool.disabled{opacity:.38; cursor:not-allowed;}
.rack-tool.disabled:hover{background:rgba(0,0,0,.3);}
.well{
  display:flex; flex-direction:column; gap:1px; background:var(--well); padding:2px; border-radius:2px;
  box-shadow:inset 0 6px 16px rgba(0,0,0,.8); min-height:52px;
}
.well.over{box-shadow:inset 0 0 0 2px var(--accent), inset 0 6px 16px rgba(0,0,0,.8);}
.well-empty{display:flex; align-items:center; justify-content:center; height:66px; color:#5b5142;
  font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.1em; text-align:center;}

/* ---------- drawer ---------- */
.drawer{
  position:fixed; left:0; right:0; bottom:0; z-index:26;
  height:46vh; max-height:560px;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#1b130c,#100b06);
  border-top:1px solid #3a2a1a;
  box-shadow:0 -24px 48px -22px rgba(0,0,0,.9);
  transform:translateY(0); transition:transform .38s cubic-bezier(.2,.9,.25,1);
}
.drawer.collapsed{transform:translateY(calc(100% - 54px));}
.drawer-head{
  height:54px; flex:none; display:flex; align-items:center; gap:16px; padding:0 32px;
  cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#251a10,#180f08); border-bottom:1px solid #2a1d12;
}
.dh-toggle{flex:none; width:16px; text-align:center; font-size:12px; color:var(--accent); transition:transform .38s ease;}
.drawer:not(.collapsed) .dh-toggle{transform:rotate(180deg);}
.dh-title{font-family:'Archivo Narrow',sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.drawer-head .search{margin-left:auto;}
.drawer-tapes{
  flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:1px 22px;
  align-content:start; background:var(--well); padding:12px 32px 40px;
  perspective:2200px; perspective-origin:0% 50%;
}
.drawer-tapes.over{box-shadow:inset 0 0 0 2px var(--accent);}
.drawer-empty{color:var(--dim); font-family:'Courier Prime',monospace; font-size:12px; padding:24px; grid-column:1/-1; text-align:center;}

/* ---------- the spine ---------- */
.spine{
  position:relative; height:var(--spine-h); cursor:pointer;
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), filter .3s ease;
}
.spine:hover{transform:translateX(46px) rotateY(-5deg); filter:brightness(1.08); z-index:6;}
.spine.dragging{opacity:.34;}
.spine.playing{outline:1px solid rgba(200,169,122,.5);}
.spine.insert-before{box-shadow:0 -2px 0 var(--accent);}
.spine .case{position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(180deg,#dedad3 0%,#b6b1a9 5%,#8e8a83 48%,#5d5952 53%,#7e7a73 78%,#494540 100%);
  box-shadow:0 4px 9px -3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.7);}
.spine .hinge{position:absolute; top:2px; bottom:2px; width:9px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.34) 0 1px,rgba(0,0,0,.24) 1px 3px);}
.spine .hinge.l{left:0; border-radius:2px 0 0 2px;}
.spine .hinge.r{right:0; border-radius:0 2px 2px 0; background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,rgba(0,0,0,.24) 1px 3px);}
.spine .insert{position:absolute; left:10px; right:10px; top:3px; bottom:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,255,255,.35);}
.spine .shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 26%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.22));}
.spine .gloss{position:absolute; inset:0; border-radius:2px; pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,.2) 0 12%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,rgba(255,255,255,.12) 90%);}
.spine .sp-play{position:absolute; top:50%; right:14px; transform:translateY(-50%); z-index:4;
  width:22px; height:22px; border-radius:50%; background:rgba(15,10,5,.7); color:#fff; border:none;
  font-size:9px; display:grid; place-items:center; opacity:0; transition:opacity .15s; pointer-events:none;}
.spine:hover .sp-play{opacity:.92;}
.spine-ghost{height:var(--spine-h); border-radius:2px; background:rgba(200,169,122,.05); box-shadow:inset 0 0 0 1px rgba(200,169,122,.32);}

/* the five templates (rendered inside .insert) */
.tpl{position:absolute; inset:0;}
/* shared left cover-art strip on every spine */
.sp-cover{flex:none; width:34px; background-size:cover; background-position:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);}
/* A. bold */
.tpl-bold{display:flex; align-items:stretch;}
.b-body{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0 8px 0 9px;}
.b-title{font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.b-artist{font-family:'Archivo',sans-serif; font-weight:600; font-size:9px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.72;}
.b-right{margin-left:auto; flex:none; display:flex; align-items:center; gap:6px;}
.b-cat{font-family:'Courier Prime',monospace; font-size:7.5px; letter-spacing:.1em; opacity:.7;}
.b-side{width:14px; height:14px; display:grid; place-items:center; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:9.5px;}
/* B. strip */
.tpl-strip{display:flex; align-items:stretch;}
.s-bar{width:5px; flex:none;}
.s-mid{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 8px; gap:1px;}
.s-artist{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:9px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.s-strip{align-self:stretch; background:#fbfaf6; padding:2px 6px; box-shadow:0 0 0 1px rgba(0,0,0,.18);}
.s-strip .s-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:13px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#16130f;}
.s-rail{flex:none; width:44px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; padding:4px 7px 4px 0;
  font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.08em; opacity:.75;}
/* C. typed */
.tpl-typed{display:flex; align-items:stretch;}
.ty-body{flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:0 8px;}
.ty-mid{min-width:0; display:flex; flex-direction:column; gap:1px;}
.ty-title{font-family:'Courier Prime',monospace; font-weight:700; font-size:12px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ty-sub{font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ty-right{margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.ty-rule{width:26px; height:3px;}
.ty-side{font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.14em; opacity:.6;}
/* D. art */
.tpl-art{display:flex; align-items:stretch;}
.ar-crop{flex:none; width:38px; background-size:cover; background-position:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.2);}
.ar-mid{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 9px; gap:1px;}
.ar-title{font-family:'Playfair Display',serif; font-weight:700; font-size:14px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ar-artist{font-family:'Archivo',sans-serif; font-size:8px; letter-spacing:.22em; text-transform:uppercase; opacity:.66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ar-bar{flex:none; width:5px;}
/* E. band */
.tpl-band{display:flex; align-items:stretch;}
.bd-col{flex:1; min-width:0; display:flex; flex-direction:column;}
.bd-band{flex:none; height:15px; display:flex; align-items:center; justify-content:space-between; padding:0 8px;}
.bd-artist{font-family:'Archivo',sans-serif; font-weight:700; font-size:8px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-cat{font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.1em; opacity:.85; flex:none;}
.bd-low{flex:1; display:flex; align-items:center; gap:8px; padding:0 8px;}
.bd-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-len{margin-left:auto; flex:none; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10px; letter-spacing:.1em; opacity:.6;}

.fly-layer{position:fixed; inset:0; pointer-events:none; z-index:40;}
.fly-clone{position:fixed; will-change:transform; transition:transform .5s cubic-bezier(.5,0,.2,1), opacity .5s ease;}
/* the spine that follows the finger/cursor while dragging */
.drag-clone{position:fixed; left:0; top:0; z-index:50; pointer-events:none; opacity:.94;
  transform:translate(0,0); transition:none; box-shadow:0 20px 40px -12px rgba(0,0,0,.85);}
.spine{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
/* kill text selection while dragging (mouse sweep) */
body.nosel, body.nosel *{-webkit-user-select:none !important; user-select:none !important;}

.demo-banner{background:linear-gradient(180deg,#3a2a12,#281c0c); border:1px solid #5a4526; color:#e9d9b8;
  font-family:'Courier Prime',monospace; font-size:12px; line-height:1.4; letter-spacing:.01em;
  padding:9px 14px; border-radius:8px; margin-bottom:16px;}
.demo-banner b{color:#f0c674;}

/* ---------- mobile ---------- */
@media (max-width:720px){
  body{padding-top:130px;}
  .deck-inner{flex-wrap:wrap; padding:10px 14px 8px; gap:8px 12px;}
  .np-cassette{width:84px; height:54px;}
  .np-cassette .np-reels{gap:20px;}
  .np-cassette .reel{width:24px; height:24px; box-shadow:0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 6px rgba(20,15,10,.72), 0 0 8px rgba(0,0,0,.5);}
  .np-meta{order:0; flex:1 1 auto; min-width:0;}
  .np-song{font-size:16px;}
  .np-album{font-size:11px;}
  .np-track-of{display:none;}
  .np-controls{order:3; flex-basis:100%; justify-content:center; gap:10px;}
  .ctl{width:36px; height:36px; font-size:13px;}
  .ctl-big{width:44px; height:44px; font-size:15px;}
  main{padding:16px 14px 90px;}
  .libline{font-size:10px; letter-spacing:.2em; margin-bottom:16px;}
  .racks-row{flex-direction:column; gap:16px;}
  .rack{min-width:0; max-width:none; width:100%;}
  .drawer{height:56vh;}
  body.drawer-open main{padding-bottom:58vh;}
  .drawer-head{padding:0 16px;}
  .drawer-tapes{grid-template-columns:1fr; padding:12px 14px 40px;}
  .search{width:132px;}
  .sleeve{padding:4px 16px 16px;}
  .sleeve-tracks{columns:1;}
  .spine:hover{transform:none; filter:none;}   /* no hover-pull on touch */
}