#serra-demo {padding:20px 8px;color-scheme:light dark;}
#serra-demo .cs-phone {--cs-bg:light-dark(#ffffff,#121f31);--cs-fg:light-dark(#17324f,#ecf3ff);--cs-soft:light-dark(#edf4fb,#1c3049);--cs-muted:light-dark(#536b83,#b1c1d5);--cs-line:light-dark(#d8e3ef,#344b65);--cs-active:light-dark(#005da8,#86c8ff);--cs-on:light-dark(#ffffff,#102942);--cs-orange:light-dark(#f58220,#ffa34b);--cs-orange-ink:light-dark(#192e46,#152b43);--cs-header:light-dark(#005da8,#063a68);--cs-header-ink:light-dark(#ffffff,#f1f7ff);--cs-input:light-dark(#f8fafd,#17283c);max-width:450px;margin:auto;background:var(--cs-bg);color:var(--cs-fg);border:1px solid var(--cs-line);border-radius:24px;overflow:hidden;font:400 15px/1.5 system-ui,sans-serif;box-shadow:0 12px 36px light-dark(#003b7012,#00000026);}
#serra-demo * {box-sizing:border-box;}
#serra-demo .cs-header {padding:25px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:var(--cs-header);color:var(--cs-header-ink);border-bottom:4px solid var(--cs-orange);}
#serra-demo .cs-identity {display:flex;align-items:center;gap:17px;min-width:0;}
#serra-demo .cs-brand {font-size:38px;font-weight:800;letter-spacing:-2px;line-height:1;white-space:nowrap;}
#serra-demo .cs-brand>span {color:var(--cs-orange);}
#serra-demo .cs-product {font-size:16px;font-weight:600;line-height:1.4;border-left:1px solid color-mix(in srgb,var(--cs-header-ink) 30%,transparent);padding-left:16px;}
#serra-demo .cs-product>span {display:block;font-size:12px;font-weight:400;opacity:.85;margin-top:3px;}
#serra-demo .cs-demo {font-size:12px;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--cs-header-ink) 16%,var(--cs-header));color:var(--cs-header-ink);}
#serra-demo .cs-notice {padding:10px 20px;background:var(--cs-soft);color:var(--cs-muted);font-size:12px;text-align:center;}
#serra-demo .cs-nav {display:flex;margin:20px 20px 0;padding:4px;gap:4px;background:var(--cs-soft);border-radius:12px;}
#serra-demo button {font:inherit;min-height:46px;border:1px solid var(--cs-line);border-radius:11px;padding:10px 14px;background:var(--cs-bg);color:var(--cs-fg);}
#serra-demo .cs-nav button {flex:1;font-size:13px;font-weight:500;border:0;background:transparent;}
#serra-demo .cs-nav button[aria-pressed="true"] {background:var(--cs-bg);color:var(--cs-active);box-shadow:0 2px 5px light-dark(#17324f12,#00000026);}
#serra-demo .cs-main {background:var(--cs-orange);color:var(--cs-orange-ink);border-color:var(--cs-orange);font-weight:600;box-shadow:0 4px 12px color-mix(in srgb,var(--cs-orange) 17%,transparent);}

#serra-demo button:focus-visible,#serra-demo input:focus-visible,#serra-demo textarea:focus-visible,#serra-demo select:focus-visible {outline:3px solid var(--cs-active);outline-offset:3px;}
#serra-demo main {padding:24px 22px 26px;}
#serra-demo h2 {font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.5px;margin:13px 0 8px;}
#serra-demo h3 {font-size:15px;line-height:1.4;font-weight:600;margin:25px 0 12px;color:var(--cs-active);display:flex;align-items:center;gap:8px;}
#serra-demo h3::before {content:'';width:5px;height:15px;border-radius:2px;background:var(--cs-orange);flex:none;}
#serra-demo p {margin:0 0 20px;color:var(--cs-muted);font-size:14px;}
#serra-demo .cs-step {font-size:12px;font-weight:500;letter-spacing:.35px;text-transform:uppercase;color:var(--cs-active);display:flex;align-items:center;justify-content:space-between;gap:15px;}
#serra-demo .cs-dots {display:flex;gap:5px;}
#serra-demo .cs-dots span {width:23px;height:5px;border-radius:4px;background:var(--cs-line);}
#serra-demo .cs-dots span.cs-done {background:var(--cs-orange);}
#serra-demo label.cs-field {display:block;margin:18px 0;font-size:13px;font-weight:500;}
#serra-demo input:not([type="radio"]),#serra-demo textarea,#serra-demo select {display:block;margin-top:8px;width:100%;min-width:0;min-height:50px;border:1px solid var(--cs-line);border-radius:11px;padding:12px 13px;font:400 16px/1.4 system-ui,sans-serif;background:var(--cs-input);color:var(--cs-fg);}
#serra-demo input::placeholder,#serra-demo textarea::placeholder {color:var(--cs-muted);}
#serra-demo textarea {min-height:84px;resize:vertical;}
#serra-demo .cs-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#serra-demo .cs-actions {display:flex;gap:10px;margin-top:28px;padding-top:20px;border-top:1px solid var(--cs-line);}
#serra-demo .cs-actions .cs-main {flex:1;}
#serra-demo fieldset {border:0;padding:0;margin:20px 0;min-width:0;}
#serra-demo legend {font-size:14px;font-weight:500;margin-bottom:10px;}
#serra-demo .cs-choices {display:flex;gap:10px;}
#serra-demo .cs-choice {flex:1;display:flex;align-items:center;gap:9px;padding:14px;border:1px solid var(--cs-line);border-radius:11px;min-height:50px;background:var(--cs-input);}
#serra-demo .cs-choice:has(input:checked) {background:var(--cs-soft);border-color:var(--cs-active);}
#serra-demo input[type="radio"] {accent-color:var(--cs-active);width:18px;height:18px;margin:0;}
#serra-demo .cs-sub {padding-left:14px;border-left:3px solid var(--cs-orange);}
#serra-demo [hidden] {display:none!important;}
#serra-demo .cs-person {padding:14px 16px;background:var(--cs-soft);border-left:3px solid var(--cs-orange);border-radius:4px 11px 11px 4px;font-size:14px;margin-top:18px;}
#serra-demo dl {margin:0;}
#serra-demo .cs-row {display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--cs-line);padding:10px 0;font-size:14px;}
#serra-demo dt {color:var(--cs-muted);}
#serra-demo dd {margin:0;text-align:right;overflow-wrap:anywhere;max-width:60%;}
#serra-demo .cs-record {margin:16px 0;padding:17px;background:var(--cs-soft);border-top:3px solid var(--cs-orange);border-radius:12px;}
#serra-demo .cs-record strong {font-weight:600;display:block;}
#serra-demo .cs-record small {display:block;margin-top:5px;font-size:12px;color:var(--cs-muted);}
#serra-demo .cs-record button {margin-top:12px;}
#serra-demo .cs-success {width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--cs-soft);color:var(--cs-active);font-size:28px;margin-bottom:18px;}
@media(max-width:370px){#serra-demo main,#serra-demo .cs-header {padding-left:14px;padding-right:14px;}#serra-demo .cs-grid{grid-template-columns:1fr;gap:0;}#serra-demo .cs-nav{margin-left:14px;margin-right:14px;}#serra-demo .cs-identity{gap:10px;}#serra-demo .cs-brand{font-size:31px;}#serra-demo .cs-product{padding-left:10px;font-size:14px;}#serra-demo .cs-demo{font-size:12px;padding:4px 6px;}}