:root{color-scheme:light;--paper:#f6f4ef;--ink:#262622;--muted:#72716b;--line:#d7d5ce;--active:#e8e5db}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.5}
main{width:min(880px,100%);margin:auto;padding:64px 40px 72px}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:42px}
h1{font-size:38px;font-weight:500;letter-spacing:-.06em;line-height:1.2;margin:0 0 10px}
.album-title{font-family:Georgia,"Times New Roman",serif;font-size:22px;line-height:1.3;margin:0}
.pdf-link{white-space:nowrap;color:inherit;text-decoration:none;border:1px solid var(--ink);padding:9px 15px;font-size:14px;margin-top:4px}
.pdf-link:hover{background:var(--ink);color:var(--paper)}
.player{border-top:2px solid var(--ink);padding:24px 0 20px}
.now-playing{display:flex;gap:20px;align-items:baseline;margin-bottom:20px}
#current-number{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px}
#current-artist{font-size:14px;letter-spacing:.04em;margin:0 0 3px;color:var(--muted)}
#current-title{font-size:21px;line-height:1.4;margin:0;overflow-wrap:anywhere}
audio{display:block;width:100%;height:54px}
.navigation{display:flex;justify-content:space-between;margin:12px 0 0}
.navigation button{font:inherit;font-size:14px;border:0;padding:8px 0;background:transparent;color:var(--ink);cursor:pointer;min-height:40px}
.navigation button:disabled{color:#a9a69c;cursor:default}
.navigation button:not(:disabled):hover{text-decoration:underline}
#error{font-size:14px;margin:12px 0 0}
ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
li{margin:0;border-bottom:1px solid var(--line)}
.track{display:grid;grid-template-columns:28px 1fr 50px;gap:16px;align-items:center;width:100%;text-align:left;color:inherit;border:0;padding:17px 14px;background:transparent;font:inherit;cursor:pointer;min-height:76px}
.track:hover{background:#eeece5}
.track[aria-current="true"]{background:var(--active)}
.number,.duration{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.duration{text-align:right}
.artist{display:block;font-size:14px;letter-spacing:.025em;color:var(--muted);margin-bottom:3px}
.title{display:block;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:600px){main{padding:32px 20px 40px}header{gap:16px;margin-bottom:28px}h1{font-size:32px}.album-title{font-size:18px;max-width:230px}.pdf-link{padding:8px 11px}.track{grid-template-columns:24px 1fr 43px;gap:10px;padding:15px 8px}#current-title{font-size:19px}}
@media(prefers-reduced-motion:no-preference){.track,.pdf-link{transition:background-color .12s,color .12s}}