/* Audience viewer. Dark, mobile-first, one accent color. */ :root { --bg-top: #0d1421; --bg-bottom: #1a2234; --surface: #1c2536; --border: #2a3550; --text: #e8ecf4; --muted: #8b94a8; --accent: #14b8a6; --font-stack: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; } * { box-sizing: border-box; } /* display:flex on #watch/.continue would otherwise override the UA's [hidden] rule — keep the hidden attribute authoritative. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom)); color: var(--text); font: 400 15px/1.6 var(--font-stack); } /* ---------- Landing ---------- */ #landing { max-width: 420px; margin: 0 auto; padding: 12vh 24px 48px; } #landing h1 { font-size: 30px; margin: 0; letter-spacing: 0.02em; } #landing h1 .en { color: var(--accent); font-size: 22px; font-weight: 600; margin-left: 6px; } .tagline { color: var(--muted); margin: 8px 0 32px; } .continue { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 12px; background: var(--accent); color: #06231f; font: 600 17px/1.3 var(--font-stack); padding: 16px 20px; margin-bottom: 32px; cursor: pointer; box-shadow: 0 6px 24px rgba(20, 184, 166, 0.35); text-align: left; } .continue small { display: block; font-weight: 400; font-size: 12px; opacity: 0.75; } .continue .arrow { margin-left: auto; font-size: 20px; } .more-label { color: var(--muted); font-size: 11px; letter-spacing: 0.2em; margin: 0 0 12px; } .lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lang-grid button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text); font: 400 14px/1.3 var(--font-stack); padding: 13px 8px; cursor: pointer; } .lang-grid button:hover { border-color: var(--accent); } .landing-note { color: var(--muted); margin-top: 24px; text-align: center; } /* ---------- Watch ---------- */ #watch { display: flex; flex-direction: column; height: 100dvh; } .watch-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: rgba(13, 20, 33, 0.9); backdrop-filter: blur(8px); position: sticky; top: 0; } .bar-btn { border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--muted); font: 500 13px/1 var(--font-stack); padding: 7px 10px; cursor: pointer; } .bar-btn.active { color: var(--accent); border-color: var(--accent); } #back-btn { font-size: 17px; padding: 5px 12px; } .watch-lang { font-weight: 600; } .bar-spacer { flex: 1; } .live-dot { font-size: 12px; color: var(--muted); } .live-dot.online { color: var(--accent); } .history { flex: 1; overflow-y: auto; padding: 16px 20px 8px; } .history .row { margin-bottom: 14px; color: var(--muted); word-break: break-word; } .history .row:nth-last-child(-n+3) { color: var(--text); } .history .row .orig { display: block; font-size: 0.72em; color: var(--muted); margin-top: 2px; } .current-line { min-height: 1.5em; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); font-weight: 700; word-break: break-word; } /* Font tiers: applied on */ body.font-1 .history { font-size: 17px; } body.font-2 .history { font-size: 22px; } body.font-3 .history { font-size: 28px; } body.font-1 .current-line { font-size: 22px; } body.font-2 .current-line { font-size: 28px; } body.font-3 .current-line { font-size: 36px; } @media (min-width: 720px) { .history, .current-line { max-width: 760px; margin: 0 auto; width: 100%; } }