@font-face{font-family:"Sora";src:url(sora-latin.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url(sora-latin-ext.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#15161c;--text:#2a2b33;--muted:#6a6a74;--line:#e3e3ea;--paper:#ffffff;--soft:#f5f5f8;
  --navy:#364794;--accent:#364794;--sel:#eef0fa;--lime:#bcd233;--logo:#364794;
  --red:#d6392b;--amber:#c98e00;--green:#2e9e5b;--err:#c0392b;
  --grad:linear-gradient(90deg,#f56908,#e85973 28%,#db49de 52%,#a466f4 76%,#698bf9);
  --font:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f2f2f5;--text:#d6d6de;--muted:#9a9aa6;--line:#33343d;--paper:#15161c;--soft:#1d1e26;
    --accent:#a3b0f2;--sel:#262c50;--logo:#ffffff;--err:#ff8a7e;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 20px env(safe-area-inset-bottom);
  background:var(--paper);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}

.bar{position:fixed;top:0;left:0;right:0;height:4px;background:var(--grad)}
header,main,footer,.note{width:100%;max-width:520px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0 6px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{height:26px;width:auto;display:block}
.brand .x{font-weight:300;color:var(--muted)}
.brand img{height:21px;width:auto;display:block}
.aio-a{fill:var(--logo)}.aio-b{fill:var(--lime)}
.code{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

main{flex:1;padding:30px 0 24px}
h1{font-size:24px;line-height:1.3;font-weight:600;color:var(--ink);letter-spacing:-.01em;overflow-wrap:anywhere}
.lead{font-size:17px;line-height:1.5;margin-top:10px}
.kick{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.kick.end{display:inline-block;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:14px}

.opts{display:grid;gap:12px;margin-top:22px}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:16px 18px;border-radius:16px;
  border:2px solid var(--line);background:var(--soft);color:var(--ink);font-size:18px;font-weight:500;line-height:1.35;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .15s,background-color .15s,opacity .15s}
.opt span{flex:1;overflow-wrap:anywhere}
.opt i{display:none;flex:none;width:18px;height:18px;border-radius:50%}
.ampel .opt i{display:block}
.ampel .opt[data-c="0"] i{background:var(--red)}
.ampel .opt[data-c="1"] i{background:var(--amber)}
.ampel .opt[data-c="2"] i{background:var(--green)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--sel)}
.opt[aria-pressed="true"]::after{content:"";flex:none;width:9px;height:16px;margin:-5px 4px 0 0;
  border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(45deg)}
.opt.busy{opacity:.65}
.opt:disabled{cursor:default}
.opt:disabled:not([aria-pressed="true"]){opacity:.45}
.opt:focus-visible,.pri:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.status{margin-top:18px;min-height:3em;font-size:15px;line-height:1.5;color:var(--muted)}

.pulse{width:14px;height:14px;margin-bottom:22px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.note{margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--sel);color:var(--ink);font-size:15px;line-height:1.4}
.conn{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.18)}

form.enter{display:grid;gap:12px;margin-top:26px}
label{font-size:14px;color:var(--muted)}
input{width:100%;padding:16px 18px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:28px;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums}
input:focus{outline:none;border-color:var(--accent)}
.pri{min-height:56px;border:0;border-radius:14px;background:var(--navy);color:#fff;font-size:18px;font-weight:600;cursor:pointer}
.err{min-height:1.5em;font-size:15px;line-height:1.5;color:var(--err)}

footer{padding:16px 0 76px;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}