:root { --ink:#161a16; --muted:#625f55; --cream:#d6c5a5; --paper:#f3efe3; --bark:#4a3024; --plum:#26352a; --leaf:#2f5a3d; --orange:#a34a24; --amber:#bd682d; --line:#cbbda3; --max:1160px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } .site { overflow:hidden; } .topbar { max-width:var(--max); margin:auto; padding:24px 32px; display:flex; align-items:center; gap:34px; } .brand { font:700 1.25rem Georgia, serif; letter-spacing:-.04em; display:flex; align-items:center; gap:9px; } .brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:9px 9px 9px 2px; color:var(--cream); background:var(--bark); font:700 1rem Georgia,serif; } nav { display:flex; gap:25px; margin-left:auto; font-size:.86rem; color:var(--muted); } nav a:hover, .footer-links a:hover { color:var(--orange); } .nav-download { padding:9px 17px; border:1px solid var(--line); border-radius:99px; font-size:.86rem; } .hero { max-width:var(--max); min-height:650px; margin:auto; padding:104px 32px 115px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:55px; } .eyebrow, .card-label, .feature-label { text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:750; color:var(--leaf); } h1,h2,h3 { margin:0; font-family:Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.045em; } h1 { max-width:650px; margin-top:17px; font-size:clamp(3.25rem,6vw,5.5rem); } h2 { font-size:clamp(2.3rem,4vw,4rem); max-width:740px; } h3 { font-size:1.55rem; } .lead { max-width:570px; margin:28px 0 0; font-size:1.16rem; color:var(--muted); } .hero-actions { display:flex; gap:13px; margin-top:35px; align-items:center; } .button { display:inline-block; border-radius:99px; padding:13px 21px; font-weight:700; font-size:.9rem; } .primary { color:#fffaf1; background:var(--orange); box-shadow:0 8px 20px #bd3c1330; } .quiet { color:var(--bark); border:1px solid var(--line); } .light { color:var(--plum); background:var(--cream); } .microcopy { color:var(--muted); font-size:.78rem; margin-top:19px; } .hero-art { min-height:400px; position:relative; background:var(--cream); border-radius:50% 45% 48% 42%; transform:rotate(-3deg); } .hero-card { position:absolute; z-index:2; width:70%; left:15%; top:22%; padding:31px; background:#fffdf5; border:1px solid #d8ceb4; border-radius:13px; transform:rotate(5deg); box-shadow:18px 22px 0 #e3dcc8; } .hero-card h3 { margin-top:14px; color:var(--plum); } .hero-card p { color:var(--muted); font-size:.85rem; } .card-lines { margin-top:28px; height:82px; background:repeating-linear-gradient(to bottom, transparent 0 18px, #d7cfbc 19px 20px); } .leaf { position:absolute; border-radius:100% 0 100% 0; background:var(--leaf); opacity:.9; } .leaf-one { width:85px; height:180px; top:4%; right:13%; transform:rotate(30deg); } .leaf-two { width:55px; height:130px; bottom:3%; left:12%; background:var(--amber); transform:rotate(-35deg); } .intro { max-width:850px; padding:100px 32px 70px; margin:auto; text-align:center; } .intro .eyebrow { color:var(--orange); } .intro h2 { margin:15px auto 25px; } .section-lead { color:var(--muted); font-size:1.05rem; } .feature-grid { max-width:var(--max); margin:auto; padding:25px 32px 115px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); } .feature { min-height:260px; padding:29px 28px; background:var(--paper); } .feature-number { display:block; font:1rem Georgia,serif; color:var(--orange); margin-bottom:22px; } .feature-label { display:block; color:var(--muted); font-size:.6rem; margin-bottom:11px; } .feature p { color:var(--muted); font-size:.9rem; margin-bottom:0; } .wiki-callout { max-width:var(--max); margin:0 auto 115px; padding:65px 70px; color:#fffaf1; background:var(--plum); border-radius:4px; display:flex; align-items:center; justify-content:space-between; gap:40px; } .wiki-callout .eyebrow { color:#e8a755; } .wiki-callout h2 { margin:14px 0 14px; font-size:2.7rem; } .wiki-callout p { max-width:630px; color:#e6d9d3; margin:0; } .about { max-width:var(--max); margin:auto; padding:0 32px 125px; display:grid; grid-template-columns:1fr 1fr; gap:80px; } .about h2 { margin-top:15px; } .about p { color:var(--muted); max-width:530px; } .footer { border-top:1px solid var(--line); max-width:var(--max); margin:auto; padding:38px 32px 50px; display:flex; justify-content:space-between; gap:30px; color:var(--muted); font-size:.8rem; } .small { font-size:1rem; color:var(--ink); } .footer p { margin:7px 0 0; } .footer-links { display:flex; gap:25px; align-items:center; }
.page-hero { max-width:850px; margin:auto; padding:110px 32px 85px; } .page-hero h1 { font-size:clamp(3rem,6vw,5rem); margin-top:15px; } .page-hero .lead { max-width:760px; } .download-list { max-width:var(--max); margin:auto; padding:0 32px 105px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .download-list article, .help-grid article { padding:32px; border:1px solid var(--line); background:#ebe5d5; } .download-list h2, .help-grid h2, .page-note h2 { font-size:2rem; margin:14px 0; } .download-list p, .help-grid p, .page-note p { color:var(--muted); } .download-list .button { margin-top:14px; } .page-note { max-width:var(--max); margin:0 auto 110px; padding:45px 55px; border-left:5px solid var(--orange); background:var(--cream); } .page-note a, .help-grid a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; } .help-grid { max-width:var(--max); margin:auto; padding:0 32px 105px; display:grid; grid-template-columns:1fr 1fr; gap:18px; } .help-grid article { background:var(--plum); color:#f3efe3; } .help-grid article + article { background:var(--bark); } .help-grid .feature-label { color:var(--cream); } .help-grid p { color:#e2daca; } .principles { max-width:var(--max); margin:0 auto 110px; padding:70px 55px; display:grid; grid-template-columns:1fr 1fr; gap:70px; background:var(--leaf); color:#f3efe3; } .principles .eyebrow { color:var(--cream); } .principles h2 { font-size:2.8rem; } .principles p { color:#e0e9de; }
.hero { min-height:auto; padding-top:72px; padding-bottom:82px; grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); gap:48px; }
.research-mark { width:100%; max-width:560px; padding:11px; justify-self:end; perspective:1100px; }
.tree-plane { width:100%; min-height:0; aspect-ratio:2/1; padding:21px 30px 17px; display:flex; flex-direction:column; position:relative; color:var(--paper); border:1px solid #d6c5a542; border-radius:3px; background:linear-gradient(145deg,#1c241f 0%,#101512 58%,#090c0a 100%); box-shadow:10px 11px 0 #743219,20px 23px 31px #161a1647; transform:rotateX(2deg) rotateY(-5deg) rotateZ(.6deg); transform-style:preserve-3d; }
.tree-plane::before { content:""; position:absolute; inset:10px -9px -10px 9px; z-index:-1; border:1px solid #355d43; background:#172019; transform:translateZ(-18px); }
.tree-plane::after { content:""; position:absolute; width:8px; height:8px; right:28px; top:27px; border-radius:50%; background:#a34a24; box-shadow:-16px 0 0 #315b3e,-32px 0 0 #d6c5a5; }
.tree-kicker { color:#d6c5a5b8; font-size:.56rem; font-weight:700; letter-spacing:.18em; }
.syntax-tree { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 5px 8px; font-family:Georgia,serif; }
.tree-node { min-width:34px; padding:3px 7px; position:relative; z-index:2; color:#eee7d8; background:#121814; border:1px solid #6f7c71; text-align:center; font-size:.76rem; line-height:1.2; box-shadow:0 4px 9px #0006; }
.tree-root { color:#d6c5a5; border-color:#a34a24; }
.tree-branch { width:100%; display:flex; justify-content:space-around; position:relative; }
.tree-branch::before { content:""; position:absolute; left:25%; right:25%; top:0; height:1px; background:#7f8b81; box-shadow:0 1px 0 #000; }
.tree-branch-main { margin-top:27px; }
.tree-branch-main::after { content:""; position:absolute; width:1px; height:27px; left:50%; bottom:100%; background:#7f8b81; box-shadow:1px 0 0 #000; }
.tree-subtree { width:42%; display:flex; flex-direction:column; align-items:center; position:relative; }
.tree-subtree::before { content:""; position:absolute; width:1px; height:14px; left:50%; bottom:100%; background:#7f8b81; }
.tree-branch-small { margin-top:25px; }
.tree-branch-small::before { left:20%; right:20%; }
.tree-branch-small::after { content:""; position:absolute; width:1px; height:25px; left:50%; bottom:100%; background:#7f8b81; }
.tree-terminal::before { content:""; position:absolute; width:1px; height:13px; left:50%; bottom:100%; background:#7f8b81; }
.target-node { color:#f4eee1; border-color:#bc5a2c; background:#183023; box-shadow:0 0 0 7px #2f5a3dcc,0 0 0 11px #9b4522cc,0 10px 18px #0009; }
.tree-caption { padding-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; border-top:1px solid #d6c5a530; color:#d6c5a59e; font-size:.52rem; font-weight:700; letter-spacing:.1em; text-align:center; text-transform:uppercase; }
.tree-plane { overflow:hidden; isolation:isolate; }
.tree-kicker { position:relative; z-index:4; }
.bullseye { width:280px; aspect-ratio:1; position:absolute; z-index:0; right:-58px; bottom:-105px; border-radius:50%; opacity:.62; background:radial-gradient(circle,#0c110e 0 10%,#8b3e22 10% 21%,#173824 21% 37%,#8b3e22 37% 39%,#173824 39% 55%,#9d4825 55% 57%,transparent 57%); filter:saturate(.9); transform:translateZ(-2px); }
.bullseye::after { content:""; position:absolute; inset:19%; border:1px solid #d6c5a55c; border-radius:50%; }
.syntax-tree { position:absolute; inset:33px 23px 21px; z-index:1; display:block; padding:0; overflow:hidden; font-family:Georgia,serif; opacity:.48; }
.tree-node { min-width:0; padding:2px 6px; position:absolute; z-index:2; color:#d8d3c7; background:#111713cc; border:1px solid #7b877d; font-size:.66rem; line-height:1.15; box-shadow:none; transform:translate(-50%,-50%); }
.node-tp { left:50%; top:7%; color:var(--cream); border-color:#a34a24; }
.node-dp-one { left:28%; top:40%; }
.node-vp { left:72%; top:40%; }
.node-d { left:18%; top:80%; }
.node-np { left:38%; top:80%; }
.node-dp-two { left:62%; top:80%; }
.node-vp-final { left:82%; top:80%; }
.tree-line { height:1px; position:absolute; z-index:1; display:block; background:#9ca59e; box-shadow:0 1px 0 #0008; transform-origin:0 50%; }
.line-one { width:26%; left:50%; top:11%; transform:rotate(148deg); }
.line-two { width:26%; left:50%; top:11%; transform:rotate(32deg); }
.line-three { width:20%; left:28%; top:44%; transform:rotate(121deg); }
.line-four { width:20%; left:28%; top:44%; transform:rotate(59deg); }
.line-five { width:20%; left:72%; top:44%; transform:rotate(121deg); }
.line-six { width:20%; left:72%; top:44%; transform:rotate(59deg); }
.target-node { color:#f4eee1; border-color:#a9562d; background:#173022; box-shadow:0 0 0 6px #2f5a3dcc,0 0 0 10px #863b20d9,0 7px 16px #000b; }
.function-layer { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px 24px; background:radial-gradient(ellipse at center,#101512d9 0%,#10151299 42%,transparent 72%); text-align:center; transform:translateZ(18px); }
.function-line { display:block; font-family:Georgia,serif; font-size:clamp(1.65rem,3vw,2.55rem); line-height:1.06; letter-spacing:-.045em; text-shadow:0 5px 14px #000; }
.function-line-light { color:#eee7d8; }
.function-line-accent { margin-top:7px; color:#bc6336; }
@media (max-width:760px) { .topbar { padding:20px; } nav { display:none; } .nav-download { margin-left:auto; } .hero { display:block; padding:70px 20px 85px; min-height:auto; } h1 { font-size:3.25rem; } .hero-art { min-height:310px; margin-top:70px; } .feature-grid, .download-list, .help-grid { grid-template-columns:1fr; padding:10px 20px 75px; } .intro { padding:80px 20px 55px; text-align:left; } .wiki-callout { margin:0 20px 85px; padding:38px 28px; display:block; } .wiki-callout h2 { font-size:2.3rem; } .wiki-callout .button { margin-top:27px; } .about { display:block; padding:0 20px 85px; } .about > div + div { margin-top:30px; } .page-hero { padding:70px 20px 55px; } .page-hero h1 { font-size:3.25rem; } .page-note, .principles { margin-left:20px; margin-right:20px; padding:34px 27px; display:block; } .principles > div + div { margin-top:30px; } .footer { margin:0 20px; padding-left:0; padding-right:0; display:block; } .footer-links { margin-top:25px; flex-wrap:wrap; } }
@media (max-width:760px) { .hero { padding-top:58px; padding-bottom:68px; } .research-mark { max-width:none; margin-top:40px; padding:7px 10px 10px 0; } .tree-plane { min-height:0; aspect-ratio:2/1; padding:17px 20px 13px; transform:rotateX(1deg) rotateY(-2deg) rotateZ(.3deg); box-shadow:8px 9px 0 #743219,15px 18px 25px #161a163d; } .tree-plane::before { inset:7px -6px -7px 6px; } .tree-kicker { font-size:.44rem; } .syntax-tree { inset:26px 14px 14px; } .function-layer { padding:31px 10px 12px; } .function-line { font-size:clamp(1.2rem,6.5vw,1.8rem); } .line-one { transform:rotate(150deg); } .line-two { transform:rotate(30deg); } .line-three,.line-five { transform:rotate(123deg); } .line-four,.line-six { transform:rotate(57deg); } }
@media (max-width:760px) { .bullseye { width:225px; right:-62px; bottom:-91px; opacity:.58; } }
.intro .section-lead { max-width:720px; margin-right:auto; margin-left:auto; text-align:left; }
.commitments-gallery { grid-column:1 / -1; margin:0; }
.commitments-images { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; border:1px solid #35473a; background:#151b17; box-shadow:10px 10px 0 var(--orange); }
.commitments-images img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.commitments-gallery figcaption { max-width:840px; margin:22px 0 0; color:var(--muted); font-size:.86rem; line-height:1.65; }
.caption-label { display:block; margin-bottom:5px; color:var(--leaf); font-size:.64rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
@media (max-width:760px) { .commitments-gallery { margin-top:38px; } .commitments-images { grid-template-columns:1fr; gap:7px; padding:7px; box-shadow:7px 7px 0 var(--orange); } .commitments-gallery figcaption { margin-top:18px; } }
.commitments { margin:0 auto 115px; padding:65px 70px; column-gap:80px; row-gap:48px; color:#f3efe3; background:var(--plum); border-radius:4px; }
.commitments h2 { color:#fffaf1; }
.commitments .eyebrow { color:#e8a755; }
.commitments p, .commitments .commitments-gallery figcaption { color:#e2daca; }
.commitments .caption-label { color:#e8a755; }
@media (max-width:760px) { .commitments { margin:0 20px 85px; padding:38px 28px; } }