.page{padding:clamp(6rem,12vh,9rem) 0 4rem;min-height:100svh}.page-title{font-family:Inter,sans-serif;font-weight:500;font-size:clamp(2.75rem,9vw,8rem);letter-spacing:-.05em;line-height:.9;margin:0 0 clamp(2rem,5vh,4rem);padding:0 clamp(1.5rem,4vw,4rem)}.rail-track{list-style:none;margin:0;padding:0 clamp(1.5rem,4vw,4rem) 2rem;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.5rem,3vw,3rem)}@media(max-width:900px){.rail-track{grid-template-columns:repeat(3,1fr)}}.tile{list-style:none;width:90%;justify-self:center}.tile-link{display:block;width:100%;color:inherit;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;font:inherit}.tile-link--placeholder{cursor:default;opacity:.85}.tile-art{position:relative;aspect-ratio:1 / 1;background-color:#1a1a1a;background-size:cover;background-position:center;border-radius:6px;transition:transform .4s cubic-bezier(.22,1,.36,1);overflow:hidden}.tile-link--placeholder .tile-art{background-image:radial-gradient(circle at 30% 30%,#2a2a2a,#111 60%,#050505)}.tile-link:hover .tile-art,.tile-link:focus-visible .tile-art{transform:translateY(-4px)}.tile-play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:#1db954;color:#000;display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:0 8px 20px #0006}.tile-play svg{margin-left:2px}.tile-link:hover .tile-play,.tile-link:focus-visible .tile-play{opacity:1;transform:translateY(0)}.tile-meta{margin-top:1rem}.tile-title{font-family:Inter,sans-serif;font-weight:500;font-size:clamp(.95rem,1.3vw,1.2rem);letter-spacing:-.02em;color:#fff}.tile-link--placeholder .tile-title{color:#888}.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:clamp(1rem,3vh,3rem)}body.modal-open .modal{display:flex}body.modal-open{overflow:hidden}.modal-backdrop{position:absolute;inset:0;background:#000000b3;backdrop-filter:blur(2px)}.modal-card{position:relative;width:min(1200px,96vw);max-height:min(900px,92vh);background:#0a0a0a;border:2px solid #3a3a3a;border-radius:14px;box-shadow:0 30px 80px #0009;display:grid;grid-template-rows:1fr auto;overflow:hidden;color:#fff;animation:modalIn .22s var(--ease)}@keyframes modalIn{0%{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}.modal-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;background:#ffffff0f;border:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s var(--ease)}.modal-close:hover{background:#ffffff24}@media(max-width:820px){.modal-close{top:6px;right:6px;background:#0000008c}.modal-close:hover{background:#000000b3}}.modal-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1rem,2vw,2rem);padding:clamp(1rem,2vw,2rem);padding-bottom:0;min-height:0}@media(max-width:820px){.modal-body{grid-template-columns:1fr;padding-top:50px}.cover{max-height:40vh}}.cover{display:flex;align-items:center;justify-content:center;min-height:0;position:relative;overflow:hidden;border-radius:10px}.cover img{width:100%;height:100%;max-height:60vh;object-fit:contain;border-radius:8px;display:block}.tracklist-wrap{display:flex;flex-direction:column;min-height:0;background:#111;border-radius:10px;overflow:hidden}.tracklist-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06)}.tracklist-title{margin:0;font-size:1.4rem;font-weight:600;letter-spacing:-.02em}.tracklist{list-style:none;margin:0;padding:.25rem .5rem .75rem;overflow-y:auto;min-height:0}.track{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:1rem;padding:.55rem .75rem;border-radius:6px;cursor:pointer;color:#c8c8c8;user-select:none}.track:hover{background:#ffffff0f;color:#fff}.track .num{text-align:center;color:#8c8c8c;font-variant-numeric:tabular-nums}.track .num .p,.track:hover .num .n{display:none}.track:hover .num .p{display:inline-flex;color:#fff}.track.playing{color:#1db954;background:#1db95414}.track.playing .num .n{display:none}.track.playing .num .p{display:inline-flex;color:#1db954}.track .title{font-weight:500}.track .dur{color:#8c8c8c;font-variant-numeric:tabular-nums;font-size:.9rem}.track.playing .title{color:#1db954}@media(max-width:640px){.track{grid-template-columns:30px 1fr auto;gap:.75rem}}.player{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:1rem;padding:.9rem clamp(1rem,2vw,2rem);border-top:1px solid rgba(255,255,255,.08);background:#0a0a0a}.np{display:flex;align-items:center;min-width:0}.np-text{min-width:0}.np-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-artist{font-size:.82rem;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:0;width:100%}.transport-buttons{display:flex;align-items:center;gap:.75rem}.icon-btn,.play-btn{background:transparent;border:0;cursor:pointer;color:#c8c8c8;padding:.35rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:color .15s var(--ease),transform .15s var(--ease)}.icon-btn:hover{color:#fff;transform:scale(1.05)}.play-btn{width:40px;height:40px;background:#fff;color:#000}.play-btn:hover{transform:scale(1.05)}.play-btn .i-pause{display:none}body.playing .play-btn .i-pause{display:block}body.playing .play-btn .i-play,.play-btn[aria-label=Pause] .i-play{display:none}.play-btn[aria-label=Pause] .i-pause{display:block}.progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;width:100%;max-width:560px}.t{font-size:.78rem;color:#8c8c8c;font-variant-numeric:tabular-nums}.volume{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;color:#c8c8c8}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:linear-gradient(to right,#fff 0%,#fff var(--p, 0%),#404040 var(--p, 0%),#404040 100%);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0;opacity:0;transition:opacity .15s var(--ease)}input[type=range]:hover{background:linear-gradient(to right,#1db954 0%,#1db954 var(--p, 0%),#404040 var(--p, 0%),#404040 100%)}input[type=range]:hover::-webkit-slider-thumb{opacity:1}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}#volume{width:110px}#seek{width:100%}@media(max-width:720px){.player{grid-template-columns:1fr;row-gap:.5rem}.np,.volume{justify-self:center}}@media(prefers-reduced-motion:reduce){.tile-art,.tile-play,.modal-card{transition:none;animation:none}}