/* V3 surfaces (Explorer, Benchmark, Continuity, time machine, Cypher inspector), built only on tokens.css. */

/* Showcase: preserve the Cortex world, lead with the product and its real result. */
/* Use the original Cortex hero: bright wordmark above the central brain, copy below-left.
   Shared style.css owns that layout and its mobile stacking. */
/* Hero: message and one action on the left, live health in a glass card on the right, brain between. */
.showcase-hero .hero-copy { width:min(540px, 40%); bottom:clamp(44px, 8vh, 80px); }
.showcase-hero .brain-stage { left:36%; right:6%; }
.showcase-hero .hero-copy h1 { font-size:clamp(28px,2.4vw,36px); line-height:1.12; letter-spacing:-.035em; max-width:none; margin:0 0 var(--space-4); }
.showcase-hero h1 span { color:var(--ice); }
.showcase-hero .statement { font-size:var(--text-lg); line-height:1.55; max-width:38ch; color:var(--ink-2); margin:0 0 var(--space-6); }

/* The one primary action: a large metal pill with a lit play disc; it answers hover, press and focus. */
.story-cta { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.showcase-story { position:relative; display:inline-flex; align-items:center; gap:var(--space-4); min-height:64px; padding:8px 30px 8px 8px; border-radius:var(--r-pill); background:linear-gradient(180deg,#ffffff,#c9cde4); color:#0b0c14; font:700 var(--text-lg)/1 var(--ui); text-decoration:none; box-shadow:0 1px 0 #fff inset, 0 18px 50px -12px rgb(139 146 255 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.4); transition:transform var(--dur-feedback) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); }
.showcase-story::before { content:''; position:absolute; inset:-6px; border-radius:inherit; box-shadow:0 0 0 2px rgb(139 146 255 / 0.55); opacity:0; animation:cta-ring 2.8s var(--ease-out) 1.2s infinite; pointer-events:none; }
@keyframes cta-ring { 0% { opacity:.9; transform:scale(.97); } 70%,100% { opacity:0; transform:scale(1.08); } }
.story-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #8b92ff, #4b52e8 70%); color:#fff; box-shadow:0 6px 18px -6px rgb(91 99 255 / 0.9); transition:transform var(--dur-state) var(--ease-out); }
.story-icon .i { width:22px; height:22px; margin-left:3px; fill:currentColor; }
.showcase-story:hover { transform:translateY(-2px); box-shadow:0 1px 0 #fff inset, 0 24px 60px -10px rgb(139 146 255 / 1), 0 0 0 1px rgb(255 255 255 / 0.6); }
.showcase-story:hover .story-icon { transform:scale(1.08); }
.showcase-story:active { transform:scale(0.97); }
.showcase-story:focus-visible { outline:3px solid var(--ice); outline-offset:5px; }
.story-meta { margin:0; padding-left:var(--space-2); font-size:var(--text-sm); color:var(--ink-3); }

/* Live health: its own card right below the hero, three stats side by side. */
.showcase-health { margin:0 0 clamp(48px, 6vw, 88px); padding:var(--space-5) var(--space-6); }
.showcase-health h2 { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-4); font:700 var(--text-sm)/1.2 var(--ui); color:var(--ink-2); }
.showcase-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-5); margin:0; }
.showcase-stats>div { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; column-gap:var(--space-4); padding-left:var(--space-5); border-left:1px solid var(--line); }
.showcase-stats>div:first-child { border-left:0; padding-left:0; }
.showcase-stats dd { margin:0; font:700 var(--text-2xl)/1 var(--display); font-variant-numeric:tabular-nums; color:var(--ink); }
.showcase-stats dd span { font:600 var(--text-md) var(--ui); color:var(--ink-3); margin-left:2px; }
.showcase-stats dt { font-size:var(--text-md); font-weight:600; color:var(--ink); }
.showcase-stats small { display:block; margin-top:4px; font-size:var(--text-xs); font-weight:500; color:var(--ink-3); overflow-wrap:anywhere; }
.page-brain .bar nav { min-width:0; overflow-x:auto; }
.page-brain .bar nav a { white-space:nowrap; }
.page-assessment .page-head-copy { min-width:0; }
.page-assessment .page-head h1 { font-size:clamp(24px,4.5vw,64px); max-width:none; overflow-wrap:anywhere; }
.page-brain .network { grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); }
.network-copy .fire { margin:var(--space-5) 0; }
.network-copy .fire-result { padding:var(--space-4) 0; }

.benchmark-page>h1,.continuity-page>h1 { font-size:var(--text-2xl); margin:var(--space-5) 0 var(--space-4); }
.benchmark-intro { max-width:70ch; color:var(--ink-2); }
.benchmark-result { display:flex; align-items:center; gap:var(--space-7); margin:var(--space-7) 0; }
.benchmark-result>div { display:flex; flex-direction:column; gap:var(--space-2); }
.benchmark-result span { color:var(--ink-2); font-size:var(--text-sm); }
.benchmark-result strong { font:600 clamp(40px,5vw,72px)/1.1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#benchmark-graph-score { color:var(--holds); }
.benchmark-page #benchmark-metric { font-size:var(--text-lg); }
.benchmark-page #benchmark-metric+p { color:var(--ink-2); font-size:var(--text-sm); }
.benchmark-bar rect { transform-box:fill-box; transform-origin:center bottom; fill:var(--indigo-2); }
.benchmark-graph rect { fill:var(--holds); }
.benchmark-vector rect { fill:var(--unknown); }
.benchmark-bar text { fill:var(--ink); font-size:12px; font-family:var(--ui); }
.benchmark-bar .benchmark-value { font-size:13px; font-weight:700; }
.benchmark-grid { stroke:var(--line-2); }
.benchmark-axis { fill:var(--ink-2)!important; font:12px var(--ui); }
.benchmark-page .benchmark-limits { margin:var(--space-6) 0; padding:var(--space-5); border-radius:var(--r-card); background:var(--panel-solid); }
.benchmark-limits h2 { font:700 var(--text-lg) var(--ui); margin:0 0 var(--space-3); }
.benchmark-limits p { max-width:75ch; font-size:var(--text-md); color:var(--ink-2); }
.benchmark-details { margin:var(--space-6) 0; }
.benchmark-details summary { cursor:pointer; padding:var(--space-4) 0; font-weight:600; }
.benchmark-details td,.benchmark-details th { padding:var(--space-3); font-size:var(--text-sm); }
.departure-choices { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-5) 0 var(--space-3); }
.departure-choices [aria-pressed=true] { background:var(--unknown-field); color:var(--unknown); box-shadow:0 0 0 1px var(--unknown) inset; }
.departure-fallback { display:flex; gap:var(--space-3); align-items:center; font-size:var(--text-sm); color:var(--ink-2); }
.continuity-impact { display:grid; grid-template-columns:.8fr 1.3fr 1fr; gap:var(--space-5); margin:var(--space-6) 0; }
.continuity-impact>section { margin:0; padding-top:var(--space-5); border-top:1px solid var(--line-2); }
.continuity-impact h2 { font:600 var(--text-lg) var(--ui); display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-3); }
.impact-count { color:var(--unknown); font-size:var(--text-2xl); font-variant-numeric:tabular-nums; }
.continuity-impact p { font-size:var(--text-sm); color:var(--ink-2); overflow-wrap:anywhere; }
.continuity-impact[aria-busy=true] { opacity:.5; }
.continuity-analysis { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:var(--space-6); }
.continuity-analysis>section { margin:var(--space-4) 0; min-width:0; }
.continuity-analysis h2 { font:700 var(--text-xl) var(--ui); }
.continuity-bridge-panel { padding:var(--space-5); background:var(--panel-solid); border-radius:var(--r-card); align-self:start; }
.continuity-bridge-panel p,#continuity-projection,#continuity-graph-status { font-size:var(--text-sm); }
#continuity-canvas { height:440px; background:var(--frame); border-radius:var(--r-card); }
@media(max-width:760px) {
 .showcase-hero .hero-copy { width:auto; bottom:auto; }
 .showcase-hero .hero-copy h1 { font-size:clamp(26px,6.4vw,36px); }
 .showcase-hero .statement { font-size:var(--text-base); margin-bottom:var(--space-5); }
 .showcase-health { padding:var(--space-4); }
 .showcase-stats { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
 .showcase-stats>div { grid-template-columns:3.4ch minmax(0,1fr); padding:var(--space-3) 0 0; border-left:0; border-top:1px solid var(--line); }
 .showcase-stats>div:first-child { border-top:0; padding-top:0; }
 .showcase-story { min-height:58px; font-size:var(--text-base); }
 .story-icon { width:42px; height:42px; }
 .page-brain .network { grid-template-columns:minmax(0,1fr); }
 .benchmark-result { gap:var(--space-4); margin:var(--space-6) 0; flex-wrap:wrap; }
 .benchmark-result strong { font-size:clamp(32px,9vw,54px); }
 .benchmark-result>div { flex:1; min-width:100px; }
 .benchmark-result .benchmark-versus { display:none; }
 .continuity-impact,.continuity-analysis { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
 .continuity-impact>section { padding-top:var(--space-4); }
 #continuity-canvas { height:360px; }
}

/* Shared controls ------------------------------------------------------------------------------- */
.v3-app main { padding-top: var(--space-4); }
.v3-app .bar nav { min-width: 0; overflow-x: auto; }
.v3-page { max-width: var(--max); margin: 0 auto; }
.v3-error { color: var(--broken); }
.v3-hypothetical { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--unknown-field); color: var(--unknown); font-weight: 700; font-size: var(--text-sm); }
.v3-replay { padding: var(--space-3) var(--gutter); background: var(--holds-field); color: var(--holds); font-weight: 600; font-size: var(--text-sm); box-shadow: 0 -1px 0 rgb(124 240 200 / 0.3) inset; }
.v3-replay small { display: inline; margin-left: var(--space-2); color: var(--ink-2); font-weight: 500; }
.v3-app input[type=range] { width: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; accent-color: var(--indigo-2); }
.v3-app input[type=range]:focus { box-shadow: none; }
.v3-app input[type=checkbox] { width: auto; }
.v3-app input[type=date] { width: auto; }
.v3-app input[type=date], .v3-app select { padding: 9px 12px; border: 0; border-radius: var(--r-control); background: rgb(3 3 8 / 0.6); box-shadow: 0 0 0 1px var(--line-2) inset; color: var(--ink); font: var(--text-md)/1.4 var(--ui); color-scheme: dark; }
.v3-app input[type=date]:focus-visible, .v3-app select:focus-visible { outline: 2px solid var(--indigo-2); outline-offset: 2px; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink); cursor: pointer; transition: background-color var(--dur-feedback) ease, transform var(--dur-feedback) var(--ease-out); }
.icon-button:hover { background: var(--panel-2); }
.icon-button:active { transform: scale(0.94); }
.icon-button .i { width: 18px; height: 18px; }
.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; text-transform: capitalize; transition: background-color var(--dur-feedback) ease, color var(--dur-feedback) ease, box-shadow var(--dur-feedback) ease; }
.toggle input:checked + span { background: var(--panel-2); color: var(--ink); box-shadow: 0 0 0 1px var(--indigo-2) inset; }
.toggle input:focus-visible + span { outline: 2px solid var(--indigo-2); outline-offset: 2px; }
.toggle input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.toggle:active span { transform: scale(0.97); }

/* Explorer -------------------------------------------------------------------------------------- */
.xp { max-width: var(--max); margin: 0 auto; }
.xp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.xp-head h1 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0; }
.xp-head p { max-width: none; margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--text-md); }
.xp-play { flex: none; min-height: 44px; }
.xp-play .i { width: 18px; height: 18px; }

.xp-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); border-radius: var(--r-card); background: linear-gradient(180deg, var(--panel), rgb(150 160 230 / 0.025)); box-shadow: var(--shadow-1); }
.xp-search { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 620px; }
.xp-search > .i { color: var(--ink-3); width: 18px; height: 18px; flex: none; }
.xp-search input { flex: 1 1 auto; width: auto; min-width: 0; padding: 8px 12px; border: 0; border-radius: var(--r-control); background: rgb(3 3 8 / 0.6); box-shadow: 0 0 0 1px var(--line-2) inset; color: var(--ink); font: var(--text-md)/1.4 var(--ui); }
.xp-search .chip { flex: none; width: auto; min-height: 38px; margin: 0; padding: 7px 14px; }
.xp-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-5); margin: 0; }
.xp-more-toggle { display: none; }
.xp-toolbar > .tm { grid-column: 1 / -1; }
.xp-depth { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.xp-depth output { color: var(--ink); font-variant-numeric: tabular-nums; }
.xp-depth input { width: 104px; }
.xp-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.xp-kinds legend { float: left; margin-right: var(--space-1); padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }

.xp-main.v3-explorer { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.xp-stage { min-width: 0; }
.xp-verdict { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); height: 52px; margin: 0 0 var(--space-3); padding: 0 var(--space-3) 0 var(--space-4); overflow: hidden; border-radius: var(--r-control); background: var(--panel); box-shadow: 0 0 0 1px var(--line) inset; font-size: var(--text-sm); color: var(--ink-2); transition: background-color var(--dur-state) ease, box-shadow var(--dur-state) ease, color var(--dur-state) ease; }
.xp-verdict .v-word { flex: none; font: 800 var(--text-md)/1.2 var(--display); letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.xp-verdict .v-icon { flex: none; width: 22px; height: 22px; }
.xp-verdict .v-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.xp-verdict .metal, .xp-verdict .chip { flex: none; margin-left: auto; }
.xp-verdict .v-tag { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--unknown-field); color: var(--unknown); font-weight: 700; font-size: var(--text-xs); }
.xp-verdict .metal { min-height: 34px; padding: 7px 14px; font-size: var(--text-sm); }
.xp-verdict .metal .i { width: 16px; height: 16px; }
.xp-verdict .chip { min-height: 32px; padding: 5px 12px; font-size: var(--text-sm); }
.xp-verdict[data-state=blocked] { background: var(--broken-field); box-shadow: 0 0 0 1px rgb(255 107 139 / 0.55) inset, 0 18px 40px -24px rgb(255 107 139 / 0.8); }
.xp-verdict[data-state=blocked] .v-word, .xp-verdict[data-state=blocked] .v-icon { color: var(--broken); }
.xp-verdict[data-state=needs_review], .xp-verdict[data-state=date] { background: var(--unknown-field); box-shadow: 0 0 0 1px rgb(255 210 122 / 0.45) inset; }
.xp-verdict[data-state=needs_review] .v-word, .xp-verdict[data-state=needs_review] .v-icon, .xp-verdict[data-state=date] .v-word, .xp-verdict[data-state=date] .v-icon { color: var(--unknown); }
.xp-verdict[data-state=clear] { background: var(--holds-field); box-shadow: 0 0 0 1px rgb(124 240 200 / 0.45) inset; }
.xp-verdict[data-state=clear] .v-word, .xp-verdict[data-state=clear] .v-icon { color: var(--holds); }
.xp-verdict[data-state=checking] .v-word { color: var(--indigo-2); }
.xp-verdict.landed { animation: verdict-land var(--dur-enter) var(--ease-out); }
@keyframes verdict-land { from { opacity: 0.4; transform: scale(0.985); } }

.xp-canvas-wrap { position: relative; border-radius: var(--r-card); overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, rgb(91 99 255 / 0.12), transparent 70%), var(--panel-solid); box-shadow: 0 0 0 1px var(--line) inset; }
#explorer-canvas { width: 100%; height: clamp(300px, calc(100dvh - 386px), 720px); }
body[data-public-demo="true"] #explorer-canvas { height: clamp(240px, calc(100dvh - 450px), 656px); }
.v3-app:has(.v3-replay) #explorer-canvas { height: clamp(260px, calc(100dvh - 432px), 720px); }
.xp-legend { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); max-width: calc(100% - 24px); margin: 0; padding: 6px 12px; list-style: none; border-radius: var(--r-pill); background: rgb(9 10 18 / 0.72); box-shadow: 0 0 0 1px var(--line) inset; font-size: var(--text-xs); color: var(--ink-2); pointer-events: none; }
.xp-legend li { display: inline-flex; align-items: center; gap: 5px; }
.xp-legend svg { width: 13px; height: 13px; fill: none; stroke: var(--ice); stroke-width: 1.6; }
.xp-legend i { width: 9px; height: 9px; border-radius: 50%; }
.xp-legend .s-holds i { background: var(--holds); } .xp-legend .s-unknown i { background: var(--unknown); } .xp-legend .s-broken i { background: var(--broken); }
#graph-message { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.v3-network > p:not(#graph-message) { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--ink-3); }

