@layer karaoke {
  .karaoke-overlay { --karaoke-accent: #c7ff7e; --karaoke-text: #fff; --karaoke-muted: #c4c8d0; --karaoke-panel: rgb(16 20 29 / .82); --karaoke-radius: 20px; --karaoke-gap: 20px; position: fixed; inset: 0; padding: 28px; box-sizing: border-box; overflow: hidden; color: var(--karaoke-text); font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif; }
  .karaoke-overlay * { box-sizing: border-box; }
  :where(.karaoke-overlay) :where(p, h1, h2) { margin: 0; }
  .karaoke-overlay .karaoke-setup { display: inline-block; padding: 14px 20px; border-radius: 12px; background: var(--karaoke-panel); font-size: 18px; }
  .karaoke-info { display: flex; align-items: flex-end; }
  .karaoke-info-card { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: var(--karaoke-gap); width: min(100%, 1080px); padding: 26px 30px 32px; border: 1px solid rgb(255 255 255 / .13); border-radius: var(--karaoke-radius); background: var(--karaoke-panel); box-shadow: 0 10px 32px rgb(0 0 0 / .15); overflow: hidden; }
  .karaoke-song-details { min-width: 0; }
  .karaoke-eyebrow { display: block; margin-bottom: 8px; color: var(--karaoke-accent); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
  .karaoke-title { font-size: clamp(22px, 2.4vw, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
  .karaoke-title-translation { margin-top: 4px !important; color: var(--karaoke-muted); font-size: clamp(14px, 1.2vw, 22px); line-height: 1.4; }
  .karaoke-artist { margin-top: 12px !important; font-size: clamp(16px, 1.3vw, 24px); line-height: 1.3; }
  .karaoke-artist-translation { margin-top: 3px !important; color: var(--karaoke-muted); font-size: clamp(12px, 1vw, 17px); }
  .karaoke-donation { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 15px !important; font-size: 13px; color: var(--karaoke-muted); }
  .karaoke-donor { overflow-wrap: anywhere; }
  .karaoke-amount { color: var(--karaoke-accent); font-variant-numeric: tabular-nums; }
  .karaoke-time { display: grid; align-content: center; gap: 6px; text-align: right; padding-left: 18px; border-left: 1px solid rgb(255 255 255 / .15); }
  .karaoke-time-label { color: var(--karaoke-muted); font-size: 11px; white-space: nowrap; }
  .karaoke-remaining { font-size: clamp(28px, 3vw, 48px); font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: -.05em; }
  .karaoke-track { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgb(255 255 255 / .1); }
  .karaoke-track-progress { height: 100%; background: var(--karaoke-accent); transform-origin: left; }
  .karaoke-now-indicator { display: flex; align-items: center; gap: 5px; height: 44px; }
  .karaoke-now-indicator i { display: block; width: 6px; height: 32px; border-radius: 3px; background: var(--karaoke-accent); animation: karaoke-meter 1s ease-in-out infinite alternate; }
  .karaoke-now-indicator i:nth-child(2) { animation-delay: -.4s; height: 44px; }
  .karaoke-now-indicator i:nth-child(3) { animation-delay: -.7s; }
  .karaoke-now-indicator i:nth-child(4) { animation-delay: -.2s; height: 22px; }
  .karaoke-overlay:not([data-playback='playing']) .karaoke-now-indicator i { animation-play-state: paused; }
  .karaoke-queue { width: min(100%, 960px); max-height: 100%; display: flex; flex-direction: column; }
  .karaoke-queue-heading { display: flex; gap: 16px; align-items: center; padding: 0 6px 14px; }
  .karaoke-queue-heading .karaoke-eyebrow { margin: 0; }
  .karaoke-queue-count { color: var(--karaoke-muted); font-size: 12px; }
  .karaoke-queue-items { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .karaoke-queue-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 24px; border-radius: var(--karaoke-radius); background: var(--karaoke-panel); border: 1px solid rgb(255 255 255 / .1); flex-shrink: 0; }
  .karaoke-queue-item.is-next { border-color: color-mix(in srgb, var(--karaoke-accent), transparent 60%); }
  .karaoke-queue-number { align-self: start; padding-top: 3px; font-size: 14px; color: var(--karaoke-muted); font-variant-numeric: tabular-nums; }
  .karaoke-queue-item.is-next .karaoke-queue-number { color: var(--karaoke-accent); }
  .karaoke-queue-item .karaoke-title { font-size: clamp(18px, 1.65vw, 29px); }
  .karaoke-queue-item .karaoke-title-translation { font-size: clamp(13px, 1vw, 17px); }
  .karaoke-queue-item .karaoke-artist { margin-top: 7px !important; font-size: clamp(14px, 1.1vw, 19px); }
  .karaoke-queue-item .karaoke-artist-translation { font-size: 13px; }
  .karaoke-queue-item .karaoke-donation { margin-top: 12px !important; font-size: 12px; }
  .karaoke-queue-timing { display: grid; gap: 5px; text-align: right; min-width: 65px; }
  .karaoke-wait { color: var(--karaoke-accent); font-size: clamp(18px, 2vw, 28px); font-variant-numeric: tabular-nums; }
  .karaoke-marquee { display: block; min-width: 0; max-width: 100%; overflow: hidden; }
  .karaoke-marquee-text { display: inline-block; white-space: nowrap; }
  .karaoke-marquee.is-overflowing .karaoke-marquee-text { animation: karaoke-marquee var(--karaoke-scroll-duration, 12s) ease-in-out infinite alternate; }
  .karaoke-song-enter-active { animation: karaoke-card-in .45s ease-out; }
  .karaoke-song-leave-active { position: absolute; bottom: 28px; animation: karaoke-card-out .3s ease-in both; }
  .karaoke-queue-enter-active { animation: karaoke-card-in .4s ease-out; }
  .karaoke-queue-leave-active { position: absolute; width: 100%; animation: karaoke-card-out .3s ease-in both; }
  .karaoke-queue-move { transition: transform .4s ease; }
  @keyframes karaoke-meter { to { transform: scaleY(.35); } }
  @keyframes karaoke-marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--karaoke-scroll-distance)); } }
  @keyframes karaoke-card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes karaoke-card-out { to { opacity: 0; transform: translateY(-18px); } }
  @media (max-width: 600px) {
    .karaoke-overlay { padding: 12px; --karaoke-gap: 12px; --karaoke-radius: 14px; }
    .karaoke-info-card { grid-template-columns: minmax(0, 1fr) auto; padding: 20px 18px 25px; }
    .karaoke-now-indicator { display: none; }
    .karaoke-queue-item { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 16px 14px; }
    .karaoke-time { padding-left: 12px; }
    .karaoke-queue-timing { min-width: 52px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .karaoke-overlay *, .karaoke-overlay *::before, .karaoke-overlay *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; }
    .karaoke-marquee.is-overflowing .karaoke-marquee-text { white-space: normal; overflow-wrap: anywhere; }
  }
}

