/* Edge-to-edge Safari colors, readable text and native touch behavior. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--keyboard-inset:0px;--page-base:#171719;background:var(--page-base);-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
:root[data-view=player]{--page-base:var(--player-chrome,#242229)}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--page-base);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button,a,select{touch-action:manipulation}
.lyrics-window,.library-home,#appleImportDialog{-webkit-overflow-scrolling:touch}
.lyrics-window{-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent);touch-action:pan-y pinch-zoom}
.romaji,.translation{overflow-wrap:anywhere}
#appleImportDialog::backdrop{-webkit-backdrop-filter:blur(14px)}
.resume-follow{-webkit-backdrop-filter:blur(12px)}
@media(hover:none){.lyric-row:hover{color:#ffffff73}.lyric-row.past:hover{color:#ffffff55}.library-home .library-song:hover .library-art img{transform:none;filter:none}.library-home .library-play{opacity:1;transform:none;width:34px;height:34px;background:#27232a99;color:#fff;box-shadow:none}.controls button:hover{background:none}}

@media(max-width:760px),(max-width:900px) and (orientation:portrait){
 :root{--mobile-controls:128px}
 .stage{width:100%;height:100vh;height:100dvh;min-height:0;background:#242229}
 .stage>header{inset:calc(var(--safe-top) + 6px) max(20px,var(--safe-right)) auto max(20px,var(--safe-left));height:44px;align-items:center}
 .stage>header .library-link{font-size:13px;min-height:44px;padding:0 8px 0 0;color:#ffffffb0;display:inline-flex;align-items:center;gap:6px}
 .stage>header .library-link::before{content:'‹';font-size:25px;font-weight:300;line-height:1}
 .player-panel{position:absolute;inset:calc(var(--safe-top) + 58px) max(24px,var(--safe-right)) auto max(24px,var(--safe-left));width:auto;max-width:none;height:48px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px}
 .album-art{width:48px;height:48px;border-radius:9px;box-shadow:0 5px 16px #0002}
 .album-art>span{font-size:16px}.cover-caption{display:none}
 .song-meta{align-self:center;margin:0;min-width:0}.song-meta h1{font-size:15px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-meta p{font-size:12px;line-height:1.5;margin:1px 0 0;color:#ffffff85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .player-panel footer{position:fixed;inset:auto 0 0;margin:0;padding:12px max(24px,var(--safe-right)) calc(12px + var(--safe-bottom)) max(24px,var(--safe-left));background:linear-gradient(180deg,#24222908,#24222965 35%,#242229a6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5}
 .footer-note{display:none}.progress-heading{font-size:11px;margin:0;line-height:1.5}#syncState{font-size:10px}
 .seek{height:24px;min-height:24px;padding:0;background:transparent;border-radius:0;touch-action:pan-x}
 .seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#ffffffc0 var(--progress,0%),#ffffff30 var(--progress,0%))}
 .seek::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;opacity:1;background:#ece6ec;box-shadow:0 1px 4px #0002}
 .seek::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,#ffffffc0 var(--progress,0%),#ffffff30 var(--progress,0%))}
 .seek::-moz-range-thumb{width:12px;height:12px;border:0;background:#ece6ec;border-radius:50%}
 .controls{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:8px;padding:2px 0 0;min-height:54px}
 .control-left{position:static;gap:10px;min-width:0}.control-left .toggle{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;font-size:14px}.control-left .toggle span{font-size:10px;margin:0}
 .transport{margin:0;gap:0}.transport .play{width:54px;height:54px;padding:12px;border-radius:50%;transition:transform .15s}.transport .play:active{transform:scale(.94)}.transport .play img{width:25px;height:25px}
 .control-right{display:flex;min-width:0;gap:8px}.control-right .speed-label{min-height:44px}.speed-label>span{display:none}.controls .speed-label select{font-size:13px;min-height:44px;padding:4px 0;max-width:64px}
 #sentenceLoop{min-height:44px;gap:4px;font-size:10px;padding:0}#sentenceLoop svg{width:17px;height:17px;flex-shrink:0}
 .lyrics-panel{inset:calc(var(--safe-top) + 126px) max(24px,var(--safe-right)) calc(var(--mobile-controls) + var(--safe-bottom)) max(24px,var(--safe-left))}
 .lyrics-window{-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 87%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 87%,transparent)}
 #current,.lyric-row{padding:18px 0 26px}
 #current .lyric,#current .lyric.long-line,#current .lyric.extra-long-line{font-size:clamp(31px,8.8vw,38px);line-height:1.65;letter-spacing:-.025em}
 #lyricTrack>.lyric-row .row-text{font-size:clamp(22px,6.1vw,26px);line-height:1.65}
 .lyric rt,.row-text rt{font-size:.42em;line-height:1.3}.romaji{font-size:13px;line-height:1.6;margin-top:4px}.translation,.lyric-row .translation{font-size:14px;line-height:1.65;margin-top:8px}.hide-romaji #lyricTrack .translation{margin-top:4px}
 .resume-follow{right:0;bottom:8px;min-height:40px;padding:10px 14px;font-size:11px}
 #status{inset:auto max(24px,var(--safe-right)) calc(var(--mobile-controls) + var(--safe-bottom) + 10px) max(24px,var(--safe-left));max-width:none;font-size:12px;pointer-events:none;z-index:6}
 #status:not(:empty){padding:10px 13px;border:1px solid #ffffff10;border-radius:12px;background:#242229ed;color:#e8dce4;box-shadow:0 6px 24px #0002}
 .backdrop{inset:-85px;filter:blur(64px) saturate(.55);transform:translateZ(0) scale(1.1);opacity:.6}.backdrop::after{background:linear-gradient(180deg,#24222955,#24222925 40%,#24222985)}
 .library-shell{padding:var(--safe-top) max(20px,var(--safe-right)) var(--safe-bottom) max(20px,var(--safe-left))}
 .library-header{position:sticky;top:0;padding:16px 0;gap:12px;background:#171719ed;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2}.library-brand{font-size:23px}.library-brand span{font-size:9px;letter-spacing:1.8px;margin-left:9px}.library-import{min-height:44px;padding:10px 15px;font-size:13px!important}
 .library-heading{padding:32px 0 28px;align-items:flex-end;gap:10px}.library-heading h2{font-size:34px;letter-spacing:-1px}.library-heading h2>span{font-size:12px;line-height:1.7;margin-top:12px}.library-eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:14px}.library-return{min-height:44px;font-size:11px!important}
 .library-home .library-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px;padding-bottom:28px}.library-home .library-art{border-radius:10px;margin-bottom:11px}.library-home .library-song strong{font-size:14px}.library-home .library-song>span{font-size:12px}.library-bottom{font-size:9px;padding:22px 0 28px;letter-spacing:1.5px}
 #appleImportDialog{position:fixed;inset:auto 8px calc(8px + var(--safe-bottom) + var(--keyboard-inset));margin:0;width:auto;max-width:none;max-height:calc(100vh - var(--safe-top) - var(--safe-bottom) - var(--keyboard-inset) - 24px);max-height:min(740px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--keyboard-inset) - 24px));border-radius:22px;background:#222124}
 #appleImportDialog .dialog-body{padding:24px 20px}#appleImportDialog h2{font-size:24px}#appleClose{min-width:36px;height:36px;font-size:24px}#appleImportDialog .apple-description{font-size:13px;margin:12px 0 22px}
 #appleImportDialog #appleKeyword{font-size:16px;line-height:24px;padding:10px 0}#appleSearchForm{gap:10px;padding-left:12px}#appleSearchButton{min-width:54px;font-size:13px;padding:0 12px}
 #appleImportDialog .apple-result{grid-template-columns:44px minmax(0,1fr) auto;gap:11px;padding:10px 0}#appleImportDialog .apple-result-cover{width:44px;height:44px}#appleImportDialog .apple-result>button{min-height:44px;padding:8px 13px;font-size:12px}#appleImportDialog .apple-result strong{font-size:14px}#appleImportDialog .apple-result small{font-size:11px}
 #appleImportDialog .apple-import-note{font-size:10px;line-height:1.7;flex-wrap:wrap;gap:4px 12px;margin-top:20px;padding-top:16px}
}
@media(max-width:360px){.control-left .toggle span{display:none}.control-left{gap:14px}.control-right{gap:6px}.library-brand span{display:none}#current .lyric,#current .lyric.long-line,#current .lyric.extra-long-line{font-size:31px}}
@media(max-height:500px) and (orientation:landscape) and (max-width:1024px){
 .stage{height:100dvh;min-height:0}.stage>header{inset:calc(4px + var(--safe-top)) auto auto max(20px,var(--safe-left));height:44px}.stage>header .library-link{font-size:12px;min-height:44px}
 .player-panel{inset:calc(58px + var(--safe-top)) auto auto max(20px,var(--safe-left));width:29%;max-width:250px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px}.album-art{width:44px;height:44px}.song-meta{min-width:0;margin:0;align-self:center}.song-meta h1{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-meta p{font-size:11px}
 .player-panel footer{position:fixed;inset:auto 0 0;margin:0;padding:8px max(24px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(24px,var(--safe-left));background:#242229c7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.footer-note{display:none}.progress-heading{font-size:10px;margin-bottom:8px}.controls{padding-top:8px}.transport .play{width:44px;height:44px}.control-left .toggle{min-height:44px}.speed-label select,#sentenceLoop{min-height:44px}
 .lyrics-panel{inset:calc(16px + var(--safe-top)) max(24px,var(--safe-right)) calc(110px + var(--safe-bottom)) 38%}#current .lyric,#current .lyric.long-line,#current .lyric.extra-long-line{font-size:30px}#lyricTrack>.lyric-row .row-text{font-size:22px}.romaji{font-size:12px}.translation{font-size:13px}#current,.lyric-row{padding:12px 0 20px}#status{bottom:calc(112px + var(--safe-bottom));font-size:11px}
 #appleImportDialog{max-height:calc(100dvh - var(--keyboard-inset) - 20px);overflow:auto}#appleImportDialog .dialog-body{padding:20px 24px}
}

@media(max-height:500px) and (orientation:landscape) and (max-width:1024px){
 .seek{height:24px;min-height:24px;background:transparent;padding:0}
 .seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#ffffffc0 var(--progress,0%),#ffffff30 var(--progress,0%))}
 .seek::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;opacity:1;background:#ece6ec}
 .progress-heading{margin-bottom:0}.controls{padding-top:0}
 #appleImportDialog #appleKeyword{font-size:16px}
}
@media(max-width:360px){#current .lyric{text-wrap:balance}}
@media(max-height:500px) and (orientation:landscape) and (max-width:1024px){.stage{background:#242229}.backdrop{inset:-85px;filter:blur(64px) saturate(.55);transform:translateZ(0) scale(1.1);opacity:.6}}
/* Match the true iPhone chrome insets to the page edges. Safari extends the
   body's solid background beneath its controls, independently of theme-color. */
