@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap";[data-syntax-theme=dracula]{--syntax-background: light-dark(#ffffff, #282a36);--syntax-foreground: light-dark(#282a36, #f8f8f2);--syntax-comment: light-dark(#6272a4, #6272a4);--syntax-keyword: light-dark(#c21872, #ff79c6);--syntax-operator: light-dark(#c21872, #ff79c6);--syntax-string: light-dark(#8a7400, #f1fa8c);--syntax-constant: light-dark(#714cac, #bd93f9);--syntax-function: light-dark(#168a3f, #50fa7b);--syntax-type: light-dark(#087e8b, #8be9fd);--syntax-variable: light-dark(#282a36, #f8f8f2);--syntax-property: light-dark(#087e8b, #8be9fd);--syntax-tag: light-dark(#c21872, #ff79c6);--syntax-selector: light-dark(#168a3f, #50fa7b);--syntax-inserted: light-dark(#168a3f, #50fa7b);--syntax-deleted: light-dark(#c21872, #ff79c6);color-scheme:light dark}[data-syntax-theme=dracula] pre:has(code){background-color:var(--syntax-background);color:var(--syntax-foreground)}::highlight(comment),::highlight(quote){color:var(--syntax-comment)}::highlight(keyword),::highlight(storage),::highlight(at-rule),::highlight(doctype),::highlight(important),::highlight(section){color:var(--syntax-keyword)}::highlight(operator),::highlight(punctuation){color:var(--syntax-operator)}::highlight(string),::highlight(regexp),::highlight(attribute-value),::highlight(link),::highlight(raw){color:var(--syntax-string)}::highlight(numeric),::highlight(boolean),::highlight(constant),::highlight(symbol),::highlight(character-entity),::highlight(anchor),::highlight(entity){color:var(--syntax-constant)}::highlight(function),::highlight(decorator),::highlight(animation){color:var(--syntax-function)}::highlight(type),::highlight(support){color:var(--syntax-type)}::highlight(variable),::highlight(interpolation){color:var(--syntax-variable)}::highlight(property),::highlight(key),::highlight(attribute-name){color:var(--syntax-property)}::highlight(tag){color:var(--syntax-tag)}::highlight(selector){color:var(--syntax-selector)}::highlight(inserted){color:var(--syntax-inserted)}::highlight(deleted){color:var(--syntax-deleted)}.startup-loading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body[data-demo-starting] :is(.demo-grid,.panel.result,.playground-inner){position:relative}body[data-demo-starting] :is(.demo-grid,.panel.result:not(.demo-grid .panel.result),.playground-inner):after{content:"◌ Starting live demo…";position:absolute;z-index:2;top:-14px;right:16px;padding:8px 12px;border:1px solid #cddccc;border-radius:30px;background:#fffefa;color:#466b4f;box-shadow:0 4px 16px #243d2812;font:11px DM Mono,monospace;letter-spacing:.01em;pointer-events:none;animation:startup-pulse 1.2s ease-in-out infinite}@keyframes startup-pulse{50%{opacity:.6}}@media(prefers-reduced-motion:reduce){body[data-demo-starting] :is(.demo-grid,.panel.result:not(.demo-grid .panel.result),.playground-inner):after{animation:none}}:root{font-family:DM Sans,system-ui,sans-serif;color:#223428;background:#f4f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}.page{max-width:1280px;margin:auto;padding:0 52px}.masthead{height:93px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9ddd0}.brand{display:flex;align-items:center;gap:12px;font-size:18px;letter-spacing:-.04em;font-weight:700;text-decoration:none}.brand-mark{width:37px;height:37px;border-radius:10px;background:#254733;color:#f5f0d9;display:grid;place-items:center;font-size:24px;line-height:1}.brand-mark span{color:#e9a273}.source{text-decoration:none;font-size:13px;font-weight:700;border-bottom:1px solid #809382;padding-bottom:4px}.source span{margin-left:8px}main{padding-top:75px}.eyebrow,.step,.under-label,.field-label,.basket-tag,.basket-caption,.basket-unit,.basket-note>span,.basket-bottom,.live,.pill,.panel-footnote,.helper{font-family:DM Mono,monospace}.eyebrow{display:flex;align-items:center;gap:10px;color:#55705e;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500}.eyebrow-dot,.live span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e87e53;box-shadow:0 0 0 4px #e87e5326}h1{font-size:clamp(46px,5.3vw,74px);letter-spacing:-.068em;line-height:1.08;margin:25px 0 18px;font-weight:700}h1 em{font-family:Playfair Display,serif;color:#d4764f;font-weight:600;letter-spacing:-.055em}.lede{font-size:17px;line-height:1.7;color:#657267;max-width:620px;margin:0 0 55px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{border:1px solid #dce0d4;border-radius:16px;padding:32px;background:#fffefa;min-height:490px}.result{background:#e9eee4;border-color:#d9e2d5}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.step,.under-label{font-size:11px;letter-spacing:.12em;font-weight:500;color:#60806c}.pill{font-size:10px;color:#68836c;background:#eef3e8;padding:7px 11px;border-radius:30px}.live{font-size:10px;color:#4d7656;letter-spacing:.06em;display:flex;align-items:center;gap:10px}.live span{background:#6db87c;box-shadow:0 0 0 4px #6db87c25}.panel h2{font-size:29px;line-height:1.15;letter-spacing:-.05em;margin:0 0 10px}.panel-description{color:#728073;font-size:14px;line-height:1.65;margin:0 0 34px;max-width:370px}.field-label{font-size:11px;font-weight:500;letter-spacing:.08em;color:#496452;text-transform:uppercase;margin-bottom:14px}.buttons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.button{border:0;border-radius:8px;padding:13px 16px;font-size:13px;font-weight:700;white-space:nowrap;min-height:44px}.button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #e5946b;outline-offset:3px}.button-primary{background:#254b36;color:#fffdf3}.button-primary:hover{background:#36674b}.button-secondary{background:#eef1e8;color:#33513b}.button-secondary:hover{background:#e0eadc}.button span{margin-left:12px}.buttons [data-rewire]{display:inline-block}.helper{font-size:10px;color:#96a093;line-height:1.6;margin:13px 0 0}.helper code{color:#54725d;background:#edf3e9;padding:2px 4px;border-radius:3px}.divider{height:1px;background:#e7eadf;margin:32px 0 28px}.note-form label{display:block;font-size:13px;color:#586a5b;margin-bottom:10px}.form-row{display:flex;gap:8px}.form-row input{border:1px solid #dce3d7;background:#fff;border-radius:8px;padding:0 12px;min-width:0;flex:1;font-size:13px;color:#273a2d}.form-row input::placeholder{color:#a6afa4}.redact-region:empty{min-height:247px;display:flex;align-items:center;justify-content:center;color:#68806f;font-size:13px}.redact-region:empty:before{content:attr(data-fallback)}.basket-card{background:#fcfbf5;border:1px solid #dce5d6;border-radius:12px;box-shadow:0 12px 22px #284a2710;overflow:hidden}.basket-top{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 10px}.fruit{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#fae6d6;font-size:31px}.basket-tag{color:#a7b8a6;font-size:9px;letter-spacing:.07em}.basket-main{display:flex;align-items:end;justify-content:space-between;padding:13px 24px 19px}.basket-caption{font-size:10px;letter-spacing:.04em;color:#7b9380;text-transform:uppercase}.basket-number{font-size:66px;line-height:1.05;font-weight:700;letter-spacing:-.075em;color:#2c4d36;font-variant-numeric:tabular-nums}.basket-unit{font-size:10px;color:#9aaa97;padding-bottom:9px}.basket-rule{height:1px;background:#e7ece2;margin:0 24px}.basket-note{padding:19px 24px 23px;min-height:89px}.basket-note>span{font-size:10px;color:#7a957e;letter-spacing:.07em}.basket-note p{font-size:14px;margin:9px 0 0;color:#31513a;overflow-wrap:anywhere}.basket-note em{font-style:normal;color:#a4afa1}.basket-bottom{display:flex;justify-content:space-between;gap:12px;background:#f3f6ed;padding:12px 24px;color:#768c78;font-size:10px}.panel-footnote{font-size:10px;color:#829787;line-height:1.6;margin-top:22px}.underneath{margin-top:68px;padding-top:24px;border-top:1px solid #d8ded2}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:24px 0 75px}.steps>div>span{font-family:DM Mono,monospace;font-size:12px;color:#ce835f;display:block;margin-bottom:12px}.steps strong{font-size:15px;letter-spacing:-.025em}.steps p{font-size:13px;line-height:1.65;color:#79877a;max-width:260px}.steps code{color:#406d4d}footer{border-top:1px solid #d8ded2;padding:24px 0 32px;color:#8b9b8c;font-family:DM Mono,monospace;font-size:10px;letter-spacing:.06em}footer span{padding:0 8px}body[data-error]:after{content:attr(data-error);position:fixed;bottom:12px;left:12px;right:12px;padding:12px;background:#fff0e9;border:1px solid #da8060;border-radius:7px;color:#783c2b;text-align:center;font-size:13px}@media(max-width:850px){.page{padding:0 26px}.demo-grid{grid-template-columns:1fr}.panel{min-height:auto}.steps{gap:20px}}@media(max-width:520px){.page{padding:0 19px}.masthead{height:72px}main{padding-top:53px}h1{font-size:44px}.lede{font-size:15px;margin-bottom:35px}.panel{padding:23px}.panel-heading{margin-bottom:24px}.panel-description{margin-bottom:25px}.form-row{flex-direction:column}.form-row input{min-height:44px}.steps{grid-template-columns:1fr;gap:10px;margin-bottom:45px}.steps p{max-width:none}.source{font-size:11px}}.code-section{margin-top:68px}.code-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.code-intro h2{font-size:29px;letter-spacing:-.05em;margin:10px 0 0}.code-intro p{font-size:13px;line-height:1.6;color:#788879;max-width:360px;margin:0}.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.code-card{min-width:0;background:#233b2c;color:#e9f0df;border-radius:13px;overflow:hidden}.code-heading{display:flex;justify-content:space-between;gap:10px;padding:16px 19px;border-bottom:1px solid #ffffff20;font-family:DM Mono,monospace;font-size:10px;letter-spacing:.05em;color:#bad0b8}.code-heading span:last-child{color:#88a390}.code-card pre{overflow-x:auto;margin:0;padding:22px 20px 26px;font-family:DM Mono,monospace;font-size:11px;line-height:1.8;tab-size:2}.code-card code{font-family:inherit}.underneath{margin-top:70px}.code-section[data-syntax-theme]{color-scheme:dark;--syntax-background:#233b2c;--syntax-foreground:#e9f0df;--syntax-keyword:#e6a981;--syntax-tag:#e6a981;--syntax-string:#c9dfa3;--syntax-comment:#92ad98;--syntax-function:#b6ded0;--syntax-variable:#e9f0df;--syntax-property:#c5dcbf;--syntax-constant:#e8c889;--syntax-type:#b6ded0}@media(max-width:850px){.code-grid{grid-template-columns:1fr}.code-intro{align-items:start}}@media(max-width:520px){.code-intro{display:block}.code-intro p{margin-top:12px}.code-card pre{font-size:10px;padding:18px 15px}.code-heading{padding:14px 15px}.code-section{margin-top:55px}}.guide{margin-top:70px;padding:36px 0 0;border-top:1px solid #d8ded2}.guide-heading h2{font-size:32px;letter-spacing:-.05em;margin:12px 0 8px}.guide-heading p{font-size:14px;line-height:1.6;color:#778778;margin:0;max-width:560px}.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:29px}.guide-grid article{border:1px solid #dce0d4;background:#fffefa;border-radius:12px;padding:25px 26px;min-width:0}.guide-index{font:10px DM Mono,monospace;letter-spacing:.09em;color:#a47359}.guide-grid h3{font-size:18px;letter-spacing:-.04em;margin:14px 0 8px}.guide-grid p{font-size:13px;line-height:1.7;color:#697b6e;margin:0}.guide-grid code{font:11px DM Mono,monospace;color:#375f43;overflow-wrap:anywhere}.guide+.underneath{margin-top:70px}@media(max-width:620px){.guide-grid{grid-template-columns:1fr}.guide-grid article{padding:22px}.guide{margin-top:55px}}