:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101418;--bg-elevated:#171c22;--bg-hover:#1d242c;--border:#262e37;--text:#e8edf2;--text-muted:#8a96a3;--accent:#34d399;--accent-contrast:#062a1f;--danger:#f87171;--radius:14px;--safe-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f7f9;--bg-elevated:#fff;--bg-hover:#eef2f5;--border:#dde3e9;--text:#141a20;--text-muted:#5f6b77;--accent:#0f9f6e;--accent-contrast:#fff;--danger:#c53030}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:640px;min-height:100dvh;padding:0 16px;padding-bottom:calc(140px + var(--safe-bottom));flex-direction:column;margin:0 auto;display:flex}.header{justify-content:space-between;align-items:center;gap:12px;padding:18px 0 12px;display:flex}.brand{letter-spacing:.01em;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;display:flex}.brand img{border-radius:8px;width:28px;height:28px}.status{color:var(--text-muted);align-items:center;gap:6px;font-size:.8rem;display:inline-flex}.status:before{content:"";background:var(--text-muted);border-radius:50%;width:8px;height:8px}.status.on:before{background:var(--accent)}.status.off:before{background:var(--danger)}.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.setup{flex-direction:column;gap:14px;margin-top:24px;display:flex}.setup h1{margin:0;font-size:1.4rem}.setup p{color:var(--text-muted);margin:0}.btn{border:1px solid var(--border);background:var(--bg-hover);border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 20px;font-weight:600;display:inline-flex}.btn:disabled{opacity:.6;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.link{color:var(--text-muted);text-underline-offset:3px;background:0 0;border:none;padding:0;font-size:.9rem;text-decoration:underline}.error{color:var(--danger);font-size:.9rem}.list{flex-direction:column;gap:8px;margin:8px 0 0;padding:0;list-style:none;display:flex}.message{text-align:left;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--border);grid-template-columns:1fr auto;grid-template-areas:"title duration""time duration";gap:2px 12px;width:100%;padding:14px 16px;transition:background .12s,border-color .12s;display:grid}.message:hover{background:var(--bg-hover)}.message.active{border-color:var(--accent)}.message .title{overflow-wrap:anywhere;grid-area:title;font-weight:600}.message .time{color:var(--text-muted);grid-area:time;font-size:.85rem}.message .duration{font-variant-numeric:tabular-nums;color:var(--text-muted);grid-area:duration;align-self:center;font-size:.95rem}.message.active .duration{color:var(--accent)}.empty{text-align:center;color:var(--text-muted);margin-top:32px}.empty code{background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:.9em}.player{padding:12px 16px calc(12px + var(--safe-bottom));background:var(--bg-elevated);border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #00000040}.player-inner{flex-direction:column;gap:8px;max-width:640px;margin:0 auto;display:flex}.player .now{justify-content:space-between;gap:12px;font-size:.95rem;display:flex}.player .now .title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.player .now .clock{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.seek{width:100%;accent-color:var(--accent);height:28px;margin:0}.controls{justify-content:space-between;align-items:center;gap:10px;display:flex}.transport{align-items:center;gap:8px;display:flex}.icon-btn{border:1px solid var(--border);background:var(--bg-hover);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:.8rem;font-weight:600;display:inline-flex}.icon-btn.play{background:var(--accent);border-color:var(--accent);width:56px;height:56px;color:var(--accent-contrast)}.icon-btn svg{fill:currentColor;width:22px;height:22px}.speeds{border:1px solid var(--border);border-radius:10px;display:inline-flex;overflow:hidden}.speeds button{font-variant-numeric:tabular-nums;color:var(--text-muted);background:0 0;border:none;padding:8px 10px;font-size:.85rem}.speeds button+button{border-left:1px solid var(--border)}.speeds button[aria-pressed=true]{background:var(--accent);color:var(--accent-contrast);font-weight:700}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}