/* Minimal system fonts; offline safe */
:root{
  --bg:#0b0c10; --fg:#e8eef2; --muted:#aab7c0; --accent:#6eb6ff;
  --glass:rgba(10,12,16,0.5); --glass-strong:rgba(10,12,16,0.75);
  --ui-fade-ms:300ms;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif}

/* UI overlay */
.ui{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.ui.hidden{opacity:0;transition:opacity var(--ui-fade-ms) ease}
.ui:not(.hidden){opacity:1;transition:opacity var(--ui-fade-ms) ease}
.topbar,.bottombar{display:flex;gap:12px;align-items:center;background:var(--glass);backdrop-filter:blur(8px);
  pointer-events:auto;padding:10px 12px}
.topbar{border-bottom:1px solid rgba(255,255,255,0.07);margin:6px;border-radius:12px}
.bottombar{border-top:1px solid rgba(255,255,255,0.07);margin:6px;border-radius:12px;flex-wrap:wrap;row-gap:8px}
.title{font-weight:600;letter-spacing:.3px}
.hint{color:var(--muted);font-size:13px}
.spacer{flex:1 1 auto}
.btn{appearance:none;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:var(--glass-strong);
  color:var(--fg);padding:8px 12px;cursor:pointer;transition:transform 120ms ease, background 120ms ease, border-color 120ms ease}
.btn:hover{transform:translateY(-1px);background:rgba(20,24,28,.9);border-color:rgba(255,255,255,.25)}
.counter{min-width:72px;text-align:center;color:var(--muted)}
.loading{position:fixed;inset:0;display:grid;place-items:center;gap:10px;background:radial-gradient(1200px 600px at 50% 45%, rgba(255,255,255,0.04), rgba(0,0,0,0.0));color:var(--muted);text-align:center;font-size:14px}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin 900ms linear infinite;margin:6px auto 8px}
@keyframes spin{to{transform:rotate(360deg)}}
canvas{display:block}

/* Audio */
.audiobar{display:flex;align-items:center;gap:8px}
.audiobar.hidden{display:none}
.audio_select{min-width:140px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.18);background:rgba(0,0,0,0.2);color:var(--fg)}
.audio_player{width:220px;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* OSD overlay */
.osd{position:fixed;inset:0;background:#000;display:grid;grid-template-rows:1fr;align-items:stretch;justify-items:stretch}
.osd.hidden{display:none}
.osd_viewport{width:100%;height:100%}
.osd_close{position:fixed;top:12px;right:12px;z-index:10}
.osd_hint{position:fixed;left:12px;bottom:12px;color:#ccc;background:rgba(0,0,0,.4);padding:6px 8px;border-radius:8px;font-size:12px}