:root { --ink:#17221f; --paper:#f6f3eb; --white:#fffdf8; --moss:#284a40; --moss-deep:#17372e; --ochre:#e0a450; --line:#d8d1c3; --muted:#607069; --rose:#bf5a59; --display:Georgia, "Times New Roman", serif; --body:Arial, "Helvetica Neue", sans-serif; --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.55; } a { color:inherit; } button { font:inherit; cursor:pointer; }.skip-link { position:fixed; z-index:10; top:-4rem; left:1rem; padding:.7rem 1rem; background:var(--ink); color:white; }.skip-link:focus { top:0; }.nav, main, footer { width:min(1200px, calc(100% - 3rem)); margin:auto; }.nav { min-height:5.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; font:700 1.13rem/1 var(--display); letter-spacing:-.05em; }.brand em { color:var(--moss); }.mark { display:grid; align-content:center; width:1.9rem; height:1.7rem; padding:0 .18rem; gap:3px; background:var(--moss); transform:rotate(-3deg); }.mark i { display:block; height:2px; background:var(--ochre); }.mark i:nth-child(2){width:68%;}.mark i:nth-child(3){width:84%;}.nav nav { display:flex; gap:1.25rem; align-items:center; }.nav nav a { color:var(--muted); text-decoration:none; font-size:.75rem; font-weight:700; }.nav nav a:hover { color:var(--moss); }.nav-source { padding:.53rem .75rem; border:1px solid var(--line); color:var(--ink)!important; }.nav-source:hover { border-color:var(--moss); }
.hero { min-height:32rem; padding:4.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; overflow:hidden; position:relative; background:var(--moss); color:var(--white); box-shadow:0 16px 38px rgba(35,42,32,.12); }.hero::after { content:""; position:absolute; width:27rem; height:27rem; right:-12rem; bottom:-16rem; border:1px solid rgba(255,255,255,.17); border-radius:50%; box-shadow:0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018); }.hero-copy, .hero-composition { position:relative; z-index:1; }.eyebrow { margin:0 0 .8rem; color:var(--ochre); font:500 .67rem/1.2 var(--mono); letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.05em; } h1 { max-width:10ch; margin-bottom:1.35rem; font:700 clamp(3.2rem,6vw,5.7rem)/.91 var(--display); } h1 span { color:var(--ochre); font-style:italic; }.hero-copy > p:not(.eyebrow) { max-width:36rem; color:#dce9e2; font-size:1.03rem; }.hero-actions { display:flex; gap:1.15rem; align-items:center; margin-top:1.7rem; }.button { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; min-height:3.1rem; padding:.7rem .9rem; text-decoration:none; font-weight:700; }.button-light { background:var(--white); color:var(--moss); }.button-light:hover { background:#e9ede8; }.text-link { color:var(--white); font-weight:700; font-size:.82rem; }.proof { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:2rem 0 0; list-style:none; }.proof li { padding:.35rem .5rem; border:1px solid rgba(255,255,255,.24); color:#e5ece8; font:500 .62rem var(--mono); letter-spacing:.045em; }.hero-composition { height:21rem; }.hero-sheet { position:absolute; width:15.2rem; min-height:18.5rem; box-shadow:0 20px 28px rgba(7,25,18,.27); }.hero-sheet-back { top:1.5rem; right:3rem; background:var(--ochre); transform:rotate(7deg); }.hero-sheet-front { top:.75rem; right:4rem; padding:1.8rem 1.55rem; display:flex; flex-direction:column; background:var(--white); color:var(--ink); transform:rotate(-4deg); }.hero-sheet-front span,.hero-sheet-front small { font:500 .59rem var(--mono); letter-spacing:.09em; }.hero-sheet-front span { color:var(--moss); }.hero-sheet-front strong { margin-top:2rem; font:700 1.75rem/1.03 var(--display); letter-spacing:-.07em; }.hero-sheet-front i { width:3rem; height:.22rem; margin:auto 0 1rem; background:var(--rose); }
.statement { display:grid; grid-template-columns:.32fr .68fr; gap:3rem; padding:7rem 5rem; }.statement .eyebrow { padding-top:.35rem; }.statement h2, .section-header h2, .workflow h2, .start h2 { font:700 clamp(2rem,3.4vw,3.4rem)/1.06 var(--display); }.statement p:not(.eyebrow) { max-width:42rem; margin:1.2rem 0 0; color:var(--muted); }.deck { padding:3.4rem; background:var(--white); border:1px solid var(--line); }.section-header { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.2rem; }.section-header h2 { margin-bottom:0; }.section-header > p { max-width:22rem; margin:0; color:var(--muted); font-size:.84rem; }.deck figure { margin:0; }.deck img { display:block; width:100%; border:1px solid var(--line); }.deck figcaption { margin-top:.75rem; color:var(--muted); font-size:.72rem; }.deck figcaption a { color:var(--moss); font-weight:700; }
.slide-lab { display:grid; grid-template-columns:.78fr 1.22fr; gap:4rem; align-items:center; padding:7rem 4rem; }.slide-lab h2 { font:700 clamp(2.1rem,3.5vw,3.7rem)/1.03 var(--display); }.lab-copy > p:not(.eyebrow) { color:var(--muted); }.lab-controls { display:flex; gap:.85rem; align-items:center; margin-top:2rem; }.lab-controls button { width:2.4rem; height:2.4rem; border:1px solid var(--line); background:transparent; color:var(--moss); font-size:1rem; }.lab-controls button:hover { border-color:var(--moss); background:var(--moss); color:white; }.lab-controls span { min-width:4rem; color:var(--muted); font:500 .68rem var(--mono); letter-spacing:.08em; }.sample-slide { min-height:24rem; padding:2.15rem; position:relative; overflow:hidden; color:#f4f5ef; background:#101425; box-shadow:0 13px 24px rgba(34,38,33,.14); }.sample-slide::before { content:""; position:absolute; top:0; bottom:0; left:0; width:.22rem; background:var(--ochre); }.sample-slide h3 { max-width:65%; margin:1rem 0 .9rem; font:700 clamp(1.8rem,3vw,3.1rem)/1.02 var(--display); }.sample-slide > p { max-width:61%; color:#c1cad4; font-size:.9rem; }.slide-kicker { color:var(--ochre); font:500 .67rem var(--mono); letter-spacing:.1em; }.sample-slide ul { display:grid; gap:.42rem; max-width:64%; padding:0; margin:2rem 0 0; list-style:none; }.sample-slide li { display:grid; grid-template-columns:1.7rem 1fr; gap:.55rem; align-items:center; padding:.5rem .7rem; background:#1b2136; font-size:.72rem; }.sample-slide li::before { content:counter(list-item, decimal-leading-zero); color:var(--ochre); font:500 .58rem var(--mono); }.sample-slide aside { position:absolute; z-index:1; right:1.9rem; bottom:1.9rem; width:27%; min-height:65%; padding:1.4rem; display:flex; flex-direction:column; background:#1b2136; border-radius:3rem 3rem 0 0; }.sample-slide aside::before { content:""; width:100%; height:.16rem; background:var(--ochre); }.sample-slide aside b { margin-top:1.2rem; color:var(--ochre); font:700 3rem/1 var(--display); }.sample-slide aside span { margin-top:1.25rem; color:#aeb9c8; font:500 .53rem var(--mono); letter-spacing:.1em; }.sample-slide aside strong { margin-top:.5rem; font:700 1rem/1.15 var(--display); }
.workflow { padding:5rem 0; border-top:1px solid var(--line); }.workflow h2 { max-width:20ch; }.workflow ol { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; padding:0; margin:2.7rem 0 0; list-style:none; }.workflow li > span { color:var(--moss); font:500 .75rem var(--mono); }.workflow h3 { margin:.8rem 0 .45rem; font:700 1.2rem var(--display); }.workflow li p { margin:0; color:var(--muted); font-size:.82rem; }.start { display:grid; grid-template-columns:.2fr .42fr .38fr; gap:2.4rem; align-items:start; padding:3.4rem; color:var(--white); background:var(--ink); }.start h2 { margin-bottom:.7rem; }.start p:not(.eyebrow) { margin:0; color:#c5d2ca; font-size:.84rem; }.command { position:relative; padding:1.1rem; background:#252f2b; }.command code, pre code { font:400 .72rem/1.7 var(--mono); }.copy-button { position:absolute; right:.65rem; top:.65rem; padding:.28rem .48rem; border:1px solid rgba(255,255,255,.25); background:transparent; color:white; font:500 .58rem var(--mono); }.copy-button:hover { background:white; color:var(--ink); }.command-status { grid-column:3; margin-top:-1.9rem!important; color:#f2d69c!important; font-size:.66rem!important; } footer { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; padding:2.4rem 0; } footer p { margin:.8rem 0 0; color:var(--muted); font-size:.72rem; } footer nav { display:flex; gap:1rem; } footer nav a { color:var(--muted); font-size:.72rem; font-weight:700; text-decoration:none; } footer nav a:hover { color:var(--moss); }
.docs { display:grid; grid-template-columns:13rem minmax(0,1fr); gap:4rem; padding:4rem 0 6rem; }.docs aside { position:sticky; top:1.5rem; align-self:start; display:grid; gap:.25rem; }.docs aside a { padding:.3rem 0; color:var(--muted); text-decoration:none; font-size:.77rem; }.docs aside a:hover { color:var(--moss); }.docs article { max-width:48rem; }.docs h1 { max-width:13ch; font:700 clamp(2.8rem,5vw,5rem)/.95 var(--display); }.lead { max-width:37rem; color:var(--muted); font-size:1rem; }.docs section { padding:2.5rem 0; border-bottom:1px solid var(--line); }.docs h2 { font:700 1.9rem var(--display); }.docs p, .docs li { color:#43534c; }.docs pre { position:relative; padding:1rem; overflow:auto; color:#e6eee8; background:var(--ink); }.docs pre .copy-button { color:var(--white); }.docs-end { padding-top:2.5rem; }.docs-end a { color:var(--moss); font-weight:700; }
@media (max-width:850px) { .hero { padding:3rem 2rem; grid-template-columns:1fr; }.hero-composition { display:none; }.statement,.slide-lab { grid-template-columns:1fr; gap:1.5rem; padding:4rem 1rem; }.deck,.start { padding:2rem; }.section-header { align-items:flex-start; flex-direction:column; }.slide-lab { gap:2.5rem; }.workflow ol { gap:1.5rem; }.start { grid-template-columns:1fr; }.command-status { grid-column:1; margin-top:-1.5rem!important; }.docs { grid-template-columns:1fr; gap:1.5rem; }.docs aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }.docs aside .eyebrow { grid-column:1/-1; } }
@media (max-width:560px) { .nav,main,footer { width:min(100% - 2rem,1200px); }.nav nav a[href="#how"] { display:none; }.hero { margin-top:.4rem; min-height:auto; padding:3.2rem 1.5rem; }.hero-actions { flex-direction:column; align-items:flex-start; }.statement { padding:3.5rem 0; }.deck { padding:1rem; }.slide-lab { padding:3.5rem 0; }.sample-slide { min-height:26rem; padding:1.5rem; }.sample-slide h3,.sample-slide>p,.sample-slide ul { max-width:61%; }.sample-slide aside { right:1rem; bottom:1rem; width:31%; padding:.9rem; }.workflow { padding:3.5rem 0; }.workflow ol { grid-template-columns:1fr; }.start { padding:1.5rem; } footer { flex-direction:column; } footer nav { flex-wrap:wrap; }.docs { padding-top:2rem; }.docs aside { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }