:root { --bg:#0d0d0f; --bg-deep:#0d0d0f; --text:#f7f7f8; --muted:#a4a4ac; --subtle:#929298; --line:rgba(255,255,255,.12); --max-width:1200px; --warm:#fff; }
html { scroll-behavior:smooth; }
body { min-width:0; background:var(--bg); overflow-x:hidden; }
body::before,body::after { content:none; }
.site-header { position:relative; height:88px; background:transparent; border:0; backdrop-filter:none; }
.site-header.is-scrolled { background:transparent; box-shadow:none; }
.nav-shell { height:88px; width:min(100% - 80px,1280px); }
.brand { gap:12px; font-size:22px; }
.brand-icon { width:38px; height:38px; }
.nav-links { gap:32px; }
.nav-links > a:first-child { font-size:14px; }
.nav-cta { border-radius:8px; min-height:42px; padding:0 18px; background:#f5f5f7; color:#19191b; }
.hero { display:block; width:min(100% - 48px,1200px); min-height:0; margin:0 auto; padding:94px 0 0; background:none; }
.hero::before,.hero::after { content:none; }
.hero-copy { max-width:none; text-align:center; }
.hero h1 { margin:0; font-size:54px; font-weight:750; letter-spacing:-.035em; line-height:1.22; }
.hero h1 strong { color:#d8c6ff; font-weight:inherit; background:none; -webkit-text-fill-color:currentColor; }
.hero-description { max-width:none; margin:25px 0 0; font-size:17px; line-height:1.65; color:#b5b5bc; }
.hero-actions { display:flex; justify-content:center; margin:34px 0 0; }
.primary-action { min-height:54px; padding:0 24px; gap:12px; border:1px solid #e6e6ec; border-radius:9px; background:#f5f5f7; color:#18181b; box-shadow:none; font-size:17px; }
.primary-action b { font-size:17px; font-weight:650; }
.primary-action:hover,.nav-cta:hover { transform:none; background:#fff; }
.primary-action .chrome-icon { width:24px; height:24px; }
.install-note { margin:18px 0 0; font-size:13px; line-height:1.5; color:#92929b; }
.demo-section { width:min(100% - 80px,1200px); margin:94px auto 0; }
.browser-shell { background:#030303; box-shadow:none; border-color:#2b2b30; border-radius:10px; }
.player-scene { padding:30px 48px; background:#030303; }
.ytmusic-demo-layout { grid-template-columns:minmax(230px,.34fr) minmax(0,.66fr); gap:44px; }
.album-art { width:270px; max-width:100%; border-radius:8px; }
.track-title { margin:24px 0 8px; font-size:26px; color:#f8f8fa; }
.track-artist { font-size:15px; color:#99999f; }
.lyrics-window { height:584px; min-height:584px; }
.lyrics-rail { --lyrics-edge-gap:85px; --lyrics-group-gap:85px; }
.lyric-group { cursor:pointer; opacity:.5; filter:grayscale(1) saturate(0); }
.lyric-group.is-past { opacity:.35; }
.lyric-group.is-active { opacity:1; filter:blur(0px); transform:scale(1); }
.lyric-group:not(.is-active) .lyric-original { color:color-mix(in srgb, var(--ytmusic-text-primary,#fff) 85%,transparent); }
.lyric-group.is-active .lyric-translation { color:rgba(255,252,242,.8); }
.lyric-group:focus-visible { outline:1px solid #ada8bf; outline-offset:8px; border-radius:4px; }
.lyric-group .lyric-original, .lyric-group.is-active .lyric-original { font-family:'Noto Sans JP','LINE Seed JP','Hiragino Sans','Yu Gothic',Meiryo,sans-serif; font-size:23.2px; font-weight:650; line-height:1.3; margin-bottom:2px!important; }
.lyric-group .lyric-hangul { font-family:'Pretendard Variable',Pretendard,'LINE Seed KR',sans-serif; font-size:18.3px; font-weight:550; line-height:normal; margin-bottom:16px!important; }
.lyric-group .lyric-translation { font-family:'Pretendard Variable',Pretendard,'LINE Seed KR',sans-serif; font-size:19.5px; font-weight:425; line-height:normal; margin:0!important; }
.demo-invitation { margin:0; padding:0 20px 16px; text-align:right; color:#a4a4ac; font-size:12px; line-height:1.5; }
.site-footer { display:flex; justify-content:space-between; align-items:center; width:min(100% - 80px,1200px); margin:0 auto; padding:27px 0 36px; border-top:1px solid #222228; color:#85858f; font-size:13px; }
.site-footer p { margin:0; }
.site-footer > div { display:flex; gap:24px; }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { color:#eee; }
@media(max-width:900px) { .hero { padding-top:72px; } .demo-section { width:calc(100% - 48px); margin-top:76px; } .player-scene { padding:24px; } .ytmusic-demo-layout { grid-template-columns:190px minmax(0,1fr); gap:22px; } .album-art { width:180px; } }
@media(max-width:680px) { .nav-shell { width:calc(100% - 40px); height:76px; } .site-header { height:76px; } .brand { font-size:19px; gap:8px; } .brand-icon { width:31px; height:31px; } .nav-links { gap:0; } .nav-links > a:first-child { display:none; } .nav-cta { min-height:38px; padding:0 12px; font-size:12px; } .nav-cta .chrome-icon { width:17px; height:17px; } .hero { padding-top:62px; } .hero h1 { font-size:38px; line-height:1.25; letter-spacing:-.04em; } .hero-description { max-width:300px; margin:24px auto 0; font-size:15px; } .hero-actions { margin-top:28px; } .install-note { font-size:12px; } .demo-section { width:calc(100% - 32px); margin-top:64px; } .player-scene { padding:26px 18px 12px; } .ytmusic-demo-layout { display:flex; flex-direction:column; gap:20px; } .track-panel { align-self:stretch; display:grid; grid-template-columns:60px 1fr; column-gap:16px; text-align:left; align-items:center; } .album-art { width:60px; margin:0; grid-row:1/3; } .track-title { margin:0; align-self:end; font-size:18px; } .track-artist { align-self:start; font-size:12px; margin:5px 0 0; } .lyrics-window { height:640px; min-height:640px; } .site-footer { width:calc(100% - 40px); margin-top:64px; padding-bottom:30px; font-size:11px; } .site-footer > div { gap:16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .lyrics-rail { transition:none; } }
.skip-link { top:-100px; transform:none; transition:none; }
.skip-link:focus { top:12px; transform:none; }
/* Restored content follows the same section width and restrained typography. */
.nav-links > a:not(.nav-cta) { font-size:14px; }
.privacy-note { margin:7px 0 0; color:#92929b; font-size:12px; line-height:1.5; }
.feature-overview,.questions-section,.closing-install { width:min(100% - 80px,1200px); margin:0 auto; scroll-margin-top:56px; }
.feature-overview { padding:clamp(96px,10vw,144px) 0; }
.feature-overview h2,.questions-section h2,.closing-install h2 { margin:0; font-size:30px; font-weight:650; line-height:1.35; letter-spacing:-.03em; color:#eeeef2; }
.feature-overview h2 { font-size:48px; font-weight:700; line-height:1.2; }
.feature-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px; }
.feature-columns article { min-height:280px; padding:32px; border:1px solid #2b2b31; border-radius:12px; background:#151518; }
.feature-index { display:block; margin-bottom:32px; color:#92929c; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.feature-columns h3 { margin:0 0 16px; font-size:25px; font-weight:600; line-height:1.5; letter-spacing:-.02em; word-break:keep-all; }
.feature-columns p { max-width:320px; margin:0; color:#a4a4ae; font-size:15px; line-height:1.8; word-break:keep-all; }
.questions-section { display:block; width:min(100% - 80px,1200px); padding:88px 0 112px; border-top:1px solid #29292e; }
.questions-section h2 { font-size:40px; line-height:1.25; margin-bottom:40px; }
.question-list { border-top:1px solid #343439; }
.question-list details { border-bottom:1px solid #29292e; }
.question-list summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; cursor:pointer; font-size:17px; font-weight:550; line-height:1.6; color:#e4e4e9; list-style:none; }
.question-list details[open] summary { padding-bottom:14px; }
.question-list summary::marker { content:""; }
.question-list summary::-webkit-details-marker { display:none; }
.question-list summary span { color:#d8c6ff; font-size:24px; font-weight:400; line-height:1; flex-shrink:0; transition:transform .2s ease; }
.question-list details[open] summary span { transform:rotate(45deg); }
.question-list p { max-width:760px; margin:0; padding:0 0 26px; color:#a4a4ae; font-size:14px; line-height:1.85; word-break:keep-all; }
.question-list a { color:#d8c6ff; text-underline-offset:4px; }
.question-list summary:hover { color:#fff; }
.question-list summary:focus-visible { outline:2px solid #d8c6ff; outline-offset:5px; }
.closing-install { margin-top:0; padding:80px 0; border-top:1px solid #29292e; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.closing-install h2 { font-size:36px; max-width:620px; }
.closing-install .primary-action { flex-shrink:0; }
.site-footer { display:block; padding:32px 0; margin-top:0; }
.site-footer > div { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.site-footer .brand { font-size:19px; color:#eeeef2; }
.site-footer .brand-icon { width:30px; height:30px; }
.footer-top nav { display:flex; flex-wrap:wrap; gap:24px; font-size:13px; }
.site-footer .footer-bottom { margin-top:30px; align-items:baseline; color:#92929c; font-size:12px; line-height:1.7; }
@media(max-width:900px) {
 .feature-overview,.closing-install { width:calc(100% - 48px); }
 .feature-overview { padding:88px 0; }
 .feature-overview h2 { font-size:42px; }
 .feature-columns { gap:16px; }
 .feature-columns article { padding:24px; }
 .feature-columns h3 { font-size:21px; }
 .questions-section { width:calc(100% - 48px); padding:72px 0 88px; }
 .questions-section h2 { font-size:34px; }
 .closing-install h2 { font-size:30px; }
 .site-footer { width:calc(100% - 48px); }
 .site-footer .footer-top { align-items:flex-start; }
 .footer-top nav { gap:16px; }
}
@media(max-width:680px) {
 .nav-links > a:not(.nav-cta) { display:none; }
 .nav-cta { width:auto; height:38px; gap:7px; overflow:visible; flex-shrink:0; }
 .hero-actions { align-items:center; }
 .demo-invitation { padding-right:18px; }
 .feature-overview,.questions-section,.closing-install { width:calc(100% - 40px); }
 .feature-overview { padding:72px 0; }
 .feature-overview h2 { font-size:36px; }
 .feature-columns { grid-template-columns:1fr; gap:16px; margin-top:32px; }
 .feature-columns article { min-height:0; padding:26px; }
 .feature-index { margin-bottom:26px; }
 .feature-columns h3 { font-size:24px; margin-bottom:14px; }
 .feature-columns p { font-size:14px; }
 .questions-section { padding:56px 0 72px; }
 .questions-section h2 { font-size:30px; margin-bottom:28px; }
 .question-list summary { font-size:15px; padding:23px 0; gap:18px; }
 .closing-install { flex-direction:column; align-items:flex-start; padding:48px 0; gap:28px; }
 .closing-install h2 { font-size:28px; word-break:keep-all; }
 .site-footer { margin-top:0; }
 .site-footer > div { flex-direction:column; align-items:flex-start; }
 .footer-top nav { gap:12px 20px; }
 .site-footer .footer-bottom { align-items:flex-start; gap:10px; }
}
@media(prefers-reduced-motion:reduce) { .question-list summary span { transition:none; } }

/* A quiet glass capsule; dots retain large pointer and keyboard targets. */
.demo-track-controls { display:flex; width:max-content; max-width:100%; justify-content:center; align-items:center; gap:0; margin:26px auto 0; padding:2px 7px; border:0; border-radius:999px; background:rgba(255,255,255,.065); box-shadow:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.track-dot { display:flex; justify-content:center; align-items:center; width:32px; height:40px; padding:0 10px; border:0; border-radius:999px; background:transparent; cursor:pointer; transition:width .22s ease; flex-shrink:0; }
.track-dot[aria-current="true"] { width:44px; cursor:default; }
.track-dot-track { position:relative; display:block; width:7px; height:7px; border-radius:999px; background:#73737b; overflow:hidden; transition:background-color .15s ease; }
.track-dot[aria-current="true"] .track-dot-track { width:100%; background:#f0f0f4; }
.track-dot:hover:not([aria-current="true"]) .track-dot-track { background:#b9b9c2; }
.track-dot:focus-visible { outline:2px solid #d8c6ff; outline-offset:1px; }
@media(max-width:680px) { .demo-track-controls { grid-column:1/-1; margin:18px auto 0; } .nav-cta { padding:0 10px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .track-dot,.track-dot-track { transition:none; } }
/* Keep the install label intact even with a scrollbar in a 320px window. */
@media(max-width:360px) {
 .primary-action { padding:0 14px; gap:8px; }
 .primary-action b { font-size:15px; white-space:nowrap; }
 .primary-action .chrome-icon { width:21px; height:21px; flex-shrink:0; }
 .nav-shell { width:calc(100% - 24px); }
 .nav-cta { padding:0 8px; gap:5px; }
 .nav-cta span { white-space:nowrap; }
}