@media(max-width:760px),(max-width:900px) and (orientation:portrait),(max-height:500px) and (orientation:landscape) and (max-width:1024px){
 .stage{background:var(--page-base)}
 .backdrop{opacity:.22;-webkit-mask-image:radial-gradient(ellipse at center,#000 5%,transparent 60%);mask-image:radial-gradient(ellipse at center,#000 5%,transparent 60%)}
 .backdrop::after{background:transparent}
 .player-panel footer{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
 .progress-heading{color:#ffffff90}.controls .toggle{color:#ffffff95}.controls .toggle.active{color:#fff}#sentenceLoop{color:#ffffff90}#sentenceLoop.active{color:#fff}.controls select{color:#ffffffb0}
}
/* Mobile uses a solid surface: no full-screen blur or masked scrolling layer. */
@media(max-width:760px),(max-width:900px) and (orientation:portrait),(max-height:500px) and (orientation:landscape) and (max-width:1024px){
 .backdrop{display:none}
 .lyrics-window{-webkit-mask-image:none;mask-image:none}
 .lyrics-panel::before,.lyrics-panel::after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:2}
 .lyrics-panel::before{top:-1px;height:30px;background:linear-gradient(var(--page-base),transparent)}
 .lyrics-panel::after{bottom:-1px;height:40px;background:linear-gradient(transparent,var(--page-base))}
 .resume-follow{z-index:3;background:var(--page-base);-webkit-backdrop-filter:none;backdrop-filter:none}
 .library-header{background:#171719;-webkit-backdrop-filter:none;backdrop-filter:none}
 #appleImportDialog::backdrop{background:#100e13b8;-webkit-backdrop-filter:none;backdrop-filter:none}
 .player-panel footer,#status{-webkit-backdrop-filter:none;backdrop-filter:none}
}



@media(max-width:760px),(max-width:900px) and (orientation:portrait),(max-height:500px) and (orientation:landscape) and (max-width:1024px){#lyric,.romaji,.translation{backface-visibility:visible}}
/* The sticky brand bar spans the screen, including the safe-area inset. */
@media(max-width:760px),(max-width:900px) and (orientation:portrait){
 .library-shell{--library-left:max(20px,var(--safe-left));--library-right:max(20px,var(--safe-right));padding-top:0;padding-left:var(--library-left);padding-right:var(--library-right)}
 .library-header{width:calc(100% + var(--library-left) + var(--library-right));max-width:none;margin-left:calc(-1 * var(--library-left));margin-right:calc(-1 * var(--library-right));padding:calc(16px + var(--safe-top)) var(--library-right) 16px var(--library-left);top:0;overflow:visible;background:#171719;isolation:isolate}
 .library-brand{flex-shrink:0;white-space:nowrap;line-height:1.3}.library-import{flex-shrink:0}
}

/* Give the song identity more presence while keeping the first lyric nearby. */
@media(max-width:760px),(max-width:900px) and (orientation:portrait){
 .player-panel{height:68px;grid-template-columns:68px minmax(0,1fr);gap:16px}
 .album-art{width:68px;height:68px;border-radius:12px}
 .song-meta h1{font-size:19px;line-height:1.45}
 .song-meta p{font-size:14px;margin-top:3px}
 .lyrics-panel{top:calc(var(--safe-top) + 150px)}
}