/*
  StayFlow Case Study Theme System v11
  -----------------------------------
  Purpose: one semantic component system with two reading themes.
  Dark is the default. Light is a warm editorial reading mode.
  Product artifacts/embedded prototypes keep their own product styling;
  only the case-study framing changes theme.
*/

/* ========== 1. SEMANTIC TOKENS ========== */
:root,
html[data-reading-theme="dark"]{
  color-scheme:dark;
  --sf-bg:#080B10;
  --sf-bg-alt:#0F141C;
  --sf-surface:#121821;
  --sf-surface-raised:#151D27;
  --sf-surface-soft:#0D131B;
  --sf-surface-inset:#0B1017;
  --sf-heading:#E8EDF5;
  --sf-text:#F2F5FA;
  --sf-muted:#A3AFC1;
  --sf-muted-strong:#C5CFDD;
  --sf-border:#232C39;
  --sf-border-strong:#33404F;
  --sf-accent:#5B9BFF;
  --sf-accent-strong:#8FBCFF;
  --sf-accent-soft:rgba(91,155,255,.13);
  --sf-accent-border:rgba(91,155,255,.28);
  --sf-accent-contrast:#08101C;
  --sf-positive:#62C7A5;
  --sf-positive-soft:rgba(98,199,165,.12);
  --sf-shadow-card:0 18px 44px -34px rgba(0,0,0,.72);
  --sf-shadow-raised:0 28px 72px -42px rgba(0,0,0,.88);
  --sf-shadow-device:0 34px 90px -34px rgba(0,0,0,.78);
  --sf-device:#1A222D;
  --sf-device-top:#202B38;
  --sf-device-border:#415064;
  --sf-device-control:#151D27;
  --sf-device-control-text:#D8E0EA;
  --sf-device-foot-top:#53606E;
  --sf-device-foot-bottom:#1B222A;
  --sf-nav-float:rgba(20,26,35,.60);
  --sf-nav-border:rgba(255,255,255,.09);
  --sf-nav-shadow:0 10px 34px -12px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-reading-theme="light"]{
  color-scheme:light;
  --sf-bg:#ECE9E3;
  --sf-bg-alt:#F6F3ED;
  --sf-surface:#FBFAF7;
  --sf-surface-raised:#FFFFFF;
  --sf-surface-soft:#F1EEE8;
  --sf-surface-inset:#E8E4DD;
  --sf-heading:#171B1F;
  --sf-text:#242A30;
  --sf-muted:#626A70;
  --sf-muted-strong:#454E55;
  --sf-border:#D4D0C9;
  --sf-border-strong:#BDB7AE;
  --sf-accent:#0856A4;
  --sf-accent-strong:#0856A4;
  --sf-accent-soft:rgba(8,86,164,.075);
  --sf-accent-border:rgba(8,86,164,.22);
  --sf-accent-contrast:#F8FAFB;
  --sf-positive:#2D6A4F;
  --sf-positive-soft:rgba(45,106,79,.09);
  --sf-shadow-card:0 8px 24px rgba(31,37,41,.055);
  --sf-shadow-raised:0 18px 44px rgba(31,37,41,.085);
  --sf-shadow-device:0 24px 58px rgba(35,39,42,.13);
  --sf-device:#F2F1EE;
  --sf-device-top:#FAF9F6;
  --sf-device-border:#CBC6BE;
  --sf-device-control:#FFFFFF;
  --sf-device-control-text:#394149;
  --sf-device-foot-top:#D8D4CD;
  --sf-device-foot-bottom:#AAA69F;
  --sf-nav-float:rgba(246,243,237,.82);
  --sf-nav-border:rgba(23,27,31,.11);
  --sf-nav-shadow:0 12px 32px -20px rgba(23,27,31,.22),inset 0 1px 0 rgba(255,255,255,.76);
}

/* Bridge all legacy StayFlow tokens into the semantic system. */
html{
  --paper:var(--sf-bg)!important;
  --paper-alt:var(--sf-bg-alt)!important;
  --card:var(--sf-surface)!important;
  --navy:var(--sf-heading)!important;
  --ink:var(--sf-text)!important;
  --slate:var(--sf-muted)!important;
  --line:var(--sf-border)!important;
  --line-strong:var(--sf-border-strong)!important;
  --accent:var(--sf-accent)!important;
  --accent-2:var(--sf-accent-strong)!important;
  --accent-soft:var(--sf-accent-soft)!important;
  --page:var(--sf-bg)!important;
  --page-2:var(--sf-bg-alt)!important;
  --panel:var(--sf-surface)!important;
  --muted:var(--sf-muted)!important;
  --dark:var(--sf-bg-alt)!important;
  --dark-2:var(--sf-surface-raised)!important;
  --blue:var(--sf-accent)!important;
  /* Editorial warning is intentionally blue; no brown/orange on case-study chrome. */
  --accent-orange:var(--sf-accent)!important;
  --accent-orange-text:var(--sf-accent-strong)!important;
  --accent-orange-soft:var(--sf-accent-soft)!important;
}

/* ========== 2. GLOBAL THEME BEHAVIOR ========== */
html,body{background:var(--sf-bg)!important;color:var(--sf-text)!important}
body{transition:background-color .3s ease,color .3s ease,opacity .42s ease,transform .52s cubic-bezier(.22,1,.36,1)!important}
section,.hero,.footer{border-color:var(--sf-border)!important}
section{background:var(--sf-bg)!important;color:var(--sf-text)!important}
section:nth-of-type(even),section.alt,.research-redesign,.design-system-principal,.admin-governance,.system-story,.case-spine,.design-story-overview,.design-decisions-senior,.value-ending{background:var(--sf-bg-alt)!important}
section.dark,.solution-design{background:var(--sf-bg)!important;color:var(--sf-text)!important}
h1,h2,h3,h4,h5,h6{color:var(--sf-heading)!important}
p,.lede,.subtle,.note,.quick-read li{color:var(--sf-muted)!important}
.kicker,.eyebrow,.chapter-kicker,.phase-statement b,.phase-marker b,.ba-label,.persona-label-light,.proto-try small,.platform-eyebrow,.platform-caption{color:var(--sf-accent)!important}

/* ========== 3. NAV + READING TOGGLE ========== */
header.nav .brand-name,header.nav .nav-cta,header.nav nav ul a:hover,header.nav nav ul a.active{color:var(--sf-heading)!important}
header.nav nav ul a{color:var(--sf-muted)!important}
header.nav nav ul a:hover{background:var(--sf-surface-soft)!important}
header.nav nav ul a.active{background:var(--sf-accent-soft)!important}
header.nav .nav-cta{border-color:var(--sf-border-strong)!important}
header.nav.is-stuck .nav-inner{background:var(--sf-nav-float)!important;border-color:var(--sf-nav-border)!important;box-shadow:var(--sf-nav-shadow)!important}
.reading-mode-toggle{background:color-mix(in srgb,var(--sf-surface) 90%,transparent)!important;border-color:var(--sf-border-strong)!important;color:var(--sf-muted)!important;box-shadow:var(--sf-shadow-card)!important}
.reading-mode-toggle:hover{border-color:var(--sf-accent)!important;color:var(--sf-heading)!important}
.reading-mode-switch{background:var(--sf-surface-soft)!important;border-color:var(--sf-border-strong)!important}
.reading-mode-knob{background:var(--sf-accent-strong)!important;box-shadow:0 2px 7px rgba(0,0,0,.16)!important}

/* ========== 4. SHARED COMPONENT CONTRACT ========== */
.card,.logic,.map-panel,.spine-card,.story-stage,.story-output,.storyline-summary,.story-one-line,
.ownership-strip>div,.design-story-path>article,.design-story-result,.research-lens article,.lens-decision,.research-takeaway,
.ux-principles article,.designer-ai-loop>div,.system-design-flow article,.flow-backstage,.flow-ui-intro,
.scenario-card-fixed,.simple-ba-card,.capture-handoff,.handoff-node,.handoff-agents span,.capture-payoff>div,.simple-card-foot,
.decision-cards article,.decision-before-after,.design-impact-strip,.ds-layer,.component-contract,.component-contract-visual>div,
.theme-token-map>div,.prototype-persona,.admin-cases,.governance-quote,.governance-model,.persona-hat-shell,.admin-visual-case,
.platform-visual,.platform-group,.platform-three>div,.platform-principle,.theme-lab,.value-side,.evidence-stat,.production-position,
.research-evidence-banner,.agent-story-rail,.outcome,.token,.principle,.final-wow,.market-proof{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:var(--sf-shadow-card)!important;
}

/* Raised/inset variants. */
.lens-decision,.agent-node,.flow-backstage,.scenario-principle,.component-contract-visual>div,.theme-token-map>div,.admin-visual-case,.handoff-node,.handoff-agents span{
  background:var(--sf-surface-soft)!important;
}
.agent-core,.platform-intelligence,.mother-node,.admin-one-line-model,.designer-ai-core{
  background:var(--sf-surface-inset)!important;
  border-color:var(--sf-border-strong)!important;
  color:var(--sf-heading)!important;
}

