:root{color-scheme:light;--bg:#f4f6f1;--surface:#fff;--ink:#172019;--muted:#5d685f;--line:#c8d1ca;--accent:#236942;--accent-bg:#e0f1e6;--error:#8b2118;--error-bg:#f9e4e0;--pending:#7a5a08;--pending-bg:#fff1c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,sans-serif}main{width:min(980px,calc(100% - 28px));margin:28px auto 64px;display:grid;gap:16px}.intro{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:8px 2px 12px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:750;color:var(--accent);margin:0 0 4px}h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.04em;line-height:1.05;margin:0 0 8px}h2{font-size:18px;margin:0}.intro p,.panel-head p{color:var(--muted);margin:5px 0 0;max-width:680px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:16px}.button{border:1px solid #819088;background:#f8faf7;color:var(--ink);padding:8px 11px;border-radius:6px;text-decoration:none;font:600 13px system-ui;cursor:pointer;white-space:nowrap}.button:hover{border-color:var(--accent)}.button.primary{background:var(--accent);border-color:var(--accent);color:white}.button:disabled{opacity:.5;cursor:not-allowed}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:20px 0;padding:0;list-style:none;counter-reset:steps}.steps li{counter-increment:steps;padding:14px;background:var(--bg);border:1px solid var(--line);font-size:13px}.steps li:before{content:counter(steps);display:block;color:var(--accent);font-weight:800;margin-bottom:8px}.notice,.state{border:1px solid var(--line);background:var(--bg);padding:9px 11px;border-radius:6px;color:var(--muted)}.state[data-state=connected]{color:var(--accent);background:var(--accent-bg);border-color:#8ab79b}.state[data-state=failed],.state[data-state=timed_out]{color:var(--error);background:var(--error-bg)}details{border-top:1px solid var(--line);padding:12px 0;margin-bottom:12px}summary{cursor:pointer;font-weight:650}details p,.fine{color:var(--muted);font-size:13px}.token-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#token-output{font:12px ui-monospace,monospace;background:#172019;color:#f1f6f2;padding:9px;border-radius:5px;user-select:all;overflow-wrap:anywhere}.rows{display:grid;margin-top:12px}.row{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--line)}.row strong,.row span{display:block}.row small{color:var(--muted)}.row input{width:min(380px,55vw);padding:7px;border:1px solid var(--line);color:var(--ink);background:white}.badge{font-size:11px;padding:3px 6px;border-radius:99px;background:var(--pending-bg);color:var(--pending)}.badge.completed{background:var(--accent-bg);color:var(--accent)}.badge.failed,.badge.uncertain{background:var(--error-bg);color:var(--error)}.empty{color:var(--muted)}.privacy dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0 0}.privacy dl div{border-left:2px solid var(--line);padding-left:12px}.privacy dt{font-weight:750}.privacy dd{margin:4px 0 0;color:var(--muted);font-size:13px}@media(max-width:720px){.intro{grid-template-columns:1fr}.steps,.privacy dl{grid-template-columns:1fr}.panel-head{align-items:stretch;flex-direction:column}.row{grid-template-columns:1fr}.row input{width:100%}}
