@font-face{font-family:Bricolage;src:url('/assets/bricolage.413e7357809ddd12.ttf') format('truetype');font-weight:100 800;font-display:swap}
@font-face{font-family:Lora;src:url('/assets/lora.822a6621ccbe8d97.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{color-scheme:light;--paper:#fff8f5;--ink:#1f1b18;--muted:#695c51;--accent:#9f3c16;--line:#dec0b7;--sand:#f3efea}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Bricolage,system-ui,sans-serif;font-size:16px;line-height:24px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px}
button,input,textarea,summary{font:inherit}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
p{margin:0;color:var(--muted);text-wrap:pretty}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600;overflow-wrap:anywhere;hyphens:auto}
h1{font-size:48px;line-height:1;letter-spacing:-.03em}
h2{font-size:30px;line-height:36px;letter-spacing:-.02em}
h3{font-size:20px;line-height:28px}
.wrap{width:min(100% - 48px,1200px);margin-inline:auto}
.header{padding-block:24px}
.header nav,.nav-actions,.brand{display:flex;align-items:center;gap:24px}
.header nav{justify-content:space-between}
.brand{gap:8px;text-decoration:none;font-size:20px;line-height:28px;font-weight:600}
.brand img,.demo-app-name img{border-radius:8px}
.nav-cta{font-size:14px;line-height:20px;text-underline-offset:4px}
.languages{position:relative}
.languages summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:8px;font-size:14px;line-height:20px}
summary::-webkit-details-marker{display:none}
.language-list{position:absolute;inset-inline-end:0;top:100%;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px;width:320px;max-width:calc(100vw - 32px);max-height:65vh;overflow:auto}
.language-list a{display:block;padding:8px 12px;text-decoration:none}
.language-list a:hover,.language-list a[aria-current]{background:var(--sand);color:var(--accent)}
.skip{position:fixed;top:8px;inset-inline-start:16px;z-index:10;padding:8px 12px;background:var(--paper);transform:translateY(-200%);border:1px solid var(--accent)}
.skip:focus{transform:translateY(0)}
.hero{padding-block:64px 0}
.hero h1{max-width:800px}
.hero-line{display:block}
.intro{font-size:20px;line-height:28px;max-width:680px;margin:24px 0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);border:1px solid var(--accent);border-radius:8px;color:#fff;padding:8px 12px;font-weight:600;font-size:16px;line-height:24px;text-decoration:none;cursor:pointer;min-height:44px}
.button:hover{background:#7b2d10}
.button:active{transform:scale(.98)}
.hero-product{margin-top:48px}
.benefits{padding-block:80px}
.section-heading{max-width:680px;margin-bottom:32px}
.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px}
.benefit-grid h3{margin-bottom:8px}
.benefit-grid p{max-width:480px}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;padding-block:0 64px}
.questions{display:grid;gap:16px}
.questions summary{cursor:pointer;font-weight:500;padding-block:8px}
.questions summary:hover{color:var(--accent)}
.questions p{margin-block:8px}
.availability{padding-block:48px}
.availability>p{max-width:680px;margin-block:16px}
.quiet,.document-date{font-size:14px;line-height:20px}
.unavailable,.unavailable:hover{background:var(--sand);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.footer{padding-block:48px 32px}
.footer>.quiet{margin-top:12px}
.legal-language{margin-top:24px;font-size:14px;line-height:20px}
.legal-links{display:flex;gap:16px 24px;flex-wrap:wrap;margin-top:12px;font-size:14px;line-height:20px}
.legal-links a:hover{color:var(--accent)}
.independent{font-size:12px;line-height:16px;max-width:800px;margin-top:24px}
.missing{min-height:60vh;display:grid;align-content:center;gap:24px}
.missing .button{justify-self:start}
.legal-page{max-width:800px;padding-block:48px}
.legal-page h1{margin-bottom:24px}
.legal-page section{margin-block:32px}
.legal-page h2{font-size:24px;line-height:32px;margin-bottom:16px}
.legal-page p+p,.document-date{margin-bottom:16px}
.contact-form{display:grid;gap:24px;margin-block:32px}
.contact-field{display:grid;gap:8px}
.contact-field input,.contact-field textarea{width:100%;padding:12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px}
.contact-field textarea{resize:vertical}
.contact-form .button{justify-self:start}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.demo{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:left;color:var(--ink)}
.demo-body{display:grid;grid-template-columns:200px 260px minmax(0,1fr)}
.demo-sidebar{background:var(--sand);padding:24px 16px}
.demo-app-name{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:32px}
.demo-sidebar-heading{font-size:12px;line-height:16px;color:var(--muted);margin:24px 8px 8px}
.demo-sidebar-item{display:flex;align-items:center;gap:8px;padding:8px;font-size:14px;line-height:20px}
.demo-sidebar-item span{margin-left:auto;color:var(--muted)}
.demo-sidebar-item.selected{background:#e9dfd5;border-radius:8px}
.demo-library{background:var(--paper);padding:24px 16px;min-width:0}
.demo-list-heading{font-family:Lora,serif;font-size:24px;line-height:32px;font-weight:600;margin-bottom:16px}
.demo input{width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:var(--sand);color:var(--ink);margin-bottom:16px}
.demo button{color:var(--ink);cursor:pointer;min-height:44px}
.demo button:active{opacity:.8}
.demo button:disabled{cursor:default}
.demo-note{display:block;width:100%;text-align:left;padding:12px;border:0;background:transparent;border-radius:8px;margin-bottom:8px}
.demo-note strong{display:block;font-size:14px;line-height:20px;font-weight:600}
.demo-note span{display:block;font-size:12px;line-height:16px;color:var(--muted);margin-top:4px}
.demo-note.selected{background:#eadfd5;color:var(--accent)}
.demo-note:hover{background:var(--sand)}
.demo-editor{padding:16px 32px 32px;min-width:0;min-height:400px}
.demo-editor-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:32px}
.demo-editor-toolbar button{display:grid;place-items:center;min-width:44px;border:0;background:var(--sand);border-radius:50%}
.demo-editor-toolbar .demo-back{display:none;margin-right:auto}
.demo-favorite[aria-pressed=true]{color:var(--accent);background:#eadfd5}
.demo-editor h2{font-size:30px;line-height:36px;margin-bottom:24px}
.demo-editor>p{font-size:18px;line-height:28px;color:var(--ink)}
.demo-reference-row{margin-top:24px}
.demo .demo-reference{background:transparent;padding:0;border:0;border-radius:0;color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-size:18px;line-height:28px}
.demo-tags{margin-top:32px}
.demo-tag{padding:8px 12px;border:0;background:var(--sand);border-radius:8px;font-size:14px;line-height:20px}
.demo-tag[aria-pressed=true]{color:var(--accent);background:#eadfd5}
.demo-reference-panel{background:var(--sand);padding:16px;border-radius:8px;margin-top:8px}
.demo-reference-panel a{color:var(--accent);font-size:14px;line-height:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-playback{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:var(--paper)}
.demo-playback button{background:transparent;border:0;padding:8px;font-size:14px;line-height:20px;color:var(--muted)}
.demo-playback button:hover{color:var(--accent)}
.demo-empty{font-size:14px;line-height:20px}
.demo-pointer{position:absolute;top:0;left:0;z-index:3;pointer-events:none;width:32px;height:40px;color:var(--accent)}
[hidden]{display:none!important}
@media(max-width:1000px){.demo-sidebar{display:none}.demo-body{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:900px){.faq{grid-template-columns:1fr;gap:24px}.benefit-grid{gap:32px}.demo-editor{padding:16px 24px 24px}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.header{padding-block:16px}.header nav,.nav-actions{gap:8px}.brand{font-size:18px;line-height:28px}.nav-cta{display:none}.languages summary{padding:8px}.languages summary span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h1{font-size:36px;line-height:40px}h2{font-size:30px;line-height:36px}.hero{padding-top:32px}.intro{font-size:18px;line-height:28px}.hero-product{margin-top:32px}.benefits{padding-block:48px}.benefit-grid{grid-template-columns:1fr;gap:24px}.faq{padding-block:0 32px}.availability{padding-block:32px}.footer{padding-block:32px 24px}.demo-body{grid-template-columns:1fr}.demo-library{padding:16px;display:none;min-height:360px}.demo-show-library .demo-library{display:block}.demo-show-library .demo-editor{display:none}.demo-list-heading{font-size:20px;line-height:28px}.demo-note{padding:8px 12px}.demo-editor{padding:16px;min-height:360px}.demo-editor-toolbar{margin-bottom:24px}.demo-editor-toolbar .demo-back{display:grid}.demo-editor h2{font-size:24px;line-height:32px}.legal-page{padding-block:32px}}