:root{--bg: #f9f7f2;--card: #f1eadc;--cream: #fffaf3;--brown: #7b6148;--brown2: #5e4a36;--ink: #1a1410;--mute: #5a4a3a;--line: #000;--ok: #2f9e6b;--bad: #c94444;--shadow: 4px 4px 0 #000;--shadow-sm: 3px 3px 0 #000;--font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bot: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;min-height:100%;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:800;-webkit-font-smoothing:antialiased}body{background:radial-gradient(70% 50% at 100% 0%,rgba(123,97,72,.12),transparent 55%),radial-gradient(55% 40% at 0% 100%,rgba(123,97,72,.08),transparent 50%),repeating-linear-gradient(0deg,transparent,transparent 11px,rgba(123,97,72,.018) 11px,rgba(123,97,72,.018) 12px),var(--bg)}button,input{font:inherit}.gate,.viewer,.home{min-height:100dvh;display:grid;place-items:center;padding:calc(20px + var(--safe-top)) 16px calc(28px + var(--safe-bot))}.gate-panel,.home-panel,.viewer-shell{width:min(440px,100%);background:var(--card);border:2.5px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px 22px;position:relative;animation:rise .45s ease both}.gate-panel:before,.home-panel:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:16px;pointer-events:none;border:1px solid rgba(123,97,72,.14)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.brand{margin:0;font-size:clamp(2.2rem,11vw,3rem);line-height:.92;font-weight:900;color:var(--brown);text-align:center;letter-spacing:-.03em}.gate-panel h1,.home-panel h1{margin:14px 0 0;font-size:1.35rem;text-align:center;color:var(--ink)}.lede,.hint{margin:10px auto 0;color:var(--mute);font-size:.98rem;line-height:1.7;text-align:center;max-width:36ch}.block,.section{margin-top:18px;position:relative;z-index:1}.block.tight{margin-top:14px}.device-id,code.device-id{display:block;margin-top:8px;padding:12px;border:2.5px solid var(--line);border-radius:14px;background:var(--cream);box-shadow:var(--shadow-sm);word-break:break-all;text-align:center;font-size:.85rem}.warn-list{margin:16px 0 0;padding:0 0 0 1.1rem;color:var(--mute);line-height:1.65}.warn-list li{margin-bottom:10px}.warn-list strong{color:var(--ink);display:block}.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:var(--mute);font-size:.92rem;line-height:1.55}.row{display:flex;flex-direction:column;gap:10px;margin-top:14px;position:relative;z-index:1}input{width:100%;border:2.5px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--cream);color:var(--ink);font-weight:800}.btn,button.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2.5px solid var(--line);border-radius:16px;padding:14px 18px;width:100%;text-align:center;cursor:pointer;font-weight:900;font-size:1.02rem;box-shadow:var(--shadow-sm);background:var(--cream);color:var(--brown)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px #000}.btn:disabled{opacity:.42;pointer-events:none}.btn.primary,.btn-primary{background:var(--brown);color:#fff}.btn.ghost{background:var(--cream);color:var(--brown)}.status{margin-top:12px;text-align:center;color:var(--mute)}.status.err,.status-msg.err{color:var(--bad)}.status.ok,.status-msg.ok{color:var(--ok)}.viewer{place-items:stretch;max-width:960px;margin:0 auto}.viewer-shell{width:100%;max-width:960px;margin:0 auto}.viewer video,.video-stage video{width:100%;max-height:min(62vh,520px);background:#111;border-radius:16px;border:2.5px solid var(--line);touch-action:none}.controls,.viewer-actions{display:grid;gap:10px;margin-top:14px}@media(min-width:720px){.row{flex-direction:row}.row .btn{width:auto;min-width:140px}}.home-bg{display:none}