.interactive-demo{scroll-margin-top:85px;margin:70px 0 60px}.demo-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:28px}.demo-heading :is(h1,h2){font-size:clamp(32px,4vw,46px);font-weight:500;letter-spacing:-1.6px;line-height:1.12;margin:0}.demo-heading>p{font-size:14px;line-height:1.8;color:var(--muted);max-width:350px;margin:0}.demo-heading .cat{font-size:10px;letter-spacing:1.5px;margin-bottom:15px}.demo-workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;background:#101d24;color:#f5f1e6;border-radius:16px;overflow:hidden}.demo-scene{position:relative;min-height:520px;overflow:hidden;background:#17272e}.demo-scene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.demo-scene iframe[hidden]{display:none}.demo-preview{position:absolute;inset:0;background:#17272e}.demo-preview[hidden]{display:none}.demo-preview svg{width:100%;height:100%;opacity:.65}.demo-launch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;background:#09171b33;z-index:2}.demo-launch button{font:inherit;font-size:14px;background:#f4ce8c;color:#192624;border:0;border-radius:999px;display:flex;gap:35px;padding:14px 24px;cursor:pointer;font-weight:600}.demo-launch button[hidden]{display:none}.demo-launch button:disabled{opacity:.7;cursor:wait}.demo-launch p{font-size:11px;text-align:center;line-height:1.7;color:#d7dfd7;max-width:290px;margin:20px 0 0}.demo-scene-caption{position:absolute;bottom:18px;left:22px;right:22px;display:flex;justify-content:space-between;gap:15px;pointer-events:none;color:#d0dacf;font-size:8px;letter-spacing:1.3px;text-shadow:0 1px 4px #000}.demo-scene-caption>span:last-child{letter-spacing:0;color:#b1c1be}.demo-plan{padding:30px 25px;background:#101d24;align-self:stretch}.demo-plan-label{font-size:8px;letter-spacing:1.8px;color:#c6a776;margin-bottom:12px}.demo-plan :is(h2,h3){font-size:24px;letter-spacing:-.5px;font-weight:500;margin:0 0 8px}.demo-plan-date{font-size:10px;line-height:1.8;color:#a9b9bd}.demo-now{padding:25px 0 20px}.demo-now>span{font-size:10px;color:#9dadaf;display:block}.demo-now output{font-size:48px;line-height:1.2;font-weight:300;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;display:block;color:#f4d090;margin:6px 0}.demo-now p{font-size:11px;color:#f4d090;margin:5px 0 0}.interactive-demo[data-light="shade"] .demo-now output,.interactive-demo[data-light="shade"] .demo-now p{color:#acc5ee}.demo-facts{margin:0 0 20px;padding-top:18px;border-top:1px solid #ffffff15}.demo-facts>div{margin-bottom:13px}.demo-facts dt{font-size:9px;color:#9dadaf}.demo-facts dd{margin:3px 0 0;font-size:14px;font-variant-numeric:tabular-nums}.demo-explanation{font-size:10px;line-height:1.8;color:#a9b9bd;min-height:50px}.demo-views{display:flex;gap:7px;margin-top:20px}.demo-views button{font:inherit;font-size:11px;border:1px solid #ffffff25;color:#aebdbf;padding:7px 13px;background:transparent;border-radius:999px;cursor:pointer}.demo-views [aria-pressed="true"]{color:#f4d090;background:#f4d09014;border-color:#f4d09070}.demo-reset{font:inherit;font-size:10px;color:#a9b9bd;background:transparent;border:0;padding:12px 0 0;cursor:pointer}.demo-plan button:disabled,.demo-moments button:disabled{opacity:.4;cursor:default}.demo-timeline{grid-column:1/-1;border-top:1px solid #ffffff15;padding:22px 25px 24px}.demo-slider-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:14px}.demo-slider-heading>span{font-size:10px;color:#9dadaf}.demo-timeline input{width:100%;accent-color:#f4ce8c;cursor:ew-resize;min-height:26px;margin:0}.demo-timeline input:disabled{opacity:.35;cursor:default}.demo-hours{display:flex;justify-content:space-between;font-size:9px;color:#9dadaf;margin:6px 0 18px;font-variant-numeric:tabular-nums}.demo-moments{display:flex;gap:8px;flex-wrap:wrap}.demo-moments button{font:inherit;font-size:10px;color:#b8c7c6;background:#ffffff08;border:1px solid #ffffff16;border-radius:999px;padding:7px 12px;cursor:pointer}.demo-limit{font-size:10px;line-height:1.8;color:var(--muted);max-width:850px;margin-top:16px}.interactive-demo button:focus-visible,.interactive-demo input:focus-visible,.interactive-demo iframe:focus-visible{outline:2px solid #f4ce8c;outline-offset:4px}
@media(max-width:900px){.demo-workspace{grid-template-columns:minmax(0,1fr) 245px}.demo-plan{padding:25px 20px}.demo-scene{min-height:520px}}
@media(max-width:650px){.interactive-demo{margin-top:45px}.demo-heading{display:block}.demo-heading :is(h1,h2){font-size:35px}.demo-heading>p{margin-top:20px;max-width:none;font-size:13px}.demo-workspace{grid-template-columns:1fr}.demo-scene{min-height:360px}.demo-plan{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:23px 20px}.demo-plan-label,.demo-plan :is(h2,h3),.demo-plan-date{grid-column:1}.demo-now{grid-column:2;grid-row:1/4;padding:0;text-align:right;align-self:center}.demo-now output{font-size:40px}.demo-facts{grid-column:1/-1;display:flex;justify-content:space-between;gap:15px;padding-top:16px;margin:15px 0 0}.demo-facts>div{margin-bottom:10px}.demo-explanation{grid-column:1/-1;min-height:0;margin:8px 0 0}.demo-views{margin-top:15px}.demo-reset{align-self:end;text-align:right;padding-bottom:8px}.demo-timeline{padding:18px 20px 20px}.demo-scene-caption{left:16px;right:16px;bottom:14px;font-size:7px}.demo-slider-heading>span{font-size:9px}}

.demo-scene-caption{left:0;right:0;bottom:0;padding:10px 18px;background:#09171bbf;text-shadow:none}.demo-views button{white-space:nowrap}
@media(max-width:650px){.demo-scene-caption{padding:9px 14px}.demo-views{grid-column:1/-1;grid-row:6;justify-self:start}.demo-reset{grid-column:1/-1;grid-row:6;justify-self:end;align-self:center;margin-top:15px;padding:0}}

.demo-page .interactive-demo{margin-top:30px}.demo-back{display:inline-block;padding-top:24px;font-size:12px;text-decoration:none}.demo-page .demo-heading>p{max-width:390px}

/* The landscape keeps its sky; the controls follow the visitor’s appearance. */
:root[data-theme="light"] .demo-workspace,
:root[data-theme="light"] .demo-plan { background: var(--surface); color: var(--fg); }
:root[data-theme="light"] :is(.demo-plan-label, .demo-now output, .demo-now p) { color: var(--link); }
:root[data-theme="light"] .interactive-demo[data-light="shade"] :is(.demo-now output, .demo-now p) { color: var(--shade); }
:root[data-theme="light"] :is(.demo-plan-date, .demo-now > span, .demo-facts dt, .demo-explanation, .demo-reset, .demo-slider-heading > span, .demo-hours) { color: var(--muted); }
:root[data-theme="light"] :is(.demo-facts, .demo-timeline) { border-color: var(--rule); }
:root[data-theme="light"] :is(.demo-views button, .demo-moments button) { color: var(--fg); border-color: var(--rule); background: var(--surface-2); }
:root[data-theme="light"] .demo-views [aria-pressed="true"] { color: var(--link); border-color: var(--link); background: color-mix(in srgb, var(--sun-light) 18%, var(--surface)); }
:root[data-theme="light"] .demo-timeline input { accent-color: var(--link); }
:root[data-theme="light"] .interactive-demo :is(button, input):focus-visible { outline-color: var(--link); }