@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#F5EFE5;background:#141214;color-scheme:dark;--muted:#A69D9D;--accent:#E34246}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}header{height:104px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;gap:32px;margin:0 5%;}.brand{font:700 40px 'Space Grotesk',sans-serif;text-decoration:none;letter-spacing:-3px}.brand span{color:var(--accent);margin-left:4px}.tagline,.eyebrow,.section-label,footer,label,.collection-links{font-size:10px;letter-spacing:1.7px;font-weight:700}.tagline{color:var(--muted)}header button{margin-left:auto}.outline{background:transparent;border:1px solid #ffffff35;color:#F5EFE5;padding:12px 17px;border-radius:7px}.outline:hover{border-color:var(--accent)}main{max-width:1400px;margin:auto;padding:55px 5% 60px}.eyebrow{color:var(--accent);margin-bottom:20px}h1{font:500 clamp(42px,5vw,67px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:0}h1 em{font-style:normal;color:var(--accent)}.intro{position:relative;margin-bottom:48px}.intro>p{position:absolute;bottom:0;left:56%;color:var(--muted);font-size:15px;line-height:1.8}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:42px}.section-label{display:flex;justify-content:space-between;color:var(--muted);padding-bottom:20px}.duel{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative}.duel:has(.track):after{content:'VS';position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);background:#141214;border:1px solid #ffffff30;border-radius:50%;padding:13px 10px;font:700 11px 'Space Grotesk';pointer-events:none}.track{border:1px solid #ffffff22;background:#211E20;color:inherit;border-radius:12px;min-height:312px;text-align:left;padding:25px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .16s,border-color .16s}.track:nth-child(2){background:#211E20}.track:hover{transform:translateY(-4px);border-color:var(--accent)}.track:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.track .number{font-size:10px;letter-spacing:2px;color:#B7ACAA}.record{width:85px;height:85px;border-radius:50%;background:repeating-radial-gradient(circle,#393335 0px,#393335 2px,#292427 3px,#292427 6px);margin:26px 0 23px;display:grid;place-items:center}.record:after{content:'';width:27px;height:27px;border-radius:50%;background:var(--accent);border:10px solid #A92F35}.track:nth-child(2) .record:after{background:#E34246;border-color:#A92F35}.track h2{font:500 25px/1.16 'Space Grotesk';margin:0 0 8px;overflow-wrap:anywhere}.artist{color:#BEB3AF;font-size:14px;margin-bottom:25px}.choose{margin-top:auto;border-top:1px solid #ffffff19;padding-top:17px;font-size:12px;display:flex;justify-content:space-between}.choose b{color:var(--accent)}.controls{display:flex;justify-content:space-between;margin-top:17px}.text-button{background:none;border:0;color:#B9AEAA;padding:8px 0;font-size:12px}.text-button:hover{color:var(--accent)}button:disabled{opacity:.3;cursor:default}.hint{text-align:center;color:#A29895;font-size:12px;line-height:1.9;margin:26px 0}.hint span{display:block;font-size:10px;color:#8F8583}.collection-links{display:flex;align-items:center;gap:22px;border-top:1px solid #ffffff15;padding-top:24px;color:#A29895}.collection-links a{font-size:12px;letter-spacing:0;text-decoration:none}.live{color:var(--accent);font-size:9px}.row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff12}.position{font:500 15px 'Space Grotesk';color:#9E9391;width:22px}.row:first-child .position{color:var(--accent)}.row-info{flex:1;min-width:0}.row-title{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row-artist{color:#A29895;font-size:11px;margin-top:5px}.score{font:12px 'Space Grotesk';color:#BAAFAB}.ranking-note,details{color:#A29895;font-size:11px;line-height:1.7}.ranking-note{margin-top:22px}summary{cursor:pointer}footer{border-top:1px solid #ffffff15;margin:0 5%;padding:25px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#9C918F;font-size:9px}footer div{display:flex;gap:20px}#saveStatus{letter-spacing:0}.empty{grid-column:1/-1;border:1px dashed #504447;border-radius:12px;padding:55px 25px;text-align:center;color:var(--muted);line-height:1.8}.empty h2{color:#F5EFE5}.primary{border:0;border-radius:7px;background:var(--accent);color:#141214;font-weight:700;padding:14px 20px}.empty button{margin-top:12px}dialog{background:#211E20;color:#F5EFE5;border:1px solid #51464A;border-radius:15px;padding:28px;width:min(600px,94vw);max-height:90vh}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.dialog-header h2{font:500 29px 'Space Grotesk';margin:0}dialog p{font-size:13px;color:#B9AEAA;line-height:1.7}textarea{width:100%;padding:15px;margin:10px 0;background:#141214;color:#F5EFE5;border:1px solid #594C50;border-radius:7px;font:14px/1.8 inherit;resize:vertical}.dialog-actions{display:flex;justify-content:space-between;gap:10px}.small{font-size:11px}#notice{color:var(--accent);font-size:12px;min-height:24px}#formMessage{color:var(--accent)}@media(max-width:1000px){.workspace{grid-template-columns:1fr 260px;gap:25px}.track{padding:20px}.track h2{font-size:22px}.tagline{display:none}}@media(max-width:760px){header{height:80px}main{padding-top:35px}.intro{margin-bottom:32px}.intro>p{position:static;margin-top:20px;font-size:13px}.workspace{grid-template-columns:1fr;gap:35px}.track{padding:17px;min-height:290px}.track h2{font-size:21px}.duel{gap:12px}.record{width:65px;height:65px}.duel:has(.track):after{padding:10px 7px;font-size:9px}.choose{font-size:11px}.artist{font-size:12px}.collection-links{gap:18px}footer{flex-wrap:wrap}.tagline{display:none}h1{letter-spacing:-2px}.dialog-actions{flex-direction:column}aside{padding-top:22px;border-top:1px solid #ffffff20}}

