:root{
  --ink:#111922;
  --ink-soft:#3f4b55;
  --muted:#56616a;
  --paper:#f7f8f6;
  --surface:#ffffff;
  --line:#d5dade;
  --line-dark:#aeb7be;
  --signal:#bd4925;
  --signal-dark:#a73e1c;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:inherit}

.shell{width:min(860px,calc(100% - 48px));margin-inline:auto}

/* page */
.page{padding-block:clamp(48px,8vw,96px)}

/* cover */
.cover{margin-bottom:clamp(48px,7vw,80px)}
.cover-label{margin:0 0 18px;color:var(--signal-dark);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.cover h1{max-width:20ch;margin:0 0 18px;font-size:clamp(30px,5vw,52px);font-weight:760;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.cover-sub{max-width:56ch;margin:0 0 26px;color:var(--ink-soft);font-size:16px;line-height:1.6}
.cover-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.cover-links a{color:var(--ink-soft);font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line-dark);padding-bottom:2px}
.cover-links a:hover{color:var(--signal-dark);border-color:var(--signal-dark)}

/* index */
.index-list{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:140px minmax(0,1fr) 110px 18px;gap:16px;align-items:center;min-height:72px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.row:hover{background:rgba(255,255,255,.6)}
.row-code{color:var(--signal-dark);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.row-body{display:grid;gap:3px}
.row-body strong{font-size:15px;letter-spacing:-.02em}
.row-body small{color:var(--muted);font-size:12px;line-height:1.5}
.row-state{color:var(--ink-soft);font-size:11px;font-weight:700;text-align:right}
.row b{color:var(--signal-dark);font-size:16px;text-align:right}

@media(max-width:640px){
  .shell{width:calc(100% - 32px)}
  .row{grid-template-columns:1fr 18px;gap:6px 12px;min-height:auto;padding:14px 0}
  .row-code{grid-column:1;font-size:9px}
  .row-body{grid-column:1;grid-row:2}
  .row-state{grid-column:1;grid-row:3;text-align:left;font-size:11px}
  .row b{grid-column:2;grid-row:1/4;align-self:center}
}