@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
:root { --blue:#1B2F63; --paper:#F3F5FA; --ink:#141C33; --ink-2:#4A5470; --line:#CDD4E4; --tag:#FFD21F; --red:#A80D26; --green:#0B6B3F; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:17px; line-height:1.5; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); min-height:100vh; }
h1,h2,p { margin:0; }
h1 { font-weight:750; font-stretch:80%; letter-spacing:-.015em; line-height:1.04; }
h2 { font-weight:650; font-stretch:90%; line-height:1.25; font-size:22px; }
a { color:inherit; }
:focus-visible { outline:3px solid #1F62FF; outline-offset:2px; }
input { font:inherit; width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:6px; background:#fff; }
label { font-weight:600; display:block; }
code { background:#E4E8F2; padding:1px 5px; border-radius:3px; font-size:.9em; }

.btn { display:inline-block; font:inherit; font-weight:650; color:var(--ink); background:var(--tag); border:0; border-radius:6px; padding:10px 18px; cursor:pointer; text-decoration:none; }
.btn:hover { background:#FFDC4D; }
.btn[disabled] { opacity:.6; cursor:progress; }
.link { font:inherit; font-weight:600; color:inherit; background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.err { color:var(--red); font-weight:600; }
.ok { color:var(--green); font-weight:600; }
.hint { color:var(--ink-2); font-size:15px; }
.stack { display:grid; gap:9px; justify-items:start; }

.on-blue { background:var(--blue); color:#E6ECFA; display:grid; place-items:center; padding:32px; }
.hero { max-width:600px; display:grid; gap:20px; justify-items:start; }
.hero h1 { font-size:clamp(44px,8vw,72px); color:#fff; }
.hero p { font-size:19px; color:#C5D0EC; }
.hero-note { font-weight:600; color:#fff !important; }
.hero-foot { font-size:15px !important; }
.tag-link { position:relative; display:inline-block; padding:16px 26px 16px 50px; background:var(--tag); color:var(--ink); border-radius:24px 8px 8px 24px; font-weight:700; font-size:20px; text-decoration:none; }
.tag-link::before { content:""; position:absolute; left:21px; top:50%; width:13px; height:13px; margin-top:-6.5px; border-radius:50%; background:var(--blue); }

.doc { max-width:660px; margin:0 auto; padding:48px 24px 72px; display:grid; gap:14px; }
.doc h1 { font-size:48px; margin-top:10px; }
.doc h2 { margin-top:18px; }
.doc ul { margin:0; padding-left:22px; display:grid; gap:7px; }

.narrow { max-width:400px; margin:0 auto; padding:18vh 24px 40px; display:grid; gap:18px; }
.narrow h1 { font-size:44px; }
.lede { color:var(--ink-2); }

.admin { max-width:740px; margin:0 auto; padding:40px 24px 80px; }
.admin-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:28px; }
.admin h1 { font-size:44px; }
.steps { list-style:none; margin:0 0 44px; padding:0; counter-reset:step; display:grid; }
.step { counter-increment:step; position:relative; padding:0 0 32px 52px; display:grid; gap:11px; }
.step::before { content:counter(step); position:absolute; left:0; top:-3px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-weight:700; }
.step:not(:last-child)::after { content:""; position:absolute; left:16px; top:36px; bottom:2px; width:2px; background:var(--line); }
.step.is-done::before { content:"✓"; background:var(--tag); color:var(--ink); }
.step.is-waiting { color:var(--ink-2); }
.step.is-waiting::before { background:var(--line); color:var(--ink-2); }
.channels { list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; background:#fff; border:1.5px solid var(--line); border-radius:6px; }
.channels button { width:100%; text-align:left; font:inherit; background:none; border:0; padding:9px 13px; cursor:pointer; }
.channels button:hover { background:#FFF4C4; }
.channels small { color:var(--ink-2); margin-left:6px; }
.channels .none { padding:9px 13px; color:var(--ink-2); }
.log { display:grid; gap:12px; }
.log p { color:var(--ink-2); }
table { width:100%; border-collapse:collapse; font-size:15.5px; }
th { text-align:left; font-weight:600; color:var(--ink-2); padding:6px 12px 6px 0; border-bottom:1.5px solid var(--line); }
td { padding:8px 12px 8px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.st-failed { color:var(--red); font-weight:600; }
.st-delivered { color:var(--green); }
@media (max-width:560px) { .admin h1,.doc h1 { font-size:36px; } }