:root{--font-sans: "DM Sans", system-ui, sans-serif;--font-serif: "Instrument Serif", Georgia, serif;--color-bg: #0f0f0f;--color-surface: #1a1a1a;--color-border: #2a2a2a;--color-text: #e8e8e8;--color-text-muted: #888;--color-accent: #c9a227;--color-accent-hover: #ddb83a;--color-error-bg: rgba(180, 60, 60, .12);--color-error-border: #b44;--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{flex:1;display:flex;flex-direction:column}@media (prefers-color-scheme: light){:root{--color-bg: #f5f5f4;--color-surface: #fff;--color-border: #e5e5e4;--color-text: #1c1c1b;--color-text-muted: #575756;--color-accent: #a68b1e;--color-accent-hover: #8a7318;--color-error-bg: rgba(180, 60, 60, .08);--color-error-border: #c66}}.app{min-height:100vh;display:flex;flex-direction:column;flex:1;width:100%;max-width:1000px;margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem) 3rem;box-sizing:border-box}.header{width:100%;margin-bottom:2.5rem;padding:2.25rem clamp(1.25rem,5vw,2.5rem);background:var(--color-surface);border-bottom:1px solid var(--color-border);text-align:center}.header h1{font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:400;letter-spacing:.02em;margin:0 0 .5rem;color:var(--color-text)}.subtitle{font-size:.95rem;color:var(--color-text-muted);line-height:1.5;white-space:nowrap;margin:0 auto}.error-banner{background:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:var(--radius-sm);padding:.875rem 1rem;margin-bottom:1.25rem;font-size:.9rem}.error-banner code{background:#00000026;padding:.15em .45em;border-radius:4px;font-size:.875em}@media (prefers-color-scheme: light){.error-banner code{background:#0000000f}}.player-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1.75rem}.global-audio{width:100%;height:40px}.global-audio::-webkit-media-controls-panel{background:transparent}.track-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.track-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem 1.5rem;transition:border-color .2s,box-shadow .2s}.track-item:hover{border-color:#3a3a3a}@media (prefers-color-scheme: light){.track-item:hover{border-color:#d4d4d4}}.track-item--playing{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.track-item--error{border-color:var(--color-error-border)}.track-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.track-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}.track-title{font-weight:600;font-size:1.05rem;color:var(--color-text)}.track-style{font-size:.8rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}.track-duration{font-size:.8rem;color:var(--color-text-muted)}.track-play{flex-shrink:0;font-family:var(--font-sans);font-size:.9rem;font-weight:500;padding:.5rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-accent);background:var(--color-accent);color:#0f0f0f;cursor:pointer;transition:background .2s,border-color .2s,transform .1s}.track-play:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.track-play:active:not(:disabled){transform:scale(.98)}.track-play[aria-pressed=true]{background:transparent;color:var(--color-accent)}.track-play[aria-pressed=true]:hover:not(:disabled){background:#c9a22726}.track-play:disabled{opacity:.5;cursor:not-allowed}.track-error-msg{margin:.5rem 0 0;font-size:.875rem;color:var(--color-error-border)}.track-toggle-desc{margin-top:.625rem;font-size:.875rem;font-family:var(--font-sans);background:none;border:none;padding:.25rem 0;color:var(--color-accent);cursor:pointer;text-underline-offset:2px}.track-toggle-desc:hover{text-decoration:underline}.track-detail{margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--color-border);font-size:.9rem;color:var(--color-text-muted)}.track-detail p{margin:0 0 .5rem}.track-detail p:last-child{margin-bottom:0}.track-highlight{font-style:italic}.footer{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border);font-size:.8rem;color:var(--color-text-muted)}.footer p{margin:0}.footer code{background:#ffffff0f;padding:.12em .4em;border-radius:4px;font-size:.9em}@media (prefers-color-scheme: light){.footer code{background:#0000000f}}