:root{color-scheme:light;--pine:#092d26;--green:#155a4b;--mint:#b7f7d9;--frost:#f1fff8;--line:#d0e4da;--muted:#41625a}
*{box-sizing:border-box}body{margin:0;background:#fafdfb;color:var(--pine);font:1rem/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--green);text-underline-offset:.22em}a:focus-visible{outline:3px solid #155a4b;outline-offset:5px}img{max-width:100%;height:auto}.wrap{width:min(1100px,calc(100% - 40px));margin:auto}.top,.foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.top{padding:20px 0}.brand{display:inline-flex;align-items:center;gap:8px}.brand img:first-child{width:40px}.brand img:last-child{width:133px}nav{display:flex;gap:1.35rem;flex-wrap:wrap}nav a{font-size:.9rem;text-decoration:none;font-weight:650}nav a:hover,nav a[aria-current]{text-decoration:underline}.skip{position:absolute;left:1rem;top:-5rem;background:white;padding:.5rem}.skip:focus{top:1rem}.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:30px;padding:clamp(28px,6vw,80px);background:var(--frost);border:1px solid var(--line);border-radius:28px}.hero-art{display:grid;place-items:center;background:radial-gradient(ellipse,#d1f7e5,transparent 70%)}.hero-art img{width:min(100%,320px)}.eyebrow{font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.16em;color:var(--green)}h1,h2,h3{line-height:1.13;letter-spacing:-.035em}h1{font-size:clamp(2.6rem,6vw,5.2rem);margin:.25em 0}h2{font-size:clamp(1.55rem,3vw,2.25rem)}h3{font-size:1.25rem}.lead{font-size:1.15rem;color:var(--muted);max-width:50ch}.button{display:inline-block;background:var(--pine);color:white;border-radius:9px;padding:.7rem 1.15rem;text-decoration:none;font-weight:650}.button:hover{background:var(--green)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:3rem 0}.features article{border-top:2px solid var(--line);padding-top:.65rem}.features p,.foot{color:var(--muted)}.article{max-width:720px;margin:2.5rem auto 4.5rem}.article h1{font-size:clamp(2.5rem,5vw,4rem)}.article h2{margin-top:2rem;font-size:1.5rem}.callout{background:var(--frost);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.5rem;margin:1.5rem 0}.callout p{margin:.4rem 0}footer{border-top:1px solid var(--line);padding:1.35rem 0;font-size:.88rem}.foot p{margin:0}code{overflow-wrap:anywhere}@media(max-width:670px){.hero,.features{grid-template-columns:1fr}.hero-art img{width:190px}.hero{gap:8px}.top{align-items:flex-start}nav{gap:.9rem}.article{margin-top:1.5rem}}

/* Homepage */
.launch { grid-template-columns: 1.08fr 1fr; gap: clamp(24px, 5vw, 68px); padding: clamp(24px, 5vw, 64px); background: radial-gradient(ellipse at 95% 8%, #c5f3dc, transparent 62%), var(--frost); }
.launch h1 { font-size: clamp(2.7rem, 5.55vw, 4.9rem); line-height: .98; letter-spacing: -.065em; }
.launch h1 em { color: var(--green); font-style: normal; }
.launch-note { color: var(--muted); font-size: .83rem; }
.app-demo { margin: 0; min-width: 0; }
.demo-window { background: #fff; border: 1px solid #bdd5c9; border-radius: 17px; overflow: hidden; box-shadow: 0 18px 50px #092d2620; }
.demo-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .64rem .8rem; background: #eaf4ef; border-bottom: 1px solid var(--line); font-size: .76rem; }
.traffic { display: flex; gap: 5px; }
.traffic i { width: 8px; height: 8px; border-radius: 50%; background: #a9c9bb; }
.demo-title, .demo-files li { display: flex; gap: .68rem; align-items: center; }
.demo-title { padding: .75rem .9rem .25rem; }
.demo-title small, .demo-files small { display: block; color: var(--muted); }
.demo-files { margin: .5rem .9rem .85rem; padding: 0; list-style: none; }
.demo-files li { padding: .55rem 0; border-top: 1px solid var(--line); font-size: .82rem; }
.thumbnail { width: 35px; height: 35px; border-radius: 6px; flex: 0 0 35px; }
.coast { background: linear-gradient(151deg,#b8e8ea 45%,#437f85 46% 64%,#dcc59f 65%); }
.forest { background: linear-gradient(141deg,#cce5ab 44%,#639670 45% 62%,#25574b 63%); }
.dusk { background: linear-gradient(155deg,#f4c9ab 43%,#ad777f 44% 63%,#675a76 64%); }
.done { margin-left: auto; font-size: .68rem; color: var(--green); font-weight: 650; }
.demo-total { display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; background: var(--pine); color: var(--frost); padding: .7rem .9rem; font-size: .8rem; }
.demo-total strong { color: var(--mint); }
.app-demo figcaption { margin-top: .7rem; text-align: center; color: var(--muted); font-size: .74rem; }
.workflow { margin: clamp(2.5rem, 7vw, 5.5rem) 0 2rem; scroll-margin-top: 1rem; }
.workflow h2, .local-panel h2 { margin: .3rem 0 .7rem; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0 2.8rem; }
.steps li { border-top: 1px solid var(--line); padding-top: 1rem; }
.steps li > span { color: var(--green); font-size: .78rem; font-weight: 700; }
.steps h3 { margin: .55rem 0 .45rem; }
.steps p { margin: 0; }
.local-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem; padding: clamp(20px,4vw,40px); border-radius: 20px; background: var(--frost); border: 1px solid var(--line); margin-bottom: 3rem; }
.local-panel p { margin: .3rem 0; }
@media (max-width: 760px) { .launch { grid-template-columns: 1fr; } .app-demo { width: min(100%, 460px); } }