:root { color-scheme: light; --ink:#173a31; --muted:#60756b; --green:#176a56; --paper:#f4f4ee; --line:#dce3d9; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
main { max-width:640px; margin:0 auto; padding:48px 22px max(28px,env(safe-area-inset-bottom)); }
header { display:flex; gap:15px; align-items:center; }
.logo { border-radius:14px; }
h1 { font-size:29px; letter-spacing:-1px; margin:0; font-weight:700; }
h2 { font-size:21px; letter-spacing:-.4px; margin:0 0 12px; }
p { line-height:1.6; margin:0 0 18px; }
.eyebrow { color:var(--green); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; margin:0 0 3px; }
.intro { margin:24px 0 32px; font-size:19px; color:var(--muted); }
.card { padding:26px; background:#fff; border:1px solid var(--line); border-radius:22px; margin:0 0 20px; box-shadow:0 6px 24px #173a3105; }
.card p { color:var(--muted); }
label:not(.file-button) { display:block; font-size:14px; font-weight:650; margin:20px 0 8px; }
input[type=text],input[type=password] { width:100%; font-size:18px; padding:13px 14px; border:1px solid #acbcb0; border-radius:10px; margin-bottom:16px; }
button,.file-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--green); background:var(--green); color:#fff; padding:13px 20px; border-radius:11px; font-size:16px; font-weight:650; cursor:pointer; font-family:inherit; text-decoration:none; }
button:disabled { cursor:wait; opacity:.65; }
button:hover,.file-button:hover { filter:brightness(.94); }
button:focus-visible,input:focus-visible,.file-button:focus-within { outline:3px solid #adceb5; outline-offset:3px; }
.secondary { background:transparent; color:var(--green); border-color:#bbcec1; }
.text-button { border:0; padding:8px 0 8px 16px; font-size:14px; color:var(--muted); background:transparent; }
.account { display:flex; align-items:center; justify-content:space-between; font-size:14px; margin:0 3px 16px; }
.small { font-size:12px; margin:14px 0 0; }
.filename { overflow-wrap:anywhere; font-size:15px; }
.transcript { font-size:21px; line-height:1.9; white-space:pre-wrap; unicode-bidi:plaintext; overflow-wrap:anywhere; user-select:text; color:var(--ink)!important; padding:20px 0; border-top:1px solid var(--line); margin:22px 0 8px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.install { display:flex; flex-wrap:wrap; align-items:start; gap:14px; padding:12px 5px; }
.install h2 { font-size:16px; }
.install p,footer { color:var(--muted); font-size:13px; line-height:1.7; }
.install p { margin-bottom:0; }
footer { margin-top:35px; padding-top:22px; border-top:1px solid var(--line); }
.notice { background:#fff0e8; color:#842f16; padding:16px 19px; border-radius:12px; border:1px solid #f0ccbb; margin-top:18px; }
.loading { color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.file-button:has(+ input:focus-visible) { outline:3px solid #adceb5; outline-offset:3px; }
[hidden] { display:none!important; }
@media(max-width:420px) { main { padding:32px 17px; } .card { padding:22px; } h1 { font-size:27px; } .intro { font-size:17px; } }