.demo-lab{background:#12263a;color:white;padding:46px clamp(18px,5vw,76px) 64px;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.demo-lab-head{display:flex;align-items:center;justify-content:space-between;gap:25px}.demo-lab-head p{font-size:10px;letter-spacing:.19em;color:#96c2c2;font-weight:800}.demo-lab-head h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;margin:10px 0}.demo-lab-head span{color:#becfd5;font-size:13px}.demo-lab-head a{font-size:13px;padding:13px 17px;border:1px solid #738d9a;border-radius:6px;white-space:nowrap}.demo-lab-options{display:flex;gap:9px;flex-wrap:wrap;margin:31px 0 18px}.demo-lab-options button{padding:12px 18px;border:1px solid #668091;background:transparent;color:#d5e8ee;border-radius:5px;font-size:14px;cursor:pointer}.demo-lab-options button[aria-pressed=true]{background:#e4f0ed;color:#0d2c37;border-color:#e4f0ed}.demo-lab-result{padding:26px;min-height:133px;border:1px solid #507080;background:#1a3648;border-radius:8px}.demo-lab-result strong{font-size:18px}.demo-lab-result p{color:#d3e2e6;font-size:15px;margin:9px 0}.demo-lab-result span{color:#9dbabd;font-size:11px;letter-spacing:.07em}@media(max-width:690px){.demo-lab-head{display:block}.demo-lab-head a{display:inline-block;margin-top:18px}}

/* Domain-specific sandbox controls; isolated from the sample site design. */
.demo-sandbox{margin-top:24px;background:#183143;border:1px solid #506d7b;border-radius:9px;padding:clamp(19px,3vw,31px)}
.demo-sandbox-intro h3{font-size:22px;letter-spacing:-.03em;margin:0 0 9px}.demo-sandbox-intro p{color:#b9cdd5;font-size:14px;margin:0 0 23px;max-width:720px}
.demo-sandbox label{display:block;color:#e7f1f4;font-size:13px;font-weight:700;margin-bottom:8px}
.demo-sandbox-controls{display:flex;gap:10px;align-items:stretch}.demo-sandbox input{min-width:0;flex:1;border:1px solid #8ea2b0;border-radius:6px;padding:13px 14px;background:#fff;color:#143247;font:inherit;font-size:14px;min-height:49px}
.demo-sandbox button{font:inherit;font-size:13px;font-weight:750;border-radius:6px;min-height:47px;padding:11px 17px;cursor:pointer;background:#def0eb;color:#123748;border:1px solid #def0eb}
.demo-sandbox button:hover{background:#fff}.demo-sandbox button:focus-visible,.demo-sandbox input:focus-visible{outline:3px solid #92d7d4;outline-offset:3px}
.demo-sandbox button:disabled{opacity:.45;cursor:not-allowed}.demo-sandbox-status{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px 16px;margin-top:20px}.demo-sandbox-chip{display:inline-flex;width:max-content;border-radius:4px;background:#375f65;color:#e2faf2;padding:6px 11px;font-size:11px;font-weight:800}.demo-sandbox-status strong{min-width:0;overflow-wrap:anywhere}.demo-sandbox-status p{grid-column:1/-1;color:#c6d5db;font-size:13px;margin:0}
.demo-sandbox-timeline{display:grid;gap:9px;list-style:none;padding:0;margin:20px 0}.demo-sandbox-timeline li{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:#214254;border:1px solid #3e6370;border-radius:5px;color:#cbdce2;font-size:12px}.demo-sandbox-timeline strong{color:#fff;font-size:12px;min-width:105px}.demo-sandbox-actions{display:flex;gap:11px;flex-wrap:wrap}.demo-sandbox .demo-sandbox-reset{background:transparent;border-color:#8398a3;color:#d9e8ee}
@media(max-width:620px){.demo-sandbox-controls{flex-direction:column}.demo-sandbox-controls button{width:100%}.demo-sandbox-timeline li{display:block}.demo-sandbox-timeline strong{display:block;margin-bottom:4px}.demo-sandbox-status{grid-template-columns:1fr}.demo-sandbox-actions button{flex:1 1 100%}}