/* No warm/brown editorial accents in either theme. */
.quick-read li::marker,.lens-arrow,.agent-rail-label,.agent-node small,.platform-intelligence small,.platform-intelligence i,.platform-caption,
.property-city,.scenario-num,.scenario-tag,.scenario-tag.human,.scenario-tag.warn,.scenario-tag.risk,.scenario-principle small,
.simple-step,.simple-step.after,.capture-payoff span,.decision-cards small,.prototype-link b,.ds-layer>span,.component-contract-visual small,
.component-contract-visual>span,.theme-token-map span,.persona-hat>span,.admin-case .num,.admin-cases .num,.persona-label-light,
.platform-eyebrow,.platform-principle b,.admin-one-line-model i,.final-outcome-flow i,.value-for,.guest-value .value-for{
  color:var(--sf-accent)!important;
}
.scenario-num,.scenario-tag,.scenario-tag.human,.scenario-tag.warn,.scenario-tag.risk,.simple-step,.simple-step.after,.capture-payoff span,
.persona-hat>span,.proto-hat,.phase-statement>span,.phase-marker>span,.phase-num,.chapter-num,.value-for,.guest-value .value-for{
  background:var(--sf-accent-soft)!important;
  border-color:var(--sf-accent-border)!important;
  color:var(--sf-accent-strong)!important;
}
.safe-dot{background:var(--sf-positive)!important}
.human-dot{background:var(--sf-accent)!important}

/* ========== 5. APPROACH ========== */
.platform-story{background:var(--sf-bg)!important}
.agent-story-rail{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:var(--sf-shadow-card)!important}
.agent-node{background:var(--sf-surface-soft)!important;border-color:var(--sf-border)!important}
.agent-node b,.platform-group strong,.property-world article>b,.platform-three b,.platform-principle b{color:var(--sf-heading)!important}
.agent-node small,.platform-chip-row span,.property-world article>span,.platform-three p{color:var(--sf-muted)!important}
.agent-core{background:var(--sf-surface-inset)!important;border:1px solid var(--sf-border-strong)!important}
.agent-core span{background:var(--sf-accent)!important;color:var(--sf-accent-contrast)!important}
.agent-story-rail>i{background:var(--sf-border-strong)!important}
.platform-group,.property-world article,.platform-three>div{background:var(--sf-surface-raised)!important;border-color:var(--sf-border)!important}
.platform-chip-row span,.property-world article>span{background:var(--sf-surface-soft)!important;border-color:var(--sf-border)!important;color:var(--sf-muted)!important}
.platform-intelligence{background:var(--sf-surface-inset)!important;border:1px solid var(--sf-border-strong)!important;color:var(--sf-heading)!important}
.property-city em{background:var(--sf-accent-soft)!important;color:var(--sf-accent-strong)!important}
.platform-principle{background:transparent!important;border:0!important;border-left:2px solid var(--sf-accent)!important;box-shadow:none!important}

/* ========== 6. SOLUTION + AI LOOP ========== */
.solution-design .ux-principles article{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;color:var(--sf-text)!important;box-shadow:var(--sf-shadow-card)!important}
.solution-design .ux-principles h3,.solution-design .ux-principles p{color:var(--sf-heading)!important}
.solution-design .ux-principles p{color:var(--sf-muted)!important}
.principle-proof{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;color:var(--sf-muted-strong)!important;font-size:13px!important;line-height:1.45!important;padding:11px 12px!important}
.designer-ai-loop>div{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:none!important}
.designer-ai-loop>i{color:var(--sf-accent)!important}
.designer-ai-loop small{color:var(--sf-accent)!important}
.designer-ai-loop b{color:var(--sf-heading)!important}
.designer-ai-core{background:var(--sf-surface-raised)!important}