/* Milano After Dark: Italian green appears in status details, equally weighted cards. */
:root{--italian-green:#497663;--status-text:#97B7A6}
.live{color:var(--status-text)}
#notice,#formMessage{color:var(--status-text)}
#saveStatus::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--italian-green);margin-right:7px}

/* Tricolor identity, with green present in the primary voting area. */
:root{--italian-green:#497663;--green-accent:#73AE91}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:32px;letter-spacing:-1.6px;white-space:nowrap}
.brand span{margin-left:0;color:inherit}
.brand .brand-ranking{font-weight:400;color:var(--green-accent)}
.brand .brand-mark{display:flex;align-items:flex-end;gap:4px;height:30px;flex-shrink:0}
.brand-mark i{display:block;width:5px;border-radius:2px;background:var(--italian-green);height:17px}
.brand-mark i:nth-child(2){height:24px;background:#F5EFE5}
.brand-mark i:nth-child(3){height:30px;background:var(--accent)}
.eyebrow{color:var(--green-accent)}
.section-label>span:first-child{border-left:3px solid var(--italian-green);padding-left:10px}
.record:after,.track:nth-child(2) .record:after{background:var(--green-accent);border-color:var(--italian-green)}
.track:hover{border-color:var(--green-accent)}
.track:focus-visible{outline-color:var(--green-accent)}
.artist{margin-bottom:0}
.track{min-height:275px}
@media(max-width:760px){.track{min-height:255px}.brand{font-size:27px;gap:9px}.brand .brand-mark{height:25px;gap:3px}.brand-mark i{width:4px;height:14px}.brand-mark i:nth-child(2){height:20px}.brand-mark i:nth-child(3){height:25px}header{gap:12px}header .outline{padding:10px;font-size:12px}}
@media(max-width:380px){.brand{font-size:23px;letter-spacing:-1.2px}header .outline{font-size:11px;padding:9px 7px}}

/* Compact intro: supporting copy uses the second column on tablets too. */
.intro{display:grid;grid-template-columns:1.15fr 1fr;column-gap:32px;align-items:end;margin-bottom:32px}
.intro .eyebrow{grid-column:1/-1;margin-bottom:14px}
.intro h1{font-size:clamp(36px,4.4vw,58px)}
.intro>p{position:static;margin:0 0 3px;font-size:14px;line-height:1.7}
main{padding-top:36px}
#collection{width:min(780px,94vw)}
#songSearch{width:100%;padding:12px 14px;margin:10px 0;background:#141214;border:1px solid #594C50;border-radius:7px;color:#F5EFE5;font:inherit}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;font-size:12px;color:var(--muted)}
#songFilter{font:inherit;background:#141214;border:1px solid #594C50;border-radius:6px;padding:8px;color:#F5EFE5}
.song-list{max-height:340px;overflow:auto;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}
.library-song{display:flex;align-items:center;gap:16px;padding:14px 2px;border-bottom:1px solid #ffffff12}
.library-info{flex:1;min-width:0}.library-info strong{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere;font-weight:500}.library-info span{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:4px}
.song-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}.song-actions .outline{font-size:12px;padding:8px 11px;min-width:72px}.delete-song{color:#EB8A8D}.is-excluded .library-info{opacity:.6}.is-excluded .outline{color:var(--green-accent)}
#libraryMessage{color:var(--status-text);min-height:20px}.add-section{margin:22px 0}.add-section>summary{font-size:14px;color:#F5EFE5}.library-empty{padding:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:520px){.intro{grid-template-columns:1fr;gap:12px}.intro .eyebrow{margin-bottom:0}.intro>p{font-size:13px}.intro h1{font-size:38px}.library-song{align-items:flex-start;gap:10px}.song-actions{flex-direction:column;gap:2px}.library-info strong{font-size:13px}#collection{padding:20px}.library-toolbar{font-size:11px}}
/* Separate listening from voting so a preview never counts as a choice. */
.track{padding:0;min-height:270px}
.vote-target{display:flex;flex:1;flex-direction:column;align-items:flex-start;width:100%;padding:23px;border:0;background:transparent;color:inherit;text-align:left}
.vote-target .artist{margin-bottom:0}
.listen-button{align-self:flex-start;margin:0 23px 21px;padding:9px 12px;border:1px solid var(--italian-green);border-radius:6px;background:#26392f;color:#d9f2df;font-size:12px;font-weight:700}
.listen-button:hover{background:#31513f}
.preview-panel{margin-top:18px;border:1px solid #51464A;border-radius:11px;background:#211e20;padding:18px}
.preview-panel[hidden]{display:block;position:fixed;left:0;top:0;width:min(600px,100vw);height:152px;margin:0;padding:0;opacity:0;pointer-events:none;overflow:hidden;z-index:-1}
.preview-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.preview-heading .eyebrow{display:block;margin:0 0 5px;font-size:9px}.preview-heading strong{font-size:14px}
#previewMount iframe{display:block;width:100%;border:0;border-radius:8px}
#previewMount iframe[src*="youtube"]{height:300px}
#previewNote{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
#previewNote:empty{display:none}
.preview-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.preview-actions .outline{padding:8px 11px;font-size:11px}
.preview-actions a{color:var(--green-accent);font-size:12px;text-decoration:none}
.preview-actions a:hover{text-decoration:underline}
.spotify-pool{position:relative;width:100%;height:0}
.spotify-pool:has(.spotify-entry.active){height:152px}
.spotify-entry{position:absolute;left:0;top:0;width:100%;height:152px;opacity:0;pointer-events:none}
.spotify-entry.active{opacity:1;pointer-events:auto;z-index:1}
.source-song{color:var(--green-accent)}
@media(max-width:760px){.track{min-height:255px}.vote-target{padding:16px}.listen-button{margin:0 16px 16px;font-size:11px;padding:8px}.song-actions{gap:4px}#previewMount iframe[src*="youtube"]{height:230px}}