:root{--bg:#05080c;--panel:#0e1117;--line:rgba(255,255,255,.1);--text:#e8ecf2;--mut:#8b94a3;--amber:#e8a23a;--ok:#5fe0a0;--red:#ff6b6b;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-user-select:none;user-select:none}
.bg{position:fixed;inset:0;background:radial-gradient(900px 500px at 50% -10%,rgba(232,162,58,.10),transparent 60%),radial-gradient(700px 500px at 50% 110%,rgba(60,110,200,.10),transparent 60%),linear-gradient(#05080c,#070a10);z-index:0}
.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%)}
#app{position:relative;z-index:1;max-width:460px;min-height:100%;margin:0 auto;padding:calc(14px + var(--sat)) 22px calc(18px + var(--sab));display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px}
.brand{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.22em}
.brand img{height:26px;width:26px}.brand .bird{height:24px;width:24px;object-fit:contain;opacity:.9}
.brand i{width:1px;height:20px;background:var(--line)}.brand span{margin-left:2px}
.ico{background:none;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;color:var(--text);display:grid;place-items:center;cursor:pointer}
.ico svg{width:18px;height:18px;fill:currentColor}
.view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0 20px}
.view[hidden]{display:none}
h1{font-size:24px;font-weight:650;letter-spacing:-.01em;margin:0 0 8px}
.lede{color:var(--mut);font-size:15px;line-height:1.5;margin:0 0 22px}.lede b{color:var(--text);font-weight:600}
.fine{color:#5d6675;font-size:12px;line-height:1.5;margin:18px 0 0}
.hint{color:var(--mut);font-size:13px;line-height:1.5;text-align:center;margin:18px 10px 0}.hint b{color:var(--text);font-weight:600}
textarea{width:100%;background:#0a0d13;border:1px solid var(--line);border-radius:10px;color:var(--text);font:15px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;padding:14px;resize:none;-webkit-user-select:text;user-select:text;outline:none}
textarea:focus{border-color:rgba(232,162,58,.7);box-shadow:0 0 0 3px rgba(232,162,58,.15)}
.row{display:flex;gap:10px;margin-top:12px}.row .btn{flex:1}
.btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--text);font:600 14.5px/1 inherit;font-family:inherit;padding:15px 18px;border-radius:10px;cursor:pointer;width:100%;margin-top:10px}
.btn.pri{background:#e8ecf2;color:#06090e;border-color:#e8ecf2}.btn.pri:active{background:#c9cfd9}
.btn.ghost:active{background:rgba(255,255,255,.06)}.btn.danger{color:var(--red);border-color:rgba(255,107,107,.35)}
.err{color:var(--red);font-size:13px;margin:12px 0 0}
.ringwrap{position:relative;width:min(78vw,300px);aspect-ratio:1;margin:0 auto;cursor:pointer;outline:none}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.ring .arc{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(232,162,58,.55))}
.ring .arc.low{stroke:var(--red);filter:drop-shadow(0 0 6px rgba(255,107,107,.6))}
.inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.inner small{font-size:10.5px;letter-spacing:.24em;color:var(--mut);font-weight:600}
.code{font:600 clamp(38px,12vw,54px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 28px rgba(232,162,58,.25);transition:opacity .25s}
.code.flip{opacity:.15}
.secs{font:500 13px ui-monospace,Menlo,Consolas,monospace;color:var(--mut)}
.secs.low{color:var(--red)}
.next{display:flex;gap:10px;align-items:baseline;justify-content:center;margin-top:26px;font-size:11px;letter-spacing:.2em;color:#5d6675}
.next b{font:500 15px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;color:#7b8494}
.foot{display:flex;justify-content:space-between;font:500 11px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:#586070;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .card{width:100%;max-width:460px;background:#0e1117;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:22px 22px calc(22px + var(--sab))}
.sheet h2{margin:0 0 6px;font-size:16px;letter-spacing:.2em;font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(60px + var(--sab));transform:translateX(-50%);background:#e8ecf2;color:#06090e;font-weight:600;font-size:13px;padding:10px 16px;border-radius:999px;z-index:30}
.toast[hidden]{display:none}
.step{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.07)}
.step:first-child{border-top:0}
.step .n{flex:0 0 28px;height:28px;border-radius:50%;border:1px solid rgba(232,162,58,.6);color:var(--amber);display:grid;place-items:center;font:600 13px ui-monospace,Menlo,monospace}
.step p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:#c9d0db}.step p b{color:#fff;font-weight:600}
.step svg{width:18px;height:18px;vertical-align:-4px;stroke:#7fb2ff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 2px}
#steps{margin-bottom:10px}
@media (display-mode:standalone){#install{display:none!important}}