:root {
  --bg:#F4F7F7; --surface:#FFFFFF; --surface-2:#EDF2F1;
  --line:#DDE6E4; --line-strong:#C3D0CD;
  --text:#0F1717; --muted:#5D6E6B; --faint:#8A9996;
  --accent:#0C6F68; --accent-ink:#FFFFFF; --accent-soft:#DDF0ED;
  --ok:#2E6F45; --ok-soft:#E0F0E6;
  --warn:#8A5A00; --warn-soft:#F8EEDA;
  --danger:#9C2F21; --danger-soft:#FAE5E1;
  --mono: ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0A0E0F; --surface:#121A1B; --surface-2:#182223;
    --line:#233032; --line-strong:#334547;
    --text:#E7EFEE; --muted:#93A5A2; --faint:#6E817E;
    --accent:#3ECFC0; --accent-ink:#06211F; --accent-soft:#12302E;
    --ok:#6CC98D; --ok-soft:#142B1E;
    --warn:#E0B341; --warn-soft:#2E2515;
    --danger:#EE8073; --danger-soft:#331A17;
  }
}
:root[data-theme="dark"] {
  --bg:#0A0E0F; --surface:#121A1B; --surface-2:#182223;
  --line:#233032; --line-strong:#334547;
  --text:#E7EFEE; --muted:#93A5A2; --faint:#6E817E;
  --accent:#3ECFC0; --accent-ink:#06211F; --accent-soft:#12302E;
  --ok:#6CC98D; --ok-soft:#142B1E;
  --warn:#E0B341; --warn-soft:#2E2515;
  --danger:#EE8073; --danger-soft:#331A17;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; cursor:pointer; }
a { color:var(--accent); }
code, .code, .label, .num, .brand, h1, th { font-family:var(--mono); }
.num { font-variant-numeric:tabular-nums; text-align:right; }
.muted { color:var(--muted); font-size:.85rem; }

.top, main, .foot { width:100%; max-width:760px; margin:0 auto; padding-left:16px; padding-right:16px; }
.top { display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:6px; }
.brand { font-size:1.05rem; text-decoration:none; color:var(--text); letter-spacing:-.01em; }
.brand span { color:var(--muted); }
.lang {
  background:none; border:1px solid var(--line-strong); border-radius:6px;
  font-family:var(--mono); font-size:.75rem; padding:3px 8px; color:var(--muted);
}
.lang:hover { color:var(--text); border-color:var(--text); }

main { flex:1; padding-top:28px; padding-bottom:40px; }
h1 { font-size:clamp(1.6rem, 5.5vw, 2.3rem); font-weight:500; letter-spacing:-.025em; line-height:1.15; margin:0 0 14px; }
.lede { color:var(--muted); font-size:1.05rem; margin:0 0 28px; max-width:60ch; }

.how { list-style:none; padding:0; margin:0 0 32px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.how li { background:var(--surface); display:flex; gap:14px; padding:14px 16px; align-items:baseline; }
.how b { font-family:var(--mono); color:var(--accent); font-weight:500; }

.create { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.primary, .secondary {
  border-radius:8px; padding:11px 20px; font-weight:600; border:1px solid transparent;
}
.primary { background:var(--accent); color:var(--accent-ink); }
.primary:disabled { opacity:.45; cursor:default; }
.secondary { background:none; border-color:var(--line-strong); margin-top:20px; }
.secondary:hover { border-color:var(--text); }
.msg { margin:0; min-height:1.4em; color:var(--muted); font-size:.9rem; }
.msg.err { color:var(--danger); }

.codehead { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:22px; }
.label { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.code { font-size:clamp(1.3rem, 6vw, 2rem); letter-spacing:.02em; color:var(--accent); width:100%; overflow-wrap:anywhere; }

.cmd { margin-bottom:16px; }
.cmdhead { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.cmdhead a { font-size:.8rem; }
.cmdrow { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; }
.cmdrow code { flex:1; min-width:0; padding:10px 12px; font-size:.82rem; overflow-x:auto; white-space:nowrap; }
.copy {
  flex:none; border:0; border-left:1px solid var(--line); background:var(--surface-2);
  padding:0 14px; font-size:.8rem; color:var(--muted);
}
.copy:hover { color:var(--text); }
.copy.done { color:var(--ok); }

.steps { list-style:none; padding:0; margin:28px 0 18px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.steps li {
  font-family:var(--mono); font-size:.72rem; color:var(--faint);
  border-top:3px solid var(--line); padding-top:8px;
}
.steps li.past { color:var(--muted); border-color:var(--accent-soft); }
.steps li.now { color:var(--text); border-color:var(--accent); }
.steps li.now.bad { border-color:var(--danger); color:var(--danger); }
@media (max-width:480px) { .steps { grid-template-columns:repeat(2, 1fr); } }

.current { margin:0 0 18px; }
.curline { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.85rem; margin-bottom:6px; }
.curline span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
progress { width:100%; height:6px; appearance:none; border:0; border-radius:3px; background:var(--surface-2); overflow:hidden; }
progress::-webkit-progress-bar { background:var(--surface-2); }
progress::-webkit-progress-value { background:var(--accent); }
progress::-moz-progress-bar { background:var(--accent); }

.scroller { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.84rem; font-variant-numeric:tabular-nums; }
th { text-align:left; font-weight:500; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line-strong); }
td { padding:7px 8px; border-bottom:1px solid var(--line); }
td:first-child { overflow-wrap:anywhere; }
td.num, th.num { white-space:nowrap; }
td .ok { color:var(--ok); }

.foot { padding-top:18px; padding-bottom:26px; font-size:.78rem; color:var(--faint); font-family:var(--mono); border-top:1px solid var(--line); }