/* Functional laboratory layouts use the existing site's monochrome tokens, typography, form treatment and Button/page module classes. */ #experiment-lab { max-width: 1200px; margin: 0 auto; padding: 120px 24px 80px; font: 14px/1.6 Arial, Helvetica, sans-serif; color: #000; } #experiment-lab h2, #experiment-lab h3, #experiment-lab legend { font-family: Arial, Helvetica, sans-serif; font-weight: 700; } #experiment-lab h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 24px; } #experiment-lab h3 { font-size: 16px; line-height: 1.5; margin: 32px 0 16px; } #experiment-lab p { margin: 0 0 16px; } #experiment-lab [data-role="eyebrow"] { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #666; } #experiment-lab [data-section="intro"] { max-width: 1000px; margin: 0 auto; padding: 40px 0 60px; } #experiment-lab [data-section="intro"] > p:first-child { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; } #experiment-lab [data-role="runtime"] { font-size: 12px; color: #666; margin: 24px 0 0; } #experiment-lab [data-layout="actions"] { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 24px 0; } #experiment-lab [data-layout="laboratory"] { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; border-top: 1px solid #eee; padding-top: 40px; } #experiment-lab [data-layout="laboratory"] > *, #experiment-lab [data-layout="branches"] > * { min-width: 0; } #experiment-lab [data-layout="branches"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 24px; } #experiment-lab aside h2 { font-size: 16px; letter-spacing: 0; } #experiment-lab label { display: block; font-size: 12px; color: #666; margin-bottom: 8px; } #experiment-lab label span { color: #666; } #experiment-lab input, #experiment-lab textarea, #experiment-lab select { width: 100%; font: 14px/1.6 Arial, Helvetica, sans-serif; color: #000; background: #f0f0f0; border: 0; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } #experiment-lab textarea { min-height: 80px; resize: vertical; } #experiment-lab input:focus, #experiment-lab textarea:focus, #experiment-lab select:focus { background: #e5e5e5; } #experiment-lab :focus-visible { outline: 2px solid #000; outline-offset: 4px; } #experiment-lab [id] { scroll-margin-top: 120px; } #experiment-lab input[type="checkbox"] { width: auto; margin: 0; } #experiment-lab [data-role="checkbox"] { display: flex; align-items: start; gap: 12px; color: #333; font-size: 14px; margin: 24px 0; } #experiment-lab [data-role="catalogue"] { list-style: none; padding: 0; margin: 24px 0; max-height: 800px; overflow-y: auto; } #experiment-lab [data-role="catalogue"] li { border-bottom: 1px solid #eee; } #experiment-lab [data-role="catalogue"] button { width: 100%; background: #fff; border: 0; text-align: left; font: 14px/1.6 Arial, Helvetica, sans-serif; padding: 16px 0; cursor: pointer; color: #333; } #experiment-lab [data-role="catalogue"] button[aria-current="true"] { font-weight: 700; color: #000; } #experiment-lab [data-role="catalogue"] button[aria-current="true"]::before { content: 'Selected — '; font-size: 12px; } #experiment-lab small { display: block; font-size: 12px; font-weight: 400; color: #666; } #experiment-lab [data-role="status"] { color: #666; font-size: 12px; padding: 0 0 24px; } #experiment-lab [data-role="error"] { color: #000; border: 1px solid #000; padding: 16px; } #experiment-lab [data-role="error"]::before { content: 'Unable to complete: '; font-weight: 700; } #experiment-lab [data-layout="controls"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0; } #experiment-lab fieldset { padding: 24px 0 0; margin: 0; min-width: 0; border: 0; border-top: 1px solid #eee; } #experiment-lab legend { padding: 0 8px 0 0; font-size: 14px; } #experiment-lab [data-role="control"] { margin-bottom: 24px; } #experiment-lab [data-role="control"] input { margin-bottom: 4px; } #experiment-lab [data-role="model-flow"] { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 24px; margin: 32px 0; } #experiment-lab [data-role="model-flow"] li { flex: 1; min-width: 120px; border-top: 1px solid #000; padding-top: 12px; } #experiment-lab [data-role="model-flow"] span { display: block; color: #999; font-size: 24px; } #experiment-lab [data-role="model-flow"] p { color: #666; font-size: 12px; margin-top: 8px; } #experiment-lab [data-section="divider"] { border-top: 1px solid #eee; padding-top: 40px; margin-top: 40px; } #experiment-lab [data-section="sharing"] { border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 24px; } #experiment-lab [data-role="conclusion"] { font-size: 24px; font-weight: 700; line-height: 1.3; } #experiment-lab [data-scroll="table"] { overflow: auto; max-height: 500px; margin: 24px 0; } #experiment-lab table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; } #experiment-lab caption { text-align: left; color: #666; padding-bottom: 12px; } #experiment-lab th, #experiment-lab td { border-bottom: 1px solid #f5f5f5; padding: 12px 8px 12px 0; vertical-align: top; overflow-wrap: anywhere; } #experiment-lab th { font-weight: 600; } #experiment-lab td { color: #666; } #experiment-lab [data-role="timeline"] { width: 100%; height: auto; font: 12px Arial, Helvetica, sans-serif; } #experiment-lab [data-role="calculation-chain"] { padding-left: 24px; } #experiment-lab .calculation-detail { border-top: 1px solid #cbd2c8; margin-block: 24px; } #experiment-lab [data-lab-view][hidden] { display: none !important; } #experiment-lab .account-content { max-width: 760px; margin: 32px auto 80px; padding: 32px 0; border-top: 1px solid #d9e0d3; } #experiment-lab .account-content form { display: grid; gap: 14px; max-width: 520px; margin: 28px 0; } #experiment-lab .account-content form input { width: 100%; min-height: 48px; } #experiment-lab .account-content form button { justify-self: start; } #experiment-lab .account-content [data-role="saved-list"] { list-style: none; padding: 0; } #experiment-lab .account-content [data-role="saved-list"] > li { padding: 20px 0; border-bottom: 1px solid #d9e0d3; } #experiment-lab .calculation-detail > summary { min-height: 44px; display: list-item; padding: 14px 0; cursor: pointer; } #experiment-lab [data-role="calculation-chain"] li { padding: 12px 0; border-bottom: 1px solid #eee; } #experiment-lab [data-role="calculation-chain"] p { font-size: 13px; color: #666; overflow-wrap: anywhere; margin: 4px 0; } #experiment-lab pre { font: 12px/1.6 Arial, Helvetica, sans-serif; background: #fff; border: 1px solid #eee; padding: 16px; overflow: auto; max-height: 500px; white-space: pre-wrap; overflow-wrap: anywhere; } #experiment-lab [data-role="saved-list"] { padding-left: 24px; } #experiment-lab [data-role="saved-list"] li { padding: 16px 0; border-bottom: 1px solid #eee; } #experiment-lab button:disabled { color: #666; background: #f0f0f0; border-color: #e0e0e0; cursor: default; } #experiment-lab form { max-width: 800px; } #experiment-lab #access form { max-width: 500px; } #experiment-lab a { overflow-wrap: anywhere; } #experiment-lab [data-role="node"] { padding: 24px 0; border-top: 1px solid #eee; } #experiment-lab [data-role="node"] h3 { margin-top: 0; } @media (max-width: 768px) { #experiment-lab { padding: 120px 24px 60px; } #experiment-lab [data-layout="laboratory"], #experiment-lab [data-layout="controls"], #experiment-lab [data-layout="branches"] { grid-template-columns: 1fr; gap: 24px; } #experiment-lab [data-role="catalogue"] { max-height: 500px; } #experiment-lab h2, #experiment-lab [data-section="intro"] > p:first-child { font-size: 24px; } #experiment-lab .HeaderSection-module__IJW6oG__mainTitle { font-size: 48px; } #experiment-lab [data-layout="actions"] { align-items: stretch; } #experiment-lab [data-layout="actions"] > * { max-width: 100%; } } /* The financial story is a new user-authorised interaction, within YieldGuard's existing monochrome palette and system typography. No remote assets. */ #experiment-lab:has(.story-shell) { padding-top: 120px; } .story-shell { --story-ink: #000; --story-muted: #666; } #experiment-lab .story-heading { display: flex; gap: 60px; justify-content: space-between; align-items: end; margin-bottom: 32px; } #experiment-lab .story-kicker { font: 12px/1.5 Arial,Helvetica,sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #666; margin: 0 0 16px; } #experiment-lab .story-heading h1 { font: 500 64px/1.05 'Times New Roman',Times,serif; letter-spacing: -.04em; margin: 0; } .story-heading h1 span { color: #999; } #experiment-lab .story-intro { max-width: 500px; width: 36%; } #experiment-lab .story-intro > p { font-size: 16px; line-height: 1.6; color: #666; margin: 0 0 16px; } #experiment-lab .story-shell button { font-family: Arial,Helvetica,sans-serif; cursor: pointer; min-height: 44px; transition: background .2s, color .2s, border-color .2s; } #experiment-lab .story-shell button:focus-visible { outline: 2px solid #000; outline-offset: 4px; } #experiment-lab .story-shell button:disabled { cursor: default; opacity: .5; } #experiment-lab .story-shell button:active:not(:disabled) { background: #e5e5e5; color: #000; } #experiment-lab .story-text-button { border: 0; border-bottom: 1px solid #e0e0e0; background: transparent; font-size: 13px; color: #333; padding: 8px 0; text-align: left; } #experiment-lab .story-text-button:hover:not(:disabled) { color: #000; border-color: #000; } #experiment-lab .story-shelf { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 40px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } #experiment-lab .story-cover { display: flex; gap: 16px; align-items: start; text-align: left; background: #fff; border: 0; border-right: 1px solid #eee; padding: 24px 16px; color: #666; } #experiment-lab .story-cover:last-child { border-right: 0; } #experiment-lab .story-cover[aria-pressed=true] { background: #f5f5f5; color: #000; box-shadow: inset 0 -2px #000; } #experiment-lab .story-cover:hover { background: #f5f5f5; } #experiment-lab .story-cover-number { font-size: 12px; color: #999; } #experiment-lab .story-cover strong { display: block; font-size: 16px; margin: 0 0 8px; } #experiment-lab .story-cover small { font-size: 12px; line-height: 1.5; } #experiment-lab .story-cover > span:last-child { margin-left: auto; } #experiment-lab .story-stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: start; } #experiment-lab .story-narrative { min-width: 0; } #experiment-lab #story-question:focus { outline: none; } #experiment-lab .story-scene-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 24px; } #experiment-lab .story-narrative h2 { font: 500 40px/1.2 'Times New Roman',Times,serif; letter-spacing: -.02em; margin: 0 0 24px; } #experiment-lab .story-prompt { font-size: 16px; line-height: 1.6; } #experiment-lab .story-context { color: #666; font-size: 13px; line-height: 1.6; } #experiment-lab .story-choices { display: grid; gap: 12px; margin-top: 24px; } #experiment-lab .story-choice { display: flex; gap: 16px; align-items: start; width: 100%; text-align: left; border: 1px solid #e0e0e0; background: #fff; border-radius: 8px; padding: 20px; color: #000; } #experiment-lab .story-choice:hover:not(:disabled), #experiment-lab .story-choice:focus-visible { border-color: #000; background: #f5f5f5; } #experiment-lab .story-choice-index { font: 400 24px/1.3 'Times New Roman',Times,serif; color: #999; } #experiment-lab .story-choice-copy { flex: 1; min-width: 0; } #experiment-lab .story-choice-copy strong { display: block; font-size: 14px; line-height: 1.5; margin: 0 0 4px; } #experiment-lab .story-choice-copy > span { font-size: 12px; line-height: 1.6; color: #666; display: block; } #experiment-lab .story-choice-copy small { border-top: 1px solid #eee; padding-top: 8px; margin-top: 12px; color: #333; } #experiment-lab .story-choice-arrow { margin-top: 4px; font-size: 18px; } #experiment-lab .story-consequence { border-left: 2px solid #000; padding: 0 0 0 16px; margin: 24px 0; } #experiment-lab .story-consequence .story-kicker { margin: 0 0 8px; font-size: 12px; } #experiment-lab .story-consequence > strong { font: 500 28px/1.3 'Times New Roman',Times,serif; display: block; } #experiment-lab .story-consequence > p:last-child { color: #666; font-size: 12px; margin: 8px 0 0; } #experiment-lab .story-assumption { color: #666; font-size: 12px; margin-top: 24px; } #experiment-lab .story-edit-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } #experiment-lab .story-world-panel { min-width: 0; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; } #experiment-lab .story-world-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #eee; } #experiment-lab .story-world-title p { margin: 0; font-size: 12px; } #experiment-lab .story-world-title p:last-child { color: #999; text-align: right; } #experiment-lab .story-world-caption { border-top: 1px solid #eee; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: #666; } #experiment-lab .story-ending { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; } #experiment-lab .story-ending > div > span { display: block; color: #666; font-size: 12px; } #experiment-lab .story-ending > div > strong { font: 500 28px/1.3 'Times New Roman',Times,serif; } #experiment-lab .story-ending > button, #experiment-lab .story-ending > p { grid-column: 1 / -1; } #experiment-lab .story-primary, #experiment-lab .story-secondary { border: 1px solid #000; border-radius: 4px; font-size: 14px; font-weight: 500; padding: 12px 24px; background: #000; color: #fff; } #experiment-lab .story-primary:hover { background: #333; } #experiment-lab .story-secondary { background: #fff; color: #000; border-color: #e0e0e0; } #experiment-lab .story-secondary:hover { background: #f5f5f5; border-color: #000; } #experiment-lab .story-trail { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; border-top: 1px solid #eee; padding-top: 32px; margin-top: 40px; } #experiment-lab .story-trail > div p:last-child { font-size: 13px; color: #666; } #experiment-lab .story-trail ol { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; } #experiment-lab .story-trail li { flex: 1; min-width: 0; } #experiment-lab .story-trail button { width: 100%; padding: 12px 0; border: 0; border-top: 1px solid #000; background: #fff; text-align: left; } #experiment-lab .story-trail button:hover { background: #f5f5f5; } #experiment-lab .story-trail span { font-size: 12px; color: #999; } #experiment-lab .story-trail strong { display: block; font-size: 13px; margin: 8px 0; } #experiment-lab .story-pinned { display: flex; justify-content: space-between; align-items: start; gap: 32px; background: #f5f5f5; padding: 24px; margin-top: 32px; } #experiment-lab .story-pinned > div { flex: 1; } #experiment-lab .story-pinned strong { font-size: 13px; } #experiment-lab .story-pinned p { font-size: 13px; } #experiment-lab .story-evidence { border-top: 1px solid #000; padding-top: 32px; margin-top: 40px; } #experiment-lab .story-evidence-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; } #experiment-lab .story-evidence h2 { font: 500 32px/1.3 'Times New Roman',Times,serif; } #experiment-lab .story-equation { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 24px 0; font-size: 14px; } #experiment-lab .story-equation span { color: #666; } #experiment-lab .story-formulas { padding-left: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } #experiment-lab .story-formulas li { font-size: 13px; } #experiment-lab .story-formulas li > span { display: block; margin-top: 8px; color: #666; } #experiment-lab .story-evidence summary { cursor: pointer; min-height: 44px; padding: 12px 0; } #experiment-lab .story-formulas p { margin: 8px 0; color: #666; } #experiment-lab .story-receipt-id { font-size: 12px; overflow-wrap: anywhere; color: #666; } #experiment-lab .story-footnote { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #eee; margin-top: 60px; padding-top: 24px; color: #666; font-size: 13px; } #experiment-lab .story-footnote p { margin: 0; } #experiment-lab .story-error { padding: 16px; border: 1px solid #000; } #experiment-lab .story-error button { border: 1px solid #000; padding: 8px 16px; background: #fff; } @media(max-width:1024px) { #experiment-lab .story-stage { gap: 24px; } #experiment-lab .story-heading h1 { font-size: 48px; } #experiment-lab .story-intro { width: 40%; } } @media(max-width:768px) { #experiment-lab:has(.story-shell) { padding: 100px 16px 40px; } #experiment-lab .story-heading { display: block; margin-bottom: 24px; } #experiment-lab .story-heading h1 { font-size: 40px; } #experiment-lab .story-intro { width: 100%; margin-top: 16px; } #experiment-lab .story-intro > p { font-size: 14px; } #experiment-lab .story-shelf { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 24px; } #experiment-lab .story-cover { padding: 12px 8px; border-right: 1px solid #eee; } #experiment-lab .story-cover strong { font-size: 12px; margin: 0; } #experiment-lab .story-cover-number, #experiment-lab .story-cover > span:last-child { display: none; } #experiment-lab .story-cover small { display: none; } #experiment-lab .story-stage { display: flex; flex-direction: column; } #experiment-lab .story-narrative { width: 100%; } #experiment-lab .story-narrative h2 { font-size: 32px; } #experiment-lab .story-world-panel { width: 100%; } #experiment-lab .story-world-panel .formula-hud { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #f5f5f5f5; padding-bottom: max(10px, env(safe-area-inset-bottom)); } body:has(.story-shell) { padding-bottom: 80px; } #experiment-lab .story-trail { display: block; } #experiment-lab .story-trail ol { flex-wrap: wrap; } #experiment-lab .story-trail li { flex-basis: 40%; } #experiment-lab .story-pinned, #experiment-lab .story-footnote { flex-direction: column; } #experiment-lab .story-formulas { grid-template-columns: 1fr; } } @media(prefers-reduced-motion:reduce) { #experiment-lab .story-shell * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } .story-map { --story-ink: #000; --story-muted: #666; --story-rule: #e0e0e0; color: var(--story-ink); font-family: Arial, Helvetica, sans-serif; min-width: 0; container:financial-map / inline-size; } .story-map-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 28px 0; } .story-map-eyebrow,.story-map-column-label { display:block; text-transform:uppercase; letter-spacing:.05em; color:#666; font-size:12px; line-height:1.5; } .story-map-heading p { margin:6px 0 0; font-family:'Times New Roman',Times,serif; font-size:24px; line-height:1.2; } .story-map-model-label { font-size:12px; line-height:1.5; color:#666; text-align:right; max-width:130px; padding-top:2px; } .story-map-network { display:grid; grid-template-columns:minmax(0,1fr) minmax(144px,.95fr) minmax(0,1fr); gap:32px; position:relative; padding:32px 28px; min-height:300px; align-items:center; } .story-map-connectors { position:absolute; width:calc(100% - 56px); height:calc(100% - 64px); inset:32px 28px; overflow:visible; pointer-events:none; } .story-map-connectors path { fill:none; stroke:#999; stroke-width:1; vector-effect:non-scaling-stroke; } .story-map-connectors circle { fill:#fff; stroke:#999; } .story-map-update-pulse path { stroke:#333; stroke-width:1.5; stroke-dasharray:8 92; stroke-dashoffset:100; animation:story-relationship-update 1.15s cubic-bezier(.2,.7,.3,1) both; } .story-map-view-switch { display:none; } .story-chart-hatch { stroke:#e0e0e0; } .story-map-status-dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; margin-right:7px; vertical-align:middle; } @keyframes story-relationship-update { 0% { stroke-dashoffset:100; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { stroke-dashoffset:-8; opacity:0; } } .story-map-contracts,.story-map-centre { position:relative; z-index:1; min-width:0; } .story-map-column-label { margin:0 0 10px; font-size:12px; } .story-map-contract { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; color:#000; background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px; margin:0 0 12px; gap:5px; cursor:pointer; font:inherit; transition:border-color .2s,box-shadow .2s,transform .2s; } .story-map-contract:last-child { margin-bottom:0; } .story-map-contract:hover,.story-map-contract:focus-visible { border-color:#000; box-shadow:0 4px 16px #00000008; transform:translateY(-2px); } .story-map-contract:focus-visible,.story-map-routes button:focus-visible { outline:2px solid #000; outline-offset:3px; } .story-map-contract.is-active { border-color:#000; box-shadow:0 4px 16px #0000000d; } .story-map-contract-kind { display:flex; justify-content:space-between; align-items:center; gap:6px; width:100%; font-size:12px; color:#666; } .story-map-contract-kind span { font-size:18px; color:#000; line-height:1; } .story-map-contract-name { font-size:14px; font-weight:500; line-height:1.3; overflow-wrap:anywhere; } .story-map-contract-amount { font-size:24px; letter-spacing:-.04em; line-height:1.2; font-weight:500; font-variant-numeric:tabular-nums; margin:3px 0 2px; } .story-map-contract-term,.story-map-contract-route { font-size:12px; line-height:1.5; color:#666; } .story-map-contract-route { margin-top:2px; } .story-map-cash { width:100%; aspect-ratio:1; min-height:156px; max-width:220px; border:1px solid #000; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:8px; padding:12px; background:#fff; margin:auto; } .story-map-cash.has-shortfall { border-style:dashed; } .story-map-cash strong { font-family:'Times New Roman',Times,serif; font-size:48px; line-height:1; font-weight:400; letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .story-map-cash > span { font-size:12px; line-height:1.3; color:#666; } .story-map-cash .story-map-cash-label { color:#333; max-width:130px; } .story-map-cash .story-map-preview-cash { color:#333; border-top:1px solid #eee; padding-top:6px; } .story-map-routes { margin:12px auto 0; max-width:220px; } .story-map-routes button { border:0; background:#fff; color:#333; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:8px 2px; cursor:pointer; text-align:left; font:inherit; } .story-map-routes strong { display:block; font-size:12px; line-height:1.3; font-weight:500; } .story-map-routes small { display:block; font-size:12px; line-height:1.5; color:#666; margin-top:2px; } .story-map-route-mark { font-size:24px; color:#666; } .story-map-empty { font-size:13px; color:#666; line-height:1.6; border-top:1px solid #e0e0e0; padding-top:16px; } .story-timeline { padding:24px 28px 20px; border-top:1px solid #e0e0e0; } .story-timeline-heading { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; } .story-timeline-heading h3 { font-family:'Times New Roman',Times,serif; font-size:28px; font-weight:400; line-height:1.2; letter-spacing:-.02em; margin:6px 0 0; } .story-timeline-low { text-align:right; padding-top:1px; flex:none; } .story-timeline-low span { display:block; font-size:12px; line-height:1.5; color:#666; } .story-timeline-low strong { display:block; font-size:24px; letter-spacing:-.04em; font-weight:400; margin-top:5px; font-variant-numeric:tabular-nums; } .story-timeline-legend { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin:22px 0 4px; font-size:12px; color:#666; } .story-timeline-legend > span { display:flex; gap:6px; align-items:center; } .story-line-key { display:inline-block; width:18px; border-top:2px solid #000; } .story-line-key.is-previous { border-color:#999; border-top-style:dotted; } .story-line-key.is-preview { border-color:#333; border-top-style:dashed; } .story-timeline-legend .story-timeline-unit { margin-left:auto; } .story-timeline-chart { display:block; width:100%; overflow:visible; } .story-timeline-chart text { font-family:Arial,Helvetica,sans-serif; font-size:12px; fill:#666; } .story-chart-grid { stroke:#eee; stroke-width:1; } .story-chart-zero { stroke:#999; stroke-width:1; } .story-chart-area { fill:#00000008; } .story-chart-current { fill:none; stroke:#000; stroke-width:2; stroke-linejoin:round; } .story-chart-previous { fill:none; stroke:#999; stroke-width:1.5; stroke-dasharray:3 4; } .story-chart-preview { fill:none; stroke:#333; stroke-width:2; stroke-dasharray:7 5; } .story-chart-cursor { stroke:#999; stroke-width:1; stroke-dasharray:3 3; } .story-chart-point { fill:#000; stroke:#fff; stroke-width:2; } .story-timeline-scrub { display:flex; align-items:center; gap:14px; font-size:12px; color:#666; margin:4px 0 16px; } .story-timeline-scrub > span { flex:none; } .story-timeline-scrub input[type=range] { flex:1; min-width:0; width:auto; height:24px; margin:0; padding:0; accent-color:#000; cursor:ew-resize; } .story-timeline-scrub input[type=range]:focus-visible { outline:2px solid #000; outline-offset:4px; } .story-timeline-readout { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; border-top:1px solid #eee; padding-top:14px; } .story-timeline-readout span { display:flex; flex-direction:column; gap:5px; } .story-timeline-readout small { color:#666; font-size:12px; line-height:1.3; } .story-timeline-readout strong { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; } .story-map-footnote { font-size:12px; line-height:1.5; color:#666; margin:18px 0 0; } .story-timeline-empty { padding:32px 0; color:#666; text-align:center; } .story-timeline-empty > span { display:block; font-size:24px; overflow:hidden; white-space:nowrap; } .story-timeline-empty p { font-size:13px; line-height:1.6; } /* Keep legacy laboratory element selectors from changing this instrument. */ #experiment-lab .story-map-heading p { margin:6px 0 0; } #experiment-lab .story-timeline-heading h3 { font-family:'Times New Roman',Times,serif; font-size:28px; font-weight:400; line-height:1.2; letter-spacing:-.02em; margin:6px 0 0; } #experiment-lab .story-timeline-scrub { display:flex; margin:4px 0 16px; } #experiment-lab .story-timeline-scrub input[type=range] { width:auto; height:24px; margin:0; padding:0; background:transparent; } #experiment-lab .story-map-footnote { margin:18px 0 0; } .story-map-routes { min-width:0; } .story-map-routes strong { overflow-wrap:anywhere; } .story-timeline-readout > span { min-width:0; } .story-timeline-readout strong { overflow-wrap:anywhere; } @media(max-width:1100px) and (min-width:761px) { .story-map-network { gap:16px; padding-left:20px; padding-right:20px; grid-template-columns:minmax(0,1fr) minmax(120px,.85fr) minmax(0,1fr); } .story-map-cash { min-height:130px; } .story-map-cash strong { font-size:36px; } .story-map-contract { padding:12px; } .story-map-contract-amount { font-size:20px; } } @media(max-width:760px) { .story-map-heading { padding:20px 18px 0; } .story-map-heading p { font-size:24px; } .story-map-model-label { font-size:12px; max-width:105px; } .story-map-network { padding:24px 18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 16px; min-height:0; align-items:start; } .story-map-connectors { display:none; } .story-map-centre { grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:center; gap:24px; } .story-map-cash { width:164px; min-height:164px; flex:none; margin:0; } .story-map-cash strong { font-size:42px; } .story-map-routes { max-width:140px; margin:0; } .story-map-contract { padding:12px; } .story-map-contract-amount { font-size:24px; } .story-map-contract-name { font-size:14px; } .story-map-column-label { font-size:12px; } .story-timeline { padding:20px 18px; } .story-timeline-heading { gap:12px; } .story-timeline-heading h3 { font-size:24px; } .story-timeline-low strong { font-size:20px; } .story-timeline-low span { max-width:108px; } .story-timeline-legend { margin-top:18px; gap:8px 12px; } .story-timeline-legend .story-timeline-unit { width:100%; margin-left:0; } .story-timeline-chart { min-height:150px; } .story-timeline-chart text { font-size:20px; } .story-timeline-scrub { gap:8px; } .story-timeline-scrub > span:first-child { max-width:68px; line-height:1.3; } .story-timeline-readout { gap:8px; } .story-timeline-readout strong { font-size:14px; } .story-map-footnote { margin-top:16px; } } @media(prefers-reduced-motion:reduce) { .story-map *, .story-map *::before, .story-map *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } } @container financial-map (min-width:561px) and (max-width:720px) { .story-map-network { gap:20px; padding-left:20px; padding-right:20px; grid-template-columns:minmax(0,1fr) minmax(140px,.9fr) minmax(0,1fr); } .story-map-cash { min-height:140px; } .story-map-cash strong { font-size:36px; } .story-map-contract { padding:12px; } .story-map-contract-amount { font-size:24px; } .story-timeline-chart text { font-size:16px; } } @container financial-map (max-width:560px) { .story-map-network { padding:24px 18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 16px; min-height:0; align-items:start; } .story-map-connectors { display:none; } .story-map-centre { grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:center; gap:20px; } .story-map-cash { width:164px; min-height:164px; flex:none; margin:0; } .story-map-cash strong { font-size:42px; } .story-map-routes { max-width:140px; margin:0; } .story-map-heading { padding:20px 18px 0; } .story-timeline { padding:20px 18px; } #experiment-lab .story-timeline-heading h3 { font-size:24px; } .story-timeline-low strong { font-size:20px; } .story-timeline-low span { max-width:108px; } .story-timeline-chart text { font-size:20px; } .story-timeline-legend .story-timeline-unit { width:100%; margin-left:0; } } @container financial-map (max-width:380px) { .story-map-centre { gap:12px; } .story-map-cash { width:144px; min-height:144px; padding:10px; } .story-map-cash strong { font-size:36px; } .story-map-routes { flex:1; max-width:130px; } .story-map-contract { padding:10px; } .story-map-contract-amount { font-size:20px; } .story-timeline-chart text { font-size:22px; } .story-timeline-heading { flex-wrap:wrap; } .story-timeline-low { text-align:left; } .story-timeline-low span { max-width:none; } } /* The scene surface is a compact instrument, not a second dashboard. All animated values remain the exact final kernel values, never interpolations. */ .story-map.is-compact { --story-ink:#f1f0ea; --story-muted:#a4a6a6; --story-rule:#ffffff1f; color:var(--story-ink); background:#191c1e; } .story-map.is-compact .story-map-heading { padding:16px 20px 0; align-items:center; } .story-map.is-compact .story-map-eyebrow,.story-map.is-compact .story-map-column-label,.story-map.is-compact .story-map-model-label { color:#a4a6a6; font-size:10px; letter-spacing:.075em; } .story-map.is-compact .story-map-model-label { padding:0; max-width:none; letter-spacing:0; } .story-map.is-compact .story-map-view-switch { display:flex; gap:4px; padding:8px 20px 0; } .story-map.is-compact .story-map-view-switch button { border:0; border-bottom:1px solid transparent; border-radius:0; padding:8px 12px; min-height:44px; font:11px/1.3 Arial,Helvetica,sans-serif; background:transparent; color:#a4aea7; cursor:pointer; } .story-map.is-compact .story-map-view-switch button[aria-pressed=true] { color:#e4e6d9; border-color:#e4e6d9; } .story-map.is-compact .story-map-view-switch button:focus-visible { outline:2px solid #e4e6d9; outline-offset:2px; } .story-map.is-compact[data-panel=world] .story-timeline { display:none; } .story-map.is-compact[data-panel=timeline] .story-map-network { display:none; } .story-map.is-compact .story-map-network { min-height:204px; padding:18px 20px 20px; gap:30px; grid-template-columns:minmax(0,1fr) minmax(122px,.85fr) minmax(0,1fr); align-items:center; } .story-map.is-compact .story-map-connectors { display:block; width:calc(100% - 40px); height:calc(100% - 38px); inset:18px 20px 20px; } .story-map.is-compact .story-map-centre { grid-column:auto; grid-row:auto; display:block; } .story-map.is-compact .story-map-connectors path { stroke:#a0a6a34d; } .story-map.is-compact .story-map-connectors path.is-active { stroke:#dfe1db80; } .story-map.is-compact .story-map-update-pulse path { stroke:#e8e9e2; } .story-map.is-compact .story-map-column-label { font-size:9px; margin-bottom:9px; letter-spacing:.065em; } .story-map.is-compact .story-map-contract { border:1px solid #ffffff21; background:#24282b; color:#f1f0ea; border-radius:7px; padding:9px 10px; gap:3px; margin-bottom:8px; box-shadow:0 8px 18px #00000015; animation:story-contract-reveal .48s cubic-bezier(.2,.7,.3,1) both; } .story-map.is-compact .story-map-contract.is-active { border-color:#e7e7db8c; background:#2a2f31; box-shadow:0 0 0 3px #dce2d405,0 8px 18px #00000020; } .story-map.is-compact .story-map-contract:hover,.story-map.is-compact .story-map-contract:focus-visible { border-color:#e9e9df; transform:translateY(-2px); background:#2f3436; } .story-map.is-compact .story-map-contract:active { transform:translateY(0); } .story-map.is-compact .story-map-contract:focus-visible,.story-map.is-compact .story-map-routes button:focus-visible { outline-color:#f1f0ea; } .story-map.is-compact .story-map-contract-kind { color:#a4a6a6; font-size:9px; } .story-map.is-compact .story-map-contract-kind span { color:#b7bbb5; font-size:13px; } .story-map.is-compact .story-map-contract-name { font-size:11px; line-height:1.3; color:#e3e5dd; } .story-map.is-compact .story-map-contract-amount { font-size:22px; letter-spacing:-.04em; margin:0; } .story-map.is-compact .story-map-contract-term { color:#a4a6a6; font-size:9px; line-height:1.4; } .story-map.is-compact .story-map-contract-route { display:none; } .story-map.is-compact .story-map-cash { position:relative; min-height:126px; min-width:0; max-width:166px; background:#191c1e; border:0; padding:14px; gap:5px; overflow:visible; } .story-map.is-compact .story-map-cash > span { position:relative; z-index:1; color:#a4a6a6; font-size:9px; } .story-map.is-compact .story-map-cash .story-map-cash-label { max-width:115px; color:#c2c5bd; font-size:9px; } .story-map.is-compact .story-map-cash strong { position:relative; z-index:1; font-size:40px; color:#f1f0ea; animation:story-cash-reveal .35s ease-out both; } .story-map-orbit { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transform:rotate(-90deg); } .story-map-orbit circle { fill:none; vector-effect:non-scaling-stroke; } .story-orbit-track { stroke:#c1c6bf36; stroke-width:1; } .story-orbit-inner { stroke:#c1c6bf17; stroke-width:.5; } .story-orbit-position { stroke:#e4e6d9; stroke-width:2; stroke-linecap:round; transition:stroke-dasharray .35s ease; } .story-map.is-compact .story-map-cash.has-shortfall .story-orbit-track { stroke-dasharray:2 4; } .story-map.is-compact .story-map-cash .story-map-preview-cash { color:#eef0e6; border-color:#ffffff26; padding-top:3px; } .story-map.is-compact .story-map-routes { margin:8px auto 0; } .story-map.is-compact .story-map-routes button { background:transparent; color:#c1c6bf; padding:3px 0; gap:5px; min-height:32px; } .story-map.is-compact .story-map-routes strong { color:#c1c6bf; font-size:9px; } .story-map.is-compact .story-map-routes small { color:#a4a6a6; font-size:9px; line-height:1.3; } .story-map.is-compact .story-map-route-mark { color:#a4a6a6; font-size:18px; } .story-map.is-compact .story-map-empty { color:#a4a6a6; font-size:11px; border-color:#ffffff21; } .story-map.is-compact .story-timeline { border-color:#ffffff18; padding:14px 20px 12px; background:#15181a; } .story-map.is-compact .story-timeline-heading { gap:10px; align-items:center; } #experiment-lab .story-map.is-compact .story-timeline-heading h3 { color:#eff0e8; font-size:22px; margin:2px 0 0; } .story-map.is-compact .story-timeline-heading .story-map-eyebrow { font-size:9px; } .story-map.is-compact .story-timeline-low { padding:0; } .story-map.is-compact .story-timeline-low span { color:#a4a6a6; font-size:9px; } .story-map.is-compact .story-timeline-low strong { color:#eff0e8; font-size:22px; margin:2px 0 0; } .story-map.is-compact .story-timeline-legend { gap:5px 12px; font-size:9px; color:#a4a6a6; margin:12px 0 0; } .story-map.is-compact .story-line-key { border-color:#e4e6d9; width:12px; border-top-width:1.5px; } .story-map.is-compact .story-line-key.is-previous { border-color:#787e7b; } .story-map.is-compact .story-line-key.is-preview { border-color:#d1d5c8; } .story-map.is-compact .story-timeline-chart { max-height:140px; min-height:0; } .story-map.is-compact .story-timeline-chart text { fill:#a4a6a6; font-size:13px; } .story-map.is-compact .story-chart-grid { stroke:#ffffff0c; } .story-map.is-compact .story-chart-zero { stroke:#d2d7ce45; } .story-map.is-compact .story-chart-hatch { stroke:#d6dad034; } .story-map.is-compact .story-chart-area { fill:#dbe2d008; } .story-map.is-compact .story-chart-current { stroke:#e4e6d9; stroke-width:2; stroke-dasharray:1000; animation:story-cash-path-reveal .68s cubic-bezier(.2,.65,.3,1) both; } .story-map.is-compact .story-chart-previous { stroke:#7c8580; } .story-map.is-compact .story-chart-preview { stroke:#d1d5c8; } .story-map.is-compact .story-chart-cursor { stroke:#a4a6a670; } .story-map.is-compact .story-chart-point { fill:#e4e6d9; stroke:#191c1e; } #experiment-lab .story-map.is-compact .story-timeline-scrub { color:#a4a6a6; gap:8px; font-size:9px; margin:0; } #experiment-lab .story-map.is-compact .story-timeline-scrub span { color:#a4a6a6; } #experiment-lab .story-map.is-compact .story-timeline-scrub input[type=range] { accent-color:#e4e6d9; height:28px; background:transparent; } .story-map.is-compact .story-timeline-readout { padding-top:8px; border-color:#ffffff12; gap:10px; } .story-map.is-compact .story-timeline-readout small { color:#a4a6a6; font-size:9px; } .story-map.is-compact .story-timeline-readout strong { color:#e4e6d9; font-size:12px; } #experiment-lab .story-map.is-compact .story-map-footnote { color:#8b9390; font-size:9px; line-height:1.4; margin:8px 0 0; } .story-map.is-compact .story-timeline-empty { color:#a4a6a6; padding:20px 0; } @keyframes story-contract-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes story-cash-reveal { from { opacity:.35; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } } @keyframes story-cash-path-reveal { from { stroke-dashoffset:1000; opacity:.3; } to { stroke-dashoffset:0; opacity:1; } } @container financial-map (max-width:560px) { .story-map.is-compact .story-map-heading { padding:12px 14px 0; } .story-map.is-compact .story-map-network { display:grid; grid-template-columns:minmax(0,1fr) minmax(94px,.85fr) minmax(0,1fr); align-items:center; gap:12px; padding:12px 14px 16px; min-height:176px; } .story-map.is-compact .story-map-connectors { display:block; inset:12px 14px 16px; width:calc(100% - 28px); height:calc(100% - 28px); } .story-map.is-compact .story-map-centre { grid-column:auto; grid-row:auto; display:block; } .story-map.is-compact .story-map-cash { width:100%; min-height:94px; max-width:142px; padding:9px; } .story-map.is-compact .story-map-cash strong { font-size:31px; } .story-map.is-compact .story-map-cash > span,.story-map.is-compact .story-map-cash .story-map-cash-label { font-size:8px; } .story-map.is-compact .story-map-contract { padding:7px; gap:3px; margin-bottom:7px; } .story-map.is-compact .story-map-contract-name { font-size:10px; } .story-map.is-compact .story-map-contract-amount { font-size:18px; } .story-map.is-compact .story-map-contract-term { font-size:8px; } .story-map.is-compact .story-map-contract-kind { display:none; } .story-map.is-compact .story-map-column-label { font-size:8px; letter-spacing:0; min-height:22px; line-height:1.3; } .story-map.is-compact .story-map-routes { max-width:110px; } .story-map.is-compact .story-map-routes button { display:block; text-align:center; } .story-map.is-compact .story-map-route-mark { display:none; } .story-map.is-compact .story-map-routes strong,.story-map.is-compact .story-map-routes small { font-size:8px; } .story-map.is-compact .story-map-view-switch { display:flex; gap:4px; padding:8px 14px 0; } .story-map.is-compact .story-map-view-switch button { border:0; border-bottom:1px solid transparent; border-radius:0; padding:8px 10px; min-height:44px; font:10px/1.3 Arial,Helvetica,sans-serif; background:transparent; color:#969e9b; cursor:pointer; } .story-map.is-compact .story-map-view-switch button[aria-pressed=true] { color:#e4e6d9; border-color:#e4e6d9; } .story-map.is-compact .story-map-view-switch button:focus-visible { outline:2px solid #e4e6d9; outline-offset:2px; } .story-map.is-compact[data-panel=world] .story-timeline { display:none; } .story-map.is-compact[data-panel=timeline] .story-map-network { display:none; } .story-map.is-compact .story-timeline { padding:14px; min-height:220px; border-top:0; } .story-map.is-compact .story-timeline-chart { height:112px; max-height:none; } #experiment-lab .story-map.is-compact .story-timeline-heading h3 { font-size:19px; } .story-map.is-compact .story-timeline-low strong { font-size:18px; } .story-map.is-compact .story-timeline-low span { max-width:none; } .story-map.is-compact .story-timeline-heading { flex-wrap:nowrap; } .story-map.is-compact .story-timeline-legend { margin-top:8px; } .story-map.is-compact .story-timeline-legend .story-timeline-unit { display:none; } .story-map.is-compact .story-timeline-chart text { font-size:19px; } .story-map.is-compact .story-timeline-readout { display:none; } } @media(prefers-reduced-motion:reduce) { .story-map.is-compact *, .story-map.is-compact *::before, .story-map.is-compact *::after { transition:none !important; animation:none !important; } .story-map-update-pulse { display:none; } } .formula-hud { --hud-ink:#333; color:var(--hud-ink); background:#f5f5f5; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:12px 20px; margin:0; font-family:Consolas,'Courier New',monospace; font-size:11px; line-height:1.5; font-variant-numeric:tabular-nums; min-width:0; overflow:hidden; } .formula-hud-line { display:flex; align-items:center; min-width:0; height:24px; white-space:nowrap; overflow:hidden; gap:10px; } .formula-hud-status { color:#666; font-size:10px; letter-spacing:.05em; } .formula-hud-status-word { display:inline-flex; align-items:center; gap:7px; color:#333; flex:none; min-width:51px; } .formula-hud-signal { display:inline-block; width:4px; height:4px; background:#000; flex:none; } .formula-hud-separator { color:#999; } .formula-hud-runtime { flex:none; } .formula-hud-reference { overflow:hidden; text-overflow:ellipsis; letter-spacing:0; color:#666; margin-left:auto; } .formula-hud-pause { background:none; border:0; padding:2px 0 2px 6px; color:#666; font:inherit; letter-spacing:0; cursor:pointer; flex:none; } .formula-hud-pause:hover { color:#000; } .formula-hud-pause:focus-visible { outline:1px solid #000; outline-offset:1px; } #experiment-lab .story-shell .formula-hud-pause { min-height:24px; height:24px; min-width:44px; font-family:Consolas,'Courier New',monospace; } .formula-hud-prompt { color:#999; font-size:16px; line-height:1; flex:none; } .formula-hud-entry { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; } .formula-hud-node { color:#666; } .formula-hud-connector { color:#999; } .formula-hud-expression { color:#000; } .formula-hud-idle { color:#666; overflow:hidden; text-overflow:ellipsis; } .formula-hud.is-replaying .formula-hud-entry { animation:formula-trace-reveal .25s ease-out both; } .formula-hud.is-evaluating .formula-hud-cursor { animation:formula-cursor-pulse 1s steps(1,end) infinite; } @keyframes formula-trace-reveal { from { opacity:.35; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } } @keyframes formula-cursor-pulse { 0%,49% { opacity:1; } 50%,100% { opacity:0; } } @media(max-width:600px) { .formula-hud { padding:10px 14px; font-size:10px; } .formula-hud-line { gap:7px; } .formula-hud-status { font-size:9px; } .formula-hud-status-word { min-width:45px; } .formula-hud-runtime { letter-spacing:0; } .formula-hud-node { display:none; } .formula-hud-connector { display:none; } } @media(prefers-reduced-motion:reduce) { .formula-hud *, .formula-hud *::before, .formula-hud *::after { animation:none !important; transition:none !important; } } /* Scene instrument: two physical rows, always receipt-backed and deliberately abbreviated. The dark treatment is shared with the cash model below it. */ .scene-world .formula-hud { --hud-ink:#b6beb7; background:#111416; border-top:0; border-bottom:1px solid #ffffff16; color:var(--hud-ink); padding:9px 20px; font-size:10px; } .scene-world .formula-hud-line { height:22px; gap:9px; } .scene-world .formula-hud-status { color:#7f8983; font-size:9px; } .scene-world .formula-hud-status-word { color:#bbc5ba; } .scene-world .formula-hud-signal { background:#b6c4ad; width:4px; height:4px; border-radius:50%; box-shadow:0 0 6px #c2d0ad26; } .scene-world .formula-hud-separator,.scene-world .formula-hud-prompt,.scene-world .formula-hud-connector { color:#68756b; } .scene-world .formula-hud-reference,.scene-world .formula-hud-node,.scene-world .formula-hud-idle { color:#8e9a91; } .scene-world .formula-hud-expression { color:#d1d9c9; letter-spacing:.02em; } #experiment-lab .scene-world .formula-hud-pause { min-height:22px; height:22px; min-width:44px; padding:1px 0 1px 6px; border:0; color:#9eab9c; background:transparent; font:9px/1 Consolas,'Courier New',monospace; cursor:pointer; } #experiment-lab .scene-world .formula-hud-pause:hover { color:#e4ecd9; } #experiment-lab .scene-world .formula-hud-pause:focus-visible { outline:1px solid #dce6d1; outline-offset:1px; } @media(max-width:600px) { .scene-world .formula-hud { padding:7px 14px; font-size:9px; } .scene-world .formula-hud-status { font-size:8px; } .scene-world .formula-hud-line { height:20px; gap:7px; } #experiment-lab .scene-world .formula-hud-pause { height:20px; min-height:20px; font-size:8px; } } /* YieldGuard's scene experience. The established monochrome type and palette remain the baseline; movement now explains scene and model state changes. */ #experiment-lab:has(.scene-experience) { width:100%; min-width:0; box-sizing:border-box; max-width:1480px; padding:104px 40px 34px; } .scene-experience { --scene-ink:#202426; --scene-muted:#717774; --scene-rule:#dce0db; --scene-paper:#f6f7f3; color:var(--scene-ink); position:relative; } #experiment-lab .scene-experience button { font-family:Arial,Helvetica,sans-serif; cursor:pointer; transition:background .2s,border-color .2s,transform .2s,color .2s; } #experiment-lab .scene-experience button:focus-visible { outline:2px solid #202426; outline-offset:4px; } #experiment-lab .scene-experience button:disabled { cursor:default; opacity:.5; } #experiment-lab .scene-experience p { margin:0; } #experiment-lab .scene-masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:1px solid var(--scene-rule); } #experiment-lab .scene-masthead h1 { font:400 22px/1.15 'Times New Roman',Times,serif; letter-spacing:-.025em; margin:5px 0 0; } #experiment-lab .scene-eyebrow { display:block; font:10px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.11em; color:var(--scene-muted); } #experiment-lab .scene-library-toggle { display:flex; align-items:center; gap:18px; min-height:44px; border:1px solid var(--scene-rule); border-radius:30px; padding:9px 18px; color:var(--scene-ink); background:#fff; font-size:12px; } #experiment-lab .scene-library-toggle:hover { border-color:#202426; background:var(--scene-paper); } #experiment-lab .scene-theatre { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr); grid-template-areas:'narrative world' 'decisions decisions'; gap:0 50px; align-items:center; padding:28px 0 0; } #experiment-lab .scene-theatre > .scene-narrative { grid-area:narrative; } #experiment-lab .scene-theatre > .scene-world { grid-area:world; } #experiment-lab .scene-theatre > .scene-decision-dock { grid-area:decisions; } #experiment-lab .scene-narrative { min-width:0; position:relative; padding:8px 0 24px; animation:scene-narrative-enter .52s cubic-bezier(.2,.75,.3,1) both; } #experiment-lab .scene-chapter { display:flex; align-items:center; gap:10px; font:10px/1.5 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--scene-muted); margin:0 0 20px; } #experiment-lab .scene-chapter::before { content:''; display:inline-block; width:26px; height:1px; background:#7a817b; } #experiment-lab .scene-title { font:400 clamp(36px,3.55vw,54px)/1.03 'Times New Roman',Times,serif; letter-spacing:-.042em; margin:12px 0 20px; max-width:470px; text-wrap:balance; } #experiment-lab #scene-question:focus { outline:none; } #experiment-lab .scene-prose { font-size:14px; line-height:1.65; color:#5c6460; max-width:420px; } #experiment-lab .scene-prose + .scene-prose { margin-top:10px; } #experiment-lab .scene-cause { padding:12px 0 12px 14px; margin:20px 0; border-left:2px solid #a5aea3; color:#555f59; font-size:12px; line-height:1.55; max-width:410px; } #experiment-lab .scene-cause strong { color:#28312c; font-weight:500; } #experiment-lab .scene-impact { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:22px 0; } #experiment-lab .scene-impact strong { font:400 54px/1 'Times New Roman',Times,serif; letter-spacing:-.045em; font-variant-numeric:tabular-nums; } #experiment-lab .scene-impact > span { font-size:11px; line-height:1.45; color:var(--scene-muted); max-width:160px; } #experiment-lab .scene-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:24px; } #experiment-lab .scene-actions > .scene-text-button:disabled { display:none; } #experiment-lab .scene-primary,#experiment-lab .scene-secondary { display:inline-flex; gap:20px; align-items:center; justify-content:center; min-height:46px; border:1px solid #202426; padding:12px 20px; border-radius:30px; font-size:12px; font-weight:500; background:#202426; color:#f6f7f1; text-align:center; text-decoration:none; } #experiment-lab .scene-primary:hover:not(:disabled) { background:#3b4540; border-color:#3b4540; transform:translateY(-1px); } #experiment-lab .scene-secondary { background:transparent; color:#343d37; border-color:#ccd2cb; } #experiment-lab .scene-secondary:hover:not(:disabled) { background:#f0f3ed; border-color:#818d82; transform:translateY(-1px); } #experiment-lab .scene-primary:active:not(:disabled),#experiment-lab .scene-secondary:active:not(:disabled) { transform:translateY(0); } #experiment-lab .scene-world { min-width:0; background:#191c1e; color:#f1f0ea; border:1px solid #303538; border-radius:14px; overflow:hidden; box-shadow:0 24px 64px #16231a12,0 4px 12px #17251c08; position:relative; isolation:isolate; } #experiment-lab .scene-world::before { content:''; display:block; position:absolute; inset:0; border-radius:inherit; border:1px solid #ffffff07; pointer-events:none; z-index:3; } #experiment-lab .scene-world-caption { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding:10px 20px; background:#171a1c; border-top:1px solid #ffffff13; color:#a4aba6; font-size:9px; line-height:1.4; } #experiment-lab .scene-world-caption button { min-height:28px; padding:2px 0; background:transparent; border:0; border-bottom:1px solid #66706a; color:#d2d7ce; font-size:10px; } #experiment-lab .scene-world button:focus-visible,#experiment-lab .scene-world input:focus-visible { outline-color:#e4e6d9; } #experiment-lab .scene-world button:disabled { background:#303638; color:#9da59f; border-color:#4a5350; } #experiment-lab .scene-world .story-map-contract:active { background:#3b4440; } #experiment-lab .scene-path-nav { position:relative; display:flex; gap:0; justify-content:space-between; align-items:stretch; margin:22px 0 0; padding:0; width:100%; } #experiment-lab .scene-path-nav::before { content:''; position:absolute; left:24px; right:24px; top:18px; height:1px; background:#dce1da; z-index:0; } #experiment-lab .scene-path-nav button { position:relative; z-index:1; flex:1; min-width:0; min-height:62px; text-align:left; border:0; background:transparent; color:#798078; padding:0 12px 0 0; font-size:11px; } #experiment-lab .scene-path-nav button > span:first-child { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #d7ddd4; background:#fff; border-radius:50%; margin-bottom:8px; font-size:10px; font-variant-numeric:tabular-nums; transition:background .25s,border-color .25s,color .25s; } #experiment-lab .scene-path-nav button > strong { display:block; color:inherit; font-size:11px; font-weight:400; line-height:1.4; } #experiment-lab .scene-path-nav button[aria-current=step],#experiment-lab .scene-path-nav button[aria-current=true] { color:#242d26; } #experiment-lab .scene-path-nav button[aria-current=step] > span:first-child,#experiment-lab .scene-path-nav button[aria-current=true] > span:first-child { background:#202a23; color:#f3f5ee; border-color:#202a23; box-shadow:0 0 0 4px #fff,0 0 0 5px #dce2d5; } #experiment-lab .scene-path-nav button[data-complete=true] > span:first-child,#experiment-lab .scene-path-nav button.is-complete > span:first-child { color:#334031; background:#e9eee4; border-color:#cbd4c2; } #experiment-lab .scene-path-nav button:hover:not(:disabled) > span:first-child { border-color:#596855; } #experiment-lab .scene-path-nav button:disabled { opacity:.65; background:transparent; color:#939a91; } #experiment-lab .scene-decision-dock { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; animation:scene-dock-enter .5s cubic-bezier(.2,.75,.3,1) both; } #experiment-lab .scene-choice { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); align-content:start; gap:6px 14px; text-align:left; min-height:144px; padding:20px; background:#f6f7f3; border:1px solid #dce1d7; border-radius:10px; color:#28322b; overflow:hidden; } #experiment-lab .scene-choice::after { content:'↗'; position:absolute; right:14px; top:14px; font-size:16px; color:#7d8979; transition:transform .2s,color .2s; } #experiment-lab .scene-choice:hover:not(:disabled),#experiment-lab .scene-choice:focus-visible { transform:translateY(-4px); border-color:#7f8c77; background:#f0f3ea; box-shadow:0 9px 20px #25341b0b; } #experiment-lab .scene-choice:hover:not(:disabled)::after { transform:translate(2px,-2px); color:#28352a; } #experiment-lab .scene-choice:active:not(:disabled) { transform:translateY(-1px); } #experiment-lab .scene-choice > span:first-child { grid-row:1 / span 3; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid #c7d1c0; font:11px/1 Arial,Helvetica,sans-serif; color:#687461; } #experiment-lab .scene-choice > strong,#experiment-lab .scene-choice strong { font:500 13px/1.35 Arial,Helvetica,sans-serif; color:#2d392e; padding-right:10px; display:block; } #experiment-lab .scene-choice > span:not(:first-child),#experiment-lab .scene-choice p { font:11px/1.5 Arial,Helvetica,sans-serif; color:#65705f; } #experiment-lab .scene-choice .scene-choice-outcome { display:block; margin-top:7px; padding-top:8px; border-top:1px solid #dce3d4; font-size:11px; color:#475a3d; } #experiment-lab .scene-choice small { color:#65705f; font-size:11px; line-height:1.5; } #experiment-lab .scene-option-strip { display:flex; align-items:center; gap:20px; padding:16px 0; border-bottom:1px solid var(--scene-rule); margin-top:4px; } #experiment-lab .scene-option-count { flex:none; min-width:112px; } #experiment-lab .scene-option-count strong { font:400 30px/1 'Times New Roman',Times,serif; font-variant-numeric:tabular-nums; color:#2c382d; letter-spacing:-.04em; } #experiment-lab .scene-option-count span { font-size:10px; margin-left:8px; color:#657160; } #experiment-lab .scene-option-strip p { font-size:11px; color:#6f7969; max-width:430px; line-height:1.5; } #experiment-lab .scene-option-dots { display:flex; flex-wrap:wrap; gap:4px; max-width:168px; margin-left:auto; } #experiment-lab .scene-option-dots span { display:block; width:5px; height:5px; background:#d8dfd2; border-radius:50%; transition:background .3s,opacity .3s; } #experiment-lab .scene-option-dots span.is-viable,#experiment-lab .scene-option-dots span[data-viable=true] { background:#7b8b70; } #experiment-lab .scene-option-dots svg { max-width:170px; width:100%; height:auto; } #experiment-lab .scene-library { position:relative; padding:24px; margin:20px 0; border:1px solid #dce1d7; border-radius:12px; background:#f6f7f3; animation:scene-library-enter .32s ease-out both; } #experiment-lab .scene-library > h2 { font:400 26px/1.15 'Times New Roman',Times,serif; margin:0 0 18px; } #experiment-lab .scene-library-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #experiment-lab .scene-library-cards button { padding:20px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:144px; text-align:left; border:1px solid #d8ded2; background:#fff; color:#303a2e; border-radius:8px; } #experiment-lab .scene-library-cards button:hover { border-color:#8e9b81; transform:translateY(-2px); } #experiment-lab .scene-library-cards button[aria-pressed=true] { border-color:#75856b; background:#f0f4e9; } #experiment-lab .scene-library-cards strong { font:400 24px/1.05 'Times New Roman',Times,serif; letter-spacing:-.02em; } #experiment-lab .scene-library-cards small { font-size:11px; line-height:1.5; color:#6d7768; } #experiment-lab .scene-evidence { margin-top:24px; padding:26px; background:#f8f9f5; border:1px solid #dce1d6; border-radius:12px; animation:scene-library-enter .3s ease-out both; } #experiment-lab .scene-evidence h2 { font:400 28px/1.2 'Times New Roman',Times,serif; margin:0 0 20px; } #experiment-lab .scene-evidence h3 { font:500 13px/1.4 Arial,Helvetica,sans-serif; margin:20px 0 12px; } #experiment-lab .scene-evidence p,#experiment-lab .scene-evidence li { color:#626d5e; font-size:12px; } #experiment-lab .scene-evidence > header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; } #experiment-lab .scene-evidence summary { padding:14px 0; min-height:44px; cursor:pointer; font-size:12px; } #experiment-lab .scene-evidence .story-equation { font-size:13px; } #experiment-lab .scene-evidence .story-formulas { padding-left:20px; display:grid; gap:20px; grid-template-columns:1fr 1fr; } #experiment-lab .scene-evidence pre { background:#fff; border-color:#e1e5dc; } #experiment-lab .scene-notice { display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:#6b7664; font-size:10px; line-height:1.5; padding:14px 0 0; } #experiment-lab .scene-notice button { min-height:40px; padding:4px 0; border:0; border-bottom:1px solid #c4cebc; background:transparent; font-size:11px; color:#5b6b50; margin-left:auto; } #experiment-lab .scene-notice[role=alert] { color:#333c30; border-left:2px solid #65795a; padding:12px 16px; background:#f3f5ef; margin-top:18px; } #experiment-lab .scene-experience [data-phase=ending] .scene-impact strong { font-size:60px; } #experiment-lab .scene-top-actions { display:flex; align-items:center; gap:8px; } #experiment-lab .scene-text-button { border:0; border-bottom:1px solid #c8d0c3; background:transparent; color:#64735b; font-size:11px; min-height:42px; padding:6px 0; text-align:left; } #experiment-lab .scene-text-button:hover:not(:disabled) { color:#2c3e23; border-color:#63765a; } #experiment-lab .scene-assumption { color:#86907f; font-size:10px; line-height:1.5; margin-top:20px; max-width:430px; } #experiment-lab .scene-world-heading { display:flex; justify-content:space-between; gap:12px; padding:12px 20px; background:#191c1e; color:#bbc3b8; font-size:10px; } #experiment-lab .scene-world-heading > span:last-child { color:#8d9789; font-size:9px; } #experiment-lab .scene-impact > p { flex-basis:100%; font-size:12px; line-height:1.55; color:#65705f; margin-top:4px; max-width:400px; } #experiment-lab .scene-impact > small { flex-basis:100%; font-size:10px; color:#7a8573; margin-top:2px; line-height:1.5; } #experiment-lab .scene-path-nav button > span:nth-child(2) { font-size:11px; line-height:1.4; display:block; } #experiment-lab .scene-path-nav button > small { color:#83907b; font-size:9px; line-height:1.4; margin-top:3px; max-width:180px; } #experiment-lab .scene-choice > span:first-child { grid-row:1 / span 5; } #experiment-lab .scene-choice > :not(:first-child) { grid-column:2; } #experiment-lab .scene-choice .scene-choice-arrow { display:none; } #experiment-lab .scene-choice > small { margin-top:4px; font-size:10px; color:#6e7f60; } #experiment-lab .scene-option-count > span { display:block; margin:4px 0 0; font-size:9px; text-transform:uppercase; letter-spacing:.055em; } #experiment-lab .scene-option-count strong > span { font:400 17px/1 'Times New Roman',Times,serif; margin:0; color:#9aa491; } #experiment-lab .scene-option-copy { flex:1; } #experiment-lab .scene-option-copy > strong { display:block; font-size:12px; line-height:1.45; font-weight:500; margin-bottom:5px; } #experiment-lab .scene-option-dots .is-closed { background:#e6e9e0; border:1px solid #cbd4c0; } #experiment-lab .scene-option-dots span { animation:scene-dot-enter .35s ease-out both; } #experiment-lab .scene-kept { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:18px 0 0; font-size:11px; color:#627657; } #experiment-lab .scene-evidence-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; } #experiment-lab .scene-evidence-heading h2 { margin-bottom:20px; } #experiment-lab .scene-equation { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px 0; margin-top:14px; border-top:1px solid #dce2d4; border-bottom:1px solid #dce2d4; font-size:12px; color:#7d8b71; } #experiment-lab .scene-equation strong { color:#36492a; } #experiment-lab .scene-evidence ol { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-left:20px; margin:20px 0; } #experiment-lab .scene-evidence li { padding-left:4px; } #experiment-lab .scene-evidence li span { display:block; color:#7c8b70; margin-top:5px; } #experiment-lab .scene-evidence > p { margin-top:10px; overflow-wrap:anywhere; } #experiment-lab .scene-footer { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:20px; } @keyframes scene-dot-enter { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } } @keyframes scene-narrative-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes scene-dock-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes scene-library-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @media(min-width:1600px) { #experiment-lab:has(.scene-experience) { padding-top:124px; } #experiment-lab .scene-theatre { column-gap:70px; } } @media(max-width:1100px) { #experiment-lab:has(.scene-experience) { padding:100px 28px 30px; } #experiment-lab .scene-theatre { gap:0 30px; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); } #experiment-lab .scene-title { font-size:39px; } #experiment-lab .scene-choice { padding:16px; gap:6px 10px; } #experiment-lab .scene-impact strong { font-size:46px; } } @media(max-width:820px) { #experiment-lab:has(.scene-experience) { padding:88px 22px 24px; } #experiment-lab .scene-masthead { padding-bottom:16px; } #experiment-lab .scene-masthead h1 { font-size:20px; } #experiment-lab .scene-theatre { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0 20px; padding-top:22px; align-items:start; } #experiment-lab .scene-title { font-size:34px; } #experiment-lab .scene-prose { font-size:12px; } #experiment-lab .scene-chapter { margin-bottom:14px; font-size:9px; } #experiment-lab .scene-impact { margin:16px 0; } #experiment-lab .scene-impact strong { font-size:40px; } #experiment-lab .scene-impact > span { font-size:10px; } #experiment-lab .scene-actions { margin-top:18px; } #experiment-lab .scene-primary,#experiment-lab .scene-secondary { font-size:11px; padding:10px 16px; } #experiment-lab .scene-choice { grid-template-columns:1fr; gap:8px; min-height:162px; } #experiment-lab .scene-choice > span:first-child { grid-row:auto; } #experiment-lab .scene-option-dots { max-width:130px; } } @media(max-width:600px) { #experiment-lab:has(.scene-experience) { padding:82px 16px 24px; } #experiment-lab .scene-masthead { padding-bottom:14px; gap:12px; } #experiment-lab .scene-masthead h1 { font-size:19px; } #experiment-lab .scene-masthead .scene-eyebrow { font-size:8px; } #experiment-lab .scene-top-actions { gap:5px; flex-direction:row; align-items:stretch; } #experiment-lab .scene-masthead > div:first-child { min-width:0; flex:1; } #experiment-lab .scene-top-actions .scene-library-toggle { min-height:44px; justify-content:space-between; padding:7px 8px; font-size:9px; gap:5px; white-space:nowrap; } #experiment-lab .scene-library-toggle { padding:8px 12px; font-size:10px; gap:9px; flex:none; } #experiment-lab .scene-theatre { display:flex; flex-direction:column; gap:18px; padding-top:18px; } #experiment-lab .scene-narrative { padding:0; width:100%; } #experiment-lab .scene-chapter { margin:0 0 12px; font-size:9px; } #experiment-lab .scene-title { font-size:35px; line-height:1.04; margin:8px 0 12px; max-width:380px; } #experiment-lab .scene-prose { font-size:12px; line-height:1.55; max-width:none; } #experiment-lab .scene-cause { margin:12px 0; font-size:11px; padding:8px 0 8px 12px; } #experiment-lab .scene-impact { margin:14px 0 0; gap:8px 14px; } #experiment-lab .scene-impact strong { font-size:40px; } #experiment-lab .scene-actions { margin-top:16px; } #experiment-lab .scene-world { width:100%; border-radius:11px; box-shadow:0 10px 30px #16231a0b; } #experiment-lab .scene-world-caption { padding:8px 14px; font-size:8px; } #experiment-lab .scene-world-caption button { font-size:9px; } #experiment-lab .scene-world-heading { padding:10px 14px; font-size:9px; } #experiment-lab .scene-path-nav { margin-top:16px; } #experiment-lab .scene-path-nav::before { top:15px; left:16px; right:16px; } #experiment-lab .scene-path-nav button { min-height:55px; padding-right:6px; } #experiment-lab .scene-path-nav button > span:first-child { width:30px; height:30px; font-size:9px; margin-bottom:7px; } #experiment-lab .scene-path-nav button > strong { font-size:9px; } #experiment-lab .scene-path-nav button > span:nth-child(2) { font-size:9px; } #experiment-lab .scene-path-nav button > small { display:none; } #experiment-lab .scene-decision-dock { grid-template-columns:1fr; gap:7px; margin-top:14px; } #experiment-lab .scene-choice { min-height:0; grid-template-columns:24px minmax(0,1fr); padding:10px 12px; border-radius:8px; gap:3px 10px; } #experiment-lab .scene-choice > span:first-child { grid-row:1 / span 3; width:24px; height:24px; margin-top:1px; font-size:10px; } #experiment-lab .scene-choice > span:first-child { grid-row:1 / span 5; } #experiment-lab .scene-choice strong { font-size:12px; padding-right:20px; } #experiment-lab .scene-choice > span:not(:first-child),#experiment-lab .scene-choice p,#experiment-lab .scene-choice small { font-size:10px; } #experiment-lab .scene-choice .scene-choice-outcome { margin-top:3px; padding-top:4px; font-size:10px; } #experiment-lab .scene-choice::after { right:12px; top:12px; font-size:14px; } #experiment-lab .scene-choice:hover:not(:disabled) { transform:translateY(-1px); } #experiment-lab .scene-option-strip { gap:12px; padding:14px 0; flex-wrap:wrap; } #experiment-lab .scene-option-count { min-width:95px; } #experiment-lab .scene-option-count strong { font-size:25px; } #experiment-lab .scene-option-count span { font-size:9px; margin-left:5px; } #experiment-lab .scene-option-count > span { margin-left:0; font-size:8px; } #experiment-lab .scene-option-count strong > span { font-size:16px; margin-left:0; } #experiment-lab .scene-option-strip p { font-size:10px; max-width:100%; flex:1; min-width:170px; } #experiment-lab .scene-option-dots { max-width:100%; margin-left:0; gap:4px; } #experiment-lab .scene-option-dots span { width:4px; height:4px; } #experiment-lab .scene-library { margin:14px 0; padding:16px; } #experiment-lab .scene-library-cards { grid-template-columns:1fr; gap:8px; } #experiment-lab .scene-library-cards button { min-height:0; padding:14px; gap:7px; } #experiment-lab .scene-library-cards strong { font-size:22px; } #experiment-lab .scene-library-cards small { font-size:10px; } #experiment-lab .scene-evidence { padding:18px; } #experiment-lab .scene-evidence .story-formulas { grid-template-columns:1fr; } #experiment-lab .scene-evidence ol { grid-template-columns:1fr; } #experiment-lab .scene-evidence-heading { flex-direction:column; gap:8px; } #experiment-lab .scene-notice { font-size:9px; gap:6px 12px; } #experiment-lab .scene-notice button { font-size:10px; } #experiment-lab .scene-experience [data-phase=ending] .scene-impact strong { font-size:44px; } #experiment-lab .scene-assumption { margin-top:12px; font-size:9px; } #experiment-lab .scene-footer { gap:6px; padding-top:14px; } #experiment-lab .scene-footer .scene-text-button { font-size:9px; } /* On a small screen, the current decision comes before its supporting map. These are the same controls and the same model, not a reduced simulation. */ #experiment-lab .scene-experience { display:flex; flex-direction:column; } #experiment-lab .scene-masthead { order:0; } #experiment-lab .scene-library { order:1; } #experiment-lab .scene-path-nav { order:2; } #experiment-lab .scene-theatre { display:contents; } #experiment-lab .scene-narrative { order:3; margin-top:18px; } #experiment-lab .scene-decision-dock { order:4; } #experiment-lab .scene-world { order:5; margin-top:18px; } #experiment-lab .scene-option-strip { order:6; } #experiment-lab .scene-kept { order:7; } #experiment-lab .scene-notice[role=alert] { order:8; } #experiment-lab .scene-evidence { order:9; } #experiment-lab .scene-footer { order:10; } /* At the actual decision point, the model becomes a compact supporting instrument. Choices stay in the reading path, not below a long dashboard. */ #experiment-lab .scene-experience[data-phase=decision] .scene-theatre { gap:12px; } #experiment-lab .scene-experience[data-phase=decision] .scene-world .story-map-network { min-height:148px; padding-top:8px; padding-bottom:12px; } #experiment-lab .scene-experience[data-phase=decision] .scene-world .story-map-routes { display:none; } #experiment-lab .scene-experience[data-phase=decision] .scene-world .story-map-contract-term { display:none; } } @media(prefers-reduced-motion:reduce) { #experiment-lab .scene-experience *,#experiment-lab .scene-experience *::before,#experiment-lab .scene-experience *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } #experiment-lab .discovery-families{display:flex;gap:7px;overflow-x:auto;padding:20px 0;scrollbar-width:thin;scroll-snap-type:x proximity} #experiment-lab .discovery-families button{display:flex;align-items:center;gap:8px;flex:none;border:1px solid #dce0db;border-radius:28px;background:#fff;color:#555e59;padding:10px 16px;min-height:44px;font-size:12px;scroll-snap-align:start} #experiment-lab .discovery-families button small{font-size:9px;color:inherit;opacity:.7} #experiment-lab .discovery-families button[aria-pressed=true]{background:#222b27;color:#fff;border-color:#222b27} #experiment-lab .discovery-families button:hover{border-color:#222b27} #experiment-lab .discovery-stage{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;grid-template-areas:'question map' 'room map';gap:0 50px;align-items:start;padding-top:20px;animation:scene-narrative-enter .5s ease both} #experiment-lab .discovery-question{grid-area:question} #experiment-lab .discovery-map{grid-area:map} #experiment-lab .discovery-room-control{grid-area:room} #experiment-lab .discovery-question h2{font:400 clamp(32px,3vw,48px)/1.08 'Times New Roman',serif;letter-spacing:-.03em;margin:16px 0 20px;text-wrap:balance} #experiment-lab .discovery-question>p{color:#636d66;max-width:490px;font-size:14px;line-height:1.65} #experiment-lab .discovery-room{margin:30px 0 12px;padding:24px;border:1px solid #dce0db;border-radius:18px;background:#f5f7f2} #experiment-lab .discovery-room>label{font-size:14px;color:#26302b;font-weight:600;margin-bottom:16px} #experiment-lab .discovery-room-value{display:flex;gap:12px;flex-wrap:wrap;align-items:center} #experiment-lab .discovery-room-value strong{font:400 28px/1.2 'Times New Roman',serif;color:#27362c} #experiment-lab .discovery-room-value span{font-size:12px;color:#69736c} #experiment-lab .discovery-room input[type=range]{accent-color:#293b30;background:transparent;padding:0;min-height:44px;margin:8px 0 0;cursor:ew-resize} #experiment-lab .discovery-room p,#experiment-lab .discovery-room small{font-size:11px;line-height:1.6;color:#636d66;margin:6px 0 0} #experiment-lab .discovery-room-verdict{display:block;font-size:14px;line-height:1.5;margin:18px 0} #experiment-lab .discovery-room .scene-primary{width:100%;font-size:12px} #experiment-lab .discovery-map{background:#202725;color:#e2e8e0;border:1px solid #333c36;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px #12211816;min-width:0} #experiment-lab .discovery-map-heading{display:flex;justify-content:space-between;padding:18px 22px 8px;font:10px/1.5 Consolas,monospace;letter-spacing:.08em;color:#b7c0b8} #experiment-lab .discovery-surface{display:block;width:100%;touch-action:none;cursor:crosshair;outline-offset:-3px} #experiment-lab .discovery-surface:focus-visible,#experiment-lab .discovery-axis-controls input:focus-visible{outline:2px solid #e0edce;outline-offset:-3px} #experiment-lab .discovery-surface text{font:11px Arial,sans-serif;fill:#bec7bf} #experiment-lab .discovery-cell.is-pass{fill:#b9c8b0;fill-opacity:.72} #experiment-lab .discovery-cell.is-fail{stroke:#657269;stroke-opacity:.2;stroke-width:.4} #experiment-lab .discovery-cursor{transition:opacity .2s} #experiment-lab .discovery-map-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:0 24px 18px;color:#c0c9c0;font-size:10px} #experiment-lab .discovery-axis-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 24px 0;border-top:1px solid #414a44} #experiment-lab .discovery-axis-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;color:#e0e6de;font-size:11px;min-width:0} #experiment-lab .discovery-axis-controls label>span{color:#c6cfc5} #experiment-lab .discovery-axis-controls small{font-size:9px;color:#a4b09f} #experiment-lab .discovery-axis-controls strong{font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;text-align:right} #experiment-lab .discovery-axis-controls input[type=range]{grid-column:1/-1;padding:0;background:transparent;accent-color:#d3dfc6;min-height:44px;margin:0;cursor:ew-resize} #experiment-lab .discovery-selected{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px 22px;background:#ffffff06;border-top:1px solid #414a44} #experiment-lab .discovery-selected>div{flex:none} #experiment-lab .discovery-selected span{font-size:10px;color:#c0c9ba;display:block} #experiment-lab .discovery-selected strong{font:400 28px/1.3 'Times New Roman',serif;display:block;margin-top:6px} #experiment-lab .discovery-selected p{font-size:11px;line-height:1.55;color:#c3cdc2;max-width:220px} #experiment-lab .discovery-interaction{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;border-top:1px solid #dce0db;margin-top:34px;padding-top:24px} #experiment-lab .discovery-interaction h2{font:400 25px/1.2 'Times New Roman',serif;margin:10px 0} #experiment-lab .discovery-interaction p{font-size:11px;color:#636d66} #experiment-lab .discovery-interaction-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:16px} #experiment-lab .discovery-interaction-values>span{font-size:11px;color:#69736c} #experiment-lab .discovery-interaction-values strong{display:block;font:400 23px/1.3 'Times New Roman',serif;margin-top:8px;color:#202b24;overflow-wrap:anywhere} @media(max-width:950px){#experiment-lab .discovery-stage{gap:25px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}#experiment-lab .discovery-room{padding:18px}#experiment-lab .discovery-selected{display:block}#experiment-lab .discovery-selected p{max-width:none;margin-top:12px}#experiment-lab .discovery-interaction{grid-template-columns:1fr}} @media(max-width:700px){#experiment-lab .discovery-stage{display:flex;flex-direction:column;padding-top:8px;gap:22px}#experiment-lab .discovery-question,#experiment-lab .discovery-map{width:100%}#experiment-lab .discovery-question h2{font-size:32px;margin:12px 0}#experiment-lab .discovery-room{margin:18px 0 6px}#experiment-lab .discovery-map-heading{padding:16px;font-size:9px}#experiment-lab .discovery-axis-controls{padding:12px 16px 0;gap:12px}#experiment-lab .discovery-interaction-values{grid-template-columns:1fr 1fr}#experiment-lab .discovery-families{padding:14px 0}#experiment-lab .discovery-surface text{font-size:12px}} @media(prefers-reduced-motion:reduce){#experiment-lab .discovery-stage,#experiment-lab .discovery-cursor{animation:none;transition:none}} #experiment-lab .discovery-experience,#experiment-lab .discovery-experience>*{min-width:0;max-width:100%;box-sizing:border-box} #experiment-lab .discovery-stage>*{min-width:0;max-width:100%;box-sizing:border-box} #experiment-lab .discovery-experience .scene-masthead>div{min-width:0;flex:1} #experiment-lab .discovery-experience .scene-masthead h1{white-space:normal} #experiment-lab .discovery-experience .scene-masthead button{flex:none} /* Reference-led, local-only visual refresh. YieldGuard retains its own type, graphite and sage palette. Product illustrations remain live kernel output. */ body:has(#experiment-lab) { background:#fafbf8; color:#202a25; } body:has(#experiment-lab) .page-module__E0kJGG__main { background:transparent; } .brand-skip { position:absolute; left:18px; top:-80px; z-index:30; padding:12px 18px; background:#26392b; color:#fff; border-radius:5px; font:13px Arial,Helvetica,sans-serif; } .brand-skip:focus { top:12px; } .brand-nav { position:relative; z-index:20; display:flex; align-items:center; gap:40px; width:min(1280px,calc(100% - 80px)); height:88px; margin:0 auto; border-bottom:1px solid #dce3da; font:13px/1.3 Arial,Helvetica,sans-serif; } .brand-logo { display:inline-flex; align-items:center; min-height:44px; flex:none; } .brand-logo img { display:block; width:auto; max-width:164px; height:31px; } .brand-links { display:flex; align-items:center; gap:32px; margin-left:auto; } .brand-links a { display:flex; align-items:center; min-height:44px; color:#425049; text-decoration:none; position:relative; } .brand-links a::after { content:''; position:absolute; bottom:6px; left:0; right:0; height:1px; background:#52634f; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; } .brand-links a:hover::after,.brand-links a[aria-current=page]::after { transform:scaleX(1); } .brand-account { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border:1px solid #28372e; border-radius:7px; background:#28372e; color:#fff; text-decoration:none; transition:background .2s,transform .2s; } .brand-account:hover { background:#415541; transform:translateY(-1px); } .brand-nav a:focus-visible { outline:2px solid #344e38; outline-offset:5px; } #experiment-lab:has([data-lab-view]:not([hidden]) .scene-experience) { max-width:1360px; padding:28px 40px 48px; } #experiment-lab .scene-experience { --scene-ink:#202a25; --scene-muted:#68766b; --scene-rule:#dce3da; --scene-paper:#f0f4ed; isolation:isolate; } #experiment-lab .scene-masthead { border:0; padding:4px 0 16px; gap:28px; } #experiment-lab .scene-masthead h1 { font:400 19px/1.3 Arial,Helvetica,sans-serif; letter-spacing:-.03em; margin:6px 0 0; } #experiment-lab .scene-eyebrow { font-size:10px; letter-spacing:.14em; color:#56684c; } #experiment-lab .scene-library-toggle { border:1px solid #d4ddcf; border-radius:6px; padding:9px 14px; font-size:12px; min-height:44px; background:#ffffffa6; gap:20px; } #experiment-lab .scene-library-toggle:hover { background:#fff; border-color:#82927c; box-shadow:0 3px 12px #20302308; } #experiment-lab .scene-theatre { position:relative; isolation:isolate; grid-template-columns:minmax(0,.91fr) minmax(0,1.15fr); align-items:center; gap:0 62px; padding:34px 0 8px; } #experiment-lab .scene-theatre::before { content:''; position:absolute; z-index:-1; top:8%; right:-28px; bottom:-32px; width:63%; background:radial-gradient(ellipse at 96% 0%,#f8faf4 5%,#dfe8d4 30%,transparent 58%),linear-gradient(140deg,#edf3e5 10%,#c3d2b5 52%,#93aa8040 68%,#eef3e8 87%); border-radius:46% 8% 14% 5% / 50% 14% 12% 8%; transform:skewY(-6deg); pointer-events:none; } #experiment-lab .scene-theatre::after { content:''; position:absolute; z-index:-1; top:3%; right:3%; bottom:-13px; width:49%; border-right:1px solid #becbb46b; border-left:1px solid #b8c7ac73; border-radius:42% 20% 14% 12% / 44% 28% 20% 12%; box-shadow:16px 0 0 #d9e4ce52,32px 0 0 #d9e4ce35; transform:skewY(-11deg); pointer-events:none; } #experiment-lab .scene-narrative { padding:16px 0 24px; } #experiment-lab .scene-chapter { margin:0 0 18px; font-size:10px; letter-spacing:.12em; color:#61705f; } #experiment-lab .scene-chapter::before { width:32px; background:#6f8664; } #experiment-lab .scene-title { font:400 clamp(43px,4.7vw,67px)/1.02 'Times New Roman',Times,serif; letter-spacing:-.055em; max-width:550px; margin:14px 0 24px; color:#202a25; text-wrap:balance; } #experiment-lab .scene-prose { font-size:16px; line-height:1.7; color:#59665c; max-width:475px; } #experiment-lab .scene-cause { font-size:13px; line-height:1.7; color:#62705f; margin:20px 0 22px; padding:0; border:0; max-width:455px; } #experiment-lab .scene-primary,#experiment-lab .scene-secondary { min-height:48px; padding:13px 20px; border-radius:7px; font-size:13px; gap:26px; letter-spacing:.005em; } #experiment-lab .scene-primary { background:#26392b; border-color:#26392b; box-shadow:0 3px 6px #26392b0b; } #experiment-lab .scene-primary:hover:not(:disabled) { background:#41563b; border-color:#41563b; transform:translateY(-2px); } #experiment-lab .scene-secondary { background:#ffffffb3; border-color:#cbd6c5; color:#354731; } #experiment-lab .scene-secondary:hover:not(:disabled) { background:#fff; border-color:#819279; } #experiment-lab .scene-text-button { color:#4c6345; font-size:12px; min-height:44px; } #experiment-lab .scene-assumption { font-size:11px; line-height:1.65; color:#56684c; margin-top:20px; max-width:465px; } #experiment-lab .scene-actions { margin-top:25px; gap:12px; } #experiment-lab .scene-scenario-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:22px; color:#52654a; font:11px/1.4 Arial,Helvetica,sans-serif; } #experiment-lab .scene-scenario-meta > span:first-child { border:1px solid #cad6c1; border-radius:4px; padding:5px 9px; background:#edf2e7; } #experiment-lab .scene-context-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding-top:24px; margin:28px 0 0; border-top:1px solid #d6dfcf; } #experiment-lab .scene-context-metrics > div,#experiment-lab .scene-context-metrics > dl { min-width:0; margin:0; } #experiment-lab .scene-context-metrics dt { font-size:10px; line-height:1.45; color:#62735d; margin-bottom:7px; } #experiment-lab .scene-context-metrics dd { margin:0; font:400 24px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.055em; color:#27382b; } #experiment-lab .scene-context-metrics dd small { display:block; font-size:10px; letter-spacing:0; color:#56684c; margin-top:4px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-path-nav { display:none; } #experiment-lab .scene-experience[data-phase=briefing] .scene-theatre { padding-top:28px; min-height:630px; align-items:start; } #experiment-lab .scene-experience[data-phase=briefing] .scene-narrative { padding-top:34px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-chapter { display:none; } #experiment-lab .scene-experience[data-phase=briefing] .scene-world { transform:translateY(-4px); } #experiment-lab .scene-world { position:relative; min-width:0; background:#fff; color:#25342a; border:1px solid #d5ded0; border-radius:15px; box-shadow:0 34px 75px -25px #263b2b3b,0 6px 20px #293b2112; overflow:hidden; isolation:isolate; animation:brand-surface-enter .8s cubic-bezier(.16,.75,.25,1) both; } #experiment-lab .scene-world::before { border-color:#ffffffa6; } #experiment-lab .scene-world-heading { background:#fcfdfb; color:#435541; padding:12px 22px; font-size:11px; border-bottom:1px solid #e0e6dc; } #experiment-lab .scene-world-heading > span:first-child::before { content:''; width:6px; height:6px; display:inline-block; border-radius:50%; background:#6d8662; margin-right:8px; vertical-align:1px; } #experiment-lab .scene-world-heading > span:last-child { font-size:10px; color:#56684c; } #experiment-lab .scene-world .formula-hud { position:relative; margin:0; background:#26322c; padding:6px 22px; } #experiment-lab .scene-world .formula-hud-line { height:22px; } #experiment-lab .scene-world .formula-hud-status { padding-right:54px; } #experiment-lab .scene-world .formula-hud-operator { padding-right:54px; } #experiment-lab .scene-world .formula-hud-pause { position:absolute; right:14px; top:6px; height:44px; min-height:44px; min-width:44px; padding:0 3px; border-radius:4px; } #experiment-lab .scene-world .formula-hud-pause:hover { background:#ffffff0b; } #experiment-lab .scene-world-caption { padding:2px 22px; font-size:10px; background:#f5f8f1; border-top:1px solid #dce5d5; color:#526a49; } #experiment-lab .scene-world-caption button { min-height:44px; color:#415939; border-color:#afbea5; font-size:11px; } #experiment-lab .scene-world button:focus-visible,#experiment-lab .scene-world input:focus-visible { outline-color:#3a5234; } #experiment-lab .scene-world .formula-hud-pause:focus-visible { outline-color:#e2ebd9; } #experiment-lab .scene-world .story-map.is-compact { --story-ink:#23362a; --story-muted:#6b7b62; --story-rule:#dce5d5; background:#fff; color:#24342a; } #experiment-lab .story-map.is-compact .story-map-heading { padding:18px 22px 0; } #experiment-lab .story-map.is-compact .story-map-eyebrow,#experiment-lab .story-map.is-compact .story-map-column-label,#experiment-lab .story-map.is-compact .story-map-model-label { color:#56684c; font-size:10px; letter-spacing:.04em; } #experiment-lab .story-map.is-compact .story-map-network { gap:22px; min-height:170px; padding:12px 22px; grid-template-columns:minmax(0,1fr) minmax(135px,.98fr) minmax(0,1fr); background:radial-gradient(ellipse at center,#eef3e66e,transparent 70%); } #experiment-lab .story-map.is-compact .story-map-connectors { width:calc(100% - 44px); height:calc(100% - 48px); inset:24px 22px; } #experiment-lab .story-map.is-compact .story-map-connectors path { stroke:#a6b798; } #experiment-lab .story-map.is-compact .story-map-connectors path.is-active { stroke:#82966d; } #experiment-lab .story-map.is-compact .story-map-update-pulse path { stroke:#4c6a3f; } #experiment-lab .story-map.is-compact .story-map-contract { border:1px solid #d6e0cd; border-radius:8px; background:#fff; color:#2b3c2a; padding:13px 12px; gap:4px; box-shadow:0 6px 15px #20391b07; } #experiment-lab .story-map.is-compact .story-map-contract:hover,#experiment-lab .story-map.is-compact .story-map-contract:focus-visible { background:#f6f9f1; border-color:#8a9d7b; box-shadow:0 8px 20px #2d432219; } #experiment-lab .story-map.is-compact .story-map-contract.is-active { background:#f0f5e9; border-color:#a8ba98; box-shadow:0 0 0 3px #dae7cd60; } #experiment-lab .story-map.is-compact .story-map-contract-kind { color:#56684c; font-size:9px; } #experiment-lab .story-map.is-compact .story-map-contract-kind span { color:#56684c; } #experiment-lab .story-map.is-compact .story-map-contract-name { color:#384c30; font-size:12px; line-height:1.4; } #experiment-lab .story-map.is-compact .story-map-contract-amount { color:#233a26; font-size:24px; letter-spacing:-.045em; } #experiment-lab .story-map.is-compact .story-map-contract-term { color:#5c744f; font-size:11px; } #experiment-lab .story-map.is-compact .story-map-cash { background:#fcfef8; min-height:126px; max-width:150px; padding:12px; box-shadow:0 10px 28px #52743d0c; } #experiment-lab .story-map.is-compact .story-map-cash strong { color:#243923; font-size:41px; } #experiment-lab .story-map.is-compact .story-map-cash > span,#experiment-lab .story-map.is-compact .story-map-cash .story-map-cash-label { color:#56684c; font-size:10px; } #experiment-lab .story-orbit-track { stroke:#cfddc4; } #experiment-lab .story-orbit-inner { stroke:#e4ebdc; } #experiment-lab .story-orbit-position { stroke:#6e895d; } #experiment-lab .story-map.is-compact .story-map-cash .story-map-preview-cash { color:#526b43; border-color:#c9d8bc; } #experiment-lab .story-map.is-compact .story-map-routes strong { color:#526b44; font-size:11px; } #experiment-lab .story-map.is-compact .story-map-routes small { color:#59704d; font-size:10px; } #experiment-lab .story-map.is-compact .story-map-routes button { min-height:44px; } #experiment-lab .story-map.is-compact .story-map-route-mark { color:#56684c; } #experiment-lab .story-map.is-compact .story-map-empty { color:#56684c; border-color:#d5dfcd; } #experiment-lab .story-map.is-compact .story-timeline { background:#fff; border-color:#e2e9dc; padding:17px 22px 16px; } #experiment-lab .story-map.is-compact .story-timeline-heading h3 { color:#283e29; font:400 15px/1.4 Arial,Helvetica,sans-serif; letter-spacing:-.015em; max-width:360px; margin-top:5px; } #experiment-lab .story-map.is-compact .story-timeline-low strong { color:#2d472c; font-size:22px; } #experiment-lab .story-map.is-compact .story-timeline-low span { color:#56684c; font-size:10px; } #experiment-lab .story-map.is-compact .story-timeline-legend { color:#56684c; font-size:10px; } #experiment-lab .story-map.is-compact .story-line-key { border-color:#617e4b; } #experiment-lab .story-map.is-compact .story-line-key.is-previous { border-color:#9aa88e; } #experiment-lab .story-map.is-compact .story-line-key.is-preview { border-color:#405933; } #experiment-lab .story-map.is-compact .story-timeline-chart { max-height:105px; } #experiment-lab .story-map.is-compact .story-timeline-chart text { fill:#536849; font-size:15px; } #experiment-lab .story-map.is-compact .story-chart-grid { stroke:#e9eee3; } #experiment-lab .story-map.is-compact .story-chart-zero { stroke:#b5c4a7; } #experiment-lab .story-map.is-compact .story-chart-hatch { stroke:#b8c8aa; } #experiment-lab .story-map.is-compact .story-chart-area { fill:#a9c09320; } #experiment-lab .story-map.is-compact .story-chart-current { stroke:#395331; stroke-width:2.7; stroke-dasharray:none; animation:none; opacity:1; } #experiment-lab .story-map.is-compact .story-chart-previous { stroke:#7a8d6b; stroke-width:2; } #experiment-lab .story-map.is-compact .story-chart-preview { stroke:#202e1b; stroke-width:2.4; } #experiment-lab .story-map.is-compact .story-chart-cursor { stroke:#9baf8b; } #experiment-lab .story-map.is-compact .story-chart-point { fill:#526f40; stroke:#fff; } #experiment-lab .story-map.is-compact .story-timeline-scrub,#experiment-lab .story-map.is-compact .story-timeline-scrub span { color:#56684c; font-size:10px; } #experiment-lab .story-map.is-compact .story-timeline-scrub input[type=range] { accent-color:#6a8655; height:44px; min-height:44px; } #experiment-lab .story-map.is-compact .story-timeline-readout { border-color:#e4ebdc; padding-top:12px; } #experiment-lab .story-map.is-compact .story-timeline-readout small { color:#5c724f; font-size:10px; } #experiment-lab .story-map.is-compact .story-timeline-readout strong { color:#375031; font-size:13px; } #experiment-lab .story-map.is-compact .story-map-footnote { color:#586e4b; font-size:10px; line-height:1.55; } #experiment-lab .story-map.is-compact .story-map-view-switch { padding:8px 22px 0; } #experiment-lab .story-map.is-compact .story-map-view-switch button { color:#56684c; font-size:11px; border-radius:5px 5px 0 0; } #experiment-lab .story-map.is-compact .story-map-view-switch button[aria-pressed=true] { color:#3a552f; border-color:#79956b; background:#f2f6ec; } #experiment-lab .scene-path-nav { margin:20px 0 5px; padding:0; } #experiment-lab .scene-path-nav button { min-height:76px; } #experiment-lab .scene-path-nav button > span:nth-child(2) { font-size:12px; color:#596e4e; } #experiment-lab .scene-path-nav button > small { font-size:10px; color:#56684c; } #experiment-lab .scene-decision-dock { margin-top:34px; gap:16px; } #experiment-lab .scene-choice { background:#fff; border:1px solid #d6e0ce; min-height:178px; border-radius:11px; padding:23px; box-shadow:0 5px 18px #273e1c04; gap:8px 16px; } #experiment-lab .scene-choice:hover:not(:disabled),#experiment-lab .scene-choice:focus-visible { background:#f7faf2; border-color:#8ba477; box-shadow:0 12px 28px #39512712; transform:translateY(-5px); } #experiment-lab .scene-choice strong { font-size:15px; line-height:1.4; color:#2a4129; } #experiment-lab .scene-choice > span:not(:first-child),#experiment-lab .scene-choice p { font-size:12px; line-height:1.6; color:#56684c; } #experiment-lab .scene-choice .scene-choice-outcome { font-size:13px; margin-top:10px; color:#3d5b30; } #experiment-lab .scene-choice > small { color:#56684c; font-size:11px; } #experiment-lab .scene-choice > span:first-child { width:28px; height:28px; color:#56684c; background:#eff5e7; border-color:#d5e1c8; font-size:11px; } #experiment-lab .scene-option-strip { margin-top:30px; padding:22px 0; border-top:1px solid #dfe6d8; border-bottom:1px solid #dfe6d8; gap:26px; } #experiment-lab .scene-option-copy > strong { font-size:13px; } #experiment-lab .scene-option-strip p { font-size:11px; line-height:1.65; max-width:510px; color:#56684c; } #experiment-lab .scene-option-count strong > span { color:#56684c; } #experiment-lab .scene-option-count strong { font-size:36px; } #experiment-lab .scene-option-count > span { font-size:10px; } #experiment-lab .scene-option-dots { gap:5px; } #experiment-lab .scene-option-dots span { width:6px; height:6px; } #experiment-lab .scene-option-dots span.is-viable { background:#789663; } #experiment-lab .scene-impact strong { font-family:Arial,Helvetica,sans-serif; font-size:54px; letter-spacing:-.065em; color:#34522e; } #experiment-lab .scene-impact > span { font-size:12px; max-width:190px; } #experiment-lab .scene-impact > p { font-size:14px; color:#62765a; max-width:465px; } #experiment-lab .scene-impact > small { font-size:11px; } #experiment-lab .scene-library { padding:32px; background:#f1f5eb; border:1px solid #d9e3ce; border-radius:14px; } #experiment-lab .scene-library > h2,#experiment-lab .scene-collection h2 { font:400 42px/1.08 'Times New Roman',Times,serif; letter-spacing:-.04em; color:#273a29; margin:12px 0 15px; } #experiment-lab .scene-library-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } #experiment-lab .scene-library-card { position:relative; display:flex; align-items:flex-start; flex-direction:column; min-height:235px; padding:25px; text-align:left; color:#2a402b; background:#fff; border:1px solid #d8e2d0; border-radius:12px; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; } #experiment-lab .scene-library-card::after { display:none; } #experiment-lab .scene-library-card:nth-child(2)::after { border-radius:8px; transform:rotate(30deg); right:-90px; top:2px; } #experiment-lab .scene-library-card:nth-child(3)::after { border-radius:6px; width:115px; height:115px; right:-45px; top:-26px; transform:rotate(45deg); } #experiment-lab .scene-library-card:hover { transform:translateY(-5px); border-color:#8ea779; box-shadow:0 15px 35px #283e1e10; } #experiment-lab .scene-library-card > * { position:relative; z-index:1; } #experiment-lab .scene-library-card .scene-case-index,#experiment-lab .scene-library-card > span:first-child { display:flex; justify-content:space-between; width:100%; font:11px/1.3 Arial,Helvetica,sans-serif; color:#56684c; letter-spacing:.1em; margin-bottom:18px; } #experiment-lab .scene-case-index > span { font-size:17px; line-height:1; } #experiment-lab .scene-library-card .scene-case-visual { display:block; position:relative; width:100%; height:116px; flex:none; margin:0 0 22px; background:radial-gradient(ellipse at 65% 40%,#cfddc2,transparent 66%),#f1f6eb; border-radius:8px; overflow:hidden; } #experiment-lab .scene-case-visual i { position:absolute; display:block; border:1px solid #aebe9f; background:#fbfdf7; box-shadow:0 6px 12px #4662360c; transition:transform .35s cubic-bezier(.2,.7,.3,1); } #experiment-lab .scene-case-payday i { width:31%; height:51%; top:29%; border-radius:6px; transform:rotate(-7deg); } #experiment-lab .scene-case-payday i::before { content:''; position:absolute; width:30%; height:3px; left:17%; top:24%; background:#b3c5a2; box-shadow:0 12px 0 #d1ddc3; } #experiment-lab .scene-case-payday i:nth-child(1) { left:14%; } #experiment-lab .scene-case-payday i:nth-child(2) { left:29%; top:23%; } #experiment-lab .scene-case-payday i:nth-child(3) { left:44%; top:17%; } #experiment-lab .scene-case-payday i:nth-child(4) { width:23%; height:7px; left:42%; top:84%; border:0; border-radius:10px; background:#b4c9a05c; filter:blur(2px); } #experiment-lab .scene-case-currency i { border-radius:50%; width:56px; height:56px; top:30px; display:grid; place-items:center; font:400 30px/1 'Times New Roman',Times,serif; color:#56684c; } #experiment-lab .scene-case-currency i:nth-child(1) { left:21%; } #experiment-lab .scene-case-currency i:nth-child(1)::before { content:'$'; } #experiment-lab .scene-case-currency i:nth-child(2) { right:21%; } #experiment-lab .scene-case-currency i:nth-child(2)::before { content:'€'; } #experiment-lab .scene-case-currency i:nth-child(3) { width:30%; height:1px; top:42px; left:35%; transform:rotate(-9deg); border:0; background:#abbf96; box-shadow:none; } #experiment-lab .scene-case-currency i:nth-child(4) { width:30%; height:1px; top:74px; left:35%; transform:rotate(-9deg); border:0; background:#abbf96; box-shadow:none; } #experiment-lab .scene-case-bottleneck i { width:42px; height:31px; border-radius:6px; left:18%; top:17px; } #experiment-lab .scene-case-bottleneck i:nth-child(2) { top:68px; } #experiment-lab .scene-case-bottleneck i:nth-child(3) { width:58px; height:58px; left:58%; top:30px; border-radius:50%; background:#e4efda; box-shadow:0 0 0 8px #b9cfa440; } #experiment-lab .scene-case-bottleneck i:nth-child(4) { width:30%; height:52px; left:31%; top:32px; border:1px solid #aebe9f; border-left:0; background:transparent; border-radius:0 50% 50% 0; box-shadow:none; } #experiment-lab .scene-library-card:hover .scene-case-payday i:not(:last-child) { transform:rotate(0deg) translateY(-2px); } #experiment-lab .scene-library-card:hover .scene-case-currency i:nth-child(1) { transform:translateX(-5px); } #experiment-lab .scene-library-card:hover .scene-case-currency i:nth-child(2) { transform:translateX(5px); } #experiment-lab .scene-library-card:hover .scene-case-bottleneck i:nth-child(3) { transform:scale(1.07); } #experiment-lab .scene-library-card > strong { font:400 27px/1.1 'Times New Roman',Times,serif; letter-spacing:-.035em; margin-bottom:10px; color:#2f462e; } #experiment-lab .scene-library-card p { font-size:12px; line-height:1.65; color:#56684c; max-width:250px; margin-bottom:20px; } #experiment-lab .scene-library-card small { margin-top:auto; font-size:11px; color:#526f41; } #experiment-lab .scene-collection { position:relative; margin:76px 0 0; padding:40px 0 0; border-top:1px solid #dce6d2; } #experiment-lab .scene-collection > p,#experiment-lab .scene-collection > div > p:not(.scene-eyebrow) { color:#607651; font-size:14px; max-width:620px; line-height:1.65; margin:0 0 28px; } #experiment-lab .scene-collection .scene-library-cards { margin-top:28px; } #experiment-lab .scene-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:36px; padding:28px 0; border-top:1px solid #dce6d2; border-bottom:1px solid #dce6d2; gap:25px; } #experiment-lab .scene-capabilities > * { min-width:0; padding-left:20px; border-left:1px solid #cbdabe; font:12px/1.55 Arial,Helvetica,sans-serif; color:#56684c; } #experiment-lab .scene-capabilities strong { display:block; font:400 23px/1.3 Arial,Helvetica,sans-serif; letter-spacing:-.04em; margin-bottom:5px; color:#324b2c; } #experiment-lab .scene-evidence { border-radius:12px; padding:30px; border:1px solid #d7e1ce; background:#fff; margin-top:32px; box-shadow:0 8px 24px #1b3b0f06; } #experiment-lab .scene-evidence h2 { font:400 36px/1.1 'Times New Roman',Times,serif; letter-spacing:-.03em; } #experiment-lab .scene-evidence p,#experiment-lab .scene-evidence li { font-size:13px; line-height:1.7; } #experiment-lab .scene-footer { padding-top:25px; } #experiment-lab .scene-footer .scene-text-button { min-height:44px; } #experiment-lab .discovery-families { padding:20px 0 26px; gap:8px; scroll-snap-type:none; scroll-padding-inline:4px; } #experiment-lab .discovery-families button { min-height:46px; padding:10px 16px; border-radius:6px; background:#fff; border-color:#d5dfcb; } #experiment-lab .discovery-families button[aria-pressed=true] { background:#2e452f; border-color:#2e452f; } #experiment-lab .discovery-stage { gap:0 65px; padding-top:24px; } #experiment-lab .discovery-question h2 { font-size:51px; line-height:1.04; letter-spacing:-.05em; margin:16px 0 23px; } #experiment-lab .discovery-question > p { font-size:15px; line-height:1.75; } #experiment-lab .discovery-room { border-radius:12px; background:#fff; border-color:#d5e0c9; box-shadow:0 8px 30px #263e1907; padding:25px; } #experiment-lab .discovery-room-value strong { font-family:Arial,Helvetica,sans-serif; font-size:26px; letter-spacing:-.045em; } #experiment-lab .discovery-map { border-radius:14px; background:#25332a; border-color:#344a36; box-shadow:0 30px 70px -25px #293f2440; } #experiment-lab .discovery-map-heading { padding:21px 24px 10px; color:#c3d2b8; font-size:11px; } #experiment-lab .discovery-selected { padding:22px 24px; } #experiment-lab .discovery-interaction { padding-top:28px; margin-top:42px; } #experiment-lab .discovery-interaction h2 { font-size:29px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) { padding-top:48px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) .HeaderSection-module__IJW6oG__headerSection { padding-top:40px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) .HeaderSection-module__IJW6oG__mainTitle { font-size:clamp(46px,5vw,72px); letter-spacing:-.05em; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-section=intro] { margin:0; max-width:900px; padding:10px 0 45px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-layout=laboratory] { border:1px solid #d8e1cf; background:#fff; border-radius:14px; padding:30px; grid-template-columns:minmax(210px,1fr) minmax(0,3fr); } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) input,#experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) textarea,#experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) select { border:1px solid #dae4d2; border-radius:6px; background:#f6f9f2; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) input:focus,#experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) textarea:focus,#experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) select:focus { background:#fff; border-color:#8aa677; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-role=catalogue] button { border-radius:6px; padding:12px; font-size:13px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-role=catalogue] button[aria-current=true] { background:#edf4e5; color:#36522a; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-role=catalogue] button[aria-current=true]::before { content:''; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-role=catalogue] li { border-bottom:0; margin:3px 0; } @keyframes brand-surface-enter { from { opacity:0; transform:translateY(22px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } } @media(min-width:1101px) { #experiment-lab .story-map.is-compact .story-map-view-switch { display:none; } #experiment-lab .story-map.is-compact[data-panel=world] .story-timeline { display:block; } #experiment-lab .story-map.is-compact[data-panel=timeline] .story-map-network { display:grid; } } @media(max-width:1100px) { .brand-nav { width:calc(100% - 48px); gap:26px; height:80px; } .brand-links { gap:22px; } #experiment-lab:has([data-lab-view]:not([hidden]) .scene-experience) { padding:25px 24px 40px; } #experiment-lab .scene-theatre { gap:0 34px; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } #experiment-lab .scene-experience[data-phase=briefing] .scene-theatre { min-height:555px; } #experiment-lab .scene-title { font-size:clamp(43px,5.5vw,61px); } #experiment-lab .scene-prose { font-size:14px; } #experiment-lab .scene-theatre::before { right:-10px; width:60%; } #experiment-lab .story-map.is-compact .story-map-network { grid-template-columns:minmax(0,1fr) minmax(95px,.88fr) minmax(0,1fr); gap:12px; padding:22px 16px; min-height:225px; } #experiment-lab .story-map.is-compact .story-map-contract { padding:10px 8px; } #experiment-lab .story-map.is-compact .story-map-contract-amount { font-size:21px; } #experiment-lab .story-map.is-compact .story-map-cash { min-height:110px; padding:8px; } #experiment-lab .story-map.is-compact .story-map-cash strong { font-size:32px; } #experiment-lab .scene-context-metrics { gap:12px; } #experiment-lab .scene-context-metrics dd { font-size:21px; } #experiment-lab .scene-choice { padding:20px 17px; gap:7px 10px; } #experiment-lab .scene-library-card { padding:21px; } #experiment-lab .discovery-stage { gap:0 35px; } #experiment-lab .discovery-question h2 { font-size:43px; } } @media(max-width:760px) { .brand-nav { width:calc(100% - 36px); height:72px; gap:15px; flex-wrap:wrap; } .brand-logo img { height:26px; max-width:140px; } .brand-links { gap:15px; } .brand-links a { font-size:11px; } .brand-account { font-size:11px; padding:0 12px; } #experiment-lab:has([data-lab-view]:not([hidden]) .scene-experience) { padding:22px 18px 30px; } #experiment-lab .scene-masthead { gap:16px; padding:0 0 18px; } #experiment-lab .scene-masthead h1 { font-size:16px; } #experiment-lab .scene-eyebrow { font-size:9px; } #experiment-lab .scene-library-toggle { font-size:10px; min-height:44px; padding:7px 11px; gap:7px; } #experiment-lab .scene-top-actions { gap:7px; } #experiment-lab .scene-theatre { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'narrative' 'decisions' 'world'; gap:0; padding-top:6px; } #experiment-lab .scene-theatre::before { top:30%; right:-8px; bottom:-25px; width:93%; } #experiment-lab .scene-theatre::after { top:50%; bottom:-20px; width:85%; } #experiment-lab .scene-experience[data-phase=briefing] .scene-theatre { min-height:0; padding-top:3px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-narrative { padding-top:6px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-world { transform:none; } #experiment-lab .scene-narrative { margin-top:0; padding:14px 0 24px; } #experiment-lab .scene-title { max-width:540px; font-size:clamp(40px,7vw,53px); line-height:1.04; margin:10px 0 18px; } #experiment-lab .scene-prose { font-size:14px; line-height:1.7; max-width:540px; } #experiment-lab .scene-chapter { font-size:9px; margin-bottom:14px; } #experiment-lab .scene-cause { font-size:12px; margin:15px 0; max-width:540px; } #experiment-lab .scene-actions { margin-top:19px; } #experiment-lab .scene-primary,#experiment-lab .scene-secondary { font-size:12px; min-height:46px; padding:11px 17px; } #experiment-lab .scene-assumption { font-size:10px; margin-top:17px; max-width:540px; } #experiment-lab .scene-context-metrics { padding-top:21px; margin-top:22px; gap:15px; } #experiment-lab .scene-context-metrics dd { font-size:23px; } #experiment-lab .scene-world { margin-top:8px; border-radius:12px; } #experiment-lab .scene-world-heading { padding:14px 17px; } #experiment-lab .scene-world .formula-hud { padding:8px 17px; } #experiment-lab .scene-world .formula-hud-line { height:22px; } #experiment-lab .scene-world .formula-hud-pause { top:8px; } #experiment-lab .scene-world-caption { padding:10px 17px; } #experiment-lab .story-map.is-compact .story-map-heading { padding:14px 17px 0; } #experiment-lab .story-map.is-compact .story-map-view-switch { padding:7px 17px 0; } #experiment-lab .story-map.is-compact .story-map-network { min-height:235px; padding:21px 17px; grid-template-columns:minmax(0,1fr) minmax(105px,.88fr) minmax(0,1fr); gap:14px; } #experiment-lab .story-map.is-compact .story-map-contract-amount { font-size:22px; } #experiment-lab .story-map.is-compact .story-map-cash { min-height:112px; max-width:150px; } #experiment-lab .story-map.is-compact .story-map-cash strong { font-size:34px; } #experiment-lab .story-map.is-compact .story-map-cash > span,#experiment-lab .story-map.is-compact .story-map-cash .story-map-cash-label { font-size:9px; } #experiment-lab .story-map.is-compact .story-map-contract-term { font-size:9px; } #experiment-lab .story-map.is-compact .story-timeline { padding:17px; min-height:255px; } #experiment-lab .story-map.is-compact .story-timeline-chart { height:140px; } #experiment-lab .story-map.is-compact .story-map-footnote { font-size:10px; } #experiment-lab .scene-path-nav { margin-top:10px; } #experiment-lab .scene-path-nav button > span:nth-child(2) { font-size:10px; } #experiment-lab .scene-path-nav button > small { font-size:9px; } #experiment-lab .scene-decision-dock { grid-template-columns:1fr; gap:10px; margin-top:0; margin-bottom:16px; } #experiment-lab .scene-choice { min-height:0; padding:18px 19px; } #experiment-lab .scene-choice strong { font-size:14px; } #experiment-lab .scene-choice .scene-choice-outcome { margin-top:4px; } #experiment-lab .scene-option-strip { margin-top:27px; gap:17px; padding:19px 0; } #experiment-lab .scene-option-copy > strong { font-size:12px; } #experiment-lab .scene-option-strip p { font-size:10px; } #experiment-lab .scene-option-count { min-width:80px; } #experiment-lab .scene-option-count strong { font-size:29px; } #experiment-lab .scene-option-count > span { font-size:9px; } #experiment-lab .scene-library { padding:22px 17px; } #experiment-lab .scene-library > h2,#experiment-lab .scene-collection h2 { font-size:35px; } #experiment-lab .scene-library-cards { grid-template-columns:1fr; gap:13px; } #experiment-lab .scene-library-card { min-height:175px; padding:23px; } #experiment-lab .scene-library-card .scene-case-index,#experiment-lab .scene-library-card > span:first-child { margin-bottom:15px; } #experiment-lab .scene-library-card p { max-width:430px; margin-bottom:14px; } #experiment-lab .scene-collection { margin-top:40px; padding-top:29px; } #experiment-lab .scene-collection > p { font-size:13px; } #experiment-lab .scene-capabilities { gap:14px; padding:21px 0; margin-top:25px; } #experiment-lab .scene-capabilities > * { font-size:10px; padding-left:10px; } #experiment-lab .scene-capabilities strong { font-size:19px; } #experiment-lab .scene-evidence { padding:22px 17px; } #experiment-lab .scene-evidence h2 { font-size:30px; } #experiment-lab .scene-evidence-heading { flex-wrap:wrap; gap:10px; } #experiment-lab .scene-evidence ol { grid-template-columns:1fr; } #experiment-lab .scene-footer { padding-top:23px; gap:15px; } #experiment-lab .scene-footer .scene-text-button { font-size:11px; } #experiment-lab .scene-experience { display:block; } #experiment-lab .discovery-stage { display:flex; gap:20px; padding-top:8px; } #experiment-lab .discovery-question h2 { font-size:38px; } #experiment-lab .discovery-question > p { font-size:14px; } #experiment-lab .discovery-room { padding:22px; } #experiment-lab .discovery-map-heading { padding:18px 17px 8px; font-size:10px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) { padding:30px 18px; } #experiment-lab:not(:has([data-lab-view]:not([hidden]) .scene-experience)) [data-layout=laboratory] { padding:19px; grid-template-columns:1fr; } } @media(max-width:520px) { .brand-nav { height:104px; align-content:center; justify-content:space-between; row-gap:0; } .brand-logo { order:0; } .brand-account { order:1; } .brand-links { order:2; width:100%; margin-left:0; gap:26px; } .brand-links a { min-height:44px; } #experiment-lab .scene-masthead { flex-wrap:nowrap; align-items:center; gap:13px; padding-bottom:13px; } #experiment-lab .scene-top-actions { width:auto; flex:none; } #experiment-lab .scene-top-actions .scene-library-toggle { justify-content:space-between; flex:none; } #experiment-lab .scene-top-actions [data-action=open-discovery] { display:none; } #experiment-lab .scene-title { font-size:44px; } #experiment-lab .scene-scenario-meta { margin-bottom:12px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-title { margin-bottom:15px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-cause { margin-top:10px; line-height:1.6; } #experiment-lab .scene-experience[data-phase=briefing] .scene-actions { margin-top:17px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-context-metrics { margin-top:19px; padding-top:16px; } #experiment-lab .scene-experience[data-phase=briefing] .scene-assumption { margin-top:13px; } #experiment-lab .scene-theatre::before { top:42%; } #experiment-lab .scene-context-metrics dd { font-size:18px; letter-spacing:-.055em; } #experiment-lab .scene-context-metrics dt { font-size:9px; } #experiment-lab .story-map.is-compact .story-map-network { grid-template-columns:minmax(0,1fr) minmax(92px,.85fr) minmax(0,1fr); gap:9px; padding:20px 12px; } #experiment-lab .story-map.is-compact .story-map-contract { padding:9px 7px; } #experiment-lab .story-map.is-compact .story-map-contract-amount { font-size:19px; } #experiment-lab .story-map.is-compact .story-map-contract-name { font-size:10px; } #experiment-lab .story-map.is-compact .story-map-cash { min-height:97px; padding:8px; } #experiment-lab .story-map.is-compact .story-map-cash strong { font-size:30px; } #experiment-lab .story-map.is-compact .story-map-column-label { font-size:9px; } #experiment-lab .story-map.is-compact .story-map-routes strong { font-size:9px; } #experiment-lab .story-map.is-compact .story-map-routes small { font-size:8px; } #experiment-lab .scene-option-dots { display:none; } #experiment-lab .scene-world-caption { gap:4px; } #experiment-lab .scene-world-caption > span { font-size:9px; } #experiment-lab .scene-impact strong { font-size:43px; } #experiment-lab .scene-capabilities { gap:8px; } #experiment-lab .scene-capabilities strong { font-size:17px; } } @media(prefers-reduced-motion:reduce) { .brand-nav a,.brand-nav a::after,#experiment-lab .scene-experience *,#experiment-lab .scene-experience *::before,#experiment-lab .scene-experience *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* Scenario inputs use the existing YieldGuard type, graphite and sage palette. */ #experiment-lab .story-input-section .story-input-help { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } #experiment-lab .story-input-guidance { border-top:1px solid #d9e3d0; margin-top:12px; } #experiment-lab .story-input-guidance summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:12px; color:#354e2f; } #experiment-lab .story-input-guidance p { font-size:12px; line-height:1.6; color:#52694a; margin:0 0 12px; } #experiment-lab .story-input-retention { font-size:11px; line-height:1.6; color:#52694a; margin:12px 0 0; } #experiment-lab .scene-personalise-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:9px 13px; border:1px solid #b5c9a7; border-radius:6px; background:#f0f7e8; color:#35532a; font:500 12px/1.4 Arial,Helvetica,sans-serif; letter-spacing:0; text-transform:none; white-space:normal; cursor:pointer; } #experiment-lab .scene-personalise-button:hover { background:#e4efd9; border-color:#7d9d68; } #experiment-lab .scene-personalise-button:focus-visible { outline:2px solid #49643c; outline-offset:3px; } #experiment-lab .scene-chapter:has(.scene-personalise-button) { flex-wrap:wrap; } #experiment-lab .scene-experience .scene-input-notice { margin:14px 0 0; padding-left:12px; border-left:2px solid #92aa7d; color:#47603a; font:12px/1.6 Arial,Helvetica,sans-serif; max-width:490px; } #experiment-lab .story-input-dialog { position:fixed; inset:0; width:min(640px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); margin:auto; padding:0; overflow:hidden; border:1px solid #cdd9c5; border-radius:16px; background:#fafcf7; color:#26372a; box-shadow:0 30px 100px #101d2052; font:14px/1.6 Arial,Helvetica,sans-serif; } #experiment-lab .story-input-dialog[open] { display:flex; flex-direction:column; animation:story-input-enter .22s cubic-bezier(.2,.75,.3,1) both; } #experiment-lab .story-input-dialog::backdrop { background:#19271f70; backdrop-filter:blur(3px); } #experiment-lab .story-input-dialog *,#experiment-lab .story-input-dialog *::before,#experiment-lab .story-input-dialog *::after { box-sizing:border-box; } #experiment-lab .story-input-dialog form { display:flex; flex-direction:column; min-height:0; width:100%; max-width:none; margin:0; } #experiment-lab .story-input-dialog .story-input-header { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:20px; padding:25px 28px 22px; border-bottom:1px solid #dfe7d7; background:#f3f7ed; } #experiment-lab .story-input-dialog .story-input-eyebrow { margin:0 0 8px; color:#5c7150; font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.13em; } #experiment-lab .story-input-dialog .story-input-header h2 { margin:0; font:400 34px/1.1 'Times New Roman',Times,serif; letter-spacing:-.04em; color:#283e29; } #experiment-lab .story-input-dialog .story-input-header h2:focus { outline:none; } #experiment-lab .story-input-dialog button { min-height:44px; min-width:44px; font:12px/1.4 Arial,Helvetica,sans-serif; border-radius:6px; cursor:pointer; transition:background .18s,border-color .18s; } #experiment-lab .story-input-dialog :focus-visible { outline:2px solid #49643c; outline-offset:3px; } #experiment-lab .story-input-dialog .story-input-close { display:grid; place-items:center; flex:none; min-width:44px; height:44px; border:1px solid #d0ddc5; background:#fafdf6; color:#587048; font-size:24px; line-height:1; } #experiment-lab .story-input-dialog .story-input-close:hover { border-color:#8ca57a; background:#e9f2df; } #experiment-lab .story-input-dialog .story-input-scroll { overflow:auto; overscroll-behavior:contain; min-height:0; padding:24px 28px 26px; scrollbar-width:thin; scrollbar-color:#aabf99 #f3f7ee; } #experiment-lab .story-input-dialog .story-input-introduction { font-size:13px; line-height:1.7; color:#52694a; margin:0 0 25px; max-width:510px; } #experiment-lab .story-input-dialog .story-input-section { margin:0; padding:0; border:0; } #experiment-lab .story-input-dialog .story-input-section legend { padding:0; margin:0 0 17px; font:600 12px/1.5 Arial,Helvetica,sans-serif; color:#30482d; } #experiment-lab .story-input-dialog .story-input-grid { display:grid; grid-template-columns:1fr 1fr; gap:21px 20px; } #experiment-lab .story-input-dialog .story-input-field { min-width:0; } #experiment-lab .story-input-dialog .story-input-field label { margin:0 0 7px; color:#36522e; font:500 12px/1.5 Arial,Helvetica,sans-serif; } #experiment-lab .story-input-dialog .story-input-value { position:relative; } #experiment-lab .story-input-dialog .story-input-value input { display:block; width:100%; min-height:48px; margin:0; padding:11px 76px 11px 13px; background:#fff; border:1px solid #c9d9be; border-radius:6px; color:#273e28; font:16px/1.5 Arial,Helvetica,sans-serif; font-variant-numeric:tabular-nums; appearance:textfield; } #experiment-lab .story-input-dialog .story-input-value input::-webkit-inner-spin-button,#experiment-lab .story-input-dialog .story-input-value input::-webkit-outer-spin-button { appearance:none; margin:0; } #experiment-lab .story-input-dialog .story-input-value input:hover { border-color:#9bb18e; } #experiment-lab .story-input-dialog .story-input-value input:focus { border-color:#6c8a58; background:#fff; } #experiment-lab .story-input-dialog .story-input-value input[aria-invalid=true] { border-color:#5c704f; box-shadow:inset 3px 0 #5c704f; background:#f8faF4; } #experiment-lab .story-input-dialog .story-input-value > span { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; font:11px/1.4 Arial,Helvetica,sans-serif; color:#5a714d; } #experiment-lab .story-input-dialog .story-input-help { font-size:11px; line-height:1.6; color:#5b6f50; margin:7px 0 0; } #experiment-lab .story-input-dialog .story-input-help > span { white-space:nowrap; } #experiment-lab .story-input-dialog .story-input-advanced { margin:27px 0 0; border-top:1px solid #d6e2cc; border-bottom:1px solid #d6e2cc; } #experiment-lab .story-input-dialog .story-input-advanced summary { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:11px 0; list-style:none; color:#3c5832; font:500 12px/1.5 Arial,Helvetica,sans-serif; cursor:pointer; } #experiment-lab .story-input-dialog .story-input-advanced summary::-webkit-details-marker { display:none; } #experiment-lab .story-input-dialog .story-input-advanced summary > span { font-size:20px; line-height:1; margin-left:16px; transition:transform .18s; } #experiment-lab .story-input-dialog .story-input-advanced[open] summary > span { transform:rotate(45deg); } #experiment-lab .story-input-dialog .story-input-advanced .story-input-grid { padding:7px 0 23px; } #experiment-lab .story-input-dialog .story-input-scope { margin-top:23px; padding:17px 18px; background:#edf4e5; border-radius:8px; color:#536b47; } #experiment-lab .story-input-dialog .story-input-scope strong { display:block; font:500 11px/1.5 Arial,Helvetica,sans-serif; margin-bottom:6px; color:#3f5a32; } #experiment-lab .story-input-dialog .story-input-scope p { font:11px/1.65 Arial,Helvetica,sans-serif; margin:0; } #experiment-lab .story-input-dialog .story-input-scope p + p { margin-top:7px; } #experiment-lab .story-input-dialog .story-input-error { color:#324b2b; font-size:11px; line-height:1.6; font-weight:600; margin:7px 0 0; } #experiment-lab .story-input-dialog .story-input-form-error { border-left:3px solid #738d5f; padding:10px 13px; background:#eaf2e1; margin-top:17px; } #experiment-lab .story-input-dialog .story-input-notice { margin:17px 0 0; font:12px/1.6 Arial,Helvetica,sans-serif; color:#4c6740; } #experiment-lab .story-input-dialog .story-input-actions { display:flex; flex:none; align-items:center; justify-content:space-between; gap:14px; padding:17px 28px; border-top:1px solid #d9e3d0; background:#fafcf7; } #experiment-lab .story-input-dialog .story-input-actions > div { display:flex; gap:9px; } #experiment-lab .story-input-dialog .story-input-reset { border:0; background:transparent; color:#516d43; padding:5px 0; text-align:left; font-size:11px; } #experiment-lab .story-input-dialog .story-input-reset:hover { color:#283f27; text-decoration:underline; text-underline-offset:4px; } #experiment-lab .story-input-dialog .story-input-cancel { padding:11px 16px; background:#fff; border:1px solid #cfddc3; color:#435f36; } #experiment-lab .story-input-dialog .story-input-cancel:hover { background:#edf4e5; border-color:#95ac86; } #experiment-lab .story-input-dialog .story-input-apply { display:flex; align-items:center; justify-content:center; gap:21px; padding:11px 17px; border:1px solid #2c432c; background:#2c432c; color:#fff; } #experiment-lab .story-input-dialog .story-input-apply:hover { background:#46633b; border-color:#46633b; } @keyframes story-input-enter { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } } @media(max-width:520px) { #experiment-lab .story-input-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:12px; } #experiment-lab .story-input-dialog .story-input-header { padding:20px 18px 19px; gap:13px; } #experiment-lab .story-input-dialog .story-input-header h2 { font-size:29px; } #experiment-lab .story-input-dialog .story-input-eyebrow { font-size:9px; } #experiment-lab .story-input-dialog .story-input-scroll { padding:21px 18px 23px; } #experiment-lab .story-input-dialog .story-input-introduction { font-size:13px; margin-bottom:22px; } #experiment-lab .story-input-dialog .story-input-grid { grid-template-columns:1fr; gap:20px; } #experiment-lab .story-input-dialog .story-input-field label { font-size:13px; } #experiment-lab .story-input-dialog .story-input-help { font-size:11px; } #experiment-lab .story-input-dialog .story-input-advanced summary { font-size:12px; } #experiment-lab .story-input-dialog .story-input-scope { padding:15px; } #experiment-lab .story-input-dialog .story-input-actions { padding:12px 18px; flex-wrap:wrap; gap:5px; } #experiment-lab .story-input-dialog .story-input-actions > div { width:100%; } #experiment-lab .story-input-dialog .story-input-actions > div > button { flex:1; } #experiment-lab .story-input-dialog .story-input-reset { min-height:44px; } } @media(prefers-reduced-motion:reduce) { #experiment-lab .story-input-dialog,#experiment-lab .story-input-dialog *,#experiment-lab .story-input-dialog *::before,#experiment-lab .story-input-dialog *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* A full-width financial stage. The atmosphere is decorative; every figure, connection and plotted balance remains supplied by the existing kernel. */ #experiment-lab:has([data-lab-view]:not([hidden]) .scene-experience[data-story-version]) { width:100%; max-width:none; padding:24px 0 40px; } #experiment-lab .scene-experience[data-story-version] { --stage-ink:#f3f6ed; --stage-copy:#bdcbbb; --stage-dim:#a6b89f; --stage-rule:#4e665344; width:100%; overflow:clip; } #experiment-lab .scene-experience[data-story-version] > :is(.scene-masthead,.scene-path-nav,.scene-library,.scene-option-strip,.scene-kept,.scene-collection,.scene-evidence,.scene-footer,.scene-facts,.scene-capabilities,.scene-notice,.scene-option-review,.scene-explore,.scene-laboratory-scope,.scene-value,.scene-access-summary) { width:min(1280px,calc(100% - 80px)); margin-left:auto; margin-right:auto; } #experiment-lab .scene-experience[data-story-version] .scene-masthead { padding-bottom:24px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas:'narrative world' 'decisions decisions'; column-gap:76px; row-gap:0; position:relative; isolation:isolate; width:100%; margin:0; padding:60px max(40px,calc((100vw - 1280px)/2)) 52px; min-height:0; overflow:hidden; color:var(--stage-ink); background:#131c17; border:0; border-radius:0; box-shadow:none; align-items:center; } #experiment-lab .scene-experience[data-story-version] .scene-theatre::before { content:''; position:absolute; z-index:-2; pointer-events:none; inset:0; width:auto; height:auto; clip-path:none; border:0; border-radius:0; transform:none; background:radial-gradient(ellipse at 96% 8%,#91a98020,transparent 42%),radial-gradient(ellipse at 20% 100%,#879f6f14,transparent 53%); } #experiment-lab .scene-experience[data-story-version] .scene-theatre::after { display:none; } #experiment-lab .scene-atmosphere { display:block; position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:hidden; pointer-events:none; user-select:none; opacity:.4; animation:immersive-atmosphere-enter 1.2s ease-out both; } #experiment-lab .scene-atmosphere svg { display:block; width:100%; height:100%; } #experiment-lab .scene-atmosphere-fold { transform-box:fill-box; transform-origin:60% 40%; animation:immersive-fold-enter .75s ease-out both; } #experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-theatre { padding-top:60px; min-height:0; align-items:center; } #experiment-lab .scene-experience[data-story-version] .scene-theatre > .scene-narrative { grid-area:narrative; position:relative; z-index:1; padding:0; min-width:0; } #experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-narrative { padding-top:0; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-title { max-width:560px; font:400 clamp(55px,5.25vw,76px)/.99 'Times New Roman',Times,serif; letter-spacing:-.055em; color:#f1f5eb; margin:26px 0 26px; text-wrap:balance; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-scenario-meta { gap:12px; margin:0 0 23px; color:var(--stage-copy); } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-scenario-meta > span:first-child { background:transparent; border:0; border-left:2px solid #aec79c; border-radius:0; padding:4px 0 4px 11px; color:#c8d8ba; letter-spacing:.08em; font-size:10px; text-transform:uppercase; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-personalise-button { min-height:44px; background:transparent; border:0; border-bottom:1px solid #647b58; border-radius:0; padding:7px 0; color:#cfdfc0; font-size:12px; gap:15px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-personalise-button:hover { background:transparent; border-bottom-color:#d3e4c1; color:#eff9e5; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-chapter { color:#becfb2; font-size:10px; letter-spacing:.12em; margin-bottom:20px; gap:13px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-chapter::before { background:#839f72; width:30px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-prose { color:var(--stage-copy); font-size:16px; line-height:1.75; max-width:480px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-cause { color:#aec0a6; font-size:13px; line-height:1.75; margin:18px 0 0; padding:0; border:0; max-width:470px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-actions { margin-top:32px; gap:13px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-primary { background:#d6e6c7; color:#1e3420; border:1px solid #d6e6c7; border-radius:3px; min-height:48px; padding:13px 22px; gap:27px; font-size:13px; box-shadow:none; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-primary:hover:not(:disabled) { background:#ebf4df; border-color:#ebf4df; transform:none; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-secondary { background:transparent; color:#d5e5c6; border:1px solid #667e59; border-radius:3px; min-height:48px; font-size:12px; box-shadow:none; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-secondary:hover:not(:disabled) { background:#dae7c811; border-color:#a9c18f; transform:none; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-text-button { color:#c0d3b2; border-color:#647a58; min-height:44px; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-text-button:hover { color:#eff6e8; border-color:#d3e4c3; } #experiment-lab .scene-experience[data-story-version] .scene-theatre :is(button,input):focus-visible { outline:2px solid #e2edcd; outline-offset:4px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre button:disabled { background:transparent; border-color:#64755e; color:#a8b89d; opacity:.65; cursor:default; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics { display:flex; gap:25px; justify-content:space-between; padding-top:25px; margin:31px 0 0; border-top:1px solid #73866545; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dl { flex:1; min-width:0; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dt { font-size:10px; color:#afc2a3; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dd { font:400 23px/1.25 Arial,Helvetica,sans-serif; letter-spacing:-.055em; color:#e5efd9; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics small { color:#afc2a3; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-assumption { margin-top:22px; max-width:480px; color:#aabca0; font-size:11px; line-height:1.7; } #experiment-lab .scene-experience[data-story-version] .scene-context-note { margin-top:13px; max-width:490px; } #experiment-lab .scene-experience[data-story-version] .scene-context-note > summary { min-height:44px; padding:12px 0; cursor:pointer; color:#c3d5b5; font-size:11px; line-height:1.6; } #experiment-lab .scene-experience[data-story-version] .scene-context-note > summary:focus-visible { outline:2px solid #d6e7c3; outline-offset:3px; } #experiment-lab .scene-experience[data-story-version] .scene-context-note .scene-assumption { margin-top:8px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-input-notice { border-color:#a4bd90; color:#d1e0c3; margin-top:20px; padding-left:12px; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-notice { color:#cfdfc2; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact { gap:10px 17px; margin:25px 0 0; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact strong { color:#e7f3d9; font:400 58px/1 Arial,Helvetica,sans-serif; letter-spacing:-.06em; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact > span { color:#c2d2b7; font-size:12px; max-width:180px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact > p { color:#cadabe; font-size:14px; max-width:460px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact > small { color:#b5c8aa; font-size:11px; } /* The model is drawn directly into the stage: no enclosing panel or tiles. */ #experiment-lab .scene-experience[data-story-version] .scene-world { grid-area:world; align-self:center; min-width:0; width:100%; background:transparent; color:var(--stage-ink); border:0; border-radius:0; box-shadow:none; overflow:visible; isolation:auto; animation:immersive-instrument-enter .75s ease-out both; transform:none; } #experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-world { transform:none; } #experiment-lab .scene-experience[data-story-version] .scene-world::before { display:none; } #experiment-lab .scene-experience[data-story-version] .scene-world-heading { padding:0 0 13px; background:transparent; border:0; color:#e0ead5; font-size:12px; letter-spacing:.01em; } #experiment-lab .scene-experience[data-story-version] .scene-world-heading > span:first-child::before { width:5px; height:5px; margin-right:10px; background:#b4cba0; } #experiment-lab .scene-experience[data-story-version] .scene-world-heading > span:last-child { color:#b2c5a6; font-size:11px; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud { padding:9px 14px; margin:0; border-top:1px solid #657b544f; border-bottom:1px solid #657b544f; background:#142019; color:#c7d9b9; border-radius:0; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-line { height:22px; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-status-word { color:#c4d9b3; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-status { color:#a9c19a; font-size:9px; } #experiment-lab .scene-experience[data-story-version] .scene-world :is(.formula-hud-reference,.formula-hud-node,.formula-hud-idle) { color:#a8c096; } #experiment-lab .scene-experience[data-story-version] .scene-world :is(.formula-hud-separator,.formula-hud-prompt,.formula-hud-connector) { color:#91af7a; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-expression { color:#e0efce; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-node,#experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-connector { display:inline; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-pause { color:#b9d1a6; min-width:44px; min-height:44px; height:44px; top:9px; right:10px; border:0; background:transparent; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-pause:hover { background:#cadaaf13; color:#f0f8e4; } #experiment-lab .scene-experience[data-story-version] .scene-world .story-map.is-compact { background:transparent; color:#e5efd9; --story-ink:#e5efd9; --story-muted:#b2c6a4; --story-rule:#5e78503d; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-heading { padding:22px 0 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact :is(.story-map-eyebrow,.story-map-column-label,.story-map-model-label) { color:#b4c9a6; font-size:10px; letter-spacing:.065em; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-network { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,1.1fr) minmax(0,1fr); gap:27px; padding:30px 0 28px; min-height:210px; align-items:center; background:transparent; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-connectors { display:block; inset:20px 0; width:100%; height:calc(100% - 40px); } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-connectors path { stroke:#a0bc845e; stroke-width:1; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-connectors path.is-active { stroke:#d9efb5; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-update-pulse path { stroke:#d9eec0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract { min-height:44px; padding:8px 0 11px; margin:0 0 11px; gap:4px; color:#e5efd8; background:transparent; border:0; border-bottom:1px solid #6e875437; border-radius:0; box-shadow:none; text-align:left; animation:immersive-annotation-enter .4s ease-out both; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract:last-child { margin-bottom:0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact :is(.story-map-contract:hover,.story-map-contract:focus-visible,.story-map-contract.is-active) { background:transparent; color:#f1f8e8; border-color:#b3cf89; border-radius:0; box-shadow:none; transform:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-kind { display:flex; color:#acbf9b; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-kind span { color:#b0c78f; font-size:15px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-name { color:#d6e5c4; font-size:12px; font-weight:400; line-height:1.45; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-amount { color:#ecf5e0; font-size:clamp(23px,2.2vw,32px); line-height:1.2; letter-spacing:-.045em; padding:1px 0 3px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-term { display:block; color:#adc599; font-size:11px; line-height:1.5; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash { width:100%; max-width:none; min-height:0; height:auto; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; gap:10px; margin:0; padding:14px 0; border:0; border-radius:0; background:transparent; box-shadow:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-orbit { display:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash strong { color:#f1f7e9; font:400 clamp(57px,5.3vw,78px)/.96 'Times New Roman',Times,serif; letter-spacing:-.06em; white-space:nowrap; animation:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash > span,#experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash .story-map-cash-label { color:#bdcfac; font-size:11px; max-width:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash .story-map-preview-cash { color:#d8e8c3; border-color:#7e996144; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes { max-width:none; margin:5px 0 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes button { min-height:44px; border:0; background:transparent; color:#c7daba; padding:3px 0; gap:7px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes strong { color:#c7daba; font-size:11px; font-weight:400; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes small { color:#a7c08f; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-route-mark { color:#b0c893; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-empty { color:#b8cd9f; border-color:#89a36542; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline { padding:21px 0 0; border-top:1px solid #83966a4a; background:transparent; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-heading h3 { color:#e0edcf; font:400 14px/1.5 Arial,Helvetica,sans-serif; letter-spacing:0; max-width:380px; margin-top:5px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-low span { color:#bad0a6; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-low strong { color:#e6f3d3; font:400 24px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.055em; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-legend { font-size:10px; color:#b4cba1; margin-top:18px; gap:9px 17px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-line-key { border-color:#d6efaa; border-top-width:2px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-line-key.is-previous { border-color:#88a369; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-line-key.is-preview { border-color:#f0f8d7; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-chart { display:block; width:100%; height:145px; max-height:145px; min-height:0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-chart text { fill:#b3c99d; font-size:15px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-current { stroke:#d4eea7; stroke-width:2.1; animation:none; opacity:1; stroke-dasharray:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-preview { stroke:#f2f8d6; stroke-width:2.2; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-previous { stroke:#93ae77; stroke-width:1.6; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-grid { stroke:#8fa2771f; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-zero { stroke:#a4b78a50; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-hatch { stroke:#b8cb9961; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-area { fill:#b4d28609; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-cursor { stroke:#9bb27c80; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-chart-point { fill:#d8efb1; stroke:#18231b; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-scrub,#experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-scrub span { color:#c1d6ab; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-scrub input[type=range] { height:44px; min-height:44px; accent-color:#c5e39c; background:transparent; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout { padding-top:10px; margin-top:3px; border-color:#72865037; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout small { color:#b5cba0; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout strong { color:#dbecc3; font-size:13px; font-weight:400; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-footnote { margin-top:17px; color:#acbf9a; font-size:10px; line-height:1.6; } #experiment-lab .scene-experience[data-story-version] .scene-world-caption { background:transparent; border:0; padding:15px 0 0; color:#b6c9a8; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .scene-world-caption button { color:#d3e6b9; border-color:#789757; min-height:44px; font-size:11px; } /* Each alternative is a typographic row, not a selectable card. */ #experiment-lab .scene-experience[data-story-version] .scene-decision-dock { grid-area:decisions; display:flex; flex-direction:column; gap:0; width:100%; margin:42px 0 0; border-top:1px solid #8ca67555; animation:immersive-annotation-enter .4s ease-out both; } #experiment-lab .scene-experience[data-story-version] .scene-choice { display:grid; grid-template-columns:40px minmax(0,1.15fr) minmax(0,.8fr) minmax(0,.75fr); grid-template-rows:auto auto; gap:7px 22px; align-content:center; align-items:center; min-height:105px; width:100%; padding:20px 10px 20px 0; margin:0; border:0; border-bottom:1px solid #8ca67544; border-radius:0; color:#dbeacd; background:transparent; box-shadow:none; overflow:visible; transition:background .18s,border-color .18s; } #experiment-lab .scene-experience[data-story-version] :is(.scene-choice:hover:not(:disabled),.scene-choice:focus-visible,.scene-choice:active:not(:disabled)) { transform:none; box-shadow:none; border-color:#bfd59e; background:#b2ce8a09; } #experiment-lab .scene-experience[data-story-version] .scene-choice::after { display:none; } #experiment-lab .scene-experience[data-story-version] .scene-choice > span:first-child { grid-column:1; grid-row:1 / 3; width:auto; height:auto; border:0; border-radius:0; background:transparent; padding:0; justify-content:flex-start; color:#94b17a; font:400 28px/1.1 'Times New Roman',Times,serif; } #experiment-lab .scene-experience[data-story-version] .scene-choice > strong { grid-column:2; grid-row:1; padding:0; color:#edf5e3; font:400 19px/1.3 Arial,Helvetica,sans-serif; letter-spacing:-.025em; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-detail { grid-column:2; grid-row:2; color:#b5caa3; font-size:12px; line-height:1.65; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-outcome { grid-column:3; grid-row:1 / 3; border:0; padding:0; margin:0; color:#d0e7b3; font:400 22px/1.35 'Times New Roman',Times,serif; letter-spacing:-.025em; } #experiment-lab .scene-experience[data-story-version] .scene-choice > small { grid-column:4; grid-row:1 / 3; margin:0; color:#bfd6ac; font-size:11px; line-height:1.65; padding-right:23px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-arrow { position:absolute; display:block; right:0; top:50%; transform:translateY(-50%); color:#bcd9a0; font-size:20px; } /* The surrounding workflow and scenario index form an editorial structure. */ #experiment-lab .scene-experience[data-story-version] .scene-path-nav { margin-top:5px; margin-bottom:22px; padding:0; gap:20px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav::before { display:none; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button { display:grid; grid-template-columns:24px 1fr; align-content:start; column-gap:12px; row-gap:5px; padding:13px 0 0; min-height:66px; border-top:1px solid #cedac4; border-radius:0; text-align:left; background:transparent; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > span:first-child { grid-row:1 / 3; width:auto; height:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#657e53; box-shadow:none; justify-content:flex-start; font-size:12px; line-height:1.4; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > span:nth-child(2) { font-size:12px; color:#4c6440; line-height:1.4; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > small { grid-column:2; color:#596f4c; font-size:10px; max-width:none; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button[aria-current=step] { border-top:2px solid #536e41; padding-top:12px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button[aria-current=step] > span:first-child { color:#2d4425; border:0; background:transparent; box-shadow:none; } #experiment-lab .scene-experience[data-story-version] .scene-option-strip { margin-top:0; padding:26px 0; border-top:0; border-bottom:1px solid #d6e0cd; gap:35px; } #experiment-lab .scene-experience[data-story-version] .scene-option-count strong { font-size:43px; } #experiment-lab .scene-experience[data-story-version] .scene-option-copy p { max-width:600px; } #experiment-lab .scene-experience[data-story-version] .scene-collection { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:72px; align-items:start; margin-top:55px; padding-top:38px; border:0; } #experiment-lab .scene-experience[data-story-version] .scene-collection h2 { font-size:42px; line-height:1.07; max-width:350px; } #experiment-lab .scene-experience[data-story-version] .scene-collection > div > p:not(.scene-eyebrow) { max-width:330px; font-size:13px; line-height:1.75; } #experiment-lab .scene-experience[data-story-version] .scene-library { padding:30px 0 35px; border:0; border-radius:0; background:transparent; box-shadow:none; } #experiment-lab .scene-experience[data-story-version] .scene-library h2 { font-size:50px; margin-bottom:34px; } #experiment-lab .scene-case-list { display:flex; flex-direction:column; width:100%; } #experiment-lab .scene-case-list > button { display:grid; grid-template-columns:40px minmax(0,1fr) 135px; align-items:center; gap:25px; min-height:132px; width:100%; padding:23px 0; margin:0; border:0; border-top:1px solid #d1ddc7; border-radius:0; background:transparent; color:#2b4027; text-align:left; box-shadow:none; transition:background .18s,border-color .18s; } #experiment-lab .scene-case-list > button:last-child { border-bottom:1px solid #d1ddc7; } #experiment-lab .scene-case-list > button:hover,#experiment-lab .scene-case-list > button:focus-visible { background:#e7efde55; border-color:#8da678; transform:none; box-shadow:none; } #experiment-lab .scene-case-list > button[aria-pressed=true] { border-top-color:#7e9869; } #experiment-lab .scene-case-number { align-self:start; padding-top:7px; font:11px/1.5 Arial,Helvetica,sans-serif; color:#536d43; letter-spacing:.06em; } #experiment-lab .scene-case-description { display:block; min-width:0; } #experiment-lab .scene-case-description strong { display:block; color:#31452b; font:400 28px/1.12 'Times New Roman',Times,serif; letter-spacing:-.025em; margin-bottom:10px; } #experiment-lab .scene-case-description p,#experiment-lab .scene-case-description > span { display:block; font-size:12px; line-height:1.7; color:#5a704c; margin:0; max-width:410px; } #experiment-lab .scene-case-action { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#4e693e; font:11px/1.5 Arial,Helvetica,sans-serif; } #experiment-lab .scene-experience[data-story-version] .scene-facts { display:block; border-top:1px solid #d5e0ca; border-bottom:1px solid #d5e0ca; margin-top:44px; padding:22px 0; color:#5d714f; font-size:13px; line-height:1.75; } #experiment-lab .scene-experience[data-story-version] .scene-facts strong { color:#344e2b; font-weight:500; } #experiment-lab .scene-experience[data-story-version] .scene-footer { padding-top:25px; } #experiment-lab .scene-experience[data-story-version] .scene-laboratory-scope { margin-top:31px; margin-bottom:0; padding:20px 0; border-top:1px solid #d5dfca; border-bottom:1px solid #d5dfca; font-size:12px; line-height:1.7; color:#586e4a; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore) { border-bottom:1px solid #d6e0cd; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore) > summary { display:flex; justify-content:space-between; align-items:center; gap:25px; min-height:66px; padding:17px 0; cursor:pointer; list-style:none; color:#48603b; font-size:13px; line-height:1.5; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore) > summary::-webkit-details-marker { display:none; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore) > summary::after { content:'+'; flex:none; font:400 23px/1 Arial,Helvetica,sans-serif; color:#6b845a; transition:transform .18s; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore)[open] > summary::after { transform:rotate(45deg); } #experiment-lab .scene-experience[data-story-version] .scene-option-review .scene-option-strip { border:0; padding:5px 0 27px; } #experiment-lab .scene-experience[data-story-version] .scene-explore .scene-collection { margin-top:13px; padding-top:12px; padding-bottom:35px; } #experiment-lab .scene-value { margin-top:50px; padding:33px 0 0; border-top:1px solid #d6dfcd; } #experiment-lab .scene-value > h2 { max-width:680px; font:400 42px/1.1 'Times New Roman',Times,serif; letter-spacing:-.04em; color:#30472a; margin:0 0 20px; } #experiment-lab .scene-value > p { max-width:680px; color:#526a45; font-size:14px; line-height:1.75; } #experiment-lab .scene-value-rows { margin-top:28px; border-top:1px solid #d3dfc8; } #experiment-lab .scene-value-rows > * { display:grid; grid-template-columns:35px minmax(0,1fr) minmax(140px,.4fr); gap:26px; align-items:center; padding:27px 0; border-bottom:1px solid #d3dfc8; } #experiment-lab .scene-value-rows > * > span:first-child { align-self:start; font:11px/1.5 Arial,Helvetica,sans-serif; color:#647d54; padding-top:5px; } #experiment-lab .scene-value-rows h3 { margin:0 0 10px; color:#304b28; font:400 25px/1.2 'Times New Roman',Times,serif; letter-spacing:-.025em; } #experiment-lab .scene-value-rows p { max-width:640px; margin:0; font-size:13px; line-height:1.75; color:#546e45; } #experiment-lab .scene-value-rows button { justify-self:end; min-height:44px; border:0; border-bottom:1px solid #a2b68e; border-radius:0; background:transparent; color:#456236; font-size:12px; padding:9px 0; } #experiment-lab .scene-access-summary { display:block; padding:27px 0 0; } #experiment-lab .scene-access-summary p { max-width:760px; font-size:12px; line-height:1.75; color:#566f47; } #experiment-lab .scene-access-summary > p { font-size:13px; } #experiment-lab .scene-access-summary > details { max-width:860px; margin-top:9px; } #experiment-lab .scene-access-summary > details > summary { min-height:44px; padding:12px 0; color:#4d693f; font-size:12px; cursor:pointer; } #experiment-lab .scene-access-summary > details > p { margin:10px 0; } #experiment-lab .scene-access-summary button { flex:none; min-height:44px; border:0; border-bottom:1px solid #a2b68e; border-radius:0; background:transparent; color:#456236; font-size:12px; padding:9px 0; } #experiment-lab .scene-mechanism-list { display:block; margin:27px 0; border-top:1px solid #d4dec9; } #experiment-lab .scene-mechanism-list > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:center; gap:30px; padding:21px 0; border-bottom:1px solid #d4dec9; } #experiment-lab .scene-mechanism-list strong { color:#3b552f; font:500 14px/1.5 Arial,Helvetica,sans-serif; } #experiment-lab .scene-mechanism-list p { margin:6px 0 0; color:#536a44; font-size:12px; line-height:1.7; } #experiment-lab .scene-mechanism-list code { padding:0; border:0; border-radius:0; background:transparent; color:#4e693e; font:12px/1.7 Consolas,'Courier New',monospace; overflow-wrap:anywhere; } @keyframes immersive-atmosphere-enter { from { opacity:0; transform:translateY(20px); } to { opacity:.4; transform:translateY(0); } } @keyframes immersive-instrument-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes immersive-annotation-enter { from { opacity:0; } to { opacity:1; } } @keyframes immersive-fold-enter { from { opacity:.35; transform:translate(14px,6px) rotate(-2deg); } to { opacity:1; transform:translate(0,0) rotate(0); } } @media(min-width:1051px) { #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-view-switch { display:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact[data-panel=world] .story-timeline { display:block; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact[data-panel=timeline] .story-map-network { display:grid; } } @media(min-width:761px) { #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-theatre { grid-template-areas:'narrative world' 'decisions world'; grid-template-rows:auto 1fr; align-items:start; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-theatre .scene-title { font-size:clamp(41px,3.7vw,54px); line-height:1.04; margin-top:22px; margin-bottom:22px; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-world { align-self:start; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-decision-dock { margin-top:21px; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice { grid-template-columns:27px minmax(0,1fr); grid-template-rows:auto auto auto; align-items:start; gap:5px 15px; min-height:0; padding:20px 17px 20px 0; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > span:first-child { grid-column:1; grid-row:1 / 5; align-self:start; font-size:25px; padding-top:1px; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > strong { grid-column:2; grid-row:1; font-size:17px; padding:0 5px 0 0; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > .scene-choice-detail { grid-column:2; grid-row:2; font-size:12px; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > .scene-choice-outcome { grid-column:2; grid-row:3; font-size:23px; margin-top:6px; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > small { grid-column:2; grid-row:4; padding:0; } #experiment-lab .scene-experience[data-story-version][data-phase=decision] .scene-choice > .scene-choice-arrow { top:22px; transform:none; } } @media(max-width:1180px) { #experiment-lab .scene-experience[data-story-version] .scene-theatre { gap:0 44px; padding:50px 32px 44px; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-title { font-size:58px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-prose { font-size:15px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics { gap:18px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dd { font-size:20px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-network { grid-template-columns:minmax(0,1fr) minmax(130px,1.05fr) minmax(0,1fr); gap:20px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash strong { font-size:62px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-amount { font-size:25px; } #experiment-lab .scene-experience[data-story-version] .scene-collection { gap:40px; } #experiment-lab .scene-case-list > button { grid-template-columns:30px minmax(0,1fr) 100px; gap:18px; } } @media(max-width:1050px) { #experiment-lab .scene-experience[data-story-version] .scene-theatre { align-items:start; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-view-switch { display:flex; gap:20px; padding:14px 0 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-view-switch button { border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; color:#b3c59f; font-size:11px; min-height:44px; padding:8px 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-view-switch button[aria-pressed=true] { color:#e3efcf; border-color:#c4dda1; background:transparent; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact[data-panel=world] .story-timeline { display:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact[data-panel=timeline] .story-map-network { display:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-network { padding-top:35px; padding-bottom:32px; } #experiment-lab .scene-experience[data-story-version] .scene-choice { gap:7px 17px; grid-template-columns:31px minmax(0,1.1fr) minmax(0,.85fr) minmax(0,.75fr); } #experiment-lab .scene-experience[data-story-version] .scene-choice > strong { font-size:17px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-outcome { font-size:21px; } #experiment-lab .scene-case-list > button { grid-template-columns:28px minmax(0,1fr); } #experiment-lab .scene-case-action { grid-column:2; justify-content:flex-start; padding-top:4px; } } @media(max-width:760px) { #experiment-lab:has([data-lab-view]:not([hidden]) .scene-experience[data-story-version]) { padding-top:20px; padding-bottom:30px; } #experiment-lab .scene-experience[data-story-version] > :is(.scene-masthead,.scene-path-nav,.scene-library,.scene-option-strip,.scene-kept,.scene-collection,.scene-evidence,.scene-footer,.scene-facts,.scene-capabilities,.scene-notice,.scene-option-review,.scene-explore,.scene-laboratory-scope,.scene-value,.scene-access-summary) { width:calc(100% - 36px); } #experiment-lab .scene-experience[data-story-version] .scene-masthead { padding-bottom:20px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre,#experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-theatre { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'narrative' 'decisions' 'world'; gap:0; padding:35px 24px 33px; align-items:start; } #experiment-lab .scene-experience[data-story-version] .scene-atmosphere { min-height:100%; opacity:.4; } #experiment-lab .scene-experience[data-story-version] .scene-theatre > .scene-narrative,#experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-narrative { padding:0; margin:0; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-title { font-size:clamp(45px,7.9vw,62px); max-width:580px; line-height:1.03; margin:20px 0 24px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-prose { font-size:15px; max-width:560px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-cause { font-size:13px; line-height:1.7; max-width:560px; margin-top:16px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-actions { margin-top:25px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics { gap:23px; max-width:520px; padding-top:23px; margin-top:29px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dd { font-size:23px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-assumption { margin-top:19px; font-size:11px; max-width:570px; } #experiment-lab .scene-experience[data-story-version] .scene-world { margin-top:40px; width:100%; } #experiment-lab .scene-experience[data-story-version] .scene-world-heading { padding-bottom:13px; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud { padding:8px 12px; } #experiment-lab .scene-experience[data-story-version] .scene-world .formula-hud-pause { top:8px; right:8px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-heading { padding-top:20px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-network { min-height:230px; padding:34px 0; grid-template-columns:minmax(0,1fr) minmax(116px,1fr) minmax(0,1fr); gap:20px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash { padding:15px 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash strong { font-size:60px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash > span,#experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash .story-map-cash-label { font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-amount { font-size:27px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-name { font-size:12px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-kind { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-column-label { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-term { font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline { min-height:0; padding-top:22px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-chart { height:140px; max-height:140px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-chart text { font-size:20px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-heading h3 { font-size:13px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-low strong { font-size:23px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-low span { font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout { display:grid; padding-top:13px; gap:12px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout strong { font-size:12px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-timeline-readout small { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .scene-world-caption { padding-top:12px; gap:9px; } #experiment-lab .scene-experience[data-story-version] .scene-choice { grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:6px 14px; min-height:0; padding:23px 18px 23px 0; } #experiment-lab .scene-experience[data-story-version] .scene-choice > span:first-child { grid-row:1 / 5; font-size:25px; align-self:start; padding-top:1px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > strong { grid-column:2; grid-row:1; font-size:18px; padding-right:8px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-detail { grid-column:2; grid-row:2; font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-outcome { grid-column:2; grid-row:3; font-size:22px; margin-top:5px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > small { grid-column:2; grid-row:4; padding-right:0; font-size:11px; } #experiment-lab .scene-experience[data-story-version] .scene-choice > .scene-choice-arrow { top:26px; transform:none; } #experiment-lab .scene-experience[data-story-version] .scene-decision-dock { margin-top:29px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav { gap:12px; margin-bottom:20px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button { grid-template-columns:1fr; gap:7px; min-height:78px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > span:first-child { grid-column:1; grid-row:1; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > span:nth-child(2) { grid-column:1; grid-row:2; font-size:10px; } #experiment-lab .scene-experience[data-story-version] .scene-path-nav button > small { display:none; } #experiment-lab .scene-experience[data-story-version] .scene-option-strip { gap:18px; padding:24px 0; } #experiment-lab .scene-experience[data-story-version] .scene-option-count strong { font-size:34px; } #experiment-lab .scene-experience[data-story-version] .scene-option-copy p { font-size:11px; line-height:1.7; } #experiment-lab .scene-experience[data-story-version] .scene-collection { display:block; margin-top:43px; padding-top:0; } #experiment-lab .scene-experience[data-story-version] .scene-collection h2 { font-size:38px; max-width:430px; } #experiment-lab .scene-experience[data-story-version] .scene-collection > div > p:not(.scene-eyebrow) { max-width:470px; margin-bottom:27px; } #experiment-lab .scene-experience[data-story-version] .scene-library h2 { font-size:38px; } #experiment-lab .scene-case-list > button { grid-template-columns:28px minmax(0,1fr); gap:12px 18px; min-height:0; padding:23px 0; } #experiment-lab .scene-case-description strong { font-size:28px; } #experiment-lab .scene-case-description p { font-size:12px; } #experiment-lab .scene-case-action { padding-top:5px; font-size:11px; } #experiment-lab .scene-experience[data-story-version] .scene-facts { font-size:12px; margin-top:29px; padding:21px 0; } #experiment-lab .scene-value > h2 { font-size:34px; } #experiment-lab .scene-value-rows > * { grid-template-columns:26px minmax(0,1fr); gap:12px 18px; padding:23px 0; } #experiment-lab .scene-value-rows button { grid-column:2; justify-self:start; } #experiment-lab .scene-access-summary { display:block; } #experiment-lab .scene-access-summary button { margin-top:13px; } #experiment-lab .scene-mechanism-list > div { grid-template-columns:1fr; gap:13px; } #experiment-lab .scene-experience[data-story-version] :is(.scene-option-review,.scene-explore) > summary { min-height:62px; font-size:12px; } } @media(max-width:440px) { #experiment-lab .scene-experience[data-story-version] .scene-theatre,#experiment-lab .scene-experience[data-story-version][data-phase=briefing] .scene-theatre { padding:29px 18px 28px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-title { font-size:45px; margin-top:19px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-prose { font-size:14px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-cause { font-size:12px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-scenario-meta { gap:15px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-personalise-button { font-size:11px; gap:9px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics { gap:15px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dd { font-size:19px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-context-metrics dt { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .scene-world { margin-top:33px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-network { grid-template-columns:minmax(0,1fr) minmax(102px,1.05fr) minmax(0,1fr); gap:13px; padding:29px 0; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-cash strong { font-size:53px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-amount { font-size:23px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-kind { display:none; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-name { font-size:11px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-contract-term { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes strong { font-size:10px; } #experiment-lab .scene-experience[data-story-version] .story-map.is-compact .story-map-routes small { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .scene-world-caption > span { font-size:9px; } #experiment-lab .scene-experience[data-story-version] .scene-theatre .scene-impact strong { font-size:49px; } } @media(prefers-reduced-motion:reduce) { #experiment-lab .scene-experience[data-story-version] .scene-theatre,#experiment-lab .scene-experience[data-story-version] .scene-theatre *,#experiment-lab .scene-experience[data-story-version] .scene-theatre *::before,#experiment-lab .scene-experience[data-story-version] .scene-theatre *::after,#experiment-lab .scene-case-list * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }