/* LUH LEAKYZ 02 · The Studio Edition — responsive, no external assets */
:root {
  color-scheme: dark;
  --bg: #070707;
  --surface: #101010;
  --surface-up: #151515;
  --surface-hov: #1d1d1d;
  --muted: #8f8f8f;
  --muted-dim: #676767;
  --line: #262626;
  --line-bright: #3b3b3b;
  --text: #f1f1f1;
  --acid: #c5c5c5;
  --acid-strong: #c5c5c5;
  --acid-dim: #202020;
  --red: #acacac;
  --shadow: 0 22px 70px rgba(0,0,0,.25);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
*, *::before, *::after {box-sizing:border-box}
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased }
body::before { content:""; pointer-events:none; position:fixed; inset:0; opacity:.22; z-index:-1; background:radial-gradient(ellipse at 90% 8%,#1b1b1b 0,transparent 42%),radial-gradient(ellipse at 35% 100%,#111111,transparent 54%) }
button, input {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed}
a {color:inherit; text-decoration:none}
:focus-visible {outline:2px solid var(--acid); outline-offset:3px}
::selection {background:var(--acid);color:#101010}
::-webkit-scrollbar {width:8px;height:8px}
::-webkit-scrollbar-track {background:transparent}
::-webkit-scrollbar-thumb {background:#323232;border-radius:99px;border:2px solid #131313}

.app-shell {display:grid;grid-template-columns:88px minmax(0,1fr);min-height:100vh}
.rail {position:sticky;z-index:20;top:0;align-self:start;height:100vh;background:#0b0b0b;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center}
.brand-icon {width:52px;height:52px;margin:27px auto 49px;display:flex;align-items:center;justify-content:center;gap:1px;font-size:24px;font-weight:1000;letter-spacing:-2px;color:#101010;background:var(--acid);border:1px solid #dbdbdb;border-radius:12px;box-shadow:0 0 29px rgba(255,255,255,.12);transition:transform .2s}
.brand-icon:hover {transform:rotate(-5deg)}
.brand-icon span {font-size:10px;letter-spacing:-1px;align-self:center;margin:4px 0 0 1px}
.rail-links {display:flex;flex-direction:column;gap:12px;width:100%;align-items:center}
.rail-link {position:relative;width:66px;height:68px;border:1px solid transparent;border-radius:12px;background:transparent;color:#828282;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .2s,color .2s,border-color .2s}
.rail-link svg {width:22px;height:22px;stroke-width:1.65;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.rail-link small {font-size:9px;letter-spacing:1.25px;font-weight:850}
.rail-link:hover {color:#f3f3f3;background:#191919}
.rail-link.active {color:var(--acid);background:#1c1c1c;border:1px solid #2f2f2f}
.rail-link.active::before {position:absolute;content:"";left:-12px;width:3px;height:30px;background:var(--acid);border-radius:0 4px 4px 0}
.rail-foot {margin-top:auto;margin-bottom:30px;writing-mode:vertical-rl;font-size:10px;letter-spacing:3px;color:#646464;font-weight:800}
.main-shell {min-width:0}
.topbar {height:70px;border-bottom:1px solid var(--line);background:#0f0f0f;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 clamp(24px,4vw,78px);font-size:10px;font-weight:850;letter-spacing:2px}
.topbar-label,.topbar-right {display:flex;align-items:center;gap:13px}
.status-dot {flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px #c5c5c520,0 0 17px #c5c5c588}
.topbar-right {color:#8f8f8f;letter-spacing:1px}
.demo-chip {border:1px solid #3b3b3b;color:var(--acid);background:#1a1a1a;border-radius:4px;padding:8px 10px;white-space:nowrap;font-size:9px;font-weight:900;letter-spacing:1.1px}
.topbar-clock {border-left:1px solid #343434;padding-left:13px;color:#b0b0b0;font-size:10px;white-space:nowrap}
.page {display:none}
.page.active {display:block;animation:reveal .26s ease-out}
@keyframes reveal {from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* Covers and editorial header */
.hero {position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px, 43%);align-items:center;isolation:isolate;min-height:470px;padding:48px clamp(24px,4vw,78px) 42px;background:linear-gradient(112deg,#121212 0%,#181818 51%,#202020 100%);border-bottom:1px solid #2f2f2f}
.hero::before {content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 75% 55%,#4444444d,transparent 43%),repeating-linear-gradient(90deg,transparent 0,transparent 119px,#c5c5c50a 120px,#c5c5c50a 121px);pointer-events:none}
.hero::after {content:"02";position:absolute;right:-2%;top:-20%;font-weight:1000;font-size:min(53vw,710px);line-height:1;letter-spacing:-.15em;color:#c5c5c511;z-index:-1;pointer-events:none}
.hero-copy {position:relative;z-index:2;align-self:center;padding-bottom:2px}
.eyebrow {color:var(--acid);font-size:10px;letter-spacing:2.8px;font-weight:900;margin:0 0 14px;line-height:1.5}
.hero-copy>.eyebrow::before {content:"";display:inline-block;width:27px;height:1px;background:var(--acid);vertical-align:middle;margin-right:12px}
.hero h1,.page-intro h1 {font-family:Impact, "Arial Narrow", "Franklin Gothic Heavy", ui-sans-serif,sans-serif;font-weight:900;font-stretch:condensed;font-size:clamp(76px,8.5vw,145px);line-height:.82;letter-spacing:-1px;margin:14px 0 25px;max-width:800px}
.hero h1>span,.page-intro h1 span {color:var(--acid)}
.hero h1 em {display:inline-flex;margin-left:14px;vertical-align:middle;align-items:center;justify-content:center;transform:rotate(-90deg) translateY(5px);font-family:ui-sans-serif,system-ui,sans-serif;font-weight:900;font-style:normal;font-size:15px;line-height:1;letter-spacing:1px;white-space:nowrap;border:1px solid #c5c5c5;border-radius:3px;padding:9px 12px;color:var(--acid)}
.hero-description {color:#cfcfcf;font-size:15px;line-height:1.75;margin:0;max-width:420px;letter-spacing:.08px}
.hero-pills {margin-top:31px;display:flex;flex-wrap:wrap;gap:9px}
.hero-pills span {border:1px solid #606060;background:#2424248c;padding:10px 12px;color:#e4e4e4;font-size:9px;font-weight:900;letter-spacing:1.5px;border-radius:4px}
.hero-mark {position:relative;min-height:400px;display:grid;place-items:center;padding:0 15px 0 3px;perspective:1000px}
.art-sleeve {position:relative;width:min(100%,330px);aspect-ratio:1/1;transform:rotate(-8deg);background:linear-gradient(148deg,#c5c5c5 0%,#c5c5c5 35%,#383838 77%,#1d1d1d 100%);border:1px solid #dbdbdb;box-shadow:22px 29px 1px #0c0c0c99,30px 43px 65px #00000099,0 0 70px #c5c5c522;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:24px 24px 20px;color:#151515}
.art-sleeve::before {position:absolute;content:"";width:125%;height:125%;border:1px solid #15151560;right:-70%;top:-22%;border-radius:50%;box-shadow:0 0 0 21px #16161622,0 0 0 50px #16161612,0 0 0 82px #20202015}
.art-sleeve::after {content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#1a1a1a15 20px);pointer-events:none}
.sleeve-top,.sleeve-bottom {position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:900}
.sleeve-title {position:relative;z-index:2;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(55px,4.6vw,72px);line-height:.91;letter-spacing:-1px;transform:scaleX(.98);transform-origin:left;text-shadow:2px 1px 0 #c5c5c550}
.sleeve-title span {color:#e5e5e5;-webkit-text-stroke:1px #1e1e1e}
.sleeve-title small {position:absolute;right:0;bottom:-31px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;letter-spacing:-.5px;color:#c5c5c5;border:1px solid #c5c5c5;padding:4px 6px}
.sleeve-bottom {color:#dddddd;align-items:end;mix-blend-mode:normal}
.sleeve-bottom span:last-child {text-align:right}
.sleeve-disc {position:absolute;width:63%;aspect-ratio:1;border-radius:50%;right:-33%;top:15%;z-index:-1;transform:rotate(7deg);background:repeating-radial-gradient(circle,#0b0b0b 0,#0b0b0b 3px,#242424 4px,#0c0c0c 6px);border:2px solid #acacac;box-shadow:12px 23px 35px #00000088}
.sleeve-disc::after {content:"";position:absolute;width:28%;aspect-ratio:1;left:36%;top:36%;border-radius:50%;background:var(--acid);border:8px solid #232323}
.hero-signal {position:absolute;right:-2%;bottom:0;z-index:2;color:#dbdbdb;font-size:10px;letter-spacing:2px;line-height:1.6;font-weight:900;text-align:right}

/* Builder work area */
.builder-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,410px);align-items:start;gap:22px;max-width:1640px;margin:auto;padding:36px clamp(24px,4vw,78px) 65px}
.catalog-pane,.tracklist-pane,.rankings-panel,.album-panel {min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.catalog-pane {min-height:620px}
.section-header {display:flex;justify-content:space-between;align-items:end;gap:12px;padding:27px 27px 17px}
.dark-label {color:#939393}
.section-header .eyebrow {margin:0 0 6px}
.section-header h2,.tracklist-top h2 {font-family:Impact,"Arial Narrow",sans-serif;font-weight:900;letter-spacing:.2px;font-size:28px;line-height:1.1;margin:0;color:#f3f3f3}
.muted-count {border:1px solid #323232;background:#1a1a1a;color:#cfcfcf;padding:8px 10px;font-size:10px;font-weight:850;letter-spacing:1px;white-space:nowrap;border-radius:4px}
.search-row {padding:6px 27px 0}
.search-field {height:55px;display:flex;align-items:center;gap:14px;padding:0 17px;background:#0b0b0b;border:1px solid #363636;border-radius:7px;transition:border-color .2s,box-shadow .2s}
.search-field:focus-within {border-color:var(--acid);box-shadow:0 0 0 3px #c5c5c515}
.search-icon {font-family:Arial,sans-serif;color:#9b9b9b;font-size:26px;line-height:1}
.search-field input {min-width:0;background:transparent;border:0;outline:0;width:100%;height:100%;color:var(--text);font-size:13px;font-weight:500}
.search-field input::placeholder {color:#6e6e6e}
.era-container {padding:24px 27px 19px}
.filter-label {color:#868686;font-size:10px;font-weight:900;letter-spacing:1.7px}
.era-tabs {display:flex;gap:8px;overflow:auto;padding:12px 2px 5px;margin:0 -2px;scrollbar-width:thin}
.era-btn {border:1px solid #303030;background:#1a1a1a;border-radius:5px;padding:11px 13px;color:#b2b2b2;white-space:nowrap;letter-spacing:.35px;font-size:10px;font-weight:850;transition:color .18s,background .18s,transform .18s,border-color .18s}
.era-btn:hover {color:#f4f4f4;border-color:#5d5d5d;transform:translateY(-1px)}
.era-btn.active {background:var(--acid);color:#131313;border-color:var(--acid);box-shadow:0 4px 15px #c5c5c520}
.catalog-head {display:flex;justify-content:space-between;background:#0c0c0c;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 27px;color:#858585;font-size:10px;font-weight:900;letter-spacing:1.6px}
.song-list {min-height:260px;max-height:630px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3b3b3b transparent}
.song-item {display:flex;align-items:center;gap:15px;min-height:63px;padding:12px 27px;border-bottom:1px solid #2525259c;transition:background .16s}
.song-item:hover {background:#1a1a1a}
.song-index {min-width:33px;font-size:11px;font-weight:850;color:#616161;font-variant-numeric:tabular-nums}
.song-info {min-width:0;flex:1}
.song-info strong {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;letter-spacing:.15px;font-weight:850;color:#e9e9e9}
.song-info small {display:block;color:#868686;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}
.add-btn {height:36px;width:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid #545454;border-radius:6px;background:#252525;color:var(--acid);font-size:22px;font-weight:400;line-height:1;transition:background .15s,transform .15s}
.add-btn:hover:not(:disabled) {background:var(--acid);color:#131313;transform:scale(1.05)}
.add-btn.selected {background:var(--acid);color:#121212;border-color:var(--acid);font-size:16px}
.add-btn:disabled:not(.selected) {opacity:.25}
.empty-list {padding:60px 20px;text-align:center;font-size:13px;color:var(--muted)}
.catalog-note {padding:17px 27px;background:#0e0e0e;border-top:1px solid var(--line);color:#818181;font-size:11px;line-height:1.6}
.tracklist-pane {position:sticky;top:16px;background:linear-gradient(180deg,#191919 0,#131313 33%,#0f0f0f 100%);border:1px solid #363636}
.tracklist-pane::before {content:"";display:block;height:4px;background:linear-gradient(90deg,var(--acid),#6d6d6d 62%,#292929)}
.tracklist-top {padding:23px 23px 19px;border-bottom:1px solid #323232}
.tracklist-top .eyebrow {margin:0 0 8px}
.tracklist-title-line {display:flex;align-items:center;justify-content:space-between;gap:12px}
.tracklist-title-line h2 {font-size:29px}
.tracklist-title-line span {font-size:18px;font-weight:950;color:var(--acid);white-space:nowrap;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.progress-bg {margin-top:20px;height:6px;width:100%;background:#2c2c2c;overflow:hidden;border-radius:99px}
.progress-fill {height:100%;background:linear-gradient(90deg,#c5c5c5,var(--acid));box-shadow:0 0 10px #c5c5c566;width:0;transition:width .23s}
.tracklist-subtitle {color:#9e9e9e;font-size:11px;line-height:1.6;margin:12px 0 0}
.track-slots {padding:14px;overflow-y:auto;max-height:645px;scrollbar-width:thin}
.track-slot {display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:2px;padding:5px 9px;border:1px solid transparent;border-radius:5px;transition:background .15s}
.track-slot.empty {color:#5c5c5c}
.track-slot.filled {background:#212121;border-color:#373737;margin-bottom:5px}
.track-slot-num {min-width:24px;font-size:10px;font-weight:900;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#656565}
.track-slot.filled .track-slot-num {color:var(--acid)}
.track-slot-name {font-size:11px;font-weight:850;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-slot.empty .track-slot-name {font-size:11px;color:#656565;font-weight:500}
.slot-actions {display:flex;align-items:center;gap:2px}
.slot-btn {height:26px;width:24px;border:0;border-radius:3px;background:transparent;color:#acacac;font-size:14px;line-height:1}
.slot-btn:hover:not(:disabled) {background:#373737;color:var(--acid)}
.slot-btn:disabled {opacity:.2}
.slot-btn.remove {color:#b1b1b1;font-size:19px}
.slot-btn.remove:hover {background:#383838;color:#d9d9d9}
.tracklist-bottom {padding:19px 23px 23px;border-top:1px solid #323232;background:#131313}
.draft-status {display:flex;align-items:center;gap:9px;color:#9c9c9c;font-size:11px;line-height:1.45;margin-bottom:13px}
.draft-status::before {content:"";display:inline-block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#c5c5c5}
.btn {border:1px solid transparent;border-radius:6px;font-size:11px;font-weight:900;letter-spacing:1px;min-height:44px;padding:13px 16px;transition:background .18s,border-color .18s,transform .18s}
.btn:active:not(:disabled) {transform:scale(.985)}
.btn-primary {background:var(--acid);color:#131313;display:flex;align-items:center;justify-content:space-between;box-shadow:0 7px 26px #c5c5c513}
.btn-primary:hover:not(:disabled) {background:#c5c5c5;box-shadow:0 8px 30px #c5c5c533}
.btn-primary:disabled {background:#3e3e3e;color:#aaaaaa;box-shadow:none}
.tracklist-bottom>.btn-primary {width:100%}
.secondary-actions {display:flex;gap:8px;margin-top:9px}
.secondary-actions .btn {flex:1;font-size:10px;letter-spacing:.75px;padding:12px 8px}
.btn-outline {background:#1f1f1f;border-color:#3f3f3f;color:#dddddd}
.btn-outline:hover {border-color:#909090;background:#272727}
.btn-clear {background:#1f1f1f;border-color:#3e3e3e;color:#b8b8b8}
.btn-clear:hover {border-color:#686868;background:#2a2a2a}
.small-print {font-size:10px;line-height:1.65;color:#7d7d7d;margin:14px 0 0}

/* Secondary sections */
.page-intro {min-height:300px;display:flex;flex-direction:column;justify-content:center;padding:54px clamp(24px,4vw,78px) 46px;background:radial-gradient(ellipse at 85% 20%,#2c2c2c,#141414 51%,#101010 100%);border-bottom:1px solid #2f2f2f;position:relative;overflow:hidden}
.page-intro::after {content:"/// VOL. 02";position:absolute;right:4%;top:23%;font-weight:1000;font-size:clamp(40px,7vw,115px);letter-spacing:-6px;color:#c5c5c50b;pointer-events:none}
.page-intro h1 {font-size:clamp(70px,7.3vw,112px);margin:11px 0 20px;line-height:.85}
.page-intro>p:last-child {color:#bdbdbd;font-size:14px;line-height:1.6;margin:0;z-index:1}
.notice {display:flex;align-items:center;gap:20px;margin:28px clamp(24px,4vw,78px) 0;padding:19px 22px;border:1px solid #3b3b3b;background:#1b1b1b;border-radius:8px}
.notice strong {flex:0 0 auto;color:var(--acid);font-size:10px;letter-spacing:1.6px}
.notice span {color:#bebebe;font-size:12px;line-height:1.6}
.notice.subtle {background:#141414;border-color:#2c2c2c;margin-bottom:60px}
.rankings-panel,.album-panel {margin:28px clamp(24px,4vw,78px) 65px}
.rank-item {padding:19px 28px;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);background:#101010}
.rank-item:hover {background:#1a1a1a}
.rank-number {font-size:26px;font-weight:950;letter-spacing:-1.5px;color:var(--acid);width:54px;font-variant-numeric:tabular-nums}
.rank-meta {flex:1;min-width:0}
.rank-meta strong {font-size:14px}
.rank-meta span {display:block;font-size:11px;color:#8b8b8b;margin-top:5px}
.rank-value {text-align:right;font-size:17px;font-weight:950}
.rank-value span {display:block;color:#8e8e8e;font-size:10px;font-weight:600;margin-top:5px;letter-spacing:1px}
.empty-ranking {padding:65px 20px;text-align:center;color:#e0e0e0;font-size:15px}
.empty-ranking p {color:var(--muted);font-size:13px}
.album-panel {padding:29px}
.album-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:23px}
.album-heading h2 {font-family:Impact,"Arial Narrow",sans-serif;font-size:29px;letter-spacing:.2px;margin:0}
.album-heading p {color:#969696;font-size:12px}
.album-song {display:flex;align-items:center;gap:20px;border-bottom:1px solid #272727;padding:17px 0}
.album-song span {font-variant-numeric:tabular-nums;min-width:30px;font-size:11px;font-weight:900;color:var(--acid)}
.album-song strong {font-size:13px}
.album-song small {font-size:11px;color:#838383;margin-left:auto}
.album-empty {text-align:center;padding:69px 20px}
.album-empty h2 {font-family:Impact,"Arial Narrow",sans-serif;font-size:32px;font-weight:900;letter-spacing:.25px;margin:0}
.album-empty p {color:#acacac;font-size:13px;line-height:1.7}
.album-empty .btn {display:inline-flex;margin-top:14px}
.about-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px clamp(24px,4vw,78px)}
.about-tile {min-height:202px;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:8px;transition:border-color .2s,transform .2s}
.about-tile:hover {border-color:#454545;transform:translateY(-2px)}
.about-number {color:var(--acid);font-weight:900;font-size:12px}
.about-tile h3 {font-family:Impact,"Arial Narrow",sans-serif;font-size:25px;letter-spacing:.15px;margin:17px 0 8px}
.about-tile p {color:#aaaaaa;font-size:12px;line-height:1.75;margin:0}
.footer {height:75px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;color:#7a7a7a;padding:0 clamp(24px,4vw,78px);font-size:10px;font-weight:900;letter-spacing:1.5px}
.toast {display:none;position:fixed;right:27px;bottom:27px;z-index:100;padding:16px 20px;max-width:min(430px,calc(100vw - 40px));border-radius:7px;background:var(--acid);border:1px solid #dadada;box-shadow:0 15px 55px #00000099;color:#131313;font-size:12px;font-weight:850}
.toast.visible {display:block;animation:reveal .2s ease-out}
.confirm-dialog {background:#151515;border:1px solid #535353;color:var(--text);width:min(440px,calc(100vw - 35px));border-radius:11px;padding:30px;box-shadow:0 24px 90px #000000ee}
.confirm-dialog::backdrop {background:#000000dd;backdrop-filter:blur(3px)}
.confirm-dialog h3 {font-family:Impact,"Arial Narrow",sans-serif;font-size:27px;letter-spacing:.2px;margin:0 0 10px}
.confirm-dialog p:not(.eyebrow) {font-size:13px;line-height:1.6;color:#bbbbbb}
.dialog-actions {display:flex;gap:10px;margin-top:28px}
.dialog-actions .btn {flex:1;display:block;text-align:center}

@media (min-width:1650px) {
  .hero {grid-template-columns:minmax(0,1fr) 560px}
  .hero h1 {font-size:150px}
  .art-sleeve {width:345px}
}
@media(max-width:1170px) {
  .hero {grid-template-columns:minmax(0,1fr) minmax(270px,40%)}
  .art-sleeve {width:min(100%,290px)}
  .hero h1 {font-size:clamp(70px,8vw,110px)}
  .builder-grid {grid-template-columns:minmax(0,1fr) 350px;gap:16px}
  .song-item {padding-left:19px;padding-right:19px}
  .sleeve-title {font-size:61px}
}
@media(max-width:920px) {
  .app-shell {grid-template-columns:1fr}
  .rail {position:fixed;top:auto;right:0;bottom:0;left:0;height:70px;border-right:0;border-top:1px solid #343434;flex-direction:row;justify-content:center;padding:0 10px;background:#0b0b0bf6;backdrop-filter:blur(12px)}
  .brand-icon,.rail-foot {display:none}
  .rail-links {flex-direction:row;justify-content:space-around;gap:4px;width:100%}
  .rail-link {height:59px;width:24%;max-width:160px}
  .rail-link.active::before {width:42px;height:3px;left:auto;top:-7px;border-radius:0 0 4px 4px}
  .main-shell {padding-bottom:70px}
  .builder-grid {grid-template-columns:1fr;gap:20px}
  .tracklist-pane {position:relative;top:0}
  .track-slots {max-height:none}
  .hero {min-height:400px}
  .hero h1 {font-size:clamp(67px,11vw,100px)}
  .hero-mark {min-height:280px}
  .art-sleeve {width:min(100%,245px)}
  .sleeve-title {font-size:58px}
  .sleeve-disc {right:-20%;width:55%}
  .hero-signal {display:none}
}
@media(max-width:600px) {
  .topbar {height:59px;padding:0 20px}
  .topbar-label {font-size:9px;letter-spacing:1.1px}
  .topbar-right {gap:6px}
  .topbar-clock {display:none}
  .demo-chip {padding:6px 8px;font-size:8px}
  .hero {display:block;min-height:395px;padding:43px 20px 41px}
  .hero h1 {font-size:clamp(75px,14.4vw,104px);position:relative;z-index:2;letter-spacing:-.2px}
  .hero h1 em {font-size:12px;margin-left:7px;padding:7px}
  .hero-description {position:relative;z-index:2;font-size:13px;max-width:285px}
  .hero-pills {margin-top:24px;position:relative;z-index:2}
  .hero-pills span {font-size:8px;padding:9px}
  .hero-mark {position:absolute;right:-54px;top:28px;opacity:.15;min-height:260px;width:285px;z-index:1;pointer-events:none}
  .hero-mark .art-sleeve {width:260px}
  .hero::after {top:6%;font-size:110vw}
  .builder-grid {padding:22px 13px 43px;gap:16px}
  .catalog-pane,.tracklist-pane {border-radius:9px}
  .section-header {padding:23px 18px 15px}
  .section-header h2,.tracklist-top h2 {font-size:25px}
  .search-row {padding:5px 18px 0}
  .era-container {padding:20px 18px 15px}
  .song-item,.catalog-head {padding-left:17px;padding-right:17px}
  .catalog-note {padding:17px}
  .tracklist-top,.tracklist-bottom {padding-left:18px;padding-right:18px}
  .page-intro {min-height:264px;padding:46px 20px}
  .page-intro h1 {font-size:75px}
  .notice {margin:20px 13px 0;padding:18px;flex-direction:column;align-items:start;gap:10px}
  .rankings-panel,.album-panel {margin:20px 13px 45px}
  .album-panel {padding:20px 16px}
  .album-song small {display:none}
  .about-grid {grid-template-columns:1fr;gap:12px;margin:20px 13px}
  .about-tile {min-height:auto;padding:24px}
  .footer {height:auto;min-height:66px;padding:0 20px}
  .footer span:last-child {display:none}
  .toast {bottom:85px;right:13px}
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


:root{--bg:#070707;--acid:#c5c5c5;--text:#f5f5f5;--muted:#8d8d8d}.hero{min-height:540px}.hero-cta{max-width:280px;width:100%;margin-top:28px}.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);padding:28px 4vw;gap:24px}.stats-strip strong{display:block;font-size:34px;letter-spacing:-1px}.stats-strip span{display:block;font-size:9px;color:var(--muted);letter-spacing:1.2px;line-height:1.8;margin-top:7px}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 4vw 60px}.feature-card{padding:32px;background:linear-gradient(140deg,#191919,#0f0f0f);border:1px solid var(--line);border-radius:10px}.feature-card h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:38px;line-height:1.1;font-weight:500}.feature-card p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.8;max-width:430px}.feature-card .btn{margin-top:16px}.category-row{padding:0 24px 20px;display:flex;align-items:center;gap:14px}.category-row label,.title-field{font-size:10px;letter-spacing:1px;color:var(--muted)}select,input{color:var(--text)}select,.title-field input{background:#111111;border:1px solid #353535;border-radius:5px;padding:12px;font:inherit;min-width:0}.category-row select{flex:1;font-size:12px}.title-field{display:block;padding:18px 23px 4px}.title-field input{display:block;width:100%;margin-top:8px;font-size:13px;letter-spacing:0}.track-slot.filled{cursor:grab}.track-slot.drag-over{border-color:var(--acid);background:#2f2f2f}.song-item:has(.selected){background:#1b1b1b;border-left:3px solid var(--acid)}.song-item .details-btn{background:none;border:0;padding:4px 0;color:#8d8d8d;text-align:left;font-size:10px;text-decoration:underline;cursor:pointer}.account-summary{margin:24px 4vw;display:flex;flex-wrap:wrap;gap:16px}.account-summary>div{flex:1;min-width:180px;background:#121212;padding:22px;border:1px solid var(--line);border-radius:8px}.account-summary span{display:block;color:var(--muted);font-size:11px;margin-bottom:12px}.account-summary strong{font-size:14px}.mobile-switch{display:none}.skip-link{position:fixed;top:-100px;left:15px;z-index:200;background:var(--acid);color:#070707;padding:16px}.skip-link:focus{top:10px}.import-label{text-align:center;cursor:pointer}.slot-btn{min-width:30px;height:32px}.rail-link small{letter-spacing:.8px}.rail-links{gap:7px}.rail .brand-icon{margin-bottom:30px}.rankings-panel select{margin:0 10px 20px 0;max-width:100%}.album-heading{flex-wrap:wrap}@media(max-width:920px){.mobile-switch{display:flex;gap:10px;padding:20px 14px 0}.mobile-switch .btn{flex:1}.builder-grid .tracklist-pane{display:none}.builder-grid.show-tracks .catalog-pane{display:none}.builder-grid.show-tracks .tracklist-pane{display:block}.rail-link small{font-size:8px}.rail-link{padding:5px;width:16%}.stats-strip{grid-template-columns:repeat(2,1fr)}.home-grid{grid-template-columns:1fr}.category-row{flex-wrap:wrap}.hero{min-height:460px}}@media(max-width:420px){.category-row{padding-left:18px;padding-right:18px}.category-row label{width:100%}.hero h1{font-size:78px}.topbar-label{letter-spacing:0}.stats-strip{padding:24px 20px}.feature-card{padding:24px}.rail-link svg{width:20px}.slot-btn{min-width:32px;height:36px}}

/* Expanded tracker catalog */
#dialog-detail{white-space:pre-line;max-height:55vh;overflow:auto}.confirm-dialog{width:min(680px,calc(100vw - 35px))}.song-info strong{white-space:normal;overflow-wrap:anywhere}.song-aliases{opacity:.85}.song-info .details-btn{min-height:30px}.era-tabs{flex-wrap:wrap;max-height:160px;overflow-y:auto}.song-item{min-height:88px}


/* Monochrome studio; color is reserved for era selection. */
:root {--bg:#0B0B0B;--surface:#141414;--surface-up:#1B1B1B;--surface-hov:#232323;--text:#F4F4F4;--muted:#B0B0B0;--muted-dim:#949494;--line:#303030;--line-bright:#606060;--acid:#F0F0F0;--acid-strong:#FFFFFF;--acid-dim:#282828;--red:#C8C8C8}
body {background:var(--bg)}
body::before {background:radial-gradient(ellipse at 85% 0%,#FFFFFF12,transparent 55%);opacity:1}
.hero {background:linear-gradient(115deg,#101010,#232323 65%,#353535);border-bottom-color:#444444}
.hero-description,.hero-pills span {color:#D0D0D0}
.hero-pills span {background:#181818;border-color:#555555}
.art-sleeve {background:linear-gradient(145deg,#FAFAFA,#BEBEBE 42%,#4A4A4A 78%,#171717);color:#111111;border-color:#DDDDDD;box-shadow:22px 29px 1px #00000066,30px 43px 65px #0009}
.sleeve-title span {color:#FFFFFF;-webkit-text-stroke:1px #222222}
.sleeve-bottom,.sleeve-title small {color:#FFFFFF}
.brand-icon {background:#F1F1F1;color:#121212;border-color:#FFFFFF;box-shadow:0 0 25px #FFFFFF0D}
.rail-link {color:#A6A6A6}.rail-link.active {background:#252525;color:#FFFFFF;border-color:#535353}
.page-intro {background:radial-gradient(ellipse at 85% 20%,#343434,#1A1A1A 51%,#101010);border-bottom-color:#353535}
.feature-card {background:linear-gradient(140deg,#242424,#141414)}
.tracklist-pane {background:linear-gradient(180deg,#242424,#141414 50%);border-color:#444444}
.tracklist-pane::before,.progress-fill {background:linear-gradient(90deg,#777777,#F4F4F4);box-shadow:none}
.btn-primary {background:#EEEEEE;color:#111111;box-shadow:0 7px 26px #00000033}
.btn-primary:hover:not(:disabled) {background:#FFFFFF;box-shadow:0 8px 30px #FFFFFF13}
.btn-primary:disabled {background:#383838;color:#AAAAAA}
.song-info small,.song-item .details-btn,.catalog-note,.filter-label,.small-print,.tracklist-subtitle {color:#AAAAAA}
.search-field input::placeholder {color:#999999}
.track-slot.empty .track-slot-name,.track-slot-num,.song-index {color:#959595}
.song-item:has(.selected),.track-slot.filled {background:#292929;border-color:#666666}
.add-btn {background:#282828;border-color:#666666;color:#EEEEEE}.add-btn.selected {background:#EEEEEE;color:#111111}
.catalog-pane::before {content:"";display:block;height:3px;background:var(--era-gradient,linear-gradient(90deg,#777,#EEE))}
.era-tabs {gap:10px;padding-bottom:8px}
.era-btn {position:relative;isolation:isolate;overflow:hidden;background:#1B1B1B;border:1px solid #444444;color:#D9D9D9;padding:12px 14px 15px;box-shadow:none}
.era-btn::after {content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tab-gradient)}
.era-btn:hover {background:#282828;border-color:#999999;color:#FFFFFF}
.era-btn.active {background:linear-gradient(#111111B8,#111111B8),var(--tab-gradient);border-color:#EEEEEE;color:#FFFFFF;box-shadow:0 0 0 1px #FFFFFF18}
.era-btn.active::after {height:4px}
.era-btn.era-all {background:linear-gradient(#111111CD,#111111CD),var(--tab-gradient)}
.era-btn.era-all.active {background:linear-gradient(#11111188,#11111188),var(--tab-gradient)}
.era-btn:focus-visible {outline:2px solid #FFFFFF;outline-offset:3px}

/* Carry the selected era palette through the song selection list. */
#page-builder .song-item {
  background:linear-gradient(#101010DF,#101010DF),var(--era-gradient);
  border-bottom-color:color-mix(in srgb,var(--era-accent) 18%,#202020);
}
#page-builder .song-item:hover {
  background:linear-gradient(#101010CB,#101010CB),var(--era-gradient);
}
#page-builder .song-item:has(.selected) {
  background:linear-gradient(#101010B8,#101010B8),var(--era-gradient);
  border-left-color:var(--era-accent);
}
#page-builder .song-info strong {color:#FFFFFF}
#page-builder .song-info small,#page-builder .song-item .details-btn {color:#D0D0D0}
#page-builder .song-index {color:color-mix(in srgb,var(--era-accent) 55%,#FFFFFF)}
#page-builder .song-item .add-btn {
  background:linear-gradient(#101010A8,#101010A8),var(--era-gradient);
  border-color:color-mix(in srgb,var(--era-accent) 60%,#555555);
  color:#FFFFFF;
}
#page-builder .song-item .add-btn:hover:not(:disabled),
#page-builder .song-item .add-btn.selected {
  background:var(--era-accent);border-color:var(--era-accent);color:var(--era-ink,#101010);
}
#page-builder .song-item .add-btn:focus-visible {outline:2px solid var(--era-accent);outline-offset:3px}