.music-page { overflow-x: hidden; overflow-y: auto; color: var(--title-color); }
.music-page .paper-background { position: fixed; width: 100vw; height: 100vh; background-image: linear-gradient(to right, transparent 47px, var(--grid-color) 48px), linear-gradient(to bottom, transparent 47px, var(--grid-color) 48px); background-size: 48px 48px; opacity: .55; }
.music-nav { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; width: min(1240px, calc(100% - 72px)); margin: 0 auto; padding: 32px 0 20px; border-bottom: 1px solid rgba(113,98,84,.28); }
.music-brand { display: flex; flex-direction: column; gap: 6px; color: var(--title-color); text-decoration: none; }
.music-brand span { font: 500 26px/1.1 "Yu Mincho", "YuMincho", serif; letter-spacing: .18em; }
.music-brand small, .music-nav nav, .player-kicker, .lyrics-header, .time-row, .volume-row { font: 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.music-brand small { color: rgba(113,98,84,.72); }
.music-nav nav { display: flex; gap: 26px; padding-top: 5px; }
.music-nav nav a { color: rgba(113,98,84,.8); text-decoration: none; }
.music-nav nav a:hover, .music-nav nav .is-current { color: var(--title-color); }
.music-nav nav .is-current::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 7px; background: var(--title-color); }
.music-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: clamp(44px, 8vw, 130px); width: min(1060px, calc(100% - 120px)); min-height: calc(100vh - 105px); margin: 0 auto; padding: clamp(54px, 8vh, 100px) 0 80px; align-items: center; }
.player-panel { padding: 34px 38px 32px; background: rgba(250,247,239,.82); border: 1px solid rgba(113,98,84,.3); box-shadow: 12px 16px 0 rgba(113,98,84,.1), 0 16px 34px rgba(68,61,54,.1); }
.player-kicker { color: rgba(113,98,84,.75); margin-bottom: 28px; }
.record-art { position: relative; display: grid; place-items: center; width: min(270px, 70vw); aspect-ratio: 1; margin: 0 auto 34px; border-radius: 50%; color: #faf7ef; background: radial-gradient(circle at 50% 50%, #d0bba6 0 8%, #716254 8.5% 9.5%, #403a35 10% 35%, #574b43 35.5% 36.5%, #312d2a 37% 62%, #574b43 62.5% 63%, #282522 63.5% 100%); box-shadow: 0 10px 22px rgba(68,61,54,.22); }
.record-art::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(250,247,239,.22); border-radius: 50%; }
.record-art span { position: relative; z-index: 1; writing-mode: vertical-rl; font: 500 29px/1 "Yu Mincho", serif; letter-spacing: .14em; }
.record-art i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #faf7ef; }
.track-heading p, .track-heading span { margin: 0; color: rgba(113,98,84,.8); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.track-heading h1 { margin: 8px 0 5px; font: 500 clamp(38px, 5vw, 58px)/1 "Yu Mincho", serif; letter-spacing: .2em; }
.player-controls { display: flex; gap: 16px; align-items: center; margin-top: 34px; }
.play-button { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid var(--title-color); border-radius: 50%; color: #faf7ef; background: var(--title-color); cursor: pointer; }
.play-button:hover { background: #716254; }
.play-icon { transform: translateX(1px); font-size: 14px; }
.timeline { width: 100%; }.time-row { display: flex; justify-content: space-between; margin-bottom: 7px; color: rgba(113,98,84,.8); }
input[type="range"] { width: 100%; height: 2px; accent-color: var(--title-color); cursor: pointer; }
.volume-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: rgba(113,98,84,.72); }.volume-row input { flex: 1; }.volume-row span:last-child { width: 26px; text-align: right; }
.lyrics-panel { min-width: 0; }.lyrics-header { display: flex; justify-content: space-between; padding-bottom: 13px; color: rgba(113,98,84,.72); border-bottom: 1px solid rgba(113,98,84,.28); }.lyrics-header span:last-child { color: var(--title-color); }
.lyrics-viewport { height: min(58vh, 500px); overflow: hidden; padding: 80px 18px; mask-image: linear-gradient(transparent, black 18%, black 82%, transparent); }
.lyrics-viewport p { margin: 0; padding: 9px 0; color: rgba(113,98,84,.4); font: 20px/1.45 "Yu Mincho", "YuMincho", serif; letter-spacing: .08em; transition: color .35s ease, transform .35s ease, opacity .35s ease; }.lyrics-viewport p.is-active { color: var(--title-color); transform: translateX(12px); font-size: 25px; }.lyrics-placeholder { color: rgba(113,98,84,.66)!important; font-size: 16px!important; }
@media (max-width: 760px) { .music-nav { width: calc(100% - 36px); padding-top: 24px; }.music-brand span { font-size: 20px; }.music-nav nav { gap: 12px; font-size: 10px; }.music-layout { display: flex; flex-direction: column; width: calc(100% - 36px); padding: 38px 0 60px; gap: 44px; align-items: stretch; }.player-panel { padding: 25px 22px; }.record-art { width: min(230px, 65vw); margin-bottom: 26px; }.lyrics-viewport { height: 390px; padding-top: 70px; }.lyrics-viewport p { font-size: 18px; }.lyrics-viewport p.is-active { font-size: 22px; } }