@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --paper: #f2f0e8; --ink: #161616; --muted: #75746d; --line: #d2d0c6; --acid: #c9f25b; --card: #e5e3da; --max: 1160px; }
html[data-theme='dark'] { --paper: #171a17; --ink: #d5d9cf; --muted: #8f968b; --line: #343b34; --acid: #a9bd70; --card: #202720; color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; line-height: 1.6; transition: background-color .25s, color .25s; }
a { color: inherit; text-decoration: none; }
.skip-link { background: var(--acid); color: #20251d; left: 16px; padding: 10px 14px; position: fixed; top: -60px; z-index: 20; }.skip-link:focus { top: 16px; }
.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; padding: 25px 0; }
.wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.06em; }.wordmark span { color: #9abf26; }
nav { align-items: center; display: flex; gap: 32px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; } nav a { transition: opacity .2s; } nav a:hover, .text-link:hover, .back-link:hover { opacity: .55; }.nav-github { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.site-controls { display: flex; gap: 7px; margin-left: auto; }.control-button { background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: 500 10px 'DM Mono', monospace; min-height: 28px; min-width: 34px; padding: 5px 8px; text-transform: uppercase; }.control-button:hover { background: var(--ink); color: var(--paper); }.theme-button { font-size: 14px; line-height: 1; }
html[data-theme='dark'] .project-mark span { color: rgba(213,217,207,.28); }
html[data-theme='dark'] .docs-note { color: #20251d; }
.hero { min-height: 670px; padding: 128px 0 120px; }.eyebrow, .section-label, .project-kind, .project-number, .tags, .project-topline { color: var(--muted); font: 500 11px/1.4 'DM Mono', monospace; letter-spacing: .03em; text-transform: uppercase; }.eyebrow { align-items: center; display: flex; gap: 10px; }.status-dot { background: #90b72d; border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
h1, h2, h3, p { margin-top: 0; }.hero h1 { font-size: clamp(64px, 10vw, 142px); letter-spacing: -.09em; line-height: .92; margin: 45px 0 44px; max-width: 960px; }.hero h1 em { color: #a2a096; font-style: normal; }.hero-copy { font-size: 18px; line-height: 1.55; max-width: 445px; }.hero-actions { align-items: center; display: flex; gap: 28px; margin-top: 48px; }.button { display: inline-flex; align-items: center; gap: 34px; font: 500 11px 'DM Mono', monospace; padding: 16px 19px; text-transform: uppercase; }.button-dark { background: var(--ink); color: var(--paper); }.button-dark span { color: var(--acid); font-size: 17px; line-height: 0; }.text-link { border-bottom: 1px solid var(--ink); font: 500 11px 'DM Mono', monospace; padding-bottom: 4px; text-transform: uppercase; }
.about, .projects { border-top: 1px solid var(--line); padding: 28px 0 120px; }.section-label { display: flex; gap: 16px; }.section-label span { color: var(--ink); }.about-grid { display: grid; gap: 40px; grid-template-columns: 1.2fr .8fr; margin-top: 76px; }.about h2, .projects h2, .project-intro-grid h2, .principles h2 { font-size: clamp(42px, 5vw, 72px); letter-spacing: -.075em; line-height: .98; margin: 0; }.about-copy { max-width: 390px; padding-top: 9px; }.about-copy p { margin-bottom: 24px; }.muted { color: var(--muted); }
.writing { border-top: 1px solid var(--line); padding: 28px 0 120px; }.writing-heading { align-items: end; display: flex; justify-content: space-between; margin: 76px 0 45px; }.writing h2 { font-size: clamp(42px, 5vw, 72px); letter-spacing: -.075em; line-height: .98; margin: 0; }.writing-heading p { color: var(--muted); font-size: 13px; text-align: right; }.article-card { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: 180px 1fr 30px; padding: 25px 0; transition: color .2s; }.article-card:hover { color: #89aa42; }.article-meta, .article-arrow { color: var(--muted); font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }.article-title { font-size: clamp(19px, 2.3vw, 29px); letter-spacing: -.05em; line-height: 1.15; max-width: 600px; }.article-arrow { font-size: 22px; }
.projects-heading { align-items: end; display: flex; justify-content: space-between; margin: 76px 0 45px; }.projects-heading p { color: var(--muted); font-size: 13px; text-align: right; }.project-card { background: var(--acid); display: grid; grid-template-columns: 80px 1fr 30%; min-height: 425px; padding: 28px; position: relative; }.project-number { color: rgba(22,22,22,.6); }.project-main { align-self: end; max-width: 530px; }.project-topline { color: rgba(22,22,22,.65); display: flex; justify-content: space-between; margin-bottom: 24px; }.project-main h3 { font-size: clamp(70px, 9vw, 126px); letter-spacing: -.12em; line-height: .8; margin-bottom: 30px; }.project-main p { font-size: 15px; line-height: 1.5; max-width: 430px; }.tags { display: flex; gap: 8px; margin: 34px 0 22px; }.tags span { border: 1px solid rgba(22,22,22,.3); padding: 4px 8px; }.project-link { border-bottom: 1px solid var(--ink); display: inline-flex; font: 500 11px 'DM Mono', monospace; gap: 35px; padding-bottom: 5px; text-transform: uppercase; }.project-link span { font-size: 18px; line-height: 12px; }.project-mark { align-self: center; font-size: clamp(90px, 17vw, 230px); font-weight: 800; letter-spacing: -.18em; line-height: .7; opacity: .95; transform: rotate(-12deg); }.project-mark span { color: rgba(22,22,22,.32); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font: 500 11px 'DM Mono', monospace; justify-content: space-between; padding: 25px 0 35px; text-transform: uppercase; }.site-footer a { color: var(--ink); }
.project-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; }.repo-link { border-bottom: 1px solid var(--muted); color: var(--muted); display: inline-flex; font: 500 11px 'DM Mono', monospace; gap: 8px; padding-bottom: 5px; text-transform: uppercase; }
.cta-actions { align-items: flex-end; display: flex; flex-direction: column; gap: 18px; }
.back-link { font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }.project-page { padding: 110px 0 120px; }.project-page > h1 { font-size: clamp(110px, 20vw, 270px); letter-spacing: -.15em; line-height: .72; margin: 80px 0 40px; }.project-page > h1 span { color: #a2a096; }.project-lede { font-size: clamp(24px, 3vw, 38px); letter-spacing: -.05em; max-width: 580px; }.project-intro-grid { border-top: 1px solid var(--line); display: grid; gap: 40px; grid-template-columns: 1.2fr .8fr; margin-top: 110px; padding-top: 28px; }.project-intro-grid h2 { margin-top: 76px; }.long-copy { max-width: 430px; padding-top: 65px; }.long-copy p { margin-bottom: 26px; }.principles { border-top: 1px solid var(--line); margin-top: 125px; padding-top: 28px; }.principles h2 { margin: 74px 0 48px; }.principle-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }.principle-grid article { border-right: 1px solid var(--line); min-height: 200px; padding: 24px 24px 20px 0; }.principle-grid article + article { padding-left: 24px; }.principle-grid article:last-child { border: 0; }.principle-grid span { color: var(--muted); font: 11px 'DM Mono', monospace; }.principle-grid h3 { font-size: 25px; letter-spacing: -.05em; margin: 30px 0 10px; }.principle-grid p { color: var(--muted); font-size: 14px; max-width: 220px; }.project-cta { align-items: end; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 120px; padding-top: 28px; }.project-cta h2 { font-size: clamp(36px, 4vw, 58px); letter-spacing: -.07em; line-height: 1; margin-top: 50px; }
.docs-page { padding: 88px 0 120px; }.docs-layout { display: grid; gap: 100px; grid-template-columns: 190px 1fr; }.docs-sidebar { position: sticky; align-self: start; top: 30px; }.docs-version { color: var(--muted); font: 11px/1.6 'DM Mono', monospace; margin: 34px 0 45px; }.docs-nav { border-left: 1px solid var(--line); display: grid; gap: 13px; padding-left: 17px; }.docs-nav a { color: var(--muted); font: 11px 'DM Mono', monospace; text-transform: uppercase; }.docs-nav a:hover { color: var(--ink); }.docs-content { max-width: 760px; }.docs-content > h1 { font-size: clamp(82px, 13vw, 168px); letter-spacing: -.14em; line-height: .8; margin: 70px 0 35px; }.docs-lede { font-size: clamp(25px, 3vw, 39px); letter-spacing: -.06em; line-height: 1.15; max-width: 650px; }.docs-section { border-top: 1px solid var(--line); margin-top: 115px; padding-top: 25px; }.docs-section h2 { font-size: clamp(38px, 5vw, 62px); letter-spacing: -.08em; line-height: 1; margin: 68px 0 35px; }.docs-section > p:not(.section-label) { max-width: 650px; }.docs-note { background: var(--acid); display: grid; gap: 25px; grid-template-columns: 100px 1fr; margin-top: 40px; padding: 22px; }.docs-note strong, .docs-note span { font: 12px/1.5 'DM Mono', monospace; }.workflow-list { list-style: none; margin: 0; padding: 0; }.workflow-list li { border-top: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 55px 1fr; padding: 22px 0; }.workflow-list li > span, .case-card > span { color: var(--muted); font: 11px 'DM Mono', monospace; }.workflow-list h3 { font-size: 21px; letter-spacing: -.04em; margin: -5px 0 5px; }.workflow-list p { color: var(--muted); margin: 0; max-width: 550px; }.case-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); }.case-card { background: var(--card); min-height: 290px; padding: 22px; }.case-card h3 { font-size: 24px; letter-spacing: -.06em; margin: 36px 0 12px; }.case-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }.case-card strong { display: block; font: 11px 'DM Mono', monospace; margin-top: 32px; text-transform: uppercase; }.case-card em { color: var(--muted); display: block; font-size: 13px; font-style: normal; margin-top: 7px; }.principle-rows { border-top: 1px solid var(--line); }.principle-rows div { border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 180px 1fr; padding: 21px 0; }.principle-rows strong { font-size: 15px; }.principle-rows span { color: var(--muted); font-size: 14px; }.docs-footer-cta { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 115px; padding-top: 25px; }.docs-footer-cta p { color: var(--muted); font: 11px 'DM Mono', monospace; text-transform: uppercase; }
@media (max-width: 700px) { .shell { width: min(calc(100% - 32px), var(--max)); }.site-header { padding: 18px 0; } nav a:not(.nav-github) { display: none; } .site-controls { margin-left: 0; } .hero { min-height: 610px; padding: 100px 0 80px; }.hero h1 { font-size: clamp(57px, 17vw, 100px); margin: 40px 0 34px; }.hero-copy { font-size: 16px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 23px; }.about, .projects, .writing { padding-bottom: 80px; }.about-grid, .project-intro-grid { display: block; margin-top: 55px; }.about-copy, .long-copy { padding-top: 35px; }.projects-heading, .writing-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin: 55px 0 30px; }.projects-heading p, .writing-heading p { text-align: left; }.project-card { display: block; min-height: 520px; padding: 20px; }.project-main { margin-top: 120px; }.project-mark { font-size: 110px; position: absolute; right: 20px; top: 55px; }.article-card { align-items: start; display: flex; flex-direction: column; gap: 15px; }.article-arrow { align-self: flex-end; }.site-footer { flex-wrap: wrap; gap: 14px; }.project-page { padding: 80px 0; }.project-page > h1 { margin: 70px 0 35px; }.project-intro-grid h2 { margin-top: 55px; }.principles { margin-top: 85px; }.principles h2 { margin: 55px 0 35px; }.principle-grid { display: block; }.principle-grid article, .principle-grid article + article { border-bottom: 1px solid var(--line); border-right: 0; min-height: auto; padding: 22px 0; }.principle-grid h3 { margin: 18px 0 7px; }.project-cta { align-items: flex-start; flex-direction: column; gap: 35px; margin-top: 80px; }.project-cta h2 { margin-top: 35px; }.cta-actions { align-items: flex-start; } .docs-page { padding: 60px 0 80px; }.docs-layout { display: block; }.docs-sidebar { position: static; }.docs-nav { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 70px; }.docs-version { margin: 25px 0; }.docs-content > h1 { margin: 60px 0 30px; }.docs-section { margin-top: 80px; }.docs-section h2 { margin: 52px 0 28px; }.docs-note { display: block; }.docs-note span { display: block; margin-top: 12px; }.case-grid { display: block; }.case-card { margin-bottom: 1px; min-height: 0; }.principle-rows div { display: block; }.principle-rows span { display: block; margin-top: 8px; }.docs-footer-cta { align-items: flex-start; flex-direction: column; gap: 25px; margin-top: 80px; } }