* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e7e7ea;
  background: #0f1115;
  line-height: 1.6;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.site-header { padding: 28px 0; border-bottom: 1px solid #1c1f27; background: #0f1115; position: sticky; top: 0; z-index: 10; }
.site-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: 0.3px; }
.subtitle { color: #9aa4b2; margin: 0; font-size: 13px; }

.hero { padding: 40px 0 10px; }
.eyebrow { color: #7bd7ff; text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; margin: 6px 0 8px; }
.hash { font-size: 14px; word-break: break-all; background: #0b0d11; border: 1px solid #1c1f27; padding: 12px; border-radius: 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.lede { color: #c5cbda; }

section { margin: 26px 0 18px; }
h3 { margin: 22px 0 8px; font-size: 18px; }
ul, ol { padding-left: 20px; }
li { margin: 6px 0; }
code, pre { background: #0b0d11; border: 1px solid #1c1f27; padding: 2px 6px; border-radius: 6px; color: #b6f0c2; }
pre.small { font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.phrases li { color: #dfe3ee; }
.note { color: #9aa4b2; font-size: 14px; }

.site-footer { margin: 40px 0 60px; border-top: 1px solid #1c1f27; padding-top: 16px; color: #9aa4b2; font-size: 13px; }

@media (min-width: 900px){
  .hash { font-size: 16px; }
}