html.js [data-load-reveal],html.js [data-load-blur]{opacity:0;visibility:hidden}.site-header{background:var(--bg);border-bottom:1px solid var(--border)}.demo-header-mail{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--fg-dim);transition:color .25s}.demo-header-mail:hover{color:var(--fg)}.demo-page{position:relative;z-index:10;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;min-height:100vh;min-height:100svh;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding:8.5rem var(--gutter) var(--section-y)}.demo-aside{position:relative;display:flex;flex-direction:column}.demo-aside__inner{position:sticky;top:8.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem}.demo-aside__title{font-size:var(--fs-h2);font-weight:500;line-height:1.06;letter-spacing:-.02em;max-width:9em}.demo-aside__text{color:var(--fg-dim);max-width:var(--measure);font-size:var(--fs-lg);line-height:1.5}.demo-aside__meta{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:var(--fs-sm);color:var(--fg-dim);margin-top:.4rem}.demo-aside__meta li{display:flex;align-items:center;gap:.55rem}.demo-aside__mail{font-family:var(--mono);font-size:.84rem;color:var(--accent-light);transition:color .25s}.demo-aside__mail:hover{color:var(--fg)}.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #8e66ffcc;flex:none}.demo-aside__binary{position:absolute;left:0;right:0;bottom:0;height:min(46vh,60%);width:100%;pointer-events:none}.demo-sheet{position:relative;max-width:44rem}.demo-form{display:flex;flex-direction:column;gap:3rem}.demo-form[hidden],.demo-success[hidden]{display:none}.demo-ch{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:1.7rem;border:none}.demo-ch__head{grid-column:1 / -1;display:flex;align-items:baseline;gap:.9rem}.demo-ch__num{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--accent-light)}.demo-ch__label{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.01em}.demo-ch__rule{flex:1;height:1px;background:var(--border);align-self:center}.demo-field{grid-column:1 / -1;display:flex;flex-direction:column;gap:.5rem;border:none;min-width:0}.demo-field--half{grid-column:auto / span 1}.demo-field>label,.demo-field--chips>legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--fg-mid);padding:0}.demo-field>label em,.demo-field--chips>legend em{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--fg-mid);opacity:.8}.demo-field__control{position:relative}.demo-field input[type=text],.demo-field input[type=email],.demo-field input[type=url],.demo-field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(244,244,245,.16);padding:.55em 0;font-family:var(--font);font-size:1rem;color:var(--fg);border-radius:0}.demo-field textarea{resize:vertical;min-height:6.5em;line-height:1.5}.demo-field input::placeholder,.demo-field textarea::placeholder{color:var(--fg-mid)}.demo-field input:focus,.demo-field textarea:focus{outline:none}.demo-field__line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1);pointer-events:none}.demo-field input:focus~.demo-field__line,.demo-field textarea:focus~.demo-field__line{transform:scaleX(1)}.demo-form.was-validated input:invalid,.demo-form.was-validated textarea:invalid{border-bottom-color:#ff8a808c}.demo-field--chips{gap:1rem}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.chip span{display:inline-block;border:1px solid rgba(244,244,245,.2);border-radius:999px;padding:.45em 1em;font-size:.88rem;color:var(--fg-dim);transition:color .25s,border-color .25s,background-color .25s,transform .3s var(--card-hover-ease);will-change:transform}.chip:hover span{border-color:#f4f4f573;color:var(--fg)}.chip input:checked+span{border-color:var(--accent);background:#8e66ff24;color:var(--accent-light)}.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.chip.is-pulsing span{animation:chip-pulse .35s cubic-bezier(.22,1,.36,1)}@keyframes chip-pulse{0%{transform:scale(.96)}60%{transform:scale(1.03)}to{transform:scale(1)}}.demo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.demo-form__foot{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}.demo-submit{border:none;min-width:13.5em;justify-content:center}.demo-submit:disabled{cursor:default;transform:none}.demo-submit.is-sending .demo-submit__label{font-family:var(--mono);font-size:.86em;letter-spacing:.06em}.demo-form__note{font-size:.8rem;color:var(--fg-mid);max-width:18rem}.demo-form__note a{color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px;transition:color .25s}.demo-form__note a:hover{color:var(--fg)}.demo-form__error{border:1px solid rgba(255,138,128,.35);background:#ff8a800f;border-radius:12px;padding:.9rem 1.1rem;font-size:.9rem;color:var(--fg-dim)}.demo-form__error a{font-family:var(--mono);font-size:.84em;color:var(--accent-light)}.demo-success{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding-top:var(--section-y)}.demo-success__stamp{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--fg-dim)}.demo-success__title{font-size:var(--fs-h2);font-weight:500;letter-spacing:-.02em;line-height:1.06}.demo-success__text{color:var(--fg-dim);max-width:28rem;margin-bottom:.6rem}.demo-success__text strong{color:var(--fg);font-weight:500}.demo-footer{position:relative;z-index:10;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.3rem var(--pad-x);border-top:1px solid rgba(244,244,245,.12);font-size:.8rem;color:var(--fg-mid)}.demo-footer nav{display:flex;gap:1.6rem}.demo-footer a{color:var(--fg-mid);transition:color .25s}.demo-footer a:hover{color:var(--fg)}@media (max-width: 900px){.demo-page{grid-template-columns:1fr;gap:3rem;padding-top:6rem}.demo-aside__inner{position:static}.demo-aside__binary{display:none}.demo-ch{grid-template-columns:1fr}.demo-field--half{grid-column:1 / -1}}@media (prefers-reduced-motion: reduce){.demo-field__line,.chip span{transition:none}.chip.is-pulsing span{animation:none}}