:root{--bg:#f4f1ec;--fg:#1d1b18;--muted:#6b645b;--card:rgba(255,255,255,.86);--accent:#b5652f;--accent-fg:#fff;--line:rgba(0,0,0,.12)}
@media (prefers-color-scheme:dark){:root{--bg:#1b1a18;--fg:#f1ede6;--muted:#a59d92;--card:rgba(40,38,35,.86);--line:rgba(255,255,255,.14)}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{position:fixed;inset:0;overflow:hidden}
#stage{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;left:16px;top:12px;right:16px;pointer-events:none}
#hud h1{margin:0;font-size:17px;font-weight:650}
#hud p{margin:2px 0 0;color:var(--muted);font-size:13px}
#bar{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px;border-radius:14px;background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--line)}
#states{display:flex;gap:6px;flex-wrap:wrap}
#states button,#play,#ara{font:600 14px/1 inherit;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
#states button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
#play{width:44px;justify-content:center;padding:0}
#scrub{flex:1 1 140px;display:flex;align-items:center;min-width:120px}
#scrub input{width:100%;accent-color:var(--accent)}
#arq,#ara{background:var(--accent);color:var(--accent-fg);border-color:transparent}
#arq{width:44px;height:40px;border-radius:10px;display:grid;place-items:center}
#arq img{width:22px;height:22px}
#arq[hidden],#ara[hidden],#note[hidden],#err[hidden]{display:none}
#note,#err{position:absolute;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));margin:0;font-size:13px;color:var(--muted);text-align:center}
#err{color:#c0392b}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:520px){#scrub{order:3;flex-basis:100%}#states button{padding:0 10px;font-size:13px}
  #note,#err{bottom:calc(124px + env(safe-area-inset-bottom))}}

/* фон под предмет (backdrop.js): тёмный под светлый картон и наоборот — интерфейс следует */
:root[data-bg=dark]{--bg:#121418;--fg:#f1ede6;--muted:#a9a399;--card:rgba(28,30,34,.78);--line:rgba(255,255,255,.14)}
:root[data-bg=light]{--bg:#f3efe8;--fg:#1d1b18;--muted:#6b645b;--card:rgba(255,255,255,.82);--line:rgba(0,0,0,.12)}