:root { color-scheme: light dark; --fg:#1d1b20; --muted:#6b6670; --bg:#faf8f5; --card:#fff; --accent:#7a3cff; --ok:#1f8a4c; --err:#c62828; --line:#e6e1da; }
@media (prefers-color-scheme: dark) { :root { --fg:#ece8f0; --muted:#a49eaa; --bg:#151317; --card:#1f1c22; --line:#332f37; --accent:#a77bff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:34rem; margin:0 auto; padding:2rem 1.25rem 3rem; }
h1 { font-size:1.6rem; margin:0 0 .5rem; }
.lead { margin:0 0 .75rem; }
.meta { color:var(--muted); font-size:.875rem; margin:0 0 1.5rem; word-break:break-all; }
a { color:var(--accent); }
ol#steps { list-style:none; padding:0; margin:0 0 1.25rem; background:var(--card); border:1px solid var(--line); border-radius:12px; }
#steps li { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-top:1px solid var(--line); }
#steps li:first-child { border-top:0; }
#steps li::before { content:"○"; margin-right:.6rem; color:var(--muted); }
#steps li span:first-of-type { flex:1; }
#steps li[data-state="active"]::before { content:"◔"; color:var(--accent); }
#steps li[data-state="done"]::before { content:"●"; color:var(--ok); }
#steps li[data-state="failed"]::before { content:"✕"; color:var(--err); }
#steps .detail { color:var(--muted); font-family:ui-monospace, monospace; font-size:.8rem; }
button { width:100%; padding:.9rem 1rem; font-size:1rem; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:12px; cursor:pointer; }
button:disabled { opacity:.55; cursor:progress; }
#result { margin-top:1.25rem; padding:1rem; border-radius:12px; border:1px solid var(--line); background:var(--card); word-break:break-all; }
#result[data-kind="ok"] { border-color:var(--ok); }
#result[data-kind="error"] { border-color:var(--err); }
#result p { margin:.4rem 0 0; }
details { margin-top:2rem; color:var(--muted); }
details li { margin:.4rem 0; }