:root{--paper:#f7f5f0;--tile:#edebe6;--ink:#1c1c1e;--ink-muted:#6e6e73;--ink-faint:#8e8e93;--handle:#c7c7cc;--glass:#f7f5f0eb;--backdrop:#2c2c2e;--error:#c4302b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}*,:before,:after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}html,body{background:var(--backdrop);width:100%;height:100%;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#camerafeed{width:100%;height:100%;display:block;position:fixed;inset:0}.splash{z-index:50;background:#fff;place-items:center;transition:opacity .5s;display:grid;position:fixed;inset:0}.splash img{width:min(78vw,360px);height:auto}.splash.out{opacity:0;pointer-events:none}.backdrop{z-index:1;background:radial-gradient(120% 70% at 50% 0%, #4a4a4e 0%, transparent 70%), var(--backdrop);position:fixed;inset:0}.screen{z-index:40;background:var(--paper);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.card{background:var(--paper);border-radius:24px;width:min(440px,100%);padding:22px 20px}.card.small{font-size:13px}.card a{color:var(--ink)}.card .logo{mix-blend-mode:multiply;width:180px;margin:0 auto 16px;display:block}h1,h2{color:var(--ink);margin:0 0 6px}.muted{color:var(--ink-muted);margin:0 0 16px}.error{color:var(--error)!important}.url{word-break:break-all;font-weight:600}button.primary{color:#fff;background:var(--ink);cursor:pointer;border:0;border-radius:14px;width:100%;padding:14px;font:600 16px system-ui,sans-serif}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}#hud .bottom{padding:12px 0 calc(env(safe-area-inset-bottom) + 18px);pointer-events:auto;justify-content:center;gap:12px;display:flex;position:absolute;bottom:0;left:0;right:0}#hud.mode-select .bottom,#hud.mode-select .hint,#hud.mode-select .scan,#hud.mode-select .loading{display:none}button.round,button.pill{height:50px;color:var(--ink);background:var(--glass);cursor:pointer;border:0;box-shadow:0 4px 16px #0000002e}button.round{border-radius:50%;width:50px;font:600 20px system-ui,sans-serif}button.pill{border-radius:25px;align-items:center;gap:8px;padding:0 20px 0 16px;font:600 16px system-ui,sans-serif;display:inline-flex}button.pill svg{fill:none;stroke:currentColor;stroke-width:2px;width:20px;height:20px}.hint{left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);width:max-content;max-width:calc(100% - 32px);color:var(--ink);background:var(--glass);text-align:center;border-radius:14px;padding:10px 14px;transition:opacity .3s;position:absolute;transform:translate(-50%);box-shadow:0 4px 16px #00000026}.hint.hidden{opacity:0}.scan{opacity:0;filter:drop-shadow(0 1px 1.5px #1c1c1e99);width:min(290px,74%);transition:opacity .4s;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.scan.on{opacity:1}.scan svg{width:100%;height:auto;display:block;overflow:visible}.scan-dot{fill:var(--paper);transform-box:fill-box;transform-origin:50%;animation:2.2s ease-out infinite scan-dot;animation-delay:calc(var(--d) * .9s)}@keyframes scan-dot{0%,to{opacity:.3;transform:scale(.75)}12%{opacity:1;transform:scale(1.35)}40%{opacity:.4;transform:scale(.85)}}.scan-phone{transform-box:view-box;transform-origin:120px 140px;animation:2.6s ease-in-out infinite alternate scan-phone}.scan-phone rect{fill:#f7f5f040;stroke:var(--paper);stroke-width:2.5px}.scan-phone circle{fill:var(--paper)}.scan-beam{fill:var(--paper);opacity:.16}@keyframes scan-phone{0%{transform:translate(-46px)rotate(-9deg)}to{transform:translate(46px)rotate(9deg)}}.scan:not(.on) *{animation-play-state:paused}.scan-text{max-width:260px;color:var(--ink);background:var(--glass);text-align:center;filter:none;border-radius:14px;margin:14px auto 0;padding:8px 14px;font-size:14px}.scan-text:empty{display:none}.loading{width:min(240px,70%);color:var(--ink);background:var(--glass);text-align:center;pointer-events:none;border-radius:20px;padding:18px 18px 16px;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 24px #0000002e}.loading p{margin:10px 0 0;font-weight:600}.loading button{pointer-events:auto;margin-top:12px;padding:10px;font-size:15px}.loading-ring{width:48px;height:48px;margin:0 auto;display:block;transform:rotate(-90deg)}.loading-ring circle{fill:none;stroke-width:4px}.loading-ring circle:first-child{stroke:var(--tile)}#loadingArc{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .3s}.loading.error .loading-ring{display:none}.sheet-shade{pointer-events:auto;background:#00000040;position:absolute;inset:0}.sheet{width:min(560px,100%);max-height:calc(100% - env(safe-area-inset-top) - 24px);padding:10px 16px calc(env(safe-area-inset-bottom) + 16px);background:var(--paper);pointer-events:auto;border-radius:28px 28px 0 0;animation:.35s cubic-bezier(.2,.8,.2,1) sheet-in;position:absolute;bottom:0;left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 -8px 32px #00000040}@keyframes sheet-in{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}.sheet-handle{background:var(--handle);border-radius:3px;width:40px;height:5px;margin:0 auto 14px}.sheet h1{text-align:center;letter-spacing:-.01em;font:700 28px/1.15 system-ui,-apple-system,sans-serif}.sheet-sub{text-align:center;color:var(--ink-muted);margin:0 0 16px;font-size:16px}.tiles{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tile{background:var(--tile);cursor:pointer;border:2px solid #0000;border-radius:14px;height:clamp(92px,15vh,140px);transition:transform .12s,border-color .15s;position:relative}.tile:last-child:nth-child(odd){grid-column:1/-1}.tile:active{transform:scale(.97)}.tile[aria-pressed=true]{border-color:var(--ink)}.tile:disabled{cursor:progress}.tile .num{color:var(--ink-faint);font:400 14px system-ui,sans-serif;position:absolute;top:10px;left:14px}.tile img{pointer-events:none;height:74%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modal{pointer-events:auto;background:#00000059;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.log{left:8px;right:8px;top:calc(env(safe-area-inset-top) + 84px);white-space:pre-wrap;color:#ffd27a;text-shadow:0 1px 2px #000;max-height:40%;margin:0;font:11px ui-monospace,monospace;position:absolute;overflow:hidden}.stats{left:8px;top:calc(env(safe-area-inset-top) + 8px);white-space:pre;color:#ffffffbf;text-shadow:0 1px 2px #000;font:11px ui-monospace,monospace;position:absolute;right:8px;overflow:hidden}
