:root{--bg: #f5f3ee;--ink: #2a2410;--muted: #6f6857;--line: rgba(42, 36, 16, .12);--paper: #ffe873;--hand: "Caveat", "Bradley Hand", cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}main{max-width:1080px;margin:0 auto;padding:0 24px}a{color:inherit}code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;background:#2a241012;padding:1px 5px;border-radius:4px}.top{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:20px 24px}.brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:12px;background:var(--ink);color:#fffbe8;font-weight:600;text-decoration:none;box-shadow:0 1px #ffffff26 inset,0 6px 16px #2a24102e;transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 1px #ffffff26 inset,0 10px 22px #2a241038}.btn:active{transform:translateY(0)}.btn svg{margin-top:-2px}.btn-small{padding:8px 14px;border-radius:9px;font-size:14px;box-shadow:none}.hero{text-align:center;padding:48px 0 28px}.hero h1{max-width:760px;margin:0 auto;font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.025em}.lede{max-width:560px;margin:18px auto 0;font-size:19px;color:var(--muted)}.cta{margin-top:30px}.meta{margin:12px 0 0;font-size:13px;color:var(--muted)}.demo{padding:28px 0 8px}.scribble{position:relative;z-index:1;margin:0 0 16px 8px;font:600 26px/1 var(--hand);color:#8a6d00;transform:rotate(-1.5deg)}.desk{position:relative;height:min(620px,72vh);min-height:460px;border-radius:20px;overflow:hidden;background:#efece5;box-shadow:0 0 0 1px var(--line),0 24px 60px -24px #2a241047}.desk iframe{display:block;width:100%;height:100%;border:0}.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}.tips b{display:block;color:var(--ink);font:600 22px/1.1 var(--hand)}section h2{margin:0 0 22px;font-size:28px;letter-spacing:-.015em}section h3{margin:0 0 6px;font-size:17px}.install,.using{padding:72px 0 0}.steps{counter-reset:step;margin:0;padding:0;list-style:none;display:grid;gap:14px}.steps>li{counter-increment:step;position:relative;padding:22px 24px 22px 76px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line)}.steps>li:before{content:counter(step);position:absolute;left:22px;top:20px;width:36px;height:36px;display:grid;place-items:center;background:var(--paper);border-radius:4px;font:600 24px/1 var(--hand);transform:rotate(-4deg);box-shadow:0 2px 4px #3c2d002e}.steps p{margin:0;color:var(--muted)}.steps p+p,.steps .sub+p{margin-top:10px}.sub{margin:10px 0 0;padding-left:20px;color:var(--muted)}.sub li+li{margin-top:4px}.steps b,.cards b{color:var(--ink)}.aside{font-size:14px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.card{padding:22px 24px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line)}.card p{margin:0;color:var(--muted)}.inline-icon{vertical-align:-3px}footer{padding:72px 24px 40px;text-align:center;font:600 22px/1 var(--hand);color:var(--muted)}@media(max-width:760px){.tips{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.steps>li{padding-left:66px}.steps>li:before{left:16px}}
