:root{
  --bg:#1a1a1a; --text:#ececec; --mute:#8a8a8a; --line:#3a3a3a; --card:#242424;
  --accent:#00f5d4; --glow:#1a0b2e;
  --ok:#12b36b; --warn:#e0a44a; --bad:#ff5a4d;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:0 20px 80px;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,245,212,.07), transparent 70%)}
.wrap{max-width:880px;margin:0 auto}
a{color:var(--accent)}

.crumb{padding:26px 0 0;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.crumb a{text-decoration:none;color:var(--mute)}
.crumb a:hover{color:var(--accent)}
.crumb span{color:var(--line);margin:0 6px}

header{padding:22px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
h1{font-size:38px;line-height:1.08;letter-spacing:-.03em;margin-bottom:12px}
h1 em{font-style:normal;color:var(--accent)}
.lede{color:var(--mute);font-size:16.5px;max-width:64ch}

h2{font-size:20px;margin:0 0 14px;color:var(--accent);letter-spacing:-.01em}
h3{font-size:15px;margin:18px 0 8px;color:var(--text)}
p{margin-bottom:12px}
code{font-family:var(--mono);font-size:.88em;background:var(--glow);padding:2px 6px;border-radius:4px;color:var(--accent);word-break:break-word}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:20px}
.mute{color:var(--mute);font-size:14px}
ul,ol{margin:0 0 12px 20px}
li{margin-bottom:6px}
b{color:var(--text)}

.step{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step-num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--glow);border:1px solid var(--accent);
  color:var(--accent);display:grid;place-items:center;font:600 14px var(--mono)}
.step-body{flex:1;min-width:0}
.step-body h3{margin-top:0}

.tbl-scroll{overflow-x:auto;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}
.tbl-scroll table{margin-bottom:0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tbody tr:hover{background:rgba(0,245,212,.03)}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;font-family:var(--mono);white-space:nowrap}
.pill.ok{background:rgba(18,179,107,.15);color:var(--ok)}
.pill.warn{background:rgba(224,164,74,.15);color:var(--warn)}
.pill.bad{background:rgba(255,90,77,.15);color:var(--bad)}

.out{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:14px;margin:12px 0;
  font:13px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--text);overflow-x:auto}

.note{border-left:2px solid var(--warn);padding:2px 0 2px 14px;margin:14px 0;font-size:14px;color:var(--mute)}
.note b{color:var(--warn)}
.note.hard{border-left-color:var(--bad)}
.note.hard b{color:var(--bad)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:20px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:20px;text-decoration:none;color:var(--text);transition:.18s;position:relative}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .k{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.tile h3{font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
.tile p{color:var(--mute);font-size:13.5px;line-height:1.5;margin:0}
.tile .arrow{position:absolute;top:18px;right:18px;color:var(--mute);transition:.18s}
.tile:hover .arrow{color:var(--accent);transform:translateX(3px)}

.next{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0}
.next a{border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:13.5px;
  text-decoration:none;color:var(--text)}
.next a:hover{border-color:var(--accent);color:var(--accent)}

details.src{margin-top:26px;border:1px solid var(--line);border-radius:10px;padding:14px 18px;background:var(--card)}
details.src summary{cursor:pointer;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
details.src summary:hover{color:var(--accent)}
details.src ul{margin:14px 0 0 18px}
details.src li{font-size:12.5px;word-break:break-all;color:var(--mute)}
details.src a{color:var(--mute)}
details.src a:hover{color:var(--accent)}

footer{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}