.demo-page{--voxa-black:#0a0a0a;--voxa-surface:#111;--voxa-border:#2a2a2a;--voxa-gold:#c9a96e;--voxa-label:#6b6560;--voxa-text:#ffffffe6;--voxa-muted:#ffffff94;background:var(--voxa-black);min-height:100vh;color:var(--voxa-text);padding:64px 20px;font-family:DM Sans,sans-serif;font-weight:300}.demo-shell{width:min(960px,100%);margin:0 auto}.demo-header{text-align:center;flex-direction:column;align-items:center;gap:14px;margin-bottom:64px;display:flex}.demo-logo{object-fit:cover;border-radius:50%;width:110px;height:110px;margin-bottom:20px;display:block}.demo-eyebrow{color:var(--voxa-gold);text-transform:uppercase;letter-spacing:.28em;margin:0 0 12px;font-size:11px}.demo-page h1,.demo-page h2,.demo-page h3{color:#fff;margin:0;font-family:Cormorant Garamond,serif;font-weight:300}.demo-page h1{letter-spacing:-.03em;font-size:clamp(40px,6vw,72px);line-height:1}.demo-page h2{text-align:center;margin-bottom:36px;font-size:clamp(28px,4vw,44px)}.demo-intro{max-width:620px;color:var(--voxa-muted);margin:18px auto 0;font-size:15px;line-height:1.7}.progress-area{margin-bottom:56px}.progress-track{background:#1e1e1e;width:100%;height:1px;margin-bottom:28px;overflow:hidden}.progress-fill{background:var(--voxa-gold);height:1px;transition:width .5s}.stepper{justify-content:center;align-items:center;gap:0;display:flex}.step{flex:0 auto;align-items:center;display:flex}.step-content{border-bottom:1px solid #0000;align-items:baseline;gap:12px;padding-bottom:10px;transition:color .5s,border-color .5s;display:flex}.step-num{letter-spacing:.04em;font-family:Cormorant Garamond,serif;font-size:18px;font-weight:300;line-height:1;transition:color .5s}.step-label{text-transform:uppercase;letter-spacing:.2em;font-family:DM Sans,sans-serif;font-size:10px;line-height:1;transition:color .5s}.step-connector{background:#2a2a2a;width:clamp(40px,8vw,96px);height:1px;margin:0 18px;transition:background .5s;display:block}.step.is-pending .step-num,.step.is-pending .step-label{color:#2a2a2a}.step.is-done .step-num,.step.is-done .step-label{color:#3a3530}.step.is-active .step-num,.step.is-active .step-label{color:var(--voxa-gold)}.step.is-active .step-content{border-bottom-color:var(--voxa-gold)}.step.is-done+.step .step-connector,.step.is-active+.step .step-connector{background:#3a3530}.demo-form{width:100%}.form-step{min-height:420px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.field{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.field>span,.slider-label span{color:var(--voxa-label);text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:400}.demo-page input,.demo-page select,.demo-page textarea{background:var(--voxa-surface);border:.5px solid var(--voxa-border);width:100%;color:var(--voxa-text);border-radius:2px;outline:none;padding:16px 18px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:300;transition:border-color .18s}.demo-page input::placeholder,.demo-page textarea::placeholder{color:#ffffff47}.demo-page input:focus,.demo-page select:focus,.demo-page textarea:focus{border-color:var(--voxa-gold)}.demo-page select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--voxa-gold) 50%),linear-gradient(135deg,var(--voxa-gold) 50%,transparent 50%);background-position:calc(100% - 22px),calc(100% - 16px);background-repeat:no-repeat;background-size:6px 6px,6px 6px;background-color:var(--voxa-surface)}.demo-page option{background:var(--voxa-black);color:#fff}.demo-page textarea{resize:vertical;line-height:1.7}.chips{flex-wrap:wrap;gap:10px;display:flex}.chip{background:var(--voxa-surface);border:.5px solid var(--voxa-border);color:var(--voxa-muted);letter-spacing:.06em;cursor:pointer;border-radius:2px;padding:12px 18px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:300;transition:border-color .18s,color .18s}.chip:hover{color:var(--voxa-gold)}.chip.is-selected{color:var(--voxa-gold);border-color:var(--voxa-gold)}.slider-label{justify-content:space-between;align-items:center;gap:16px;display:flex}.slider-label strong{color:#fff;font-size:15px;font-weight:300}.range{accent-color:var(--voxa-gold);background:0 0;border:none;padding:0}.form-actions{border-top:.5px solid var(--voxa-border);justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding-top:32px;display:flex}.demo-page .button{letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border:.5px solid var(--voxa-gold);border-radius:0;padding:16px 32px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;transition:opacity .18s,background .18s,color .18s}.demo-page .button.primary{background:var(--voxa-gold);color:var(--voxa-black)}.demo-page .button.secondary{color:var(--voxa-gold);background:0 0}.demo-page .button:hover{opacity:.86}.demo-page .button:disabled{opacity:.35;cursor:not-allowed}@media(max-width:760px){.demo-page{padding:32px 16px}.demo-logo{width:84px;height:84px}.field-grid{grid-template-columns:1fr;gap:0}.progress-steps{gap:12px;font-size:10px}.form-actions{flex-direction:column-reverse;align-items:stretch}.demo-page .button{width:100%}}
