/* Basic styles (same as stable) */
:root{ --fs:16px; --bg:#000; --fg:#fff; --glow:rgba(255,255,255,.06); }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
#app{position:relative;height:100vh;width:100vw;overflow:hidden;background:#000}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.btn{appearance:none;border:0;border-radius:12px;padding:.6rem .9rem;background:#111;color:#fff;font-size:1rem;
  box-shadow:0 0 0 1px #222, 0 6px 24px var(--glow);backdrop-filter:saturate(1.2) blur(2px);-webkit-backdrop-filter:saturate(1.2) blur(2px)}
.btn:active{transform:translateY(1px);opacity:.9}
.select{background:#111;color:#fff;border-radius:10px;padding:.4rem}
.btn-shutter{position:absolute;left:50%;bottom:20vh;transform:translateX(-50%);width:110px;height:110px;border-radius:999px;border:6px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 50% 40%, #fff, #ddd 60%, #bbb 100%);box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.35);opacity:.95}
.hud{position:absolute;left:0;right:0;padding:.6rem;background:linear-gradient(to var(--dock-gradient-dir, top), rgba(0,0,0,.55), rgba(0,0,0,.25));
  display:flex;flex-direction:column;gap:.5rem;pointer-events:auto}
.hud.top{top:0;--dock-gradient-dir:bottom} .hud.bottom{bottom:0;--dock-gradient-dir:top}
.row.controls{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.hint{opacity:.85;font-size:calc(var(--fs)*.95)}
.result{font-size:calc(var(--fs)*1.15);background:rgba(0,0,0,.35);padding:.5rem .7rem;border-radius:10px;min-height:2.2em;white-space:pre-line}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
html{font-size:var(--fs)} .rtl{direction:rtl} .rtl .row.controls{justify-content:flex-end}