:root { --paper: #171415; --ink: #fff1df; --muted: #c8b8aa; --line: #4d3931; --accent: #ef7928; --accent-dark: #ffad77; --accent-soft: #43251d; --code: #100f10; --code-ink: #fff1df; --leaf: #a7bd73; --panel: #211b1a; --panel-raised: #2b211e; --max-width: 72rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: var(--accent-dark); text-underline-offset: .18em; } a:hover { color: var(--accent); }
code { padding: .08em .28em; border-radius: .22rem; background: #34231d; color: #ffd2b8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { margin: 0; padding: 1.25rem; overflow-x: auto; border-radius: .65rem; background: var(--code); color: var(--code-ink); box-shadow: 0 .75rem 2rem rgb(30 41 48 / 12%); line-height: 1.55; } pre code { padding: 0; background: transparent; color: inherit; font-size: .86rem; }
h1, h2, h3, h4 { line-height: 1.14; letter-spacing: -.025em; } h1 { max-width: 18ch; margin: .35rem 0 1.25rem; font-size: clamp(2.45rem, 6vw, 5rem); } h2 { margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.6rem); } h3 { margin: 3rem 0 1rem; font-size: 1.38rem; } h4 { margin: 0 0 .45rem; font-size: 1.02rem; }
.skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 3; padding: .65rem 1rem; border-radius: .3rem; background: var(--ink); color: white; } .skip-link:focus { top: 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 2.5rem), var(--max-width)); margin: 0 auto; padding: 1.15rem 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; text-decoration: none; } .brand:hover { color: var(--ink); } .brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; background: var(--accent); color: white; font-family: Georgia, serif; font-size: 1.25rem; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; } nav a { color: var(--ink); text-decoration: none; } nav a:hover { color: var(--accent); }
main { width: min(calc(100% - 2.5rem), var(--max-width)); margin: 0 auto; }.landing-hero { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; min-height: 33rem; padding: 5rem 0 6rem; }.hero-visual { position: relative; display: grid; place-items: end center; min-height: 30rem; isolation: isolate; }.hero-visual::before { content: ""; position: absolute; z-index: -2; top: 2rem; left: 50%; width: min(29rem, 100%); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, var(--accent), #6f2513); transform: translateX(-50%); }.hero-visual img { position: relative; z-index: 1; display: block; width: min(100%, 25rem); max-height: 30rem; object-fit: contain; object-position: bottom; filter: drop-shadow(1rem 1.2rem 0 rgb(13 12 13 / 70%)); }.manual-intro { padding: 4rem 0 4.5rem; }.lede { max-width: 58ch; color: var(--muted); font-size: 1.14rem; }.eyebrow { margin: 0; color: var(--accent-dark); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }.button { display: inline-block; padding: .62rem 1rem; border: 1px solid var(--accent); border-radius: .35rem; background: var(--accent); color: #171415; font-weight: 800; text-decoration: none; }.button:hover { background: var(--accent-dark); color: #171415; }.button-secondary { background: transparent; color: var(--accent-dark); }.button-secondary:hover { background: var(--accent-soft); color: var(--accent-dark); }
.overview, .feature-grid, .reserved-grid, .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.overview { margin: 0 0 6rem; }.overview article, .feature-grid article, .reserved-grid article, .resource-grid a { padding: 1.35rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); }.overview h2 { padding-bottom: .65rem; }.overview p, .feature-grid p, .reserved-grid p { margin: 0; color: var(--muted); }.resource-grid a, .start-links a { display: grid; gap: .25rem; text-decoration: none; }.resource-grid span, .start-links span { color: var(--muted); }.section { padding: 5rem 0; border-top: 1px solid var(--line); }.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }.start-grid h2 { margin-top: .5rem; }.resources h2 { margin-top: .5rem; padding-bottom: 1.5rem; }.start-links { display: grid; gap: .75rem; }.start-links a { padding: 1rem 1.15rem; border-left: .25rem solid var(--accent); background: var(--panel-raised); }.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: var(--muted); font-weight: 650; }.flow span { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-raised); }.flow b { color: var(--accent); }.toc { gap: .6rem; margin-top: 2rem; }.toc a { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-raised); }.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }.two-columns h3 { margin-top: 0; }.compact-list { padding-left: 1.2rem; }.compact-list li + li { margin-top: .65rem; }.table-scroll { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: .6rem; }table { width: 100%; border-collapse: collapse; min-width: 43rem; }th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }th { background: #352721; color: #ffe6d0; font-size: .82rem; letter-spacing: .035em; text-transform: uppercase; }tr:last-child td { border-bottom: 0; }.feature-grid { grid-template-columns: repeat(4, 1fr); }.reserved-grid { grid-template-columns: repeat(3, 1fr); }.note { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: .3rem solid var(--accent); background: var(--accent-soft); }.limits { padding-bottom: 6rem; }footer { display: flex; justify-content: space-between; gap: 1.5rem; width: min(calc(100% - 2.5rem), var(--max-width)); margin: 0 auto; padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }footer p { margin: 0; }
@media (max-width: 760px) { .site-header { align-items: flex-start; gap: 1rem; } nav { justify-content: flex-end; gap: .45rem .85rem; }.landing-hero, .start-grid { grid-template-columns: 1fr; min-height: 0; gap: 2rem; }.landing-hero { padding: 3.25rem 0 4rem; }.hero-visual { min-height: 24rem; max-width: 27rem; }.hero-visual::before { top: 1rem; }.hero-visual img { max-height: 24rem; }.overview, .feature-grid, .reserved-grid, .resource-grid, .two-columns { grid-template-columns: 1fr; }.overview { margin-bottom: 4rem; }.section { padding: 3.75rem 0; }footer { display: block; }footer p + p { margin-top: .75rem; }}
@media (max-width: 450px) { .site-header, main, footer { width: min(calc(100% - 1.5rem), var(--max-width)); }.brand { font-size: .95rem; }nav { font-size: .78rem; }}