/* Illustrated scenarios shared by the preview and home page. */
.preview-page .page-intro{padding-bottom:52px}
.preview-page .page-intro h1{font-size:clamp(38px,4.3vw,64px)}
.preview-page .page-intro .breadcrumb{margin-bottom:30px}
.preview-page .page-intro>p{max-width:710px;font-size:14px}
.scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 28px}
.scenario-card{min-width:0;border:1px solid var(--line);background:#0b100d;display:flex;flex-direction:column;transition:border-color .25s,background .25s}
.scenario-card:hover,.scenario-card:focus-within{border-color:#d5c9a866;background:#0e140f}
.scenario-art{position:relative;aspect-ratio:2/1;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,#2f433066,transparent 72%),linear-gradient(140deg,#121b15,#0a0e0c)}
.scenario-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#a5b49a33 .7px,transparent .7px);background-size:22px 22px;mask-image:radial-gradient(ellipse,black,transparent 82%)}
.scenario-art svg{position:relative;display:block;width:100%;height:100%}
.scenario-number{position:absolute;top:15px;left:20px;font:8px 'Courier New',monospace;letter-spacing:1.3px;color:#85927e}
.scenario-copy{padding:27px 30px 29px;display:flex;flex-direction:column;flex:1}
.scenario-copy .eyebrow{font-size:8px;letter-spacing:1px;color:#b7c1ab;line-height:1.8}
.scenario-copy :is(h2,h3){font-size:clamp(25px,2.2vw,34px);font-weight:400;letter-spacing:-.8px;line-height:1.2;margin:16px 0 18px}
.scenario-copy p{font-size:13px;line-height:1.85;color:#a4aea0;max-width:490px;margin-bottom:24px}
.scenario-tags{font:8px/1.9 'Courier New',monospace;letter-spacing:.7px;color:#94a28c;display:block;margin-top:auto;margin-bottom:23px}
.scenario-copy .text-link{align-self:flex-start;font-size:11px;color:var(--champagne)}
.scenario-copy .text-link span{transition:transform .2s}
.scenario-copy .text-link:hover span{transform:translate(3px,-3px)}
.diagram-wires{fill:none;stroke:#b5bf9a;stroke-width:1.2;stroke-linejoin:round}
.diagram-wires circle{fill:var(--champagne);stroke:none}
.diagram-panel{fill:#101912;stroke:#a6b38a55;stroke-width:1}
.diagram-core{fill:#1b291d;stroke:#c7c7a3;stroke-width:1.2}
.diagram-inner{fill:none;stroke:#a5b48e44;stroke-width:1}
.diagram-details{fill:none;stroke:#aebd9d;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.diagram-dots{fill:#aebd9d;opacity:.6}
.diagram-orbit{fill:none;stroke:#a6b38a33;stroke-width:1}
.diagram-tick{fill:none;stroke:#d0d9b9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.diagram-label{fill:#d7decd;font:13px var(--font);text-anchor:middle}
.diagram-brand{fill:var(--champagne);font:20px 'Courier New',monospace;text-anchor:middle;letter-spacing:1px}
.diagram-micro{fill:#9da992;font:8px 'Courier New',monospace;text-anchor:middle;letter-spacing:.9px}
.diagram-footer{fill:#aeb99f;font:8px 'Courier New',monospace;text-anchor:middle;letter-spacing:1.1px}
.preview-end{padding-block:37px 58px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.preview-end>span{font:8px/1.9 'Courier New',monospace;letter-spacing:1px;color:#9da992}
@media(max-width:980px){.scenario-copy{padding:24px}.scenario-grid{gap:28px 20px}.scenario-copy :is(h2,h3){font-size:27px}}
@media(max-width:700px){.preview-page .page-intro{padding-bottom:35px}.scenario-grid{grid-template-columns:1fr;gap:28px}.scenario-copy{padding:23px}.scenario-copy :is(h2,h3){font-size:28px}.scenario-copy p{font-size:13px}.scenario-copy .eyebrow{font-size:8px;letter-spacing:.6px}.scenario-number{top:9px;left:14px;font-size:7px}.preview-end{align-items:flex-start;flex-direction:column;padding-bottom:35px}.diagram-label{font-size:15px}.diagram-micro,.diagram-footer{font-size:9px;letter-spacing:.5px}}

.examples-heading{display:block}
.examples-heading h2{font-size:clamp(38px,4.3vw,64px);letter-spacing:-3px;line-height:1.1}
.examples-heading p{max-width:710px;margin-top:27px;font-size:14px;line-height:1.9;color:#a3ada0}
.examples-note{margin:30px auto 0}
@media(max-width:700px){.examples-heading h2{font-size:clamp(36px,9vw,56px);letter-spacing:-1.7px}.examples-heading p{font-size:13px;margin-top:22px}}