/* Inspector */
.xp-inspector.v3-detail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--space-3); max-height: calc(100dvh - 108px); padding: var(--space-4); border-radius: var(--r-card); background: linear-gradient(180deg, var(--panel), rgb(150 160 230 / 0.025)); box-shadow: var(--shadow-1); min-width: 0; }
.explorer-picker { display: block; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.explorer-picker select { display: block; width: 100%; margin-top: var(--space-2); }
.v3-tabs { display: flex; gap: var(--space-1); padding: 4px; border-radius: var(--r-pill); background: rgb(3 3 8 / 0.5); box-shadow: 0 0 0 1px var(--line) inset; }
.v3-tabs [role=tab] { flex: 1; min-height: 34px; padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 700 var(--text-sm)/1 var(--ui); cursor: pointer; transition: background-color var(--dur-feedback) ease, color var(--dur-feedback) ease; }
.v3-tabs [role=tab]:hover { color: var(--ink); }
.v3-tabs [role=tab][aria-selected=true] { background: var(--panel-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; }
.xp-inspector [role=tabpanel] { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; overflow-wrap: anywhere; }
.xp-inspector h2 { margin: var(--space-2) 0 var(--space-2); font-size: var(--text-xl); overflow-wrap: anywhere; }
.xp-inspector h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.xp-inspector p { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
.xp-inspector #node-details > p:first-child { color: var(--ink); }
#node-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--ink-2); font-weight: 700; font-size: var(--text-sm); }
#node-status[data-state=holds], #node-status[data-state=holding] { background: var(--holds-field); color: var(--holds); }
#node-status[data-state=broken] { background: var(--broken-field); color: var(--broken); }
#node-status[data-state=violated] { background: var(--violated-field); color: var(--violated); }
#node-status[data-state=unknown], #node-status[data-state=unverified], #node-status[data-state=unevaluable] { background: var(--unknown-field); color: var(--unknown); }
#node-chain { font-family: var(--mono); font-size: var(--text-xs) !important; color: var(--ink-3) !important; }
.evidence-path { font-family: var(--mono); font-size: var(--text-xs) !important; }
#focus-node { align-self: flex-start; }

/* What if panel */
.v3-fact { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.v3-fact label { display: block; margin: 0 0 var(--space-2); font: 500 var(--text-xs)/1.4 var(--mono); color: var(--ice); overflow-wrap: anywhere; }
.v3-fact input[type=range] { width: 100%; }
.v3-fact input[type=number] { width: 96px; margin-right: var(--space-2); padding: 7px 10px; border-radius: var(--r-sm); }
.v3-fact button, .preset-row button { min-height: 32px; }
.preset-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.fix-row { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }

.xp-verdict .metal { position: relative; }
.xp-verdict .metal.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px var(--holds); opacity: 0; animation: ring 1.4s var(--ease-out) 3; pointer-events: none; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1.12); } }
.xp-canvas-wrap #explorer-canvas { transition: opacity var(--dur-state) ease; }
.xp-canvas-wrap.loading #explorer-canvas { opacity: 0.55; }

/* Story mode */
.story-bar[hidden] { display: none; }
.story-bar { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 2; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-card); background: rgb(12 13 24 / 0.86); box-shadow: var(--shadow-pop); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.story-bar:not([hidden]) { animation: story-in var(--dur-enter) var(--ease-out); }
@keyframes story-in { from { opacity: 0; transform: translateY(12px); } }
.story-progress { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.story-progress li { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.story-progress li::after { content: ''; display: block; height: 100%; background: var(--ice); transform: scaleX(0); transform-origin: left; }
.story-progress li.done::after { transform: scaleX(1); }
.story-progress li.now::after { transform: scaleX(1); opacity: 0.55; }
.story-caption { margin: 0; font-size: var(--text-md); line-height: 1.45; color: var(--ink); min-height: 1.45em; }
.story-caption.enter { animation: caption-in var(--dur-enter) var(--ease-out); }
@keyframes caption-in { from { opacity: 0; transform: translateY(6px); } }
.story-controls { display: flex; align-items: center; gap: var(--space-2); }
.story-count { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
#story-exit { margin-left: auto; }

/* Time machine ---------------------------------------------------------------------------------- */
.tm { display: block; margin: 0; }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.tm-row input[type=date] { flex: none; padding: 6px 10px; font-size: var(--text-sm); }
.tm-note { display: none; }
.tm.dated .tm-note { display: block; }
.tm-label { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.tm-track { position: relative; flex: 1 1 220px; min-width: 180px; padding: 14px 0 6px; }
.tm-track input[type=range] { position: relative; z-index: 1; width: 100%; margin: 0; }
.tm-marks { position: absolute; inset: 14px 8px auto; height: 18px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.tm-marks li { position: absolute; top: -6px; width: 2px; height: 26px; margin-left: -1px; border-radius: 1px; background: var(--unknown); opacity: 0.8; }
.tm-marks li.today { background: var(--ice); opacity: 0.5; }
.tm-bubble { position: absolute; top: -12px; left: 0; padding: 1px 8px; border-radius: var(--r-pill); background: var(--panel-raised); box-shadow: 0 0 0 1px var(--line-2) inset; font: 600 11px/1.5 var(--ui); color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-feedback) ease; will-change: transform; }
.tm-track.dragging .tm-bubble { opacity: 1; }
#time-live { min-height: 34px; padding: 6px 12px; font-size: var(--text-sm); }
#time-label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
#time-label.forecast { color: var(--unknown); }
.tm-events { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.tm-events .tm-callout { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--unknown-field); color: var(--unknown); font-weight: 600; animation: caption-in var(--dur-enter) var(--ease-out); }
.tm-events code { color: var(--ice); font-size: var(--text-xs); }
.tm-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.tm-events:empty { display: none; }
.xp-toolbar .tm-events, .xp-toolbar .tm-note { display: none !important; }

/* Cypher inspector ------------------------------------------------------------------------------ */
.v3-cypher { margin: var(--space-5) 0 var(--space-6); padding: 0; border-radius: var(--r-card); background: linear-gradient(180deg, var(--panel), rgb(150 160 230 / 0.025)); box-shadow: var(--shadow-1); }
.v3-cypher > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); font-size: var(--text-md); }
.v3-cypher > summary .i { color: var(--indigo-2); }
#cypher-count { margin-left: var(--space-2); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#cypher-queries { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.cq { padding: var(--space-3) var(--space-4); border-radius: var(--r-control); background: rgb(3 3 8 / 0.55); box-shadow: 0 0 0 1px var(--line) inset; }
.cq-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cq h3 { margin: 0; font: 500 var(--text-sm)/1.3 var(--mono); color: var(--ice); }
.cq-meta { display: inline-flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cq-bar { flex: 1 1 80px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cq-bar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--indigo), var(--indigo-2)); transform-origin: left; }
.cq pre { margin: var(--space-3) 0 0; padding: 0; background: none; box-shadow: none; font: 12.5px/1.65 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cq .copy { margin-left: auto; min-height: 30px; padding: 4px 12px; font-size: var(--text-xs); }
.cq .copy.copied { color: var(--holds); box-shadow: 0 0 0 1px var(--holds) inset; }
.cq .copy .i { width: 14px; height: 14px; }
.cq-params { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: 2px 0; border: 0; background: none; color: var(--ink-3); font: 600 var(--text-xs)/1.4 var(--ui); cursor: pointer; }
.cq-params::before { content: '+'; font-weight: 400; transition: transform var(--dur-feedback) var(--ease-out); }
.cq-params[aria-expanded=true]::before { transform: rotate(45deg); }
.cq-params:hover { color: var(--ink); }
.tk-kw { color: #a7adff; font-weight: 500; }
.tk-fn { color: var(--ice); }
.tk-label { color: var(--holds); }
.tk-rel { color: var(--unknown); }
.tk-param { color: #f5a8ff; }
.tk-str { color: #9fe8b9; }
.tk-num { color: var(--violated); }
.tk-com { color: var(--ink-3); font-style: italic; }
.tk-key { color: var(--ice); }

/* Tables and charts (Benchmark keeps these until its own pass) --------------------------------- */
.v3-table { overflow: auto; border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.v3-table table { min-width: 560px; }
.v3-page td, .v3-page th { font-variant-numeric: tabular-nums; }
.v3-chart-scroll { overflow-x: auto; margin: var(--space-5) 0 var(--space-6); }
.v3-chart-scroll svg { display: block; width: 100%; min-width: 720px; }
.v3-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.v3-stats article { padding: var(--space-5); border-radius: var(--r-card); box-shadow: var(--shadow-1); }

/* Responsive -------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .showcase-hero .hero-copy { width: auto; bottom: auto; }
  .showcase-hero .brain-stage { left: auto; right: auto; }
  .xp-more-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .xp-head p { display: none; }
  .xp-head h1 { font-size: 1.25rem; }
  .xp-play { min-height: 38px; padding: 7px 13px; font-size: var(--text-sm); }
  .xp-toolbar { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-2); gap: var(--space-2); border-radius: var(--r-control); }
  .xp-search { max-width: none; gap: 6px; }
  .xp-search > .i { display: none; }
  .xp-search .quiet-chip { display: none; }
  .xp-search .chip, .xp-more-toggle { min-height: 36px; padding: 5px 11px; font-size: var(--text-sm); }
  .xp-more-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
  .xp-more-toggle-text { display: none; }
  .xp-toolbar > .xp-scope, .xp-toolbar > .tm { grid-column: 1 / -1; }
  .xp-toolbar:not(.open) > .xp-scope, .xp-toolbar:not(.open) > .tm { display: none; }
  .xp-scope { justify-content: flex-start; }
  .xp-main.v3-explorer { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  #explorer-canvas { height: clamp(260px, calc(100dvh - 362px), 560px); }
  body[data-public-demo="true"] #explorer-canvas { height: clamp(200px, calc(100dvh - 450px), 472px); }
  .v3-app:has(.v3-replay) #explorer-canvas { height: clamp(220px, calc(100dvh - 420px), 560px); }
  .v3-replay { padding: 6px var(--space-3); font-size: var(--text-xs); line-height: 1.4; }
  .v3-replay small { display: block; margin: 2px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .xp-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: var(--space-2); row-gap: 2px; height: 68px; padding: 0 var(--space-2) 0 var(--space-3); }
  .xp-verdict .v-word { grid-column: 2; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; }
  .xp-verdict .v-icon { grid-row: 1; }
  .xp-verdict .v-summary { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-xs); }
  .xp-verdict .metal { grid-column: 3; grid-row: 1; min-height: 30px; padding: 5px 10px; font-size: var(--text-xs); }
  .xp-legend .shape { display: none; }
  .xp-inspector.v3-detail { position: relative; top: 0; max-height: none; border-radius: var(--r-card) var(--r-card) var(--r-sm) var(--r-sm); padding-top: var(--space-5); }
  .xp-inspector.v3-detail::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-2); }
  .story-bar { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); padding: var(--space-2) var(--space-3); }
  .story-caption { font-size: var(--text-sm); }
  .v3-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-story::before { animation: none; }
  .xp *, .xp-verdict, .story-bar, .story-caption, .tm-callout { animation: none !important; transition-duration: 0ms !important; }
}