:root{color-scheme:light;--ink:#493c34;--muted:#7d6c60;--accent:#9d5c43;--paper:#fcf8f1;--line:#e7d9ca}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.65}
main{max-width:820px;margin:auto;padding:32px 22px 40px}header{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;margin:10px 0 30px}header img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 8px 25px #493c3420}h1{font-size:clamp(24px,4.8vw,36px);line-height:1.4;margin:6px 0 14px;letter-spacing:.04em}.label{font-size:11px;letter-spacing:.18em;color:var(--accent)}.intro{font-size:14px;color:var(--muted);margin:0}.count{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin:0 0 10px}
.player{background:white;padding:18px;border:1px solid var(--line);border-radius:16px;margin-bottom:22px}.now{font-size:11px;letter-spacing:.12em;color:var(--muted);margin:0}.current{font-size:18px;min-height:30px;margin:4px 0 12px;font-weight:600;overflow-wrap:anywhere}audio{width:100%;display:block}.navigation{display:flex;gap:12px;margin-top:14px}.navigation button{border:1px solid var(--line);border-radius:25px;padding:9px 18px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.navigation button:disabled{opacity:.35;cursor:default}
ol{padding:0;list-style:none;margin:0}li{border-bottom:1px solid var(--line)}.track{display:flex;align-items:center;width:100%;gap:14px;border:0;background:transparent;color:var(--ink);text-align:left;padding:17px 8px;font:inherit;cursor:pointer;border-radius:8px}.track[aria-current=true]{background:#eee0d2;color:#793e29}.track:hover{background:#f1e8dc}.number{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;width:24px;flex-shrink:0}.title{flex:1;font-size:15px;overflow-wrap:anywhere}.symbol{font-size:13px;color:var(--accent)}button:focus-visible{outline:3px solid #a16a48;outline-offset:3px}.status{font-size:13px;color:#8d302c;margin:10px 0 0}.status:empty{display:none}footer{margin-top:30px;font-size:12px;color:var(--muted);text-align:center}noscript{display:block;padding:16px}
@media(max-width:520px){main{padding:22px 16px 30px}header{grid-template-columns:100px 1fr;gap:18px;margin-bottom:25px}.intro{font-size:12px}h1{font-size:23px}.player{padding:15px}.current{font-size:16px}.track{padding:16px 5px;gap:9px}.title{font-size:14px}}