:root{
  --ink:#070B12;
  --surface:#0D1420;
  --surface2:#141D2C;
  --border:#223044;
  --text:#E9EDF5;
  --text-dim:#9AA5B8;
  --violet:#8F7BF2;
  --cyan:#3ECFE0;
  --success:#57D19A;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.shell{width:min(860px,calc(100% - 40px));margin:0 auto;padding:24px 0 72px}
nav{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:72px}
.wordmark{font-family:var(--mono);font-weight:800;letter-spacing:.05em;color:var(--text)}
.wordmark em{font-style:normal;color:var(--violet)}
.navlinks{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.navlinks a{color:var(--text-dim);font-size:14px}
.lang{
  font:700 12px var(--mono);letter-spacing:.06em;color:var(--text-dim);
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  padding:6px 11px;cursor:pointer;
}
.eyebrow{font:700 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
h1{font-size:clamp(34px,6vw,56px);line-height:1.08;letter-spacing:-.025em;margin:14px 0 18px}
.intro{font-size:18px;color:var(--text-dim);max-width:46rem;margin-bottom:42px}
.meta{
  display:flex;gap:12px;flex-wrap:wrap;margin:0 0 42px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  color:var(--text-dim);font:12px var(--mono);
}
article{display:grid;gap:18px}
section{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:24px 26px;
}
h2{font-size:20px;line-height:1.3;margin:0 0 10px}
h3{font-size:16px;margin:20px 0 6px}
p{margin:0;color:var(--text-dim)}
p+p{margin-top:12px}
ul{margin:10px 0 0;padding-left:22px;color:var(--text-dim)}
li+li{margin-top:8px}
code{font-family:var(--mono);font-size:.9em;color:var(--cyan)}
.callout{border-left:3px solid var(--violet)}
.contact{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;
  border:1px solid var(--cyan);border-radius:8px;background:transparent;
  color:var(--cyan);font:700 14px var(--mono);
}
.check{color:var(--success)}
footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--border);
  color:var(--text-dim);font:12px var(--mono);
}
[data-lang-panel][hidden]{display:none}
@media(max-width:620px){
  .shell{width:min(100% - 28px,860px)}
  nav{align-items:flex-start;margin-bottom:50px}
  .navlinks{gap:12px}
  section{padding:20px}
}