/* The listening room: Soulseek finds, one full-quality server, and the real /listen app.
   A night chapter between the cream reading room and the green "every screen" one:
   the music room's own painting behind, the phone app's green as the only cool note. */
.music-chapter{--ink:#fbefe0;--muted:#dcc8b6;--faint:#ad9784;--border:#efc9a02e;--listen:#6dd58c;--panel:rgba(26,15,13,.74);
  position:relative;isolation:isolate;overflow:clip;background:#1b1210;color:var(--ink);border-block:1px solid #5a3a2a}
.music-backdrop{position:absolute;inset:-6% 0;z-index:-1;pointer-events:none}
.music-backdrop img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;opacity:.42;filter:saturate(.95) brightness(.62)}
.music-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 72% 58%,#ff9a5a22,transparent 55%),linear-gradient(180deg,#1b1210 0%,#1b1210c4 22%,#1b121066 48%,#1b1210d8 82%,#1b1210 100%)}
.music-chapter .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* heading: the promise on the left, three plain lines on the right */
.music-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,76px);align-items:start;margin-bottom:58px}
.music-title .eyebrow{display:flex;align-items:center;gap:12px;color:var(--peach)}
.music-eyebrow-mark img{width:30px;height:30px;display:block;filter:drop-shadow(0 4px 6px #0008)}
.music-title h2{margin-top:18px}
.music-lead>p{font-size:17px;line-height:1.75;max-width:52ch;color:var(--muted);text-wrap:pretty}
.music-pillars{list-style:none;margin:26px 0 0;padding:0;display:grid}
.music-pillar{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:center;padding-block:15px;border-top:1px solid var(--border)}
.music-pillar:last-child{border-bottom:1px solid var(--border)}
.music-pillar-mark img{width:46px;height:46px;display:block;filter:drop-shadow(0 6px 8px #0009)}
.music-pillar b{display:block;font:500 19px/1.3 Hearth,ui-rounded,sans-serif;color:#fff1dc}
.music-pillar small{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted);max-width:60ch;text-wrap:pretty}

/* the bench: catalogue · the phone · the server, ending together */
.music-bench{--listen-w:318px;display:grid;grid-template-columns:minmax(0,1.14fr) auto minmax(0,.86fr);grid-template-areas:"crate phone hifi";gap:clamp(22px,2.6vw,38px);align-items:stretch}
.crate{grid-area:crate}.listen-device{grid-area:phone}.hifi{grid-area:hifi}
.crate,.hifi{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 24px 50px #0a050466,inset 0 1px 0 #ffe2c014;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.crate-head{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.crate-head-mark img{width:40px;height:40px;display:block;filter:drop-shadow(0 4px 6px #0009)}
.crate-head h3{font:500 19px/1.25 Hearth,ui-rounded,sans-serif;color:#fff1dc}
.crate-head p{font-size:12px;margin-top:2px;color:var(--faint)}
.crate-head .demo-tag{flex:none}

/* the catalogue: a real field, filtering as you type */
.crate-search{position:relative;display:flex;align-items:center;margin-top:16px}
.crate-search-glass{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;pointer-events:none}
.crate-search input{width:100%;min-height:46px;padding:10px 44px 10px 42px;border-radius:12px;border:1px solid var(--border);background:#0d0807a8;color:var(--ink);font:500 16px/1.2 Hearth,ui-rounded,sans-serif;-webkit-appearance:none;appearance:none}
.crate-search input::placeholder{color:#a8927f}
.crate-search input::-webkit-search-cancel-button{display:none}
.crate-search input:focus-visible{outline:3px solid var(--outline);outline-offset:2px}
.crate-clear{position:absolute;right:4px;width:40px;height:40px;border:0;border-radius:9px;background:none;color:var(--muted);font-size:20px;line-height:1}
.crate-clear:hover{background:#ffffff12}
.crate-list{list-style:none;margin:12px -6px 0;padding:0 6px;flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b4c3b transparent;
  -webkit-mask:linear-gradient(#000 calc(100% - 26px),transparent);mask:linear-gradient(#000 calc(100% - 26px),transparent);padding-bottom:22px}
.crate-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px 4px;border-bottom:1px solid #efc9a01a}
.crate-row[hidden]{display:none}
.crate-cover img{width:56px;height:56px;border-radius:8px;object-fit:cover;display:block;box-shadow:0 6px 12px #0008}
.crate-what{min-width:0;display:grid;gap:2px}
.crate-what b{font-size:14px;line-height:1.3;color:#fff1dc;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}
.crate-what small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crate-pick{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden}
.crate-pick i{font-style:normal;font-weight:650;letter-spacing:.02em;color:#0f1a12;background:var(--listen);border-radius:5px;padding:2px 6px;flex:none}
.crate-passed{font-size:11px;line-height:1.45;color:#9c8573;text-wrap:pretty;text-decoration:line-through;text-decoration-color:#9c857388}
.crate-act{display:flex}
.crate-get,.crate-play{min-height:40px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:10px;padding:8px 12px;font:600 13px/1 system-ui,sans-serif;border:1px solid var(--border);background:#ffffff0d;color:var(--ink);transition:background .18s,transform .18s,border-color .18s}
.crate-get:hover{background:#ffffff1a;border-color:#efc9a066}
.crate-get:active,.crate-play:active{transform:scale(.96)}
.crate-play{background:var(--listen);color:#0f1a12;border-color:#9ff0b7}
.crate-play:hover{background:#86e3a1}
.crate-meter{position:absolute;left:73px;right:4px;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.crate-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--peach),var(--listen));transform:scaleX(0);transform-origin:left}
.crate-row[data-state=fetching] .crate-meter i{transition:transform 1.1s cubic-bezier(.45,.05,.3,1);transform:scaleX(1)}
.crate-row[data-state=home] .crate-meter{display:none}
.crate-filed{grid-column:2/-1;font-size:11px;color:var(--listen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crate-row[data-state=home] .crate-passed{display:none}
.crate-empty{margin:18px 4px;font-size:13px;line-height:1.6;color:var(--muted)}
/* What a narrowed crate leaves behind: the painted crate fills it, and gives the room back as rows return. */
.crate-rest{flex:1 1 0;min-height:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;color:var(--faint);font-size:12px;text-align:center}
.crate-rest img{width:min(150px,60%,52cqh);height:auto;aspect-ratio:1;object-fit:contain;opacity:.88;filter:drop-shadow(0 14px 20px #0009)}
@container (max-height:150px){.crate-rest img,.crate-rest span{display:none}}
.crate:has(.crate-empty:not([hidden])) .crate-rest span{display:none}
.crate .demo-caption,.hifi .demo-caption{margin-top:auto;padding-top:12px;color:var(--faint)}

/* the phone: the actual app in a sandbox, scaled into a frame */
.listen-device{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.listen-phone{position:relative;padding:11px;border-radius:56px;background:linear-gradient(150deg,#3a2b23,#120c0a 40%,#24190f);box-shadow:0 0 0 1px #6b4a35,0 40px 70px #070302aa,0 0 90px #ff9a5a1f,inset 0 1px 1px #ffffff2a}
.listen-phone::before{content:"";position:absolute;left:50%;top:21px;width:96px;height:27px;margin-left:-48px;border-radius:20px;background:#050404;z-index:3;pointer-events:none}
.listen-screen{position:relative;width:var(--listen-w);height:calc(var(--listen-w) * 844 / 390);border-radius:45px;overflow:hidden;background:#0e1210;isolation:isolate}
.listen-screen iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform:scale(calc(var(--listen-w) / 390px));transform-origin:0 0;opacity:0;transition:opacity .45s ease}
.listen-screen[data-ready] iframe{opacity:1}
.listen-loader{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;text-align:center;background:radial-gradient(ellipse at 50% 38%,#1f2b22,#0e1210 70%);transition:opacity .4s ease,visibility .4s}
.listen-screen[data-ready] .listen-loader{opacity:0;visibility:hidden}
.listen-loader-art img{width:92px;height:92px;display:block;filter:drop-shadow(0 10px 14px #000a);animation:listen-sway 3.2s ease-in-out infinite}
.listen-loader b{font:500 18px Hearth,ui-rounded,sans-serif;color:#e1e3df;margin-top:6px}
.listen-loader small{font-size:12px;color:#a6b2a8}
@keyframes listen-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-3px)}}
.listen-device figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13px;color:var(--muted)}
.listen-device figcaption b{color:#fff1dc;font-weight:650}

/* the server: what is playing, at what quality, and who else is in */
.hifi-now{display:grid;justify-items:center;gap:16px;padding:22px 0 18px;text-align:center}
.hifi-record{position:relative;width:176px;height:176px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle,#0000 30%,#0000 31%),repeating-radial-gradient(circle,#141110 0 1.5px,#221d1b 1.5px 3.2px);
  box-shadow:0 18px 30px #000a,0 0 0 1px #3d2c22,inset 0 0 0 7px #0d0a09}
.hifi-record::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#ffffff00 0 10%,#ffffff1c 14%,#ffffff00 20% 55%,#ffd9b014 62%,#ffffff00 70%);pointer-events:none}
.hifi-label{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #0d0a09,0 0 0 4px #5b4232}
.hifi-label img{width:100%;height:100%;object-fit:cover;display:block}
.hifi-label::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#0d0a09;box-shadow:0 0 0 1px #6b4a35}
.hifi-record:focus-visible{outline:3px solid var(--outline);outline-offset:6px}
.hifi[data-playing] .hifi-record{animation:hifi-spin 1.8s linear infinite}
@keyframes hifi-spin{to{transform:rotate(360deg)}}
.hifi-track{display:grid;gap:3px;min-width:0;width:100%}
.hifi-track small{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hifi[data-playing] .hifi-track small{color:var(--listen)}
.hifi-track b{font:500 19px/1.3 Hearth,ui-rounded,sans-serif;color:#fff1dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hifi-track>span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hifi-track .hifi-spec{justify-self:center;margin-top:6px;font-size:11px;font-weight:650;letter-spacing:.02em;color:#0f1a12;background:var(--listen);border-radius:5px;padding:3px 8px}
.hifi[data-quality]:not([data-quality=original]) .hifi-spec{background:var(--peach)}
.hifi-quality{padding:14px 0 16px;border-top:1px solid var(--border)}
.hifi-quality-label{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.hifi-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;gap:4px;border:1px solid var(--border);border-radius:12px;background:#0d0807a8}
.hifi-switch button{min-height:38px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 13px/1 system-ui,sans-serif;white-space:nowrap;transition:background .18s,color .18s}
.hifi-switch button[aria-pressed=true]{background:var(--peach);color:var(--deep)}
.hifi-switch button:not([aria-pressed=true]):hover{background:#ffffff12}
.hifi-switch button:disabled{opacity:1;cursor:default}
.hifi-quality-note{margin-top:9px;font-size:12px;color:var(--muted);min-height:1.5em}
.hifi-room{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.hifi-room li{display:grid;grid-template-columns:34px auto minmax(0,1fr);gap:11px;align-items:center;padding-block:10px;border-bottom:1px solid #efc9a01a}
.hifi-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font:600 14px Hearth,ui-rounded,sans-serif;color:#1b1210;background:var(--peach)}
.hifi-avatar-two{background:#c9b3e6}.hifi-avatar-three{background:#9fd6c9}
.hifi-room b{display:block;font-size:13px;color:#fff1dc}.hifi-room small{display:block;font-size:11px;color:var(--faint)}
.hifi-room-what{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.music-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:44px;padding-top:20px;border-top:1px solid var(--border);font-size:13px}
.music-foot p{color:var(--faint)}.music-foot p a{color:var(--peach);text-decoration:underline;text-underline-offset:4px}

/* the album flying from the crate to the phone */
.crate-flight{position:fixed;z-index:60;border-radius:8px;overflow:hidden;pointer-events:none;box-shadow:0 14px 30px #000a}
.crate-flight img{width:100%;height:100%;object-fit:cover;display:block}

/* the strip's new stop */
.house-music .house-mark>img{width:48px;height:48px}

/* tablet: catalogue beside the phone, the server underneath */
@media(max-width:1180px){
  .music-bench{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"crate phone" "hifi hifi"}
  .hifi{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head head" "now quality room" "cap cap cap";column-gap:28px;align-items:start}
  .hifi>.crate-head{grid-area:head}.hifi-now{grid-area:now;padding:20px 0 0}.hifi-quality{grid-area:quality;border-top:0;padding-top:20px}.hifi-room{grid-area:room;border-top:0;margin-top:14px}.hifi>.demo-caption{grid-area:cap}
  .hifi-record{width:150px;height:150px}
  .hifi-now .hifi-track{max-width:190px}
}
@media(max-width:900px){
  .music-heading{grid-template-columns:1fr;gap:26px;margin-bottom:44px}
  .hifi{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "now quality" "now room" "cap cap"}
}
@media(max-width:700px){
  .music-bench{--listen-w:min(300px,calc(100vw - 92px));grid-template-columns:minmax(0,1fr);grid-template-areas:"phone" "crate" "hifi";gap:26px}
  .listen-phone{padding:9px;border-radius:50px}.listen-phone::before{top:18px;width:84px;height:24px;margin-left:-42px}.listen-screen{border-radius:41px}
  .crate-list{flex:none;overflow:visible;-webkit-mask:none;mask:none;padding-bottom:0}
  .hifi{display:flex;align-items:stretch}.hifi-now{padding:20px 0 16px}.hifi-quality{border-top:1px solid var(--border);padding-top:14px}.hifi-room{margin-top:0;border-top:1px solid var(--border)}
  .hifi-record{width:160px;height:160px}.hifi-now .hifi-track{max-width:none}
  .music-pillar{grid-template-columns:46px minmax(0,1fr);gap:13px}.music-pillar-mark img{width:42px;height:42px}
  .music-foot{flex-direction:column;align-items:flex-start;gap:12px}
  .crate-row{grid-template-columns:52px minmax(0,1fr);gap:10px 11px;align-items:start}.crate-cover img{width:52px;height:52px}
  .crate-act{grid-column:2}.crate-rest{display:none}
  .crate-meter{left:67px}
}
@media(prefers-reduced-motion:reduce){.hifi[data-playing] .hifi-record,.listen-loader-art img{animation:none}.listen-screen iframe,.listen-loader{transition:none}}
.music-chapter[data-still] .hifi[data-playing] .hifi-record,.music-chapter[data-still] .listen-loader-art img{animation:none}
.listen-notice{max-width:var(--listen-w);font-size:12px;line-height:1.5;color:var(--peach);text-align:center}
@media(pointer:coarse){.crate-get,.crate-play,.hifi-switch button{min-height:44px}.crate-clear{width:44px;height:44px}}