/* Stillhold — still water at dusk. One accent, flat surfaces, hairlines, light large type. */
@font-face { font-family: "Instrument Sans"; src: url("InstrumentSans-Variable.ttf") format("truetype"); font-weight: 400 700; }
:root {
  --slate: #1A1F21; --stone: #22282A; --seam: #30383A; --mist: #E5E9E6; --fog: #939D9A; --dim: #6E7774;
  --lichen: #A8C49F; --on-lichen: #16201A; --warn: #D9B76E; --danger: #DB7B70;
}
* { box-sizing: border-box; }
html { background: var(--slate); color: var(--mist); font: 15px/1.6 "Instrument Sans", system-ui, sans-serif; }
body { margin: 0; }
a { color: var(--mist); text-underline-offset: 3px; text-decoration-color: var(--seam); }
a:hover { text-decoration-color: var(--lichen); }
:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
header { border-bottom: 1px solid var(--seam); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 17px; letter-spacing: -0.2px; }
.brand img { width: 26px; height: 26px; }
nav { display: flex; gap: 20px; align-items: center; }
nav a, nav button { color: var(--fog); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
nav a:hover, nav button:hover { color: var(--mist); }
main { padding: 56px 0 96px; }
h1 { font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -1.4px; margin: 0 0 16px; max-width: 18ch; }
h2 { font-weight: 400; font-size: 24px; letter-spacing: -0.5px; margin: 48px 0 12px; }
h3 { font-weight: 500; font-size: 15px; margin: 0 0 4px; }
p { margin: 0 0 12px; max-width: 64ch; }
.lead { color: var(--fog); font-size: 18px; max-width: 52ch; margin-bottom: 32px; }
.muted { color: var(--fog); }
.small { font-size: 13px; color: var(--fog); }
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps li { border-top: 1px solid var(--seam); padding-top: 16px; }
.steps span { color: var(--lichen); font-size: 13px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } h1 { font-size: 34px; } }
form.stack { display: grid; gap: 18px; max-width: 440px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--fog); }
input[type=email], input[type=password], input[type=text], input[type=number] {
  font: inherit; color: var(--mist); background: var(--stone); border: 1px solid var(--seam); border-radius: 6px;
  padding: 10px 12px; width: 100%;
}
input:focus { border-color: var(--lichen); outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--mist); }
.button, button.primary, button.secondary {
  font: inherit; font-weight: 500; border-radius: 6px; padding: 10px 18px; cursor: pointer; display: inline-block;
  text-decoration: none; border: 1px solid var(--seam); background: transparent; color: var(--mist);
}
.button.primary, button.primary { background: var(--lichen); border-color: var(--lichen); color: var(--on-lichen); }
.button:hover, button.secondary:hover { border-color: var(--fog); }
button.primary:hover, .button.primary:hover { background: #BBD3B3; }
.notice { border-left: 2px solid var(--lichen); padding: 4px 0 4px 14px; margin: 16px 0; color: var(--mist); }
.notice.error { border-color: var(--danger); }
.notice.warn { border-color: var(--warn); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--fog); padding: 10px 8px; border-bottom: 1px solid var(--seam); }
td { padding: 10px 8px; border-bottom: 1px solid var(--stone); vertical-align: top; }
td code, code { font-size: 13px; color: var(--mist); word-break: break-all; }
.status { color: var(--fog); }
.status.ok { color: var(--lichen); } .status.bad { color: var(--danger); } .status.warn { color: var(--warn); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--stone); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; font-size: 14px; }
.facts dt { color: var(--fog); }
.facts dd { margin: 0; }
footer { border-top: 1px solid var(--seam); color: var(--dim); font-size: 13px; padding: 24px 0; }