/* Side C: paper jackets, cassette windows and an ordered personal archive. */
.playlists-mode #gallery{opacity:0;visibility:hidden;pointer-events:none}.playlists-mode .disc .disc-rotor{animation-play-state:paused}#newPlaylist{font-size:11px;min-height:44px;letter-spacing:.06em}#newPlaylist span{font-size:18px;margin-left:10px}.add-to-mix{display:flex;justify-content:space-between;width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-top:18px;font-size:10px;color:var(--muted)}.add-to-mix:hover{color:var(--accent)}
#playlists{position:fixed;inset:110px 0 65px;overflow:auto;overscroll-behavior:contain;padding:20px 8vw 30px;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .4s,transform .65s var(--ease),visibility .4s;scrollbar-width:thin}.playlists-mode #playlists{opacity:1;visibility:visible;transform:none}.mix-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:10px}.mix-header h1{font:500 clamp(32px,3vw,44px)/1.3 var(--serif);margin:0;letter-spacing:.08em}.mix-header em{font-style:normal}.mix-intro{display:flex;gap:23px;align-items:center;padding-bottom:3px}.mix-intro p{font-size:11px;line-height:1.9;color:var(--muted);letter-spacing:.06em}.mix-star{font-size:48px;color:var(--accent);line-height:1}.shelf-toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:30px}.shelf-toolbar .collection-tabs{border:0}.shelf-toolbar .eyebrow{padding-bottom:16px;font-size:8px}.shelf-note{font-size:10px;color:var(--muted);line-height:1.7;margin:17px 0 25px}.playlist-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;padding:15px 0 35px}.playlist-card{display:block;width:100%;text-align:left;min-width:0}.mix-art{--mix:#8d5844;--mix-light:#d7ad8c;position:relative;isolation:isolate;aspect-ratio:1.3;background:transparent;overflow:visible;transition:transform .5s var(--ease);color:#272820}.mix-art[data-theme=blue]{--mix:#4e6974;--mix-light:#b9c8c7}.mix-art[data-theme=olive]{--mix:#686d44;--mix-light:#c6c6aa}.mix-art:after{display:none}.mix-art-top{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.18em;border-bottom:1px solid #24221e40;padding-bottom:12px}.mix-art .volume{font:italic clamp(55px,6.3vw,100px)/1 var(--serif);letter-spacing:-.06em;position:absolute;left:22px;top:49px;color:var(--mix)}.mix-art .mix-art-title{position:absolute;left:24px;right:21px;bottom:29px;font:500 clamp(22px,2.3vw,35px)/1.3 var(--serif);white-space:pre-line;z-index:3;overflow-wrap:anywhere}.mix-art .mix-art-title small{display:block;font:8px var(--sans);letter-spacing:.2em;margin-bottom:10px}.cassette{position:absolute;top:33%;left:10%;width:80%;height:39%;border-radius:8px;background:var(--mix);transform:rotate(-9deg);box-shadow:3px 10px 18px #24221e30,inset 0 0 0 1px #ffffff30;transition:transform .65s var(--ease);overflow:hidden}.cassette:before{content:'';position:absolute;left:7%;right:7%;top:12%;bottom:26%;background:#eee8d8;border-radius:3px;box-shadow:inset 0 0 0 1px #24221e40}.cassette:after{content:'';position:absolute;left:26%;right:26%;bottom:-3%;height:25%;background:#24221e16;border:1px solid #24221e30;transform:perspective(50px) rotateX(18deg)}.cassette-label{position:absolute;top:16%;left:12%;right:12%;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.12em}.tape-window{position:absolute;left:15%;right:15%;top:34%;height:26%;background:#292a24;border-radius:30px;display:flex;justify-content:space-between;align-items:center;padding:0 7%;box-shadow:inset 0 2px 3px #00000080}.reel{width:25%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#e2dece 0deg 32deg,#53554c 32deg 58deg);border:4px solid #b5b3a4;box-shadow:0 0 0 1px #1b1c16;position:relative;transition:transform 1s var(--ease)}.reel:after{content:'';position:absolute;inset:31%;border-radius:50%;background:#262720}.tape-window>span{width:28%;height:50%;background:linear-gradient(90deg,#525047,#272823,#525047);border:1px solid #9a998c70}.tape-side{position:absolute;bottom:9%;left:9%;font-size:9px;letter-spacing:.1em;color:#f1ebdd}.tape-screw{position:absolute;bottom:7%;right:8%;font-size:11px;color:#f0e8d8}.playlist-card:hover .mix-art{transform:translateY(-5px)}.playlist-card:hover .cassette{transform:translateY(-3px) rotate(0deg)}.playlist-card:hover .reel{transform:rotate(120deg)}.card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.playlist-card h2{font:500 28px/1.3 var(--serif);margin:14px 0 7px;display:flex;justify-content:space-between;gap:10px}.playlist-card h2>span{font:20px var(--sans)}.playlist-card p{font-size:10px;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.new-mix-card{border:1px dashed #24221e40;min-height:285px;aspect-ratio:1 / 1.04;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:background .3s;text-align:center}.new-mix-card:hover{background:#24221e04}.new-mix-card>span:first-child{font:45px var(--serif);color:var(--accent)}.new-mix-card strong{font:26px var(--serif)}.new-mix-card small{font-size:10px;color:var(--muted);line-height:1.8}.mix-footer{display:none}
.mix-detail-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 32px}.mix-detail-top button{min-height:38px;font-size:11px}.mix-detail-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr);gap:8vw;padding-bottom:50px}.mix-detail-cover{position:sticky;top:20px;align-self:start;min-width:0}#mixArtwork .mix-art{aspect-ratio:1.05;max-width:480px}#mixArtwork .volume{font-size:100px}#mixArtwork .mix-art-title{font-size:34px}.mix-cover-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:21px;padding-top:13px}.mix-cover-foot .eyebrow{font-size:8px}#mixTitle{font:500 clamp(28px,3vw,43px)/1.3 var(--serif);margin:17px 0 12px;overflow-wrap:anywhere;outline:none}#mixDescription{font-size:12px;line-height:1.9;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}.mix-actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px}.mix-actions button{font-size:11px;border-bottom:1px solid var(--ink);padding:8px 0}.mix-storage-note{font-size:9px;color:var(--muted);line-height:1.8;margin-top:18px}.mix-track-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding:16px 0;font-size:9px;color:var(--muted);letter-spacing:.1em}#mixTracks{list-style:none}.mix-track{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);min-height:78px}.mix-track>span:first-child{font:italic 15px var(--serif);color:var(--muted);width:22px;flex-shrink:0}.mix-track-info{flex:1;min-width:0}.mix-track-info strong{font:500 23px/1.3 var(--serif);display:block;overflow-wrap:anywhere}.mix-track-info small{font-size:9px;line-height:1.5;color:var(--muted);display:block;margin-top:5px}.mix-track>time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.mix-row-actions{display:flex;align-items:center;gap:1px}.mix-row-actions button,.mix-row-actions a{display:flex;justify-content:center;align-items:center;min-width:28px;min-height:40px;font-size:14px;color:var(--muted)}.mix-row-actions button:disabled{opacity:.23;cursor:default}.mix-row-actions button:not(:disabled):hover,.mix-row-actions a:hover{color:var(--accent)}.mix-track-foot{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em;gap:15px;color:var(--muted);padding-top:20px;line-height:1.8}
#playlistDialog{width:min(660px,calc(100% - 32px))}#playlistDialog h2{font-size:30px;margin-top:15px}.playlist-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.theme-picker{border:0;display:flex;align-items:center;gap:20px;margin-top:24px}.theme-picker legend{font-size:11px;margin-bottom:9px}.theme-picker label{margin:0;display:flex;align-items:center;gap:5px;cursor:pointer;font-size:10px}.theme-picker input{width:auto;margin:0;accent-color:var(--accent)}.swatch{width:12px;height:12px;border-radius:50%}.clay{background:#b96143}.blue{background:#4e6974}.olive{background:#686d44}.song-picker-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:11px}.song-picker-head small{font-size:10px;color:var(--accent);margin-left:7px;white-space:nowrap}.song-picker-head label{margin:0;max-width:45%}.song-picker-head input{font-size:11px;padding:6px 0}.song-picker{max-height:230px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.song-picker label{display:flex;align-items:center;gap:12px;border-bottom:1px solid #24221e12;padding:10px 2px;margin:0;cursor:pointer}.song-picker input{width:16px;height:16px;accent-color:var(--accent);margin:0;flex-shrink:0}.song-picker label>span{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--ink);flex:1}.song-picker strong{font-size:12px;font-weight:400}.song-picker small{font-size:9px;color:var(--muted);margin:0}.song-picker time{font-size:10px;color:var(--muted)}.picker-note{margin-top:10px;font-size:9px!important;color:var(--muted)}#playlistError{color:var(--accent);margin-top:10px}#playlistChoices{margin-top:20px;max-height:240px;overflow:auto}#playlistChoices button{width:100%;display:flex;align-items:center;gap:12px;min-height:58px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}#playlistChoices button small{margin-left:auto;color:var(--muted);font-size:10px}#playlistChoices button:disabled{opacity:.5;cursor:default}#addingSongName{font-size:12px;color:var(--muted);line-height:1.7}
@media(max-width:1000px){.mix-intro{display:none}#playlists{padding-left:4vw;padding-right:4vw}.playlist-cards{gap:25px 18px}.mix-art{padding:16px}.mix-art-top{font-size:6px}.mix-art .volume{left:16px;top:44px;font-size:65px}.mix-art .mix-art-title{left:16px;bottom:20px;font-size:23px}.mix-art .mix-art-title small{font-size:7px}.playlist-card h2{font-size:21px}.mix-detail-layout{gap:5vw;grid-template-columns:minmax(240px,.85fr) minmax(320px,1.15fr)}.mix-track{gap:10px}.mix-track-info strong{font-size:20px}.mix-row-actions button,.mix-row-actions a{min-width:24px}.cassette-label{font-size:6px}.reel{border-width:3px}}
@media(max-width:700px){.navigation{padding:0 16px}.brand{font-size:10px}.brand-mark{font-size:20px}.mode-switch{left:56%;gap:15px}.mode-switch button{font-size:11px}#newPlaylist{font-size:10px;max-width:54px;line-height:1.7}#newPlaylist span{font-size:13px;margin-left:2px}.add-to-mix{grid-column:1/-1;margin-top:16px;padding:11px 0}.collection-note{margin-top:12px}#playlists{inset:70px 0 0;padding:27px 24px 0}.mix-header{padding-bottom:25px}.mix-header h1{font-size:33px;line-height:1.4;letter-spacing:0;margin-top:12px}.mix-header .eyebrow{font-size:7px;letter-spacing:.13em}.shelf-toolbar{margin-top:25px}.shelf-toolbar>.eyebrow{display:none}.shelf-note{font-size:9px;margin:16px 0 22px}.playlist-cards{grid-template-columns:1fr;gap:30px}.mix-art{aspect-ratio:1.16;padding:22px}.mix-art-top{font-size:7px}.mix-art .volume{font-size:85px;left:22px;top:47px}.mix-art .mix-art-title{font-size:29px;left:23px;bottom:24px}.mix-art .mix-art-title small{font-size:7px}.cassette{top:31%;height:39%}.cassette-label{font-size:7px}.playlist-card h2{font-size:25px}.playlist-card p{font-size:11px}.card-meta{margin-top:15px}.new-mix-card{min-height:220px;aspect-ratio:1.5}.mix-footer{font-size:8px;letter-spacing:.02em;gap:18px}.mix-detail-top{margin-bottom:22px;gap:10px}.mix-detail-top button{font-size:10px}.mix-detail-top .eyebrow{font-size:7px}.mix-detail-layout{display:block}.mix-detail-cover{position:relative;top:auto}#mixArtwork .mix-art{aspect-ratio:1.2}#mixArtwork .mix-art-title{font-size:30px}#mixArtwork .volume{font-size:85px}.mix-cover-foot{margin-top:16px}#mixTitle{font-size:31px}.mix-track-section{margin-top:26px}.mix-track-info strong{font-size:19px}.mix-track{gap:9px;min-height:83px}.mix-track>span:first-child{width:17px;font-size:12px}.mix-track>time{font-size:9px}.mix-row-actions{gap:0}.mix-row-actions button,.mix-row-actions a{min-width:25px;font-size:13px}.mix-row-actions{flex-wrap:wrap;max-width:52px}.mix-track-foot{font-size:7px}#playlistDialog{padding:22px}#playlistDialog h2{font-size:25px}.playlist-form-grid{grid-template-columns:1fr;gap:0}.playlist-form-grid label{margin-top:16px}.theme-picker{gap:15px}.song-picker-head{gap:10px;font-size:10px}.song-picker-head label{max-width:44%}.song-picker-head input{font-size:10px}.song-picker{max-height:210px}}
@media(max-width:370px){.brand{font-size:0}.brand-mark{font-size:24px}.mode-switch{left:49%;gap:18px}.mix-header h1{font-size:29px}.mix-track-info strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.mix-art,.cassette,.reel{transition:none}}
.shelf-note-line{display:flex;justify-content:space-between;gap:18px;align-items:baseline}.shelf-note-line button{font-size:10px;color:var(--accent);flex-shrink:0}.trash-playlist{display:block;font-size:10px;color:var(--muted);margin:18px auto 0;border-bottom:1px solid var(--line);padding-bottom:4px}

/* Leave a clean title area under the tape. */
.cassette{top:27%;height:32%}
@media(max-width:700px){.cassette{top:26%;height:32%}}

.mix-detail-layout{animation:mix-enter .55s var(--ease) both}
@keyframes mix-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mix-detail-layout{animation:none}}

/* Cassette objects float directly over the painting, without poster frames. */
.cassette{top:15%;left:2%;width:96%;height:65%;transform:rotate(-4deg);box-shadow:2px 18px 24px -12px #26372f60,inset 0 0 0 1px #ffffff40}
.playlist-card:nth-child(2) .cassette{transform:rotate(3deg)}
.playlist-card:nth-child(3) .cassette{transform:rotate(-2deg)}
.playlist-card:hover .cassette{transform:translateY(-3px) rotate(0deg)}
.cassette-label{font-size:10px;letter-spacing:.04em}.tape-side{font-size:10px}
.shelf-note{font-size:11px;margin:12px 0 14px}.collection-tabs{border:0}.collection-tabs button{font-size:13px;padding-bottom:12px}
#mixArtwork .mix-art{aspect-ratio:1.3}.mix-cover-foot{display:none}.mix-detail-top{margin-bottom:24px}
@media(max-width:1000px) and (min-width:701px){.playlist-cards{gap:28px}.cassette-label{font-size:8px}}
@media(max-width:700px){
 #playlists{inset:90px 0 60px;padding:20px 26px 30px}.mix-header{padding-bottom:10px}.mix-header h1{font-size:30px;margin:0}.shelf-toolbar{margin-top:24px}
 .playlist-cards{grid-template-columns:1fr;gap:35px;padding:10px 10px 25px}.mix-art{aspect-ratio:1.5;padding:0}.cassette{top:12%;height:74%;left:2%;width:96%}.card-meta{margin-top:4px;padding-top:12px}.playlist-card h2{font-size:25px;margin-top:10px}
 .navigation{padding:0 22px}.brand{font:14px var(--serif)}.mode-switch{left:54%;gap:20px}
 #mixArtwork .mix-art{aspect-ratio:1.5}.mix-track-section{margin-top:24px}
}