/* ========== 7. SYSTEM FLOW + UX PROOF ========== */
.system-design-flow article{background:var(--sf-surface)!important;border-color:var(--sf-border)!important;box-shadow:none!important}
.system-design-flow article h3{color:var(--sf-heading)!important}
.system-design-flow article p{color:var(--sf-muted)!important}
.system-design-flow>i{color:var(--sf-accent)!important}
.flow-backstage{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:none!important}
.flow-backstage-track span{color:var(--sf-muted)!important}
.flow-backstage-track b{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;color:var(--sf-heading)!important}
.flow-backstage-track i{color:var(--sf-accent)!important}
.flow-ui-intro{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
.flow-ui-intro h3{color:var(--sf-heading)!important}.flow-ui-intro p{color:var(--sf-muted)!important}

/* Product screenshots stay true to the product, but their case-study frame follows theme elevation. */
.ui-shot{background:#FFFFFF!important;border:1px solid color-mix(in srgb,var(--sf-border-strong) 75%,#fff)!important;box-shadow:var(--sf-shadow-raised)!important}
html[data-reading-theme="light"] .ui-shot{box-shadow:0 10px 28px rgba(31,37,41,.075)!important;border-color:#D6D1CA!important}
.ui-caption{background:#FFFFFF!important;border-top:1px solid #ECE7E0!important;box-shadow:none!important}

/* ========== 8. SCENARIO IN MOTION ========== */
.scenario-arrival{background:var(--sf-bg-alt)!important}
.scenario-card-fixed{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:var(--sf-shadow-card)!important}
.scenario-row-fixed{border-bottom-color:var(--sf-border)!important}
.scenario-copy b{color:var(--sf-heading)!important}.scenario-copy p{color:var(--sf-muted)!important}
.scenario-num{background:var(--sf-accent-soft)!important;border:1px solid var(--sf-accent-border)!important;color:var(--sf-accent-strong)!important}
.scenario-tag,.scenario-tag.safe,.scenario-tag.human{background:var(--sf-accent-soft)!important;border:1px solid var(--sf-accent-border)!important;color:var(--sf-accent-strong)!important}
/* Design intent is editorial copy, not another card. */
.scenario-intent-fixed{background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 0 0!important}
.scenario-intent-fixed h3{color:var(--sf-heading)!important}.scenario-intent-fixed>p,.scenario-legend{color:var(--sf-muted)!important}
.scenario-principle{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;border-left:2px solid var(--sf-accent)!important;box-shadow:none!important}
.scenario-principle strong{color:var(--sf-heading)!important}.scenario-principle span{color:var(--sf-muted)!important}

/* ========== 9. GUEST PREP + DECISIONS ========== */
.research-evidence-banner{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;border-left:2px solid var(--sf-accent)!important;box-shadow:none!important}
.research-evidence-banner p{color:var(--sf-muted)!important}.research-evidence-banner b{color:var(--sf-heading)!important}
.simple-ba-card,.capture-handoff,.handoff-node,.capture-payoff>div,.decision-cards article{background:var(--sf-surface)!important;border-color:var(--sf-border)!important;box-shadow:var(--sf-shadow-card)!important}
.simple-ba-head,.simple-card-foot{background:var(--sf-surface)!important;border-color:var(--sf-border)!important;color:var(--sf-muted)!important}
.prototype-link{border-color:var(--sf-border)!important}.prototype-link em{color:var(--sf-muted)!important}

/* ========== 10. DESIGN SYSTEM + PLUG-AND-PLAY THEMING ========== */
.design-system-principal{background:var(--sf-bg-alt)!important}
.ds-layer,.component-contract{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:none!important}
.ds-layer h3,.component-contract h3{color:var(--sf-heading)!important}
.ds-chipset i{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;color:var(--sf-muted-strong)!important}
.component-contract-visual>div,.theme-token-map>div{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;color:var(--sf-text)!important}
.component-contract-visual b,.theme-token-map b{color:var(--sf-heading)!important}
.theme-lab-principal{border-top-color:var(--sf-border)!important}
.theme-lab-copy h3{color:var(--sf-heading)!important}.theme-lab-copy p{color:var(--sf-muted)!important}
.theme-btn{background:var(--sf-surface)!important;border:1px solid var(--sf-border-strong)!important;color:var(--sf-muted-strong)!important;box-shadow:none!important}
.theme-btn:hover{background:var(--sf-surface-soft)!important;border-color:var(--sf-accent)!important;color:var(--sf-heading)!important}
.theme-btn.active{background:var(--sf-accent)!important;border-color:var(--sf-accent)!important;color:var(--sf-accent-contrast)!important}
.theme-demo-wrap{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;box-shadow:var(--sf-shadow-card)!important}
.theme-caption{color:var(--sf-muted)!important}
/* The test window itself remains a deliberately light brand preview; remove dark framing in light reading mode. */
html[data-reading-theme="light"] .theme-demo-wrap{background:#F1EEE8!important;border-color:#D4D0C9!important;box-shadow:0 10px 28px rgba(31,37,41,.07)!important}

/* ========== 11. PRINCIPLES ========== */
section.dark .principle,.principle{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;border-top:2px solid var(--sf-accent)!important;color:var(--sf-text)!important;box-shadow:none!important;padding:22px!important;min-height:180px!important;overflow:hidden!important}
section.dark .principle b,.principle b{color:var(--sf-heading)!important;font-size:18px!important;line-height:1.35!important}
section.dark .principle p,.principle p{color:var(--sf-muted)!important;font-size:14.5px!important;line-height:1.6!important}

/* ========== 12. PROTOTYPE PERSONA + HARDWARE ========== */
.prototype-persona{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:none!important}
.prototype-persona .proto-hat{background:var(--sf-accent-soft)!important;border:1px solid var(--sf-accent-border)!important;color:var(--sf-accent-strong)!important}
.prototype-persona .proto-persona-main b{color:var(--sf-heading)!important}
.prototype-persona .proto-persona-main span,.prototype-persona .proto-try span{color:var(--sf-muted)!important}
.prototype-persona .proto-try{border-color:var(--sf-border-strong)!important}
.prototype-persona .proto-try small{color:var(--sf-accent)!important}

.hero-device,.monitor-shell,#adminMonitorShell{background:linear-gradient(180deg,var(--sf-device-top),var(--sf-device))!important;border:1px solid var(--sf-device-border)!important;box-shadow:var(--sf-shadow-device)!important}
.monitor-top{color:var(--sf-muted-strong)!important}
.monitor-btn{background:var(--sf-device-control)!important;border:1px solid var(--sf-device-border)!important;color:var(--sf-device-control-text)!important;box-shadow:none!important}
.monitor-viewport{box-shadow:0 8px 22px rgba(0,0,0,.10)!important}
.monitor-foot{background:linear-gradient(var(--sf-device-foot-top),var(--sf-device-foot-bottom))!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))!important}
.monitor-base{background:var(--sf-device-foot-bottom)!important;box-shadow:0 10px 22px rgba(0,0,0,.10)!important}
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell,
html[data-reading-theme="light"] .hero-device{box-shadow:0 24px 58px rgba(35,39,42,.13)!important}

/* ========== 13. BACKSTAGE / GOVERNANCE ========== */
.admin-governance{background:var(--sf-bg-alt)!important}
.persona-hat-shell,.admin-cases,.admin-visual-case,.governance-quote,.governance-model{background:var(--sf-surface)!important;border-color:var(--sf-border)!important;box-shadow:none!important}
.persona-hat-head,.persona-hat{border-color:var(--sf-border)!important}
.persona-hat-head h3,.persona-hat b,.admin-visual-case b{color:var(--sf-heading)!important}
.persona-hat-head p,.persona-hat small,.admin-visual-case span{color:var(--sf-muted)!important}
.case-icon{background:var(--sf-accent-soft)!important;border:1px solid var(--sf-accent-border)!important;color:var(--sf-accent-strong)!important}
.admin-one-line-model{background:var(--sf-surface)!important;border:1px solid var(--sf-border)!important;box-shadow:none!important}
.admin-one-line-model span{background:var(--sf-surface-soft)!important;color:var(--sf-muted-strong)!important}
.admin-one-line-model i{color:var(--sf-accent)!important}

/* ========== 14. VALUE / FOOTER ========== */
.value-ending{background:var(--sf-bg-alt)!important}
.value-side,.evidence-stat,.final-wow{background:var(--sf-surface)!important;border-color:var(--sf-border)!important;box-shadow:var(--sf-shadow-card)!important}
.value-side-head{background:transparent!important;border-color:var(--sf-border)!important}
.value-points>div{border-color:var(--sf-border)!important}.value-points b,.final-wow h2{color:var(--sf-heading)!important}.value-points p,.final-wow p{color:var(--sf-muted)!important}
.value-points span,.final-outcome-flow span{background:var(--sf-surface-soft)!important;border:1px solid var(--sf-border)!important;color:var(--sf-muted-strong)!important}
.final-signoff{border-color:var(--sf-border)!important;color:var(--sf-muted)!important}.final-signoff b{color:var(--sf-heading)!important}
.footer{background:var(--sf-bg)!important;border-color:var(--sf-border)!important;color:var(--sf-muted)!important}

/* ========== 15. LIGHT-SPECIFIC MEDIA / CINEMATIC SECTION ========== */
/* Flight media remains cinematic; content cards inside use accessible neutral styling. */
.air-story,.air-story-simple{background:#0B1017!important;color:#F0F5FF!important}
.air-story h2,.air-story .kicker,.air-story p,.air-story-simple h2,.air-story-simple .kicker,.air-story-simple p{color:#F0F5FF!important}
.air-simple-flow>div,.air-question-simple{background:rgba(10,16,24,.72)!important;border-color:rgba(255,255,255,.24)!important;color:#F0F5FF!important;box-shadow:none!important}
.air-simple-flow small,.air-question-simple small{color:#BFD6FF!important}
.air-simple-flow b,.air-question-simple b{color:#FFFFFF!important}

/* ========== 16. RESPONSIVE / ACCESSIBILITY ========== */
@media(max-width:900px){
  .principles{grid-template-columns:1fr 1fr!important}
  .scenario-intent-fixed{padding-top:0!important}
}
@media(max-width:620px){.principles{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){
  body,.reading-mode-toggle,.reading-mode-knob{transition:none!important}
}

/* ========== 17. INTERACTION COMPONENTS ========== */
/* Animated AI core uses a dedicated icon column; animation can never overlap copy. */
.designer-ai-core{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:14px!important;
  row-gap:4px!important;
  align-items:center!important;
  padding:17px 18px!important;
  min-width:0!important;
}
.designer-ai-core>.engine-pulse{
  position:relative!important;left:auto!important;top:auto!important;
  grid-column:1!important;grid-row:1 / span 2!important;
  width:30px!important;height:30px!important;place-self:center!important;
  border-color:var(--sf-accent)!important;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--sf-accent) 35%,transparent)!important;
}
.designer-ai-core>.engine-pulse:after{
  content:'AI';position:absolute;inset:0;display:grid;place-items:center;
  color:var(--sf-accent-strong);font:600 10px 'JetBrains Mono',monospace;
}
.designer-ai-core>small{grid-column:2!important;grid-row:1!important;margin:0!important;font-size:11px!important;line-height:1.3!important;color:var(--sf-accent)!important}
.designer-ai-core>b{grid-column:2!important;grid-row:2!important;min-width:0!important;font-size:15px!important;line-height:1.45!important;overflow-wrap:anywhere!important;color:var(--sf-heading)!important}
@keyframes sfEnginePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sf-accent) 32%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.designer-ai-core>.engine-pulse{animation:sfEnginePulse 1.8s ease-out infinite!important}

.hero{position:relative!important}
.reading-mode-toggle{
  position:absolute!important;z-index:5!important;top:112px!important;
  right:max(32px,calc((100vw - 1400px)/2 + 64px))!important;
  display:inline-flex!important;align-items:center!important;gap:10px!important;
  min-height:38px!important;padding:6px 8px 6px 12px!important;
  border:1px solid var(--sf-border-strong)!important;border-radius:999px!important;
  background:color-mix(in srgb,var(--sf-surface) 90%,transparent)!important;
  color:var(--sf-muted)!important;box-shadow:var(--sf-shadow-card)!important;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  cursor:pointer!important;transition:background .28s ease,border-color .28s ease,color .28s ease,transform .2s ease!important;
}
.reading-mode-toggle:hover{border-color:var(--sf-accent)!important;color:var(--sf-heading)!important;transform:translateY(-1px)!important}
.reading-mode-toggle:focus-visible{outline:2px solid var(--sf-accent)!important;outline-offset:3px!important}
.reading-mode-copy{font:600 10.5px 'JetBrains Mono',monospace!important;letter-spacing:.05em!important;white-space:nowrap!important}
.reading-mode-switch{position:relative!important;width:42px!important;height:24px!important;flex:0 0 42px!important;border:1px solid var(--sf-border-strong)!important;border-radius:999px!important;background:var(--sf-surface-soft)!important}
.reading-mode-knob{position:absolute!important;top:3px!important;left:3px!important;width:16px!important;height:16px!important;border-radius:50%!important;background:var(--sf-accent-strong)!important;box-shadow:0 2px 7px rgba(0,0,0,.16)!important;transition:transform .3s cubic-bezier(.22,1,.36,1),background .28s ease!important}
html[data-reading-theme="light"] .reading-mode-knob{transform:translateX(18px)!important}

/* Light mode is explicit at component level so legacy microsite rules cannot leak through. */
html[data-reading-theme="light"] .flow-ui-intro,
html[data-reading-theme="light"] .scenario-intent-fixed{
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html[data-reading-theme="light"] .ds-chipset i,
html[data-reading-theme="light"] .system-example-track span,
html[data-reading-theme="light"] .spine-mini-flow span,
html[data-reading-theme="light"] .governance-model .mini-flow span{
  background:var(--sf-surface-soft)!important;border-color:var(--sf-border)!important;color:var(--sf-muted-strong)!important;
}
html[data-reading-theme="light"] .agent-story-rail,
html[data-reading-theme="light"] .agent-node,
html[data-reading-theme="light"] .agent-core,
html[data-reading-theme="light"] .platform-visual,
html[data-reading-theme="light"] .platform-group,
html[data-reading-theme="light"] .property-world article,
html[data-reading-theme="light"] .platform-three>div,
html[data-reading-theme="light"] .platform-intelligence,
html[data-reading-theme="light"] .solution-design .ux-principles article,
html[data-reading-theme="light"] .designer-ai-loop>div,
html[data-reading-theme="light"] .scenario-card-fixed,
html[data-reading-theme="light"] .scenario-principle,
html[data-reading-theme="light"] .prototype-persona,
html[data-reading-theme="light"] .persona-hat-shell,
html[data-reading-theme="light"] .admin-visual-case,
html[data-reading-theme="light"] .admin-one-line-model,
html[data-reading-theme="light"] .ds-layer,
html[data-reading-theme="light"] .component-contract,
html[data-reading-theme="light"] .component-contract-visual>div,
html[data-reading-theme="light"] .theme-token-map>div,
html[data-reading-theme="light"] section.dark .principle{
  background:var(--sf-surface)!important;border-color:var(--sf-border)!important;color:var(--sf-text)!important;box-shadow:var(--sf-shadow-card)!important;
}
html[data-reading-theme="light"] .agent-node,
html[data-reading-theme="light"] .platform-chip-row span,
html[data-reading-theme="light"] .property-world article>span,
html[data-reading-theme="light"] .component-contract-visual>div,
html[data-reading-theme="light"] .theme-token-map>div,
html[data-reading-theme="light"] .admin-one-line-model span{
  background:var(--sf-surface-soft)!important;
}
html[data-reading-theme="light"] .agent-core,
html[data-reading-theme="light"] .platform-intelligence,
html[data-reading-theme="light"] .designer-ai-core{
  background:var(--sf-surface-inset)!important;border-color:var(--sf-border-strong)!important;
}
html[data-reading-theme="light"] .scenario-num,
html[data-reading-theme="light"] .scenario-tag,
html[data-reading-theme="light"] .scenario-tag.human,
html[data-reading-theme="light"] .scenario-tag.warn,
html[data-reading-theme="light"] .scenario-tag.risk,
html[data-reading-theme="light"] .proto-hat,
html[data-reading-theme="light"] .persona-hat>span{
  background:var(--sf-accent-soft)!important;border-color:var(--sf-accent-border)!important;color:var(--sf-accent-strong)!important;
}
html[data-reading-theme="light"] .prototype-persona .proto-persona-main b,
html[data-reading-theme="light"] .persona-hat-head h3,
html[data-reading-theme="light"] .persona-hat b,
html[data-reading-theme="light"] .admin-visual-case b,
html[data-reading-theme="light"] .ds-layer h3,
html[data-reading-theme="light"] .component-contract h3,
html[data-reading-theme="light"] .component-contract-visual b,
html[data-reading-theme="light"] .theme-token-map b,
html[data-reading-theme="light"] .designer-ai-loop b,
html[data-reading-theme="light"] .agent-node b,
html[data-reading-theme="light"] .platform-group strong,
html[data-reading-theme="light"] .property-world article>b{
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .prototype-persona .proto-persona-main span,
html[data-reading-theme="light"] .prototype-persona .proto-try span,
html[data-reading-theme="light"] .persona-hat-head p,
html[data-reading-theme="light"] .persona-hat small,
html[data-reading-theme="light"] .admin-visual-case span,
html[data-reading-theme="light"] .platform-chip-row span,
html[data-reading-theme="light"] .property-world article>span,
html[data-reading-theme="light"] .platform-three p{
  color:var(--sf-muted)!important;
}

/* Light prototype hardware: intentionally light, no black frame or dirty shadow. */
html[data-reading-theme="light"] .hero-device,
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell{
  background:linear-gradient(180deg,var(--sf-device-top),var(--sf-device))!important;
  border-color:var(--sf-device-border)!important;
  box-shadow:var(--sf-shadow-device)!important;
}
html[data-reading-theme="light"] .monitor-top{color:var(--sf-muted-strong)!important}
html[data-reading-theme="light"] .monitor-btn{background:var(--sf-device-control)!important;border-color:var(--sf-device-border)!important;color:var(--sf-device-control-text)!important}
html[data-reading-theme="light"] .monitor-foot{background:linear-gradient(var(--sf-device-foot-top),var(--sf-device-foot-bottom))!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.10))!important}
html[data-reading-theme="light"] .monitor-base{background:var(--sf-device-foot-bottom)!important;box-shadow:0 8px 18px rgba(0,0,0,.08)!important}

@media(max-width:900px){
  .reading-mode-toggle{top:92px!important;right:20px!important}
  .reading-mode-copy{display:none!important}
}
@media(max-width:560px){.reading-mode-toggle{top:86px!important;right:16px!important;padding:6px!important}}
@media(prefers-reduced-motion:reduce){.designer-ai-core>.engine-pulse{animation:none!important}.reading-mode-toggle,.reading-mode-knob{transition:none!important}}

/* ========== 18. FULL-PAGE AUDIT CORRECTIONS ========== */
/* Remaining legacy microsite accents and micro-type found in the light-mode DOM audit. */
.lens-no,
.platform-three>div>span,
.ba-transform-arrow small,
.ba-transform-arrow>span,
.capture-payoff>span,
.system-design-flow article>span,
.decision-cards article>span{
  color:var(--sf-accent-strong)!important;
}
.lens-no,
.platform-three>div>span,
.system-design-flow article>span,
.decision-cards article>span{
  background:var(--sf-accent-soft)!important;
  border:1px solid var(--sf-accent-border)!important;
}
.ba-transform-arrow>span{background:var(--sf-accent-soft)!important;border:1px solid var(--sf-accent-border)!important}
.ba-transform-arrow small{color:var(--sf-accent)!important}

/* Editorial media frames use the current reading surface; the image itself stays untouched. */
.simple-media{background:var(--sf-surface-soft)!important;border-color:var(--sf-border)!important}
html[data-reading-theme="light"] .simple-media img{box-shadow:0 10px 26px rgba(31,37,41,.10)!important}
html[data-reading-theme="light"] .theme-browser{box-shadow:0 12px 30px rgba(31,37,41,.09)!important}
html[data-reading-theme="light"] .hero-device,
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell{box-shadow:0 18px 46px rgba(35,39,42,.10)!important}

/* Brand-layer chips were carrying a high-specificity dark legacy rule. */
html[data-reading-theme="light"] .design-system-principal .ds-layer.brand-layer .ds-chipset i,
html[data-reading-theme="light"] .design-system-principal .ds-layer .ds-chipset i{
  background:var(--sf-surface-soft)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-muted-strong)!important;
}

/* Value center follows the semantic accent correctly in light mode. */
.value-center-mark{background:var(--sf-accent)!important;color:var(--sf-accent-contrast)!important;box-shadow:none!important}

/* Remove tiny standalone-microsite typography from the case-study narrative. */
.story-stage>span,.story-stage>b,.story-stage>em,
.storyline-summary span,.storyline-summary b,.storyline-summary strong,
.story-one-line span,.story-one-line b,.story-one-line strong,
.platform-eyebrow,.platform-chip-row span,.property-city,.platform-caption,
.system-design-flow article>span,.system-design-flow article small,
.flow-backstage>small,.flow-ui-intro small,
.scenario-num,.scenario-tag,.simple-step,
.ba-transform-arrow small,.handoff-node small,.handoff-agents span,
.decision-cards article>span,.decision-cards li,.prototype-link b,
.privacy-note.simple-privacy,.component-contract-visual small,.theme-token-map span,
.persona-label-light,.admin-case .num,.admin-cases .num{
  font-size:11px!important;
  line-height:1.4!important;
}
.story-stage b,.story-stage em,.storyline-summary span,.story-one-line span,
.platform-chip-row span,.property-world article>span,.handoff-node b,.handoff-node p,
.decision-cards li,.prototype-link em{
  font-size:12.5px!important;
  line-height:1.55!important;
}

/* Design-story micro labels become readable without changing the card hierarchy. */
.story-stage b,.storyline-summary b,.storyline-summary strong{color:var(--sf-heading)!important}
.story-stage em,.storyline-summary span,.story-one-line span{color:var(--sf-muted)!important}

/* Light reading mode: all audited editorial surfaces must be light or transparent. */
html[data-reading-theme="light"] .lens-no,
html[data-reading-theme="light"] .simple-media,
html[data-reading-theme="light"] .ba-transform-arrow>span,
html[data-reading-theme="light"] .platform-three>div>span,
html[data-reading-theme="light"] .system-design-flow article>span,
html[data-reading-theme="light"] .decision-cards article>span{
  background:var(--sf-accent-soft)!important;
  color:var(--sf-accent-strong)!important;
  border-color:var(--sf-accent-border)!important;
}
html[data-reading-theme="light"] .simple-media{background:var(--sf-surface-soft)!important}

/* ========== 19. READABILITY FLOOR — CASE-STUDY NARRATIVE ONLY ========== */
/* The portfolio story should never require magnification. Product UI inside screenshots/iframes is intentionally excluded. */
.ba-transform-arrow{color:var(--sf-accent)!important}

/* Labels / eyebrows / metadata */
.story-stage>small,
.story-output b,
.storyline-summary small,
.lens-no,
.platform-eyebrow,
.platform-city,
.platform-caption,
.platform-three>div>span,
.system-design-flow article>span,
.flow-backstage>small,
.flow-ui-intro small,
.scenario-num,
.scenario-tag,
.simple-step,
.ba-transform-arrow small,
.handoff-node small,
.handoff-agents span,
.decision-cards article>span,
.prototype-link b,
.privacy-note.simple-privacy,
.component-contract-visual small,
.theme-token-map span,
.persona-label-light,
.admin-case .num,
.admin-cases .num,
.proto-hat,
.proto-try small,
.value-for,
.final-wow .kicker,
.market-proof small{
  font-size:11px!important;
  line-height:1.45!important;
  letter-spacing:.08em!important;
}

/* Small explanatory text */
.story-stage>p,
.story-output span,
.storyline-summary span,
.story-one-line span,
.platform-chip-row span,
.property-world article>span,
.platform-three p,
.system-design-flow article small,
.flow-backstage>span,
.flow-ui-intro span,
.scenario-card p,
.scenario-intent-fixed p,
.handoff-node p,
.handoff-node b,
.decision-cards li,
.prototype-link em,
.prototype-persona .proto-persona-main span,
.prototype-persona .proto-try span,
.admin-visual-case span,
.admin-one-line-model span,
.value-points span,
.market-proof p,
.final-wow p{
  font-size:12.5px!important;
  line-height:1.55!important;
}

/* Controls that belong to the case-study chrome, not the embedded product UI. */
.monitor-btn{font-size:11px!important;line-height:1.2!important}
.monitor-top{font-size:11.5px!important}

/* Headings inside compact editorial cards. */
.story-stage h3,.scenario-card h3,.decision-cards h3,.prototype-persona b,
.admin-visual-case b,.platform-three b,.property-world article>b{
  min-font-size:initial;
}
.prototype-persona .proto-persona-main b{font-size:14px!important}
.prototype-persona .proto-try small{font-size:11px!important}
.admin-one-line-model span{font-size:11.5px!important}

/* Light theme shadows remain atmospheric, never black/dirty. */
html[data-reading-theme="light"] .ui-shot,
html[data-reading-theme="light"] .scenario-card,
html[data-reading-theme="light"] .decision-cards article,
html[data-reading-theme="light"] .ds-layer,
html[data-reading-theme="light"] .component-contract,
html[data-reading-theme="light"] .principle,
html[data-reading-theme="light"] .prototype-persona,
html[data-reading-theme="light"] .admin-visual-case,
html[data-reading-theme="light"] .persona-hat,
html[data-reading-theme="light"] .platform-three>div{
  box-shadow:var(--sf-shadow-card)!important;
}

/* Explicit light-mode content colors for high-specificity legacy selectors. */
html[data-reading-theme="light"] .scenario-card p,
html[data-reading-theme="light"] .scenario-intent-fixed p,
html[data-reading-theme="light"] .handoff-node p,
html[data-reading-theme="light"] .decision-cards li,
html[data-reading-theme="light"] .prototype-persona span,
html[data-reading-theme="light"] .admin-one-line-model span,
html[data-reading-theme="light"] .value-points span,
html[data-reading-theme="light"] .market-proof p{
  color:var(--sf-muted)!important;
}

/* ========== 20. LIGHT MODE COMPLETENESS PASS ========== */
/*
   This block is intentionally explicit. It is the final authority for Case Study 3
   light reading mode so no legacy standalone StayFlow selector can leave a dark
   surface, dirty shadow, or warm/brown editorial accent behind.
*/
html[data-reading-theme="light"]{
  --sf-shadow-card:0 8px 24px rgba(34,39,43,.055);
  --sf-shadow-raised:0 16px 36px rgba(34,39,43,.075);
  --sf-shadow-device:0 18px 46px rgba(34,39,43,.095);
}

/* Approach / system model */
html[data-reading-theme="light"] .platform-story,
html[data-reading-theme="light"] .platform-visual,
html[data-reading-theme="light"] .platform-group,
html[data-reading-theme="light"] .agent-story-rail,
html[data-reading-theme="light"] .agent-node,
html[data-reading-theme="light"] .agent-core,
html[data-reading-theme="light"] .property-world article,
html[data-reading-theme="light"] .platform-three>div,
html[data-reading-theme="light"] .platform-principle{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .agent-core,
html[data-reading-theme="light"] .platform-intelligence{
  background:var(--sf-surface-soft)!important;
  border:1px solid var(--sf-border-strong)!important;
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .platform-chip-row span,
html[data-reading-theme="light"] .property-world article>span,
html[data-reading-theme="light"] .platform-three>div>span{
  background:var(--sf-surface-soft)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-muted-strong)!important;
}
html[data-reading-theme="light"] .platform-down,
html[data-reading-theme="light"] .platform-branch,
html[data-reading-theme="light"] .flowarrow,
html[data-reading-theme="light"] .agent-story-rail>i{
  color:var(--sf-accent)!important;
  border-color:var(--sf-accent-border)!important;
}

/* Solution / UX proof / system-flow editorial chrome */
html[data-reading-theme="light"] .solution-design,
html[data-reading-theme="light"] .system-story{
  background:var(--sf-bg)!important;
  color:var(--sf-text)!important;
}
html[data-reading-theme="light"] .designer-ai-loop>div,
html[data-reading-theme="light"] .ux-principles article,
html[data-reading-theme="light"] .system-design-flow article,
html[data-reading-theme="light"] .flow-backstage,
html[data-reading-theme="light"] .flow-ui-intro,
html[data-reading-theme="light"] .flow-human,
html[data-reading-theme="light"] .research-evidence-banner{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .designer-ai-core,
html[data-reading-theme="light"] .mother-node{
  background:var(--sf-surface-soft)!important;
  border-color:var(--sf-border-strong)!important;
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .system-design-flow article>span,
html[data-reading-theme="light"] .flow-backstage b,
html[data-reading-theme="light"] .capture-payoff>span{
  background:var(--sf-accent-soft)!important;
  border:1px solid var(--sf-accent-border)!important;
  color:var(--sf-accent-strong)!important;
}

/* UX Proof: product screenshots remain product-white, but the portfolio frame is clean and light. */
html[data-reading-theme="light"] .product-evidence .ui-shot{
  background:#FFFFFF!important;
  border-color:var(--sf-border)!important;
  box-shadow:0 9px 24px rgba(34,39,43,.065)!important;
}
html[data-reading-theme="light"] .product-evidence .ui-caption{
  background:#FFFFFF!important;
  border-top:1px solid #E8E4DD!important;
  box-shadow:none!important;
}

/* Scenario + Design Intent */
html[data-reading-theme="light"] .scenario-arrival,
html[data-reading-theme="light"] .scenario-card-fixed,
html[data-reading-theme="light"] .scenario-principle{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .scenario-intent-fixed{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .scenario-num,
html[data-reading-theme="light"] .scenario-tag,
html[data-reading-theme="light"] .scenario-tag.safe,
html[data-reading-theme="light"] .scenario-tag.human,
html[data-reading-theme="light"] .scenario-tag.warn,
html[data-reading-theme="light"] .scenario-tag.risk{
  background:var(--sf-accent-soft)!important;
  border-color:var(--sf-accent-border)!important;
  color:var(--sf-accent-strong)!important;
}

/* Guest preparation + decisions */
html[data-reading-theme="light"] .simple-ba-card,
html[data-reading-theme="light"] .simple-card-foot,
html[data-reading-theme="light"] .capture-handoff,
html[data-reading-theme="light"] .handoff-node,
html[data-reading-theme="light"] .handoff-agents span,
html[data-reading-theme="light"] .capture-payoff>div,
html[data-reading-theme="light"] .decision-cards article,
html[data-reading-theme="light"] .decision-before-after,
html[data-reading-theme="light"] .design-impact-strip{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .mother-node,
html[data-reading-theme="light"] .handoff-agents span{
  background:var(--sf-surface-soft)!important;
}

/* Design system + Plug-and-play theming */
html[data-reading-theme="light"] .design-system-principal,
html[data-reading-theme="light"] .ds-layer,
html[data-reading-theme="light"] .component-contract,
html[data-reading-theme="light"] .theme-lab,
html[data-reading-theme="light"] .theme-demo-wrap{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .design-system-principal .ds-layer.brand-layer{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
}
html[data-reading-theme="light"] .design-system-principal .ds-layer.brand-layer h3,
html[data-reading-theme="light"] .design-system-principal .ds-layer.brand-layer>span{
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .design-system-principal .ds-layer .ds-chipset i,
html[data-reading-theme="light"] .design-system-principal .ds-layer.brand-layer .ds-chipset i,
html[data-reading-theme="light"] .component-contract-visual>div,
html[data-reading-theme="light"] .theme-token-map>div{
  background:var(--sf-surface-soft)!important;
  border:1px solid var(--sf-border)!important;
  color:var(--sf-muted-strong)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .theme-demo-wrap{
  background:var(--sf-surface-soft)!important;
  box-shadow:0 9px 24px rgba(34,39,43,.055)!important;
}
html[data-reading-theme="light"] .theme-btn{
  background:var(--sf-surface-raised)!important;
  border-color:var(--sf-border-strong)!important;
  color:var(--sf-muted-strong)!important;
}
html[data-reading-theme="light"] .theme-btn:hover{
  background:var(--sf-accent-soft)!important;
  border-color:var(--sf-accent)!important;
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .theme-btn.active{
  background:var(--sf-accent)!important;
  border-color:var(--sf-accent)!important;
  color:var(--sf-accent-contrast)!important;
}

/* Frontstage / Backstage prototype framing */
html[data-reading-theme="light"] .prototype-persona,
html[data-reading-theme="light"] .persona-hat-shell,
html[data-reading-theme="light"] .admin-cases,
html[data-reading-theme="light"] .admin-visual-case,
html[data-reading-theme="light"] .governance-quote,
html[data-reading-theme="light"] .governance-model,
html[data-reading-theme="light"] .admin-one-line-model{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .prototype-persona .proto-hat,
html[data-reading-theme="light"] .case-icon,
html[data-reading-theme="light"] .persona-hat>span{
  background:var(--sf-accent-soft)!important;
  border:1px solid var(--sf-accent-border)!important;
  color:var(--sf-accent-strong)!important;
}
html[data-reading-theme="light"] .admin-one-line-model span{
  background:var(--sf-surface-soft)!important;
  color:var(--sf-muted-strong)!important;
}
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell,
html[data-reading-theme="light"] .hero-device{
  background:linear-gradient(180deg,#FAF9F6 0%,#EEECE7 100%)!important;
  border:1px solid #CBC6BE!important;
  box-shadow:0 18px 46px rgba(34,39,43,.095)!important;
}
html[data-reading-theme="light"] .monitor-viewport{
  border:1px solid rgba(23,27,31,.07)!important;
  box-shadow:0 6px 16px rgba(34,39,43,.055)!important;
}
html[data-reading-theme="light"] .monitor-foot{
  filter:drop-shadow(0 7px 8px rgba(34,39,43,.07))!important;
}
html[data-reading-theme="light"] .monitor-base{
  box-shadow:0 7px 14px rgba(34,39,43,.06)!important;
}

/* Value ending */
html[data-reading-theme="light"] .value-ending,
html[data-reading-theme="light"] .value-side,
html[data-reading-theme="light"] .evidence-stat,
html[data-reading-theme="light"] .final-wow,
html[data-reading-theme="light"] .market-proof{
  background:var(--sf-surface)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-text)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .value-ending{background:var(--sf-bg-alt)!important}
html[data-reading-theme="light"] .final-outcome-flow span,
html[data-reading-theme="light"] .value-points span{
  background:var(--sf-surface-soft)!important;
  border-color:var(--sf-border)!important;
  color:var(--sf-muted-strong)!important;
}

/* Interaction states shared by both themes. */
.card,.ds-layer,.principle,.decision-cards article,.admin-visual-case,.platform-three>div,.theme-btn,.reading-mode-toggle{
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease!important;
}
.card:hover,.ds-layer:hover,.principle:hover,.decision-cards article:hover,.admin-visual-case:hover,.platform-three>div:hover{
  border-color:var(--sf-accent-border)!important;
  transform:translateY(-2px);
  box-shadow:var(--sf-shadow-card)!important;
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--sf-accent)!important;
  outline-offset:3px!important;
}

/* Strict editorial accent policy: the case-study shell uses only blue/green + neutrals.
   Product screenshots / embedded prototypes retain their own brand colors. */
html[data-reading-theme="light"] .quick-read li::marker,
html[data-reading-theme="light"] .flowarrow,
html[data-reading-theme="light"] .platform-down,
html[data-reading-theme="light"] .platform-branch,
html[data-reading-theme="light"] .agent-rail-label,
html[data-reading-theme="light"] .platform-eyebrow,
html[data-reading-theme="light"] .platform-caption,
html[data-reading-theme="light"] .decision-cards small,
html[data-reading-theme="light"] .component-contract-visual small,
html[data-reading-theme="light"] .theme-token-map span,
html[data-reading-theme="light"] .persona-label-light,
html[data-reading-theme="light"] .admin-case .num,
html[data-reading-theme="light"] .admin-cases .num,
html[data-reading-theme="light"] .proto-try small,
html[data-reading-theme="light"] .value-for{
  color:var(--sf-accent)!important;
}

/* ========== 21. V12 LIGHT READING QUALITY PASS ========== */
/* This is the final light-theme authority. It removes leftover microsite framing,
   restores hierarchy, uses the requested blue, and keeps product artifacts untouched. */
html[data-reading-theme="light"]{
  --sf-accent:#0856A4;
  --sf-accent-strong:#0856A4;
  --sf-accent-soft:rgba(8,86,164,.085);
  --sf-accent-border:rgba(8,86,164,.20);
  --sf-shadow-card:0 4px 14px rgba(23,27,31,.035);
  --sf-shadow-raised:0 8px 22px rgba(23,27,31,.05);
  --sf-shadow-device:0 14px 34px rgba(23,27,31,.075);
}

/* Editorial blue must be the same #0856A4 throughout LIGHT reading mode. */
html[data-reading-theme="light"] .kicker,
html[data-reading-theme="light"] .eyebrow,
html[data-reading-theme="light"] .chapter-kicker,
html[data-reading-theme="light"] .phase-statement b,
html[data-reading-theme="light"] .phase-marker b,
html[data-reading-theme="light"] .platform-eyebrow,
html[data-reading-theme="light"] .platform-caption,
html[data-reading-theme="light"] .flow-backstage>small,
html[data-reading-theme="light"] .flow-ui-intro small,
html[data-reading-theme="light"] .ux-principles small,
html[data-reading-theme="light"] .designer-ai-loop small,
html[data-reading-theme="light"] .component-contract-visual small,
html[data-reading-theme="light"] .theme-token-map span,
html[data-reading-theme="light"] .persona-label-light,
html[data-reading-theme="light"] .proto-try small,
html[data-reading-theme="light"] .simple-step,
html[data-reading-theme="light"] .ba-label,
html[data-reading-theme="light"] .value-for{
  color:#0856A4!important;
}
html[data-reading-theme="light"] .theme-btn.active,
html[data-reading-theme="light"] .agent-core span,
html[data-reading-theme="light"] .value-center-mark{
  background:#0856A4!important;
  border-color:#0856A4!important;
}

/* SYSTEM FLOW — numbers are chips, never full-width bars. */
.system-design-flow article>span{
  display:inline-flex!important;
  width:36px!important;
  height:28px!important;
  min-width:36px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  padding:0!important;
  margin:0 0 17px!important;
  font:600 11px/1 'JetBrains Mono',monospace!important;
  letter-spacing:.04em!important;
}
html[data-reading-theme="light"] .system-design-flow article>span{
  background:rgba(8,86,164,.07)!important;
  border:1px solid rgba(8,86,164,.18)!important;
  color:#0856A4!important;
}

/* UX PROOF — remove the legacy white/banner rectangle behind the heading. */
html[data-reading-theme="light"] .flow-ui-intro,
html[data-reading-theme="light"] .system-story .flow-ui-intro{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
}
html[data-reading-theme="light"] .flow-ui-intro h3{color:var(--sf-heading)!important}
html[data-reading-theme="light"] .flow-ui-intro>p{color:var(--sf-muted)!important}

/* SOLUTION — chapter bar and introductory copy must read on the light canvas. */
html[data-reading-theme="light"] .solution-design .phase-statement,
html[data-reading-theme="light"] .solution-design .phase-statement.phase-dark{
  color:var(--sf-text)!important;
}
html[data-reading-theme="light"] .solution-design .phase-statement b{
  color:var(--sf-heading)!important;
}
html[data-reading-theme="light"] .solution-design .phase-statement em{
  color:var(--sf-muted)!important;
  border-color:var(--sf-border-strong)!important;
}
html[data-reading-theme="light"] .solution-design .phase-statement>span{
  background:rgba(8,86,164,.08)!important;
  border:1px solid rgba(8,86,164,.20)!important;
  color:#0856A4!important;
}
html[data-reading-theme="light"] .solution-design .solution-title{color:var(--sf-heading)!important}
html[data-reading-theme="light"] .solution-design>.wrap>.kicker{color:#0856A4!important}
html[data-reading-theme="light"] .solution-design .ux-principles article{
  background:var(--sf-surface)!important;
  border:1px solid var(--sf-border)!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .principle-proof{
  background:var(--sf-surface-soft)!important;
  color:var(--sf-muted-strong)!important;
  border:1px solid var(--sf-border)!important;
  box-shadow:none!important;
}

/* PROBLEM lives on cinematic media. Keep this one chapter marker white in BOTH themes. */
.air-overlay .video-problem b,
.air-overlay .video-problem em{
  color:#FFFFFF!important;
}
.air-overlay .video-problem em{
  border-color:rgba(255,255,255,.34)!important;
}
.air-overlay .video-problem>span{
  color:#FFFFFF!important;
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.34)!important;
}
html[data-reading-theme="light"] .air-overlay .video-problem b,
html[data-reading-theme="light"] .air-overlay .video-problem em,
html[data-reading-theme="light"] .air-overlay .video-problem>span{
  color:#FFFFFF!important;
}

/* Light mode should feel flat/editorial, not like dark cards recolored cream. */
html[data-reading-theme="light"] .card,
html[data-reading-theme="light"] .logic,
html[data-reading-theme="light"] .map-panel,
html[data-reading-theme="light"] .platform-visual,
html[data-reading-theme="light"] .platform-group,
html[data-reading-theme="light"] .property-world article,
html[data-reading-theme="light"] .platform-three>div,
html[data-reading-theme="light"] .system-design-flow article,
html[data-reading-theme="light"] .flow-backstage,
html[data-reading-theme="light"] .scenario-card-fixed,
html[data-reading-theme="light"] .simple-ba-card,
html[data-reading-theme="light"] .capture-handoff,
html[data-reading-theme="light"] .handoff-node,
html[data-reading-theme="light"] .decision-cards article,
html[data-reading-theme="light"] .ds-layer,
html[data-reading-theme="light"] .component-contract,
html[data-reading-theme="light"] .theme-lab,
html[data-reading-theme="light"] .prototype-persona,
html[data-reading-theme="light"] .persona-hat-shell,
html[data-reading-theme="light"] .admin-visual-case,
html[data-reading-theme="light"] .value-side,
html[data-reading-theme="light"] .evidence-stat,
html[data-reading-theme="light"] .final-wow{
  box-shadow:none!important;
}

/* Product evidence gets only enough elevation to separate white UI from warm paper. */
html[data-reading-theme="light"] .product-evidence .ui-shot{
  box-shadow:0 5px 14px rgba(23,27,31,.045)!important;
}

/* FRONTSTAGE + BACKSTAGE MONITORS — refined light hardware, no dirty black shadow. */
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell{
  background:#F4F2ED!important;
  border:1px solid #C9C5BD!important;
  box-shadow:0 14px 34px rgba(23,27,31,.075)!important;
  padding:14px 14px 18px!important;
  border-radius:22px!important;
}
html[data-reading-theme="light"] .monitor-top{
  color:#4F5961!important;
  padding:0 4px 10px!important;
}
html[data-reading-theme="light"] .monitor-btn{
  background:#FFFFFF!important;
  border:1px solid #C9C5BD!important;
  color:#313940!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .monitor-viewport{
  border:1px solid #D7D3CC!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)!important;
  scrollbar-width:none!important;
}
html[data-reading-theme="light"] .monitor-viewport::-webkit-scrollbar{display:none!important}
html[data-reading-theme="light"] .monitor-foot,
html[data-reading-theme="light"] .monitor-base{display:none!important}

/* HERO PREVIEW — exact 16:9 crop prevents the white strip; remove dark blur and excess haze. */
.hero-product:before{display:none!important}
.hero-fade{display:none!important}
.hero-product-crop{
  height:auto!important;
  aspect-ratio:16 / 9!important;
  overflow:hidden!important;
}
html[data-reading-theme="light"] .hero-device{
  background:#F4F2ED!important;
  border:1px solid #C9C5BD!important;
  box-shadow:0 12px 30px rgba(23,27,31,.07)!important;
  border-radius:20px 20px 0 0!important;
}
html[data-reading-theme="light"] .hero-device-bar i{background:#AAA69F!important}
.hero-product-stage iframe,
.monitor-stage iframe{
  scrollbar-width:none!important;
}

/* Keep light accents consistent in nested UI chrome authored by the case study. */
html[data-reading-theme="light"] .flow-backstage-track b,
html[data-reading-theme="light"] .system-example-track span,
html[data-reading-theme="light"] .spine-mini-flow span,
html[data-reading-theme="light"] .admin-one-line-model span,
html[data-reading-theme="light"] .theme-token-map>div,
html[data-reading-theme="light"] .component-contract-visual>div{
  box-shadow:none!important;
}

/* Solution is a three-card layout, not a card wrapped inside another card. */
.ux-principles,
html[data-reading-theme="light"] .ux-principles{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}

/* ========== 22. V13 LIGHT THEME CONSISTENCY AUTHORITY ========== */
/* Single source of truth for Case Study 3 light reading mode. Editorial UI uses
   #0856A4 as its only blue accent. Product-artifact UI inside screenshots/iframes
   keeps its own product palette. */
html[data-reading-theme="light"]{
  --sf-accent:#0856A4;
  --sf-accent-strong:#0856A4;
  --sf-accent-soft:rgba(8,86,164,.075);
  --sf-accent-border:rgba(8,86,164,.22);
  --sf-heading:#171B1F;
  --sf-text:#30383D;
  --sf-muted:#626A70;
  --sf-muted-strong:#4D565C;
  --sf-surface:#FBFAF7;
  --sf-surface-soft:#F3F1EC;
  --sf-surface-raised:#FFFFFF;
  --sf-border:#D4D0C9;
  --sf-border-strong:#C5C0B8;
}

/* Universal editorial accent normalization in LIGHT mode. */
html[data-reading-theme="light"] :is(
  .kicker,.eyebrow,.chapter-kicker,.phase-statement b,.phase-marker b,
  .ownership-strip small,.design-story-path small,.design-shift b,
  .research-lens small,.research-takeaway small,.platform-eyebrow,.platform-caption,
  .agent-rail-label,.agent-node small,.agent-core small,.ux-principles small,
  .designer-ai-loop small,.system-design-flow small,.flow-backstage>small,
  .flow-ui-intro small,.decision-cards small,.ba-label,.simple-step,
  .component-contract-copy .kicker,.component-contract-visual small,
  .theme-token-map span,.persona-label-light,.proto-try small,.value-for
){color:#0856A4!important}

html[data-reading-theme="light"] :is(
  .quick-read li::before,.design-story-path>i,.story-one-line i,
  .platform-down,.platform-branch,.map-arrow,.flowarrow,
  .designer-ai-loop>i,.system-design-flow>i,.flow-backstage-track i,
  .handoff-arrow,.ba-transform-arrow
){color:#0856A4!important}
html[data-reading-theme="light"] .quick-read li::before{background:#0856A4!important}

/* DESIGN STORY — fully light, no surviving dark result card, and blue number chips. */
html[data-reading-theme="light"] .design-story-overview{background:var(--sf-page)!important;color:var(--sf-text)!important}
html[data-reading-theme="light"] .ownership-strip>div,
html[data-reading-theme="light"] .design-story-path>article,
html[data-reading-theme="light"] .design-story-path>article.design-story-result{
  background:#FBFAF7!important;
  border:1px solid #D4D0C9!important;
  color:#171B1F!important;
  box-shadow:none!important;
}
html[data-reading-theme="light"] .design-story-path>article>span{
  display:inline-flex!important;width:36px!important;height:28px!important;min-width:36px!important;
  align-items:center!important;justify-content:center!important;padding:0!important;margin:0 0 16px!important;
  border-radius:8px!important;background:rgba(8,86,164,.075)!important;
  border:1px solid rgba(8,86,164,.22)!important;color:#0856A4!important;
  font:600 11px/1 'JetBrains Mono',monospace!important;
}
html[data-reading-theme="light"] .design-story-path h3,
html[data-reading-theme="light"] .design-story-path p,
html[data-reading-theme="light"] .design-story-result h3,
html[data-reading-theme="light"] .design-story-result p{color:#171B1F!important}
html[data-reading-theme="light"] .design-shift{border-color:#D4D0C9!important}
html[data-reading-theme="light"] .design-shift em{color:#4D565C!important}
html[data-reading-theme="light"] .story-one-line{
  background:#F3F1EC!important;border:1px solid #D4D0C9!important;color:#4D565C!important;box-shadow:none!important
}
html[data-reading-theme="light"] .story-one-line b,
html[data-reading-theme="light"] .story-one-line strong{color:#171B1F!important}

/* 32,000 FT MOMENT — cinematic section stays dark in both modes for media legibility. */
html[data-reading-theme="light"] .air-story-simple .light-kicker,
.air-story-simple .light-kicker{color:#FFFFFF!important}
html[data-reading-theme="light"] .air-story-simple h2,
html[data-reading-theme="light"] .air-story-simple .air-simple-sub{color:#FFFFFF!important}
html[data-reading-theme="light"] .air-flow-arrow,
.air-flow-arrow{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:#FFFFFF!important;padding:0!important;border-radius:0!important;
}
html[data-reading-theme="light"] .air-flow-start,
html[data-reading-theme="light"] .air-flow-impact,
html[data-reading-theme="light"] .air-question-simple{
  background:rgba(8,16,27,.68)!important;border:1px solid rgba(8,86,164,.72)!important;
  box-shadow:none!important;color:#FFFFFF!important;
}
html[data-reading-theme="light"] .air-flow-start small,
html[data-reading-theme="light"] .air-flow-impact>small,
html[data-reading-theme="light"] .air-question-simple p small{color:#FFFFFF!important}
html[data-reading-theme="light"] .air-flow-start b,
html[data-reading-theme="light"] .air-question-simple p,
html[data-reading-theme="light"] .air-question-simple p b{color:#FFFFFF!important}
html[data-reading-theme="light"] .air-impact-chips span{
  background:rgba(8,86,164,.42)!important;border:1px solid rgba(89,153,216,.52)!important;
  color:#FFFFFF!important;box-shadow:none!important;
}
html[data-reading-theme="light"] .air-question-mark{
  background:#0856A4!important;border:1px solid #3A78B6!important;color:#FFFFFF!important;box-shadow:none!important
}

/* APPROACH — no dirty/dark leftovers in light mode. */
html[data-reading-theme="light"] .platform-story{background:var(--sf-page)!important;color:#171B1F!important}
html[data-reading-theme="light"] .platform-story h2,
html[data-reading-theme="light"] .platform-story .quick-read,
html[data-reading-theme="light"] .platform-story .quick-read li,
html[data-reading-theme="light"] .platform-story .quick-read b{color:#171B1F!important}
html[data-reading-theme="light"] .agent-story-rail,
html[data-reading-theme="light"] .platform-visual,
html[data-reading-theme="light"] .platform-group,
html[data-reading-theme="light"] .property-world article,
html[data-reading-theme="light"] .platform-three>div,
html[data-reading-theme="light"] .platform-principle{
  background:#FBFAF7!important;border:1px solid #D4D0C9!important;color:#171B1F!important;box-shadow:none!important
}
html[data-reading-theme="light"] .agent-node,
html[data-reading-theme="light"] .agent-core{
  background:#FFFFFF!important;border:1px solid #D4D0C9!important;color:#171B1F!important;box-shadow:none!important
}
html[data-reading-theme="light"] .agent-core span{
  background:#0856A4!important;border-color:#0856A4!important;color:#FFFFFF!important
}
html[data-reading-theme="light"] .agent-story-rail>i{border-color:rgba(8,86,164,.35)!important;color:#0856A4!important}
html[data-reading-theme="light"] .platform-intelligence{
  background:rgba(8,86,164,.07)!important;border:1px solid rgba(8,86,164,.22)!important;color:#171B1F!important;box-shadow:none!important
}
html[data-reading-theme="light"] .platform-intelligence small,
html[data-reading-theme="light"] .platform-intelligence i{color:#0856A4!important}
html[data-reading-theme="light"] .platform-intelligence strong{color:#171B1F!important}
html[data-reading-theme="light"] .platform-chip-row span{
  background:#F3F1EC!important;border:1px solid #D4D0C9!important;color:#30383D!important;box-shadow:none!important
}
html[data-reading-theme="light"] .property-city,
html[data-reading-theme="light"] .property-city em{color:#0856A4!important}
html[data-reading-theme="light"] .property-city em{
  background:rgba(8,86,164,.075)!important;border:1px solid rgba(8,86,164,.20)!important
}
/* Property detail rows are dividers, not shaded mini-boxes. */
html[data-reading-theme="light"] .property-world article>span{
  display:block!important;background:transparent!important;border:0!important;border-top:1px solid #E4E0D9!important;
  border-radius:0!important;color:#626A70!important;padding:8px 0!important;box-shadow:none!important
}
html[data-reading-theme="light"] .platform-three>div>span{
  background:rgba(8,86,164,.075)!important;border:1px solid rgba(8,86,164,.20)!important;color:#0856A4!important
}
html[data-reading-theme="light"] .platform-three b,
html[data-reading-theme="light"] .platform-three p,
html[data-reading-theme="light"] .platform-principle,
html[data-reading-theme="light"] .platform-principle b{color:#171B1F!important}

/* SOLUTION — readable cards and clear closing mantra. */
html[data-reading-theme="light"] .solution-design{background:var(--sf-page-alt)!important;color:#171B1F!important}
html[data-reading-theme="light"] .solution-design .ux-principles article,
html[data-reading-theme="light"] .designer-ai-loop>div{
  background:#FBFAF7!important;border:1px solid #D4D0C9!important;color:#171B1F!important;box-shadow:none!important
}
html[data-reading-theme="light"] .solution-design .ux-principles article>span,
html[data-reading-theme="light"] .system-design-flow article>span{
  background:rgba(8,86,164,.075)!important;border:1px solid rgba(8,86,164,.22)!important;color:#0856A4!important
}
html[data-reading-theme="light"] .principle-proof{
  background:#F3F1EC!important;border:1px solid #D4D0C9!important;color:#30383D!important;box-shadow:none!important
}
html[data-reading-theme="light"] .designer-ai-core{background:#F3F1EC!important;color:#171B1F!important}
html[data-reading-theme="light"] .solution-mantra{color:#171B1F!important}
html[data-reading-theme="light"] .solution-mantra b{color:#0856A4!important}

/* SYSTEM FLOW — same heading/kicker system as other sections; all four cards are light. */
html[data-reading-theme="light"] .system-story{background:var(--sf-page)!important;color:#171B1F!important}
html[data-reading-theme="light"] .system-story>.wrap>.kicker{
  color:#0856A4!important;font-family:'JetBrains Mono',monospace!important;font-size:12px!important;
  line-height:1.3!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:600!important
}
html[data-reading-theme="light"] .system-design-flow article,
html[data-reading-theme="light"] .system-design-flow article.flow-human{
  background:#FBFAF7!important;border:1px solid #D4D0C9!important;color:#171B1F!important;box-shadow:none!important
}
html[data-reading-theme="light"] .system-design-flow h3,
html[data-reading-theme="light"] .system-design-flow p,
html[data-reading-theme="light"] .system-design-flow .flow-human h3,
html[data-reading-theme="light"] .system-design-flow .flow-human p{color:#171B1F!important}
html[data-reading-theme="light"] .system-design-flow small,
html[data-reading-theme="light"] .system-design-flow .flow-human small{color:#0856A4!important}
html[data-reading-theme="light"] .flow-backstage{
  background:#FBFAF7!important;border:1px solid #D4D0C9!important;box-shadow:none!important
}
html[data-reading-theme="light"] .flow-backstage-track span{color:#626A70!important}
html[data-reading-theme="light"] .flow-backstage-track b{
  background:rgba(8,86,164,.06)!important;border:1px solid rgba(8,86,164,.18)!important;color:#355B7E!important;box-shadow:none!important
}

/* V29 DEVICE LANGUAGE — restore the original dark hardware color for hero + both prototypes,
   even in light reading mode. Product canvas remains the product's own white UI. */
html[data-reading-theme="light"] .hero-device{
  background:#111619!important;border:1px solid #30383D!important;border-radius:24px 24px 0 0!important;
  padding:12px 12px 0!important;box-shadow:0 26px 64px rgba(28,34,38,.16)!important
}
html[data-reading-theme="light"] .hero-device-bar i{background:#6F777B!important}
html[data-reading-theme="light"] .monitor-shell,
html[data-reading-theme="light"] #adminMonitorShell{
  background:#0D1012!important;border:1px solid #30383D!important;border-radius:26px!important;
  padding:18px 18px 22px!important;box-shadow:0 24px 60px rgba(28,34,38,.15)!important
}
html[data-reading-theme="light"] .monitor-top{color:#AAB3B8!important}
html[data-reading-theme="light"] .monitor-btn{
  border:1px solid #3C4449!important;color:#D6DDE1!important;background:#181D20!important;box-shadow:none!important
}
html[data-reading-theme="light"] .monitor-viewport{
  background:#FFFFFF!important;border:0!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden!important
}
html[data-reading-theme="light"] .monitor-foot,
html[data-reading-theme="light"] .monitor-base{display:none!important}

/* Hero is a clean product crop — no haze, fade strip, or scroll chrome. */
.hero-product:before,.hero-fade{display:none!important}
.hero-product-crop{overflow:hidden!important;background:#FFFFFF!important}
.hero-product-stage,.monitor-stage,.admin-monitor-stage{overflow:hidden!important}
.hero-product-stage iframe,.monitor-stage iframe,.admin-monitor-stage iframe{
  overflow:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none!important
}
.hero-product-stage iframe::-webkit-scrollbar,
.monitor-stage iframe::-webkit-scrollbar,
.admin-monitor-stage iframe::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

@media(max-width:900px){
  html[data-reading-theme="light"] .hero-device{border-radius:18px 18px 0 0!important;padding:8px 8px 0!important}
}

/* v13 micro-integrity: approach connector line/dot must never inherit legacy wine/gold. */
html[data-reading-theme="light"] .agent-story-rail>i{background:rgba(8,86,164,.32)!important;border:0!important}
html[data-reading-theme="light"] .agent-story-rail>i::after{background:#0856A4!important;box-shadow:none!important}