:root{--ink:#111;--muted:#444;--brand:#2457C5;--brand-d:#1a3f91;--accent:#F28C28;--accent-d:#c96d12;--bg:#fff;--focus:#ffbf47}
*{box-sizing:border-box}
html{font-size:20px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--brand);color:#fff;padding-top:calc(8px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:800}
.brand img{border-radius:10px}
.nav-btn{background:transparent;color:#fff;border:2px solid #fff;border-radius:12px;font-size:.9rem;font-weight:700;padding:8px 12px;margin-left:6px;min-height:52px;min-width:52px;cursor:pointer}
.start,.help{max-width:640px;margin:0 auto;padding:18px;text-align:center}
.help{text-align:left}.help li{margin:8px 0}
.start img{border-radius:26px;margin-top:10px}
h1{font-size:1.7rem;margin:.3em 0;color:var(--brand)}
.lead{font-size:1.05rem;color:var(--muted)}
.small{font-size:.8rem}.muted{color:var(--muted)}
.err{background:#fff3cd;color:#7a1d00;border:3px solid #e0b100;border-radius:14px;padding:12px}
.big{display:flex;align-items:center;justify-content:center;width:100%;min-height:72px;font-size:1.2rem;font-weight:800;border-radius:18px;border:3px solid var(--brand);margin:12px 0;cursor:pointer;padding:14px}
.primary{background:var(--brand);color:#fff}.primary:active{background:var(--brand-d)}
.ghost{background:#fff;color:var(--brand)}
.viewer{display:flex;flex-direction:column}
.stage{position:relative;height:52vh;min-height:240px;background:#000;overflow:hidden;touch-action:none}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center center}
.stage canvas{object-fit:contain}
.stage.m-yellow::after{content:"";position:absolute;inset:0;background:#ffe600;mix-blend-mode:multiply;pointer-events:none}
.badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-weight:800;font-size:1.1rem;padding:4px 12px;border-radius:12px}
.badge.frozen{left:auto;right:8px;background:var(--accent);color:#000}
.controls{padding:10px 10px 0;max-width:720px;margin:0 auto;width:100%}
.row{display:flex;gap:10px;margin-bottom:10px}
.ctl{flex:1;min-height:84px;border-radius:18px;border:3px solid var(--brand);background:#fff;color:var(--brand);font-size:1.7rem;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:6px 4px;line-height:1.1}
.ctl small{font-size:.8rem;font-weight:800;margin-top:4px;color:inherit}
.ctl.zoom{font-size:2.8rem;background:var(--brand);color:#fff;min-height:96px}
.ctl.zoom:active{background:var(--brand-d)}
.ctl.accent{background:var(--accent);border-color:var(--accent-d);color:#000}
.ctl[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-d);color:#000}
.ctl.stop{background:#b00020;border-color:#7a0016;color:#fff;flex:0 0 auto;min-width:130px}
.ctl[disabled]{opacity:.5}
.slider{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.95rem;margin:10px 0}
.slider input{flex:1;height:44px;accent-color:var(--brand)}
.reader,.help{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:auto;padding:14px 14px calc(100px + env(safe-area-inset-bottom))}
.reader-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.reader h2,.help h2{color:var(--brand);margin:.2em 0}
.status{font-weight:800;font-size:1.05rem;min-height:1.4em}
.ocr-text{font-size:32px;line-height:1.35;font-weight:600;white-space:pre-wrap;word-wrap:break-word;border:3px solid #999;border-radius:14px;padding:14px;min-height:30vh;margin-bottom:12px;background:#fff;color:#000}
.house-ad{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#f4f4f4;border-top:2px solid #ccc;padding:8px 14px calc(8px + env(safe-area-inset-bottom));font-size:.8rem;min-height:64px;display:flex;align-items:center}
.house-ad a{color:var(--ink);text-decoration:none;display:flex;gap:10px;align-items:center;width:100%;max-width:640px;margin:0 auto}
.house-ad img{border-radius:8px;object-fit:cover;flex:0 0 auto}
.house-ad .tag{font-size:.65rem;font-weight:800;color:#666;border:1px solid #999;border-radius:6px;padding:1px 5px}
.house-ad b{color:var(--brand)}
@media (prefers-color-scheme:dark){:root{--ink:#f2f2f2;--muted:#c8c8c8;--bg:#121212}.ghost,.ctl{background:#1d1d1d}.ghost,.ctl:not(.zoom):not(.accent):not(.stop):not([aria-pressed="true"]){color:#9dbaff;border-color:#9dbaff}.house-ad{background:#1d1d1d;border-color:#444}.house-ad b{color:#9dbaff}h1,.reader h2,.help h2{color:#9dbaff}}
@media (min-height:800px){.stage{height:56vh}}