*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-base);color:var(--c-ink);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.demo-banner{margin:0;padding:.5rem 1rem;background:var(--c-brand);color:var(--c-on-brand);font-size:.8125rem;text-align:center}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--c-line)}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--c-brand);font-weight:700;font-size:1.125rem;text-decoration:none}
.mark{width:1.75rem;height:1.75rem;fill:var(--c-brand)}
.top nav{display:flex;align-items:center;gap:1.25rem}
.top nav a{color:var(--c-ink);text-decoration:none}
.top nav a:hover{color:var(--c-brand)}
a{color:var(--c-brand)}
.btn{display:inline-block;padding:.55rem 1.1rem;border:0;border-radius:2rem;background:var(--c-accent);color:var(--c-on-accent);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.top nav a.btn{color:var(--c-on-accent)}
.btn.big{padding:.8rem 1.6rem;font-size:1.0625rem}
.btn:disabled{opacity:.6;cursor:wait}
.link{margin-left:.75rem}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:3px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;max-width:72rem;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) clamp(1rem,4vw,3rem)}
.hero img{width:100%;height:auto;border-radius:1.5rem;aspect-ratio:4/3;object-fit:cover}
h1{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;color:var(--c-brand)}
h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3.5vw,2rem);color:var(--c-brand)}
h3{margin:0 0 .25rem;font-size:1.125rem}
.lead{color:var(--c-muted);max-width:40rem}
.block{max-width:72rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,3rem)}
.soft{background:var(--c-soft);max-width:none}
.soft>*{max-width:66rem;margin-left:auto;margin-right:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;margin:1.25rem 0 0;padding:0;list-style:none}
.card{padding:1.25rem;border:1px solid var(--c-line);border-radius:1rem;background:var(--c-base)}
.card p{margin:.25rem 0;color:var(--c-muted)}
.card .meta{margin-top:.75rem;color:var(--c-brand);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.25rem;margin:1rem auto 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:1rem 1rem 1rem 3.25rem;position:relative;background:var(--c-base);border-radius:1rem}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:1rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--c-brand);color:var(--c-on-brand);text-align:center;font-weight:700}
.steps strong,.steps span{display:block}
.steps span{color:var(--c-muted)}
details{border-bottom:1px solid var(--c-line);padding:.75rem 0}
summary{cursor:pointer;font-weight:600}
details p{margin:.5rem 0 0;color:var(--c-muted)}
.foot{padding:1.5rem clamp(1rem,4vw,3rem);border-top:1px solid var(--c-line);color:var(--c-muted);font-size:.875rem}
.foot p{margin:.25rem 0}
.narrow{max-width:44rem;margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem) 1rem 3rem}
fieldset{margin:1.25rem 0;padding:1rem;border:1px solid var(--c-line);border-radius:1rem}
legend{padding:0 .5rem;font-weight:700;color:var(--c-brand)}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.choice{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem;border:1px solid var(--c-line);border-radius:.75rem;cursor:pointer}
.choice:has(input:checked){border-color:var(--c-brand);background:var(--c-soft)}
.choice small{display:block;color:var(--c-muted)}
.field{display:block;margin:.6rem 0 0;font-weight:600}
.field input,.field textarea{display:block;width:100%;margin-top:.25rem;padding:.6rem .7rem;border:1px solid var(--c-muted);border-radius:.6rem;background:var(--c-base);color:var(--c-ink);font:inherit}
.field textarea{min-height:5rem}
[aria-invalid=true]{border-color:var(--c-brand);outline:2px solid var(--c-accent)}
.check{display:flex;gap:.5rem;align-items:flex-start;margin-top:.75rem}
.err{display:block;color:var(--c-brand);font-weight:600;font-size:.875rem}
.slots{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.slot{padding:.5rem .9rem;border:1px solid var(--c-brand);border-radius:2rem;background:var(--c-base);color:var(--c-brand);font:inherit;font-weight:600;cursor:pointer}
.slot[aria-pressed=true]{background:var(--c-brand);color:var(--c-on-brand)}
.muted{color:var(--c-muted)}
.notice{padding:.75rem 1rem;border-radius:.75rem;background:var(--c-soft);border:1px solid var(--c-line)}
.ok{background:var(--c-soft)}
@media (max-width:48rem){.hero{grid-template-columns:1fr}.top nav a:not(.btn){display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}