@layer pages{@scope([data-page=demo]){.demo{padding-top:var(--hero-pad-top);padding-bottom:var(--s-120)}.demo__grid{gap:var(--s-80);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;display:grid}.demo__aside{top:calc(var(--nav-h) + var(--s-32));position:sticky}.demo__aside h1{max-width:14ch;margin-bottom:var(--s-24)}.demo__aside .lede{max-width:40ch}.demo__shown{max-width:460px;margin-top:var(--s-40)}.demo__art img{margin-top:var(--s-40);border-radius:var(--r-12);max-width:420px}.demo__reply{margin-top:var(--s-32);font-size:var(--body-xs);color:var(--color-text-muted)}.form{padding:var(--s-40);border:var(--hairline);border-radius:var(--r-12);background:var(--white)}.form__title{font-size:var(--body-l);line-height:var(--lh-body-l)}.form__hint{font-size:var(--body-xs);color:var(--color-text-muted);margin-top:6px}.form__summary{border-radius:var(--r-6);color:var(--color-error);background:#fdeceb;border:1px solid #f1c7c0;margin-top:20px;padding:10px 14px;font-size:13px;font-weight:500}.form__grid{margin-top:var(--s-24);grid-template-columns:1fr 1fr;gap:20px;display:grid}.field{flex-direction:column;gap:6px;display:flex}.field--wide{grid-column:1/-1}.field__label{font-size:13px;font-weight:500}.field__control{border:1px solid var(--color-line);background:var(--white);width:100%;height:48px;color:var(--color-text);border-radius:8px;padding:0 12px;font-size:15px;transition:border-color .3s}.field__control::placeholder{color:#a99e95}.field__control:focus{border-color:var(--color-primary);outline:none}.field__control[aria-invalid=true]{border-color:var(--color-error)}.field__select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236f6055' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:16px;padding-right:32px}.field__textarea{height:auto;font-family:var(--font-mono);resize:vertical;padding:12px;font-size:13px;line-height:1.6}.field__error{color:var(--color-error);font-size:12px}.field__hint{color:var(--color-text-muted);font-size:12px}.form__consent{margin-top:var(--s-24)}.consent{color:var(--color-text-muted);align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;display:flex}.consent input{width:16px;height:16px;accent-color:var(--color-primary);flex:none;margin:3px 0 0}.form__consent .field__error{margin-top:6px;padding-left:28px}.form__submit{margin-top:var(--s-32)}.form__footnote{margin-top:var(--s-16);text-align:center;font-size:var(--body-xxs);color:var(--color-text-muted)}.form__body{margin-top:var(--s-12);color:var(--color-text-muted)}.form__body strong{color:var(--color-text);font-weight:500}.form__steps{margin-top:var(--s-32)}.form__note{margin-top:var(--s-24);font-size:var(--body-xs);color:var(--color-text-muted)}.form--done .field{margin-top:var(--s-16)}.form__explore{margin-top:var(--s-24);display:inline-block}@media (width<=991px){.demo__grid{gap:var(--s-48);grid-template-columns:1fr}.demo__aside{position:static}}@media (width<=767px){.form{padding:var(--s-24)}.form__grid{grid-template-columns:1fr}.field__control{font-size:16px}}}}
