.demo-modal[hidden]{display:none}body.has-demo-modal-open{overflow:hidden}.demo-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(12px,2vw,24px)}.demo-modal-backdrop{position:absolute;inset:0;background:color-mix(in oklch,var(--sup-scrim) 62%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.demo-modal-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,.64fr) minmax(440px,1fr);gap:clamp(20px,3vw,36px);width:min(100%,1040px);max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(22px,3vw,34px);border:1px solid color-mix(in oklch,var(--c-brand-300) 32%,var(--line));border-radius:var(--sup-radius-xl);background:radial-gradient(circle at 12% 12%,color-mix(in oklch,var(--c-accent-100) 42%,transparent),transparent 34%),var(--c-neutral-0);box-shadow:0 2px 4px color-mix(in oklch,var(--sup-scrim) 12%,transparent),0 34px 100px -46px color-mix(in oklch,var(--c-brand-900) 42%,transparent)}.demo-modal-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid color-mix(in oklch,var(--c-brand-300) 24%,var(--line));border-radius:999px;color:var(--ink);background:color-mix(in oklch,var(--c-neutral-0) 84%,transparent);cursor:pointer}.demo-modal-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:2}.demo-modal-copy{align-self:center;padding-right:clamp(0px,2vw,18px)}.demo-modal-copy h2{margin:0;color:var(--ink);font-family:var(--serif);font-size:clamp(31px,3.4vw,50px);font-weight:560;line-height:.96;text-wrap:balance}.demo-modal-copy p{margin:14px 0 0;color:var(--text);font-size:15px;line-height:1.56;text-wrap:pretty}.demo-form{display:grid;gap:10px}.demo-form input[name=website]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.demo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.demo-form label{display:grid;gap:5px;color:var(--ink);font-size:12px;font-weight:780}.demo-form input,.demo-form select,.demo-form textarea{width:100%;border:1px solid color-mix(in oklch,var(--c-brand-300) 28%,var(--line));border-radius:var(--sup-radius-md);color:var(--ink);background:color-mix(in oklch,var(--c-neutral-0) 88%,var(--c-brand-50));font:inherit;font-size:14px;font-weight:500;line-height:1.3}.demo-form input,.demo-form select{min-height:40px;padding:9px 12px}.demo-form select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--c-brand-700) 50%),linear-gradient(135deg,var(--c-brand-700) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-repeat:no-repeat;background-size:6px 6px,6px 6px}.demo-form .demo-consent{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;color:var(--text);font-size:12px;font-weight:650;line-height:1.35}.demo-consent input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--c-brand-600)}.demo-form textarea{min-height:74px;padding:10px 12px;resize:vertical}.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{border-color:var(--c-brand-500);outline:2px solid color-mix(in oklch,var(--c-brand-400) 34%,transparent);outline-offset:2px}.demo-form-note{margin:0;color:var(--muted);font-size:11px;line-height:1.42}.demo-form-note a{color:var(--c-brand-700);text-decoration:none}.demo-form-submit{width:fit-content;min-width:170px;white-space:nowrap}.demo-form-submit[disabled]{cursor:progress;opacity:.72}.demo-form-status{display:none;margin:0;padding:14px 15px;border:1px solid color-mix(in oklch,var(--c-brand-300) 36%,var(--line));border-radius:var(--sup-radius-md);background:color-mix(in oklch,var(--c-brand-50) 52%,var(--c-neutral-0));box-shadow:inset 0 1px 0 color-mix(in oklch,var(--c-neutral-0) 78%,transparent),0 14px 34px -30px color-mix(in oklch,var(--c-brand-900) 35%,transparent);color:var(--ink);font-size:14px;font-weight:720;line-height:1.4}.demo-form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}.demo-form-status:not(:empty){display:block}.demo-form-status:focus{outline:2px solid color-mix(in oklch,var(--c-brand-400) 34%,transparent);outline-offset:3px}.demo-form-status.is-success{border-color:color-mix(in oklch,var(--c-success-700,var(--c-brand-700)) 28%,var(--line));color:color-mix(in oklch,var(--c-success-700,var(--c-brand-700)) 82%,var(--ink));background:linear-gradient(135deg,color-mix(in oklch,var(--c-success-700,var(--c-brand-600)) 9%,var(--c-neutral-0)),color-mix(in oklch,var(--c-brand-50) 56%,var(--c-neutral-0)))}.demo-form-status.is-error{border-color:color-mix(in oklch,var(--c-danger-700,#b42318) 30%,var(--line));color:var(--c-danger-700,#b42318);background:linear-gradient(135deg,color-mix(in oklch,var(--c-danger-700,#b42318) 8%,var(--c-neutral-0)),var(--c-neutral-0))}@media (max-width:760px){.demo-modal{align-items:start;padding:12px}.demo-modal-panel{grid-template-columns:1fr;gap:20px;padding:48px 20px 22px}.demo-modal-copy{align-self:start}.demo-form-grid{grid-template-columns:1fr}.demo-form-actions{align-items:stretch;flex-direction:column-reverse;gap:10px}.demo-form-submit{width:100%}}