:root{--bg:#0e0f12;--fg:#e8e6e0;--mut:#9a978f;--ac:#d6a35c;--card:#17181c;--line:#26272c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
 font:16px/1.6 -apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
nav.top{position:sticky;top:0;background:rgba(14,15,18,.95);backdrop-filter:blur(6px);
 border-bottom:1px solid var(--line);padding:12px 0;z-index:5}
nav.top a{margin-right:18px;font-size:14px;color:var(--fg)}

/* landing hero + discography grid */
header.hero{padding:60px 0 26px;border-bottom:1px solid var(--line)}
.hero h1{font-size:40px;margin:0 0 6px;letter-spacing:-.5px}
.hero .tag{color:var(--mut);font-size:18px}
.banner{background:#2a2410;border:1px solid #4a3d16;color:#e6cf95;padding:10px 14px;
 border-radius:8px;margin:18px 0;font-size:14px}
h2.era{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ac);
 margin:46px 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{position:relative;background:var(--card);border:1px solid #24252b;border-radius:12px;overflow:hidden;
 transition:transform .12s,border-color .12s}
body.editing-feat #discogrid .card{cursor:grab}
body.editing-feat #discogrid .card.dragging{opacity:.4;cursor:grabbing}
.card:hover{transform:translateY(-3px);border-color:#3a3b42}
.card .cv{aspect-ratio:1;width:100%;object-fit:cover;background:#202126;display:block}
.card .bd{padding:11px 13px}
.card h3{margin:0 0 2px;font-size:16px;line-height:1.25;color:var(--ac)}
.card .meta{color:var(--mut);font-size:12px}

/* shell: content iframe + persistent bottom player */
body.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
body.shell #frame{flex:1;border:0;width:100%}
.bar{background:#121317;border-top:1px solid var(--line);padding:8px 18px 10px;
 background-size:cover;background-position:center}
.bar #waveform{margin:0 0 6px}
.bar .np{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.npgrid{display:grid;grid-template-columns:minmax(70px,auto) minmax(90px,auto) auto auto minmax(140px,1fr);
 gap:0 20px;align-items:baseline}
.npl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.npv{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#goalbum{font-size:12px;color:var(--ac)}
.barlike{background:none;border:0;color:var(--mut);font-size:17px;cursor:pointer;padding:0 2px}
.barlike:hover,.barlike.liked{color:#e0567a}
.bardl{color:var(--mut);font-size:17px}
.bardl:hover{color:var(--ac);text-decoration:none}

/* album page: big centered cover, writeup + details underneath */
.album-head{display:block;max-width:800px;margin:0 auto;padding:32px 0;
 border-bottom:1px solid var(--line)}
.album-head .cvwrap{position:relative;margin-bottom:22px}
.album-head .cv{display:block;width:100%;max-width:800px;aspect-ratio:1;object-fit:cover;
 border-radius:12px;background:#202126}
/* cover filmstrip + caption */
.galcap{background:var(--card);border:1px solid #24252b;border-radius:8px;padding:8px 14px;
 margin:10px 0 0;color:#d8d4ca;font-size:14px;font-style:italic}
body.editing .galcap{outline:1px dashed #3a3b42}
body.editing .galcap:empty::before{content:"caption for this image…";color:#55575f}
.strip[hidden]{display:none}
.strip{display:flex;gap:8px;overflow-x:auto;margin:10px 0 0;padding-bottom:4px;
 scrollbar-color:#3a3b42 transparent;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip::-webkit-scrollbar-thumb{background:#3a3b42;border-radius:4px}
.strip::-webkit-scrollbar-thumb:hover{background:var(--ac)}
.strip .thwrap{position:relative;flex:none}
.strip img{width:72px;height:72px;object-fit:cover;border-radius:6px;cursor:pointer;
 opacity:.65;display:block;background:#202126}
.strip .thwrap.on img{opacity:1;outline:2px solid var(--ac)}
.strip img:hover{opacity:1}
.strip .thx{display:none;position:absolute;top:-6px;right:-6px;width:20px;height:20px;
 border:0;border-radius:50%;background:#5a1f1f;color:#fff;font-size:11px;cursor:pointer;line-height:1}
body.editing .strip .thx{display:block}
.strip .thadd{display:none;flex:none;width:72px;height:72px;border:1px dashed var(--line);
 border-radius:6px;background:none;color:var(--mut);font-size:26px;cursor:pointer}
body.editing .strip .thadd{display:block}
.strip .thadd:hover{border-color:var(--ac);color:var(--ac)}

.details{margin-top:16px}
.details table{border-collapse:collapse;margin-bottom:12px}
.details th{color:var(--mut);font-weight:normal;text-align:left;padding:3px 22px 3px 0;
 font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.details td{padding:3px 0;font-size:14px}
.details .unset{color:#4a4b52}
body:not(.editing) .details tr.unsetrow{display:none}
body.editing .details .dv,body.editing .sub .dv{outline:1px dashed #3a3b42;border-radius:5px;padding:2px 8px;min-width:24px;display:inline-block}
body.editing .details .dv:empty::before{content:"…";color:#55575f}
body.editing .details .dv:focus{outline:1px solid var(--ac);background:#0b0c0f}
.zipdl{display:inline-block;background:var(--ac);color:#1a1407;font-weight:600;
 border-radius:8px;padding:9px 16px;margin-top:4px}
.zipdl:hover{text-decoration:none;filter:brightness(1.1)}
.zipstub{display:inline-block;color:var(--mut);border:1px dashed var(--line);
 border-radius:8px;padding:9px 16px;margin-top:4px;font-size:14px}
.coverbtn{display:none;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
 white-space:nowrap;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;
 background:rgba(0,0,0,.7);color:var(--fg);font-size:13px}
body.editing .coverbtn{display:block}
body.editing .album-head .cvwrap{outline:1px dashed #3a3b42;border-radius:12px}
.album-head h1{margin:0 0 4px;font-size:30px;letter-spacing:-.3px}
.album-head .sub{color:var(--mut);margin-bottom:14px}
.writeup{background:var(--card);border:1px solid #24252b;border-radius:12px;padding:16px 18px;
 min-height:120px;color:#d8d4ca}
.writeup .hint{color:var(--mut);font-style:italic}
.writeup.clamped{max-height:280px;overflow:hidden;position:relative}
.writeup.clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
 background:linear-gradient(transparent,var(--card))}
.keepreading{display:block;margin:10px auto 0;background:#2a2c33;color:var(--ac);
 border:1px solid #3a3b42;border-radius:8px;padding:7px 18px;font-size:13px;cursor:pointer}
.keepreading:hover{border-color:var(--ac)}
.writeup h1,.writeup h2,.writeup h3{margin:.3em 0}

.transport{display:flex;align-items:center;gap:14px}
.transport button{background:var(--ac);color:#1a1407;border:0;border-radius:50%;
 width:42px;height:42px;font-size:16px;cursor:pointer}
.transport button.sm{background:#2a2c33;color:var(--fg);width:34px;height:34px;font-size:13px}
.transport .t{color:var(--mut);font-variant-numeric:tabular-nums;font-size:14px}

ol#playlist{list-style:none;margin:0;padding:0}
#playlist li.hd{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ac);
 border-bottom:1px solid var(--line);padding:22px 12px 8px;cursor:default}
.trk{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:8px;cursor:pointer}
.trk:hover{background:#16171b}.trk.on{background:#1d1a12}
.trk .tn{color:var(--mut);width:26px;text-align:right;font-variant-numeric:tabular-nums}
.trk.on .tn{color:var(--ac)}
/* fixed-width metadata columns so year/bpm/format line up down the list */
.trk .tt{flex:1}.trk .td{color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;
 width:46px;text-align:right;flex:none}
.trk .dl{color:var(--mut);font-size:15px}.trk .dl:hover{color:var(--ac)}
.bar .fm{color:#7d8290;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.trk .fm{color:#7d8290;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;
 width:175px;text-align:right;flex:none}
.trk .bp{color:var(--mut);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;
 width:66px;text-align:right;flex:none}
.trk .yr{color:var(--mut);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;
 width:44px;text-align:right;flex:none}
body.editing .trk .bp,body.editing .trk .yr{width:auto;text-align:left}
body.editing .yr{outline:1px dashed #3a3b42;border-radius:5px;padding:2px 6px;min-width:44px}
body.editing .yr:empty::before{content:"year";color:#55575f}
body.editing .yr:focus{outline:1px solid var(--ac);background:#0b0c0f}
/* genres collapse to a 🏷 icon; full list is the on-hover popup (title tooltip) */
.trk .tg{color:var(--ac);font-size:12px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.editing) .trk .tg{width:22px;flex:none;max-width:none}
body:not(.editing) .trk .tg.has{font-size:0}
body:not(.editing) .trk .tg.has::before{content:"🏷";font-size:13px;cursor:help}
.trk .like{background:none;border:0;color:var(--mut);font-size:15px;cursor:pointer;padding:0 2px}
.trk .like:hover,.trk .like.liked{color:#e0567a}
.trk .al{color:var(--mut);font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.editing .tg,body.editing .bp{outline:1px dashed #3a3b42;border-radius:5px;padding:2px 6px;min-width:60px}
body.editing .tg:empty::before{content:"genres…";color:#55575f}
body.editing .bp:empty::before{content:"BPM";color:#55575f}
body.editing .tg:focus,body.editing .bp:focus{outline:1px solid var(--ac);background:#0b0c0f}

/* all-songs browser */
.songbar{display:flex;gap:12px;align-items:center;margin:14px 0}
.songbar input{flex:1;background:#0b0c0f;color:var(--fg);border:1px solid var(--line);
 border-radius:8px;padding:9px 13px;font-size:14px}
.songbar input:focus{outline:0;border-color:var(--ac)}
.songbar select{background:#17181c;color:var(--fg);border:1px solid var(--line);
 border-radius:8px;padding:9px 10px;font-size:14px}
.tagchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{background:#17181c;color:var(--ac);border:1px solid var(--line);border-radius:99px;
 padding:4px 12px;font-size:13px;cursor:pointer}
.chip.on{background:var(--ac);color:#1a1407;border-color:var(--ac)}

/* gallery page (slideshowmax-style tiles) */
body.galpage{overflow:hidden}
body.galpage.editing{overflow:auto}
.galwrap{padding:14px 18px}
.galbar{display:flex;gap:26px;align-items:center;margin-bottom:12px;color:var(--mut);font-size:13px}
.galbar label{display:flex;gap:10px;align-items:center}
.galbar input[type=range]{accent-color:var(--ac)}
.tiles{display:grid;gap:6px}
.tile{position:relative;overflow:hidden;border-radius:8px;background:#17181c}
.tile img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;
 transition:opacity .4s}
.tile .thx{display:block;position:absolute;top:6px;right:6px;width:24px;height:24px;
 border:0;border-radius:50%;background:#5a1f1f;color:#fff;font-size:12px;cursor:pointer;line-height:1}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.9);
 display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;
 box-shadow:0 8px 40px rgba(0,0,0,.6);border-radius:4px}

/* discover page */
.roulette{margin:18px 0}
.roulette button{background:var(--ac);color:#1a1407;border:0;border-radius:12px;
 padding:16px 26px;font-size:18px;font-weight:600;cursor:pointer}
.roulette button:hover{filter:brightness(1.1)}
.cloud{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:10px 0 6px}
.cloudtag{color:var(--ac);line-height:1.3}
.cloudtag:hover{color:var(--fg);text-decoration:none}
.likedlist{list-style:none;margin:0;padding:0}

/* history block (landing) */
.history h2{font-size:24px;margin:30px 0 8px}
.history h3{font-size:18px;margin:22px 0 4px;color:var(--ac)}
.history blockquote{border-left:3px solid var(--ac);margin:10px 0;padding:4px 14px;
 color:#cfcabf;font-style:italic}
.history table{border-collapse:collapse;margin:12px 0}
.history td{border:1px solid #2c2d33;padding:6px 12px}
.history pre{background:#000;padding:10px;border-radius:6px;overflow:auto;font-size:13px;color:#bdb}
footer{color:var(--mut);font-size:13px;padding:40px 0;border-top:1px solid var(--line);margin-top:50px}

/* ---- in-browser editor ---- */
.editbtn{margin-left:auto;background:#2a2c33;color:var(--fg);border:1px solid #3a3b42;
 border-radius:7px;padding:5px 12px;font-size:13px;cursor:pointer}
.editbtn:hover{border-color:var(--ac)}
.editbtn.primary{background:var(--ac);color:#1a1407;border-color:var(--ac);font-weight:600}
.editmsg{color:var(--ac);font-size:13px;margin-left:12px}
.ec{display:none;background:#2a2c33;color:var(--fg);border:1px solid #3a3b42;border-radius:6px;
 width:26px;height:26px;font-size:12px;cursor:pointer;line-height:1}
.ec.cut:hover{background:#5a1f1f;border-color:#b04a4a}
body.editing .ec{display:inline-block}
body.editing .trk{gap:8px}
body.editing .tt{outline:1px dashed #3a3b42;border-radius:5px;padding:2px 6px;min-width:120px}
body.editing .tt:focus{outline:1px solid var(--ac);background:#0b0c0f}
body.editing .album-head h1[contenteditable]{outline:1px dashed #3a3b42;border-radius:6px;padding:2px 8px}
.editta{display:none;width:100%;min-height:170px;box-sizing:border-box;margin-top:8px;
 background:#0b0c0f;color:var(--fg);border:1px solid var(--line);border-radius:10px;
 padding:12px 14px;font:14px/1.6 inherit;resize:vertical}
.editta:focus{outline:0;border-color:var(--ac)}
.trk.iscut .tt{text-decoration:line-through;color:#7a766d}
.trk.iscut{opacity:.55}
.edittoolbar{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.edittoolbar button{background:#2a2c33;color:var(--fg);border:1px solid #3a3b42;border-radius:7px;
 padding:6px 12px;font-size:13px;cursor:pointer}
.edittoolbar button.primary{background:var(--ac);color:#1a1407;border:0;font-weight:600}
.edittoolbar .hint{color:var(--mut);font-size:12px}