@layer overlay-home {
  .overlay-home { box-sizing: border-box; min-height: 100%; height: 100%; overflow: auto; background: #10131a; color: #eef1f5; padding: 32px max(24px, calc((100vw - 1200px)/2)); font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif; }
  .overlay-home * { box-sizing: border-box; }
  .overlay-home a { color: inherit; text-decoration: none; }
  .home-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid #30353d; }
  .home-brand { font-size: 15px; font-weight: 900; letter-spacing: .06em; }
  .home-brand span { margin-left: 10px; font-size: 11px; font-weight: 500; color: #9299a5; }
  .home-tag { font-size: 10px; letter-spacing: .12em; color: #9299a5; }
  .home-intro { margin-top: 72px; }
  .home-eyebrow { color: #c7ff7e; font-size: 11px; font-weight: 700; letter-spacing: .17em; }
  .home-intro h1 { margin: 18px 0; font-size: clamp(30px, 4.3vw, 58px); line-height: 1.25; letter-spacing: -.055em; }
  .home-intro p { font-size: 15px; color: #a0a7b3; line-height: 1.8; }
  .home-uid { display: grid; gap: 9px; max-width: 500px; margin-top: 32px; font-size: 12px; color: #a0a7b3; }
  .home-uid input { width: 100%; padding: 15px; background: #191e28; color: #fff; border: 1px solid #353d4a; border-radius: 8px; font: inherit; font-size: 14px; }
  .home-uid input:focus { outline: 2px solid #c7ff7e; outline-offset: 2px; }
  .home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .home-card { display: block; padding: 28px; border: 1px solid #343b46; border-radius: 16px; background: #181d26; transition: border-color .2s, transform .2s; }
  .home-card:hover { transform: translateY(-4px); border-color: #c7ff7e; }
  .home-card-number { color: #c7ff7e; font-size: 10px; letter-spacing: .13em; }
  .home-card h2 { display: flex; justify-content: space-between; margin: 32px 0 12px; font-size: 24px; letter-spacing: -.04em; }
  .home-card h2 span { font-weight: 400; color: #c7ff7e; }
  .home-card p { color: #c1c6cf; font-size: 14px; }
  .home-card small { display: block; color: #9099a7; font-size: 11px; line-height: 1.6; }
  .home-card code { display: block; margin-top: 34px; color: #75808f; font-size: 11px; }
  .home-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 30px 0; font-size: 12px; }
  .home-footer a { color: #c7ff7e; }
  .home-footer span { color: #9099a7; }
  @media(max-width: 760px) { .home-cards { grid-template-columns: 1fr; } .home-tag { display: none; } .home-intro { margin-top: 40px; } }
}