:root{--bg: #f4f4f5;--surface: #ffffff;--surface-muted: #f7f7f8;--border: #e6e6e9;--text: #17171a;--text-muted: #6b6b75;--text-faint: #9a9aa4;--accent: #2f4bd4;--accent-track: #dcdff5;--online-bg: #10893e;--online-text: #ffffff;--offline-bg: #c0332b;--offline-text: #ffffff;--radius: 14px;--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 6%);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #101014;--surface: #18181d;--surface-muted: #1f1f26;--border: #2a2a33;--text: #f2f2f5;--text-muted: #a1a1ad;--text-faint: #74747f;--accent: #7f95ff;--accent-track: #2c2f45;--online-bg: #1f9d55;--offline-bg: #d4453b;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%)}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}.page{max-width:640px;margin:0 auto;padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px));background:var(--surface);min-height:100vh}@media(min-width:680px){.page{margin:24px auto;min-height:0;border-radius:var(--radius);box-shadow:var(--shadow)}}.page--message{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;min-height:70vh}.hero{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-bottom:18px;border-bottom:1px solid var(--border)}.hero__site{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;flex:1 1 auto;min-width:0;overflow-wrap:break-word}.hero__meta{display:flex;align-items:center;gap:12px;flex:0 0 auto}.hero__seen{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.875rem;white-space:nowrap}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.875rem;font-weight:600}.chip--online{background:var(--online-bg);color:var(--online-text)}.chip--offline{background:var(--offline-bg);color:var(--offline-text)}.icon{width:15px;height:15px;flex:0 0 auto}.reconnecting{margin:10px 0 0;font-size:.8125rem;color:var(--text-muted)}.section{margin-top:20px}.section__heading{margin:0 0 8px;font-size:.9375rem;font-weight:600;color:var(--text-muted)}.empty{margin:0;color:var(--text-faint);font-size:.9375rem}.tracklist{list-style:none;margin:0;padding:0}.track{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.track:last-child{border-bottom:none}.track__index{width:14px;flex:0 0 auto;text-align:right;color:var(--text-faint);font-size:.8125rem;font-variant-numeric:tabular-nums}.track__body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.track__title{font-size:1rem;overflow-wrap:anywhere}.track__artist{font-size:.8125rem;color:var(--text-muted);overflow-wrap:anywhere}.track__meta{display:flex;align-items:baseline;gap:12px;flex:0 0 auto;color:var(--text-muted);font-size:.875rem;font-variant-numeric:tabular-nums}.context{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:20px;padding:10px 12px;border-radius:10px;background:var(--surface-muted);color:var(--text-muted);font-size:.875rem}.context__left{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.context__schedule{color:var(--text);font-weight:600}.context__position{white-space:nowrap}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);padding:14px}.card__head{display:flex;align-items:center;gap:12px}.card__art{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border-radius:10px;background:var(--accent-track);color:var(--accent)}.icon--music{width:22px;height:22px}.card__body{display:flex;flex-direction:column;min-width:0}.card__title{font-size:1.0625rem;font-weight:700;overflow-wrap:anywhere}.card__artist{font-size:.9375rem;color:var(--text-muted);overflow-wrap:anywhere}.progress{margin-top:14px;height:6px;border-radius:999px;background:var(--accent-track);overflow:hidden}.progress__fill{height:100%;border-radius:999px;background:var(--accent);transition:width .9s linear}@media(prefers-reduced-motion:reduce){.progress__fill{transition:none}}.card__times{display:flex;justify-content:space-between;margin-top:6px;color:var(--text-muted);font-size:.8125rem;font-variant-numeric:tabular-nums}.message__title{margin:0;font-size:1.25rem;font-weight:700}.message__code{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.125rem;letter-spacing:.06em;color:var(--text-muted)}.message__body{margin:0;max-width:30rem;color:var(--text-muted)}.footer{margin-top:26px;padding-top:14px;border-top:1px solid var(--border);color:var(--text-faint);font-size:.8125rem;text-align:center}.page--message .footer{border-top:none}