.karaoke-intro { padding-block:27px 24px; }
.karaoke-intro .label { margin-bottom:13px; }
.karaoke-intro .label + h1 { margin-top:0; }
.karaoke-player { max-width:960px; margin-bottom:70px; }
.karaoke-player audio { display:block; width:100%; margin-top:14px; }
.karaoke-resources { margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.karaoke-stage { min-height:310px; padding:35px clamp(25px,5vw,60px); overflow:hidden; display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:clamp(14px,2.5vw,28px); border:1px solid var(--line); background:var(--surface); text-align:center; }
.karaoke-stage.is-idle { grid-template-columns:1fr; }
.karaoke-stage.has-no-chords { grid-template-columns:1fr; }
.karaoke-stage.is-idle .karaoke-chord-rail { display:none; }
.karaoke-line-window { height:270px; overflow:hidden; }
.karaoke-line-stack { height:360px; display:grid; grid-template-rows:repeat(4,90px); will-change:transform; }
.karaoke-line { width:100%; margin:0; padding:3px 0; display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center; column-gap:.24em; color:var(--orange); font-family:'Libre Baskerville',Baskerville,Georgia,serif; font-size:clamp(27px,3.8vw,44px); font-style:italic; line-height:1.1; text-wrap:balance; }
.karaoke-stage.is-idle .karaoke-line:nth-child(2) { color:var(--ink); font-family:'TC Volume',Georgia,serif; font-size:clamp(17px,2vw,21px); font-style:normal; }
.karaoke-word { position:relative; color:color-mix(in srgb,var(--orange) 50%,transparent); transition:color .14s ease,text-shadow .14s ease; }
.karaoke-word.has-chord-change::before { content:'◆'; position:absolute; left:50%; bottom:calc(100% + .02em); translate:-50% 0; color:#d32323; font-family:Georgia,serif; font-size:.42em; font-style:normal; line-height:1; opacity:1; text-shadow:0 1px 2px color-mix(in srgb,var(--surface) 75%,transparent); transition:transform .14s ease,filter .14s ease; }
.karaoke-word.has-chord-change.is-current::before { transform:scale(1.35); filter:drop-shadow(0 0 5px #ef3b32); }
.karaoke-word.is-sung { color:color-mix(in srgb,var(--orange) 78%,transparent); }
.karaoke-word.is-current { color:var(--ink); text-shadow:0 0 16px color-mix(in srgb,var(--orange) 35%,transparent); }
.karaoke-lyrics { max-width:960px; padding-bottom:110px; }
.karaoke-lyrics-heading { margin-bottom:24px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.karaoke-lyrics-heading h2 { margin:0; font-size:calc(clamp(36px,4vw,52px) - 2px); line-height:1.1; }
.karaoke-lyrics-heading p { max-width:390px; margin:0; color:var(--muted); font-size:15px; text-align:right; }
.karaoke-lyrics ol { max-height:490px; margin:0; padding:8px; overflow-y:auto; list-style:none; border:1px solid var(--line); background:var(--surface); scroll-behavior:smooth; }
.karaoke-lyrics li { margin:0; }
.karaoke-lyrics button { display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; width:100%; padding:11px 13px; border:0; border-radius:4px; background:transparent; color:var(--ink); font:inherit; font-size:17px; line-height:1.35; text-align:left; cursor:pointer; }
.karaoke-lyrics button:hover { background:var(--orange-soft); }
.karaoke-lyrics button span { padding-top:3px; color:var(--muted); font-family:'TC Volume Sans',sans-serif; font-size:9px; letter-spacing:.08em; }
.karaoke-lyrics button[aria-current] { background:var(--orange); color:#1f1c18; }
.karaoke-lyrics button[aria-current] span { color:#4f2b0e; }
.karaoke-explorer { max-width:960px; padding-bottom:110px; display:grid; gap:18px; }
.karaoke-explorer details { border:1px solid var(--line); background:var(--surface); }
.karaoke-explorer summary { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.karaoke-explorer summary::-webkit-details-marker { display:none; }
.karaoke-explorer summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.explorer-artist>summary { min-height:82px; padding:18px 24px; }
.explorer-artist>summary .explorer-name { color:var(--orange); font-family:'Libre Baskerville',Baskerville,Georgia,serif; font-size:clamp(28px,4vw,42px); font-style:italic; line-height:1.05; }
.explorer-icon { width:23px; height:23px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; color:var(--orange); font-family:'TC Volume Sans',sans-serif; font-size:17px; line-height:1; }
.explorer-icon::before { content:'+'; }
details[open]>summary .explorer-icon::before { content:'−'; }
.explorer-count { color:var(--muted); font-family:'TC Volume Sans',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.explorer-albums { padding:0 24px 24px 64px; display:grid; gap:12px; }
.explorer-album>summary { min-height:60px; padding:13px 18px; }
.explorer-album>summary .explorer-name { font-size:clamp(20px,3vw,28px); line-height:1.15; }
.explorer-album .explorer-icon { width:19px; height:19px; font-size:14px; }
.explorer-album-content { padding:22px; display:grid; grid-template-columns:210px minmax(0,1fr); align-items:start; gap:clamp(24px,5vw,54px); border-top:1px solid var(--line); }
.explorer-album-content img { display:block; width:100%; }
.explorer-songs { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.explorer-songs li { min-height:42px; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px; border-bottom:1px solid var(--line); }
.explorer-songs li>span { color:var(--muted); font-family:'TC Volume Sans',sans-serif; font-size:9px; letter-spacing:.08em; }
.explorer-songs a { padding:8px 0; color:var(--ink); font-size:17px; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--orange) 55%,transparent); text-underline-offset:3px; }
.explorer-songs a:hover { color:var(--orange); }
@media(max-width:650px) {
  .karaoke-intro { padding-block:20px 18px; }
  .karaoke-stage { min-height:270px; padding:25px 18px; }
  .karaoke-line-window { height:240px; }
  .karaoke-line-stack { height:320px; grid-template-rows:repeat(4,80px); }
  .karaoke-line { font-size:clamp(21px,6.2vw,27px); line-height:1.08; }
  .karaoke-player { margin-bottom:55px; }
  .karaoke-lyrics { padding-bottom:75px; }
  .karaoke-lyrics-heading { align-items:start; flex-direction:column; gap:9px; }
  .karaoke-lyrics-heading p { text-align:left; }
  .karaoke-lyrics ol { max-height:430px; }
  .karaoke-lyrics button { grid-template-columns:34px minmax(0,1fr); padding:10px 8px; font-size:16px; }
  .karaoke-explorer { padding-bottom:75px; }
  .karaoke-explorer summary { grid-template-columns:24px minmax(0,1fr); }
  .explorer-count { grid-column:2; margin-top:-7px; }
  .explorer-artist>summary { padding:16px; }
  .explorer-albums { padding:0 12px 16px 38px; }
  .explorer-album>summary { padding:12px; }
  .explorer-album-content { grid-template-columns:1fr; padding:16px; }
  .explorer-album-content img { max-width:180px; margin:auto; }
}
@media(prefers-reduced-motion:reduce) { .karaoke-lyrics ol { scroll-behavior:auto; } }

.karaoke-chord-rail { align-self:stretch; padding-right:18px; display:grid; grid-template-rows:1fr 1fr; align-items:center; border-right:1px solid var(--line); }
.karaoke-chord-slot { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink); --chord-name:var(--orange); }
.karaoke-chord-slot--next { opacity:.48; }
.karaoke-chord-slot>span { margin-bottom:2px; color:var(--muted); font-family:'TC Volume Sans',sans-serif; font-size:8px; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; }
.karaoke-chord-slot svg { display:block; width:76px; height:auto; }
.karaoke-chord-fallback { display:block; color:var(--orange); font-family:'TC Volume Sans',sans-serif; font-size:24px; font-weight:700; }
@media (max-width: 650px) {
  .karaoke-stage:not(.is-idle) { grid-template-columns:68px minmax(0,1fr); gap:8px; padding-inline:10px; }
  .karaoke-chord-rail { padding-right:7px; }
  .karaoke-chord-slot>span { font-size:6px; letter-spacing:.08em; }
  .karaoke-chord-slot svg { width:58px; }
}