:root { color-scheme: dark; font-family: Inter, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Microsoft YaHei", sans-serif; background:#101311; color:#f0f3ed; font-synthesis:none; }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none !important; }
button, input, select { font:inherit; } button, select { min-height:48px; cursor:pointer; } button, input, select { border:1px solid #414940; border-radius:9px; background:#1a201b; color:inherit; padding:12px 18px; } button:hover { background:#293229; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #c7eaa7; outline-offset:4px; } a { color:#c7eaa7; }
.player { min-height:100svh; max-width:1600px; margin:auto; padding:40px clamp(24px,6vw,100px) 30px; display:flex; flex-direction:column; gap:24px; }
header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; } header>div { min-width:0; } .eyebrow { color:#91a18e; font-size:12px; letter-spacing:.22em; margin:0 0 12px; } h1 { font-size:clamp(26px,3vw,44px); font-weight:550; letter-spacing:-.025em; margin:0; overflow-wrap:anywhere; } .artist { font-size:clamp(18px,1.8vw,26px); color:#9da69b; margin:8px 0 0; }
.quiet { background:transparent; color:#adb8a8; font-size:14px; flex-shrink:0; } .lyric-stage { flex:1; display:flex; flex-direction:column; justify-content:center; min-height:350px; padding:18px 0; } .synced { width:100%; } .lyric { margin:0; min-height:1.4em; line-height:1.35; overflow-wrap:anywhere; white-space:pre-line; } .previous,.upcoming,.distant { font-size:clamp(23px,2.7vw,40px); color:#6f7b6c; } .previous { margin-bottom:25px; } .current { font-size:clamp(34px,4.5vw,68px); color:#d4efb8; font-weight:600; letter-spacing:-.02em; margin-bottom:25px; } .upcoming { margin-bottom:16px; } .distant { opacity:.45; } .synced.changed { animation:arrive .3s ease-out; } @keyframes arrive { from { opacity:.65; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.message { font-size:clamp(25px,3.6vw,48px); color:#a7b59f; max-width:900px; line-height:1.4; } .plain { white-space:pre-wrap; overflow-y:auto; max-height:48vh; line-height:1.9; font-size:clamp(25px,3vw,40px); color:#d4dfcd; padding:12px 0; overflow-wrap:anywhere; } .timeline { display:flex; align-items:center; gap:20px; font-size:18px; font-variant-numeric:tabular-nums; color:#a0ab9a; } progress { appearance:none; flex:1; width:100%; height:3px; border:0; border-radius:3px; overflow:hidden; background:#30392e; } progress::-webkit-progress-bar { background:#30392e; } progress::-webkit-progress-value { background:#c6e6aa; } progress::-moz-progress-bar { background:#c6e6aa; } .status { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:16px; color:#bcc7b7; margin-top:24px; } .secondary { color:#85917e; } .separator { margin:0 14px; color:#56604f; } .source-dot { display:inline-block; width:8px; height:8px; background:#c6e6aa; border-radius:50%; margin-right:7px; } .options { display:flex; justify-content:flex-end; gap:12px; } .options:has(> :not([hidden])) { margin-top:16px; }
.mock { max-width:920px; margin:auto; padding:40px 24px; font-size:18px; } .mock header { margin-bottom:32px; } .mock p { color:#a7b59f; line-height:1.6; } .panel { padding:24px; border:1px solid #333e30; border-radius:16px; margin-bottom:24px; } h2 { font-weight:500; font-size:22px; margin-top:0; } .controls { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; } .mock input[type=range] { width:100%; padding:0; accent-color:#c7eaa7; min-height:48px; } .fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; } label { display:flex; flex-direction:column; gap:8px; font-size:16px; } input { width:100%; min-width:0; } #feedback { min-height:1.6em; } .mock output { font-variant-numeric:tabular-nums; } .primary { color:#162014; background:#c7eaa7; } .primary:hover { background:#def5c8; }
@media(max-width:600px) { .player { padding:24px; } .status { font-size:14px; } header { gap:12px; } .quiet { padding:8px 12px; } .fields { grid-template-columns:1fr; } .lyric-stage { min-height:340px; } }
@media(max-height:600px) and (min-width:700px) { .player { padding-top:20px; padding-bottom:20px; gap:12px; } .lyric-stage { min-height:230px; padding:8px 0; } .previous,.current { margin-bottom:12px; } .current { font-size:42px; } .previous,.upcoming,.distant { font-size:24px; } .status { margin-top:14px; } }
@media(prefers-reduced-motion:reduce) { .synced.changed { animation:none; } }