:root{color-scheme:light;--ink:#172941;--muted:#60748a;--line:#e0e8f0;--navy:#11253f;--blue:#116eaf;--green:#147d58;--red:#b53d4c;--amber:#985e11}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,#e8f4fc,transparent 33%),#f3f7fb}
.site{min-height:100vh;display:flex;flex-direction:column}.masthead{background:var(--navy);color:#fff;padding:16px clamp(18px,4vw,54px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:43px;height:43px;border:2px solid #8ad1f6;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:27px;color:#86ceeb}.brand strong{display:block;font-size:17px}.brand small{display:block;color:#abc3d7;margin-top:2px;font-size:12px}
.online{display:flex;align-items:center;gap:8px;border-radius:30px;padding:7px 12px;background:#ffffff12;font-size:12px;color:#daeaf8}.dot{width:9px;height:9px;border-radius:50%;background:#f0b450}.online.ready .dot{background:#37d69a}.online.failed .dot{background:#f27f8a}
.terminal{width:min(760px,calc(100% - 30px));margin:30px auto 36px;text-align:center;flex:1}.kicker{font-size:12px;font-weight:800;letter-spacing:1.7px;color:#31799c;margin:0 0 12px}h1{font-size:clamp(27px,4.5vw,38px);letter-spacing:-.7px;margin:0 0 8px}.intro{color:var(--muted);line-height:1.5;margin:0 0 18px}
.clock{font-size:clamp(45px,9vw,72px);font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1.18}.date{font-size:15px;color:#678099;margin:4px 0 22px;text-transform:capitalize}
.capture-card{background:#fff;border:1px solid #e1eaf0;border-radius:24px;box-shadow:0 12px 38px #17395d10;padding:clamp(20px,4vw,36px)}.scan-icon{margin:auto;width:116px;height:116px;display:grid;place-items:center;background:#eaf6fc;border-radius:50%;color:#177c9d}.scan-icon.scanning{animation:pulse 1.7s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #1c9cd31f}50%{box-shadow:0 0 0 15px #1c9cd309}}
h2{font-size:23px;margin:14px 0 4px}#captureDetail{margin:0 0 22px;color:var(--muted);line-height:1.45}.mode-label{font-weight:800;font-size:11px;letter-spacing:1.4px;color:#6e8296;margin:0 0 10px}.mode{display:flex;max-width:390px;gap:10px;margin:0 auto 22px}.mode-button{flex:1;border:1px solid #cedde8;color:#45647c;background:#f5f9fc}.mode-button.selected{background:#0c6a8a;color:white;border-color:#0c6a8a;box-shadow:0 2px 6px #0b6f8b26}
button{font-family:inherit;font-size:15px;font-weight:700;padding:12px 16px;border-radius:12px;cursor:pointer;transition:transform .1s,background .15s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}.actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.primary{background:#137da1;color:white;border:1px solid #137da1}.secondary{background:#fff;color:#225d81;border:1px solid #c3d5e3}
.message{padding:14px 16px;min-height:58px;border-radius:12px;margin:4px 0 17px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}.neutral{background:#edf3f8;color:#35546c}.success{background:#e2f5ea;color:#155d3e;border:1px solid #9bd8b6}.error{background:#fff0f0;color:#963240;border:1px solid #f2b5bb}.warning{background:#fff6e2;color:#865b13;border:1px solid #f2d49b}
.result{background:#ecf9f1;border:1px solid #bce5cb;border-radius:14px;margin-top:18px;padding:15px;display:grid;gap:4px;text-align:center}.result[hidden]{display:none}.result strong{font-size:20px;color:#176440}.result span{font-weight:750;font-size:18px}.result time{color:#426451;font-variant-numeric:tabular-nums}.instruction{max-width:620px;margin:18px auto;color:#677e91;line-height:1.6;font-size:14px}footer{padding:16px;text-align:center;background:#eaf1f6;color:#668099;font-size:12px;line-height:1.5}
@media(max-width:540px){.masthead{padding:12px 16px}.online{padding:5px 9px}.terminal{margin:24px auto 30px}.mode-button{padding:13px 8px}.actions button{flex:1 1 160px}.capture-card{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.auto-mode{margin:12px auto 22px;border:1px solid #bcd8e8;background:#eff8fd;color:#265674;padding:13px 16px;max-width:530px;border-radius:12px;font-size:14px;line-height:1.5}.auto-mode strong{display:block;margin-top:4px}