.position-visual,
.journey-map,
.strategy-flow-map {
  opacity: 1 !important;
  transform: none !important;
}

.relation-map {
  display: grid;
  grid-template-columns: 1fr 88px 1.15fr;
  align-items: center;
  gap: 18px;
}
.relation-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.relation-node {
  min-height: 112px; padding: 22px; border: 1px solid #dce5f3;
  border-radius: 18px; background: rgba(255,255,255,.86); position: relative;
}
.relation-node::after { content:""; position:absolute; right:16px; top:16px; width:28px; height:28px; border:1px solid #1769ff26; border-radius:50%; box-shadow:0 0 0 7px #1769ff09; }
.relation-node small { display:block; color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.relation-node strong { display:block; margin-top:18px; font-size:18px; }
.relation-node span { display:block; margin-top:7px; color:#7b8798; font-size:12px; }
.relation-merge { position:relative; height:170px; }
.relation-merge::before,.relation-merge::after { content:""; position:absolute; left:0; width:100%; height:50%; border-right:2px solid #1769ff; }
.relation-merge::before { top:0; border-top:2px solid #b9cbe7; border-radius:0 26px 0 0; }
.relation-merge::after { bottom:0; border-bottom:2px solid #b9cbe7; border-radius:0 0 26px 0; }
.relation-merge i { position:absolute; right:-7px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:#1769ff; box-shadow:0 0 0 7px #1769ff18,0 0 24px #1769ff66; }
.relation-core { min-height:270px; padding:36px; border-radius:24px; color:#fff; background:radial-gradient(circle at 92% 10%,#3f88ff55,transparent 36%),linear-gradient(145deg,#071733,#0a397f); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.relation-core small { color:#8dbaff; letter-spacing:.14em; font-weight:800; }
.relation-core strong { font-size:34px; line-height:1.25; }
.relation-result { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.relation-result span { padding:10px 8px; text-align:center; border:1px solid #ffffff20; border-radius:10px; color:#d5e3fa; font-size:11px; background:#ffffff08; }
.logic-caption { display:flex; justify-content:space-between; gap:18px; margin-top:24px; padding-top:20px; border-top:1px solid #dce5f0; color:#667085; font-size:13px; }
.logic-caption b { color:#17243a; }

.broken-chain { position:relative; display:grid; grid-template-columns:1fr 66px 1fr 66px 1fr; align-items:center; }
.chain-phase { min-height:148px; padding:24px; border:1px solid #e0e6f0; border-radius:17px; background:#fbfcff; }
.chain-phase small { color:#1769ff; font-weight:800; letter-spacing:.1em; }
.chain-phase strong { display:block; margin-top:24px; font-size:20px; }
.chain-phase span { display:block; margin-top:8px; color:#7a8799; font-size:12px; }
.chain-break { height:2px; background:repeating-linear-gradient(90deg,#aabbd4 0 8px,transparent 8px 15px); position:relative; }
.chain-break::before { content:"×"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#1769ff; background:#fff; border:1px solid #1769ff55; font-weight:700; }
.chain-costs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.chain-costs div { padding:14px 16px; border-radius:12px; background:#eef4ff; color:#48627f; font-size:12px; }
.chain-costs b { display:block; color:#1769ff; font-size:14px; margin-bottom:4px; }

/* Broken journey: explicit cause-and-breakpoint diagnosis */
#journey .head { margin-bottom:0; }
#journey .journey-map { margin-top:58px; padding:0; border:1px solid #d9e3f1; border-radius:26px; background:#fff; box-shadow:0 26px 70px #27466f0d; overflow:hidden; }
.diagnosis-title { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border-bottom:1px solid #e6ebf3; background:#f9fbff; }
.diagnosis-title span { color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.diagnosis-title b { font-size:14px; color:#42536a; }
.diagnosis-flow { display:grid; grid-template-columns:1fr 112px 1fr 112px 1fr; align-items:stretch; padding:28px; }
.diagnosis-stage { min-height:250px; padding:26px; border:1px solid #e0e7f1; border-radius:19px; background:#fbfcff; }
.diagnosis-stage.focus { border-color:#e0e7f1; background:#fbfcff; box-shadow:none; }
.diagnosis-stage small { color:#1769ff; font-weight:800; letter-spacing:.1em; }
.diagnosis-stage h3 { margin:21px 0 22px; font-size:24px; }
.diagnosis-stage p { margin:23px 0 0; color:#69788d; font-size:13px; line-height:1.7; }
.scatter-chips,.output-islands { display:flex; gap:8px; flex-wrap:wrap; align-items:center; min-height:58px; }
.scatter-chips span,.output-islands span { padding:8px 11px; border:1px solid #d9e4f2; border-radius:10px; color:#52667f; background:#fff; font-size:12px; transform:rotate(-2deg); }
.scatter-chips span:nth-child(2),.output-islands span:nth-child(2){transform:translateY(8px) rotate(2deg)}
.scatter-chips span:nth-child(3),.output-islands span:nth-child(3){transform:translateY(-5px) rotate(-1deg)}
.stream-lines { display:grid; gap:8px; }
.stream-lines span { position:relative; padding:8px 11px 8px 32px; border-radius:8px; color:#47617f; background:#fff; font-size:12px; }
.stream-lines span::before { content:""; position:absolute; left:10px; top:50%; width:12px; height:2px; background:#1769ff; box-shadow:5px -4px 0 -1px #71a3f7,8px 4px 0 -1px #a4c3f7; }
.fault { align-self:center; position:relative; display:flex; min-height:190px; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#f05d47; }
.fault::before,.fault::after { content:""; position:absolute; top:50%; width:calc(50% - 25px); height:3px; background:repeating-linear-gradient(90deg,#f28a7b 0 9px,transparent 9px 15px); }
.fault::before { left:0; }.fault::after { right:0; }
.fault u { position:absolute; z-index:2; top:50%; left:50%; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff2ef; color:#ef5d48; box-shadow:0 0 0 8px #fff,0 0 0 10px #f05d4725; font-size:22px; font-weight:500; line-height:1; text-decoration:none; transform:translate(-50%,-50%); }
.fault i { z-index:3; display:grid; place-items:center; width:38px; height:24px; margin-bottom:58px; border:1px solid #f05d4766; border-radius:999px; background:#fff7f5; font-style:normal; font-size:10px; font-weight:800; }
.fault b,.fault span,.fault em { z-index:3; background:#fff; }
.fault b { margin-top:-39px; padding:2px 7px; color:#d94834; font-size:13px; }
.fault span { max-width:104px; padding:4px; color:#718097; font-size:10px; line-height:1.4; }
.fault em { margin-top:7px; padding:5px 8px; border-radius:5px; background:#fff0ed; color:#d94d38; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.diagnosis-conclusion { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; padding:23px 28px; border-top:1px solid #e2e8f1; background:#081a36; color:#fff; }
.diagnosis-conclusion span { padding:7px 10px; border:1px solid #4b7fca; border-radius:999px; color:#82b3ff; font-size:10px; font-weight:800; letter-spacing:.1em; }
.diagnosis-conclusion strong { font-size:16px; line-height:1.6; }
.design-opportunity { display:grid; grid-template-columns:220px 1fr; gap:40px 70px; align-items:start; margin-top:34px; padding:42px; border:1px solid #d9e3f1; border-radius:24px; background:linear-gradient(145deg,#fff,#f6f9ff); }
.opportunity-label small { display:block; color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.14em; }
.opportunity-label b { display:block; margin-top:15px; color:#738096; font-size:13px; line-height:1.6; }
.opportunity-main strong { font-size:28px; line-height:1.45; letter-spacing:-.02em; }
.opportunity-outcomes { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opportunity-outcomes span { display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:2px solid #1769ff; background:#fff; color:#40546d; font-size:13px; box-shadow:0 10px 24px #27466f0a; }
.opportunity-outcomes i { color:#1769ff; font-size:10px; font-style:normal; font-weight:800; }

.strategy-flow-map { margin:58px 0 24px; padding:30px; border:1px solid #294064; border-radius:22px; background:linear-gradient(145deg,#091b39,#07152e); }
.strategy-pipeline { display:grid; grid-template-columns:1fr 54px 1fr 54px 1fr; align-items:center; }
.strategy-stage { min-height:156px; padding:24px; border:1px solid #2b456d; border-radius:17px; background:#0c203f; position:relative; }
.strategy-stage::before { content:attr(data-step); position:absolute; right:18px; top:14px; color:#294d7c; font-size:36px; font-weight:800; }
.strategy-stage small { color:#5e9cff; font-weight:800; letter-spacing:.1em; }
.strategy-stage strong { display:block; margin-top:26px; color:#fff; font-size:22px; }
.strategy-stage span { display:block; margin-top:9px; color:#9fb1cd; font-size:12px; line-height:1.6; }
.strategy-arrow { height:2px; background:linear-gradient(90deg,#31517d,#397ff1); position:relative; }
.strategy-arrow::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-top:2px solid #4d8fff; border-right:2px solid #4d8fff; transform:rotate(45deg); }
.strategy-equation { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; color:#7187a7; font-size:12px; }
.strategy-equation b { color:#7daeff; font-size:13px; }
.strategy-equation i { width:5px; height:5px; border-radius:50%; background:#397ff1; }

/* Strategy rationale: evidence -> decision -> product response */
.strategy-rationale-head { display:flex; align-items:end; justify-content:space-between; gap:40px; padding-bottom:24px; border-bottom:1px solid #294064; }
.strategy-rationale-head small,.outcome-intro small { display:block; color:#5e9cff; font-size:10px; font-weight:800; letter-spacing:.15em; }
.strategy-rationale-head strong { display:block; margin-top:10px; color:#fff; font-size:22px; }
.strategy-rationale-head p { max-width:420px; margin:0; color:#8fa3c1; font-size:13px; line-height:1.7; }
.rationale-labels,.rationale-row { display:grid; grid-template-columns:1fr 48px 1.08fr 48px 1.22fr; align-items:stretch; }
.rationale-labels { padding:22px 0 10px; color:#5e789f; font-size:10px; font-weight:800; letter-spacing:.12em; }
.rationale-labels span:nth-child(3),.rationale-labels span:nth-child(5) { padding-left:20px; }
.rationale-grid { display:grid; gap:10px; }
.rationale-row > div:not(.rationale-arrow) { position:relative; min-height:132px; padding:20px; border:1px solid #294064; background:#0b1e3c; }
.rationale-evidence { border-radius:16px 4px 4px 16px; }
.rationale-evidence i { position:absolute; right:16px; top:12px; color:#234873; font-size:31px; font-style:normal; font-weight:800; }
.rationale-evidence small,.rationale-choice small { color:#659ef8; font-size:9px; font-weight:800; letter-spacing:.1em; }
.rationale-evidence strong,.rationale-choice strong { display:block; margin-top:14px; color:#fff; font-size:18px; }
.rationale-evidence span,.rationale-choice span { display:block; margin-top:7px; color:#92a6c4; font-size:11px; line-height:1.55; }
.rationale-choice { border-color:#3265a8!important; background:linear-gradient(145deg,#10284c,#0c203f)!important; }
.rationale-response { display:flex; flex-wrap:wrap; align-content:center; gap:7px; border-radius:4px 16px 16px 4px; }
.rationale-response b { width:100%; margin-bottom:5px; color:#fff; font-size:17px; }
.rationale-response span { padding:6px 9px; border:1px solid #31517c; border-radius:20px; color:#9eb8dc; font-size:10px; }
.rationale-arrow { align-self:center; height:1px; background:#397ff1; position:relative; }
.rationale-arrow::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-top:1px solid #5d9cff; border-right:1px solid #5d9cff; transform:rotate(45deg); }
.strategy-thesis { display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:center; margin:24px -30px -30px; padding:24px 30px; border-radius:0 0 22px 22px; background:#06142b; }
.strategy-thesis small { width:max-content; padding:7px 11px; border:1px solid #397ff1; border-radius:18px; color:#75aaff; font-size:10px; }
.strategy-thesis strong { color:#fff; font-size:15px; line-height:1.7; }
.strategy-outcomes { display:grid; grid-template-columns:1.25fr repeat(3,1fr); margin-top:34px; border:1px solid #294064; border-radius:22px; overflow:hidden; background:#091a35; }
.outcome-intro,.strategy-outcome { min-height:220px; padding:30px; }
.outcome-intro { display:flex; flex-direction:column; justify-content:center; background:#07162e; }
.outcome-intro strong { margin-top:14px; color:#fff; font-size:19px; line-height:1.55; }
.strategy-outcome { position:relative; border-left:1px solid #294064; }
.strategy-outcome i { position:absolute; right:18px; top:16px; color:#234873; font-size:30px; font-style:normal; font-weight:800; }
.strategy-outcome small { color:#5e9cff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.strategy-outcome strong { display:block; margin-top:30px; color:#fff; font-size:27px; }
.strategy-outcome p { margin-top:12px; color:#91a5c2; font-size:12px; line-height:1.7; }

@media(max-width:800px){
  .relation-map,.broken-chain,.strategy-pipeline{grid-template-columns:1fr}
  .relation-merge{height:42px;width:2px;margin:auto;background:linear-gradient(#b9cbe7,#1769ff)}
  .relation-merge::before,.relation-merge::after,.relation-merge i{display:none}
  .relation-core{min-height:240px}.logic-caption{display:block;line-height:1.8}
  .chain-break,.strategy-arrow{width:2px;height:38px;margin:auto;background:linear-gradient(#aabbd4,#1769ff)}
  .chain-break::before{font-size:12px}.chain-costs{grid-template-columns:1fr}
  .strategy-arrow::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .strategy-flow-map{padding:18px}
  .strategy-rationale-head{display:block}.strategy-rationale-head p{margin-top:14px}
  .rationale-labels{display:none}.rationale-row{grid-template-columns:1fr;padding-bottom:18px}.rationale-row > div:not(.rationale-arrow){min-height:0;border-radius:14px}
  .rationale-arrow{width:1px;height:28px;margin:auto}.rationale-arrow::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .strategy-thesis{grid-template-columns:1fr;margin:10px -18px -18px;padding:22px 18px;border-radius:0 0 18px 18px}
  .strategy-outcomes{grid-template-columns:1fr}.outcome-intro,.strategy-outcome{min-height:0}.strategy-outcome{border-left:0;border-top:1px solid #294064}
  .practice-head{margin-bottom:36px}.experience-spine{display:none}.experience-story{grid-template-columns:1fr;gap:30px;padding:44px 0}.experience-story.reverse .story-copy,.experience-story.reverse .story-visual{order:initial}
  .story-copy{padding-left:28px}.story-copy h3{font-size:30px}.story-logic span{grid-template-columns:68px 1fr}.ai-compare{grid-template-columns:1fr}.visual-caption{width:90%}
  .practice-conclusion{display:grid;grid-template-columns:1fr;padding:24px}.practice-conclusion small{margin:0}.practice-conclusion i{width:1px;height:18px}.practice-conclusion p{margin:0;max-width:none}
  .principle-bridge,.system-foundation{grid-template-columns:1fr}.principle-bridge span,.system-foundation>div{border-left:0;border-top:1px solid #294064}.principle-bridge span:first-child,.system-foundation>div:first-child{border-top:0}.system-foundation>div{min-height:0;padding:24px}.system-rule{grid-template-columns:1fr;gap:28px;min-height:0;padding:28px}.system-rule.reverse .rule-copy,.system-rule.reverse .rule-screen{order:initial}.rule-copy h3{font-size:25px}.system-summary{display:grid;grid-template-columns:1fr}.system-summary small{margin:0}.system-summary i{width:1px;height:16px}.system-summary p{margin:0;max-width:none}
  .journey-axis{grid-template-columns:1fr;gap:14px;padding-left:0}.journey-axis::before,.axis-progress{left:14px;right:auto;top:0;bottom:0;width:2px;height:auto}.axis-progress{bottom:25%}.journey-axis span{grid-template-columns:30px 1fr}.journey-scene{grid-template-columns:1fr;gap:34px;min-height:0;padding:48px 0}.journey-scene:nth-of-type(odd) .scene-copy,.journey-scene:nth-of-type(odd) .scene-stage{order:initial}.scene-copy h3{font-size:30px}.stage-note{position:relative;left:auto;right:auto;bottom:auto;width:92%;margin:-16px auto 0}.scene-stage.layered{min-height:310px}.action-stack{grid-template-columns:1fr}.journey-result{grid-template-columns:1fr;padding:24px}.journey-result>div{display:grid;grid-template-columns:1fr}.journey-result small{margin:0}.journey-result i{width:1px;height:14px}
  .outcome-thesis,.impact-title,.iteration-head{grid-template-columns:1fr;gap:26px}.outcome-chain{grid-template-columns:1fr}.outcome-chain u{width:1px;height:24px;margin:auto}.outcome-chain u::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}.impact-layers{grid-template-columns:1fr}.impact-layers article{min-height:0;border-left:0;border-top:1px solid #2a4164}.impact-layers article:first-child{border-top:0}.impact-layers h4{min-height:0}.iteration-roadmap{padding-left:30px}.iteration-roadmap::before{left:9px}.iteration-roadmap article{grid-template-columns:1fr}.iteration-roadmap article::before{left:-27px}.road-phase{border-right:0;border-bottom:1px solid #294064}.road-content{grid-template-columns:1fr}.road-content span{border-left:0;border-top:1px solid #253b5b}.road-content span:first-child{border-top:0}.reflection-close,.evidence-sources{grid-template-columns:1fr;gap:20px}.reflection-close blockquote{font-size:22px}
  .value-chain{grid-template-columns:1fr}.value-chain u{width:1px;height:20px;margin:auto}.value-chain u::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}.experience-canvas{grid-template-columns:1fr;gap:24px;min-height:0;padding:26px}.canvas-label.after{text-align:left}.canvas-screen.back,.canvas-screen.front{display:none}.experience-decisions{grid-template-columns:1fr}.experience-decisions article{border-left:0;border-top:1px solid #d9e3f1}.experience-decisions article:first-child{border-top:0}.experience-summary{display:grid;grid-template-columns:1fr}.experience-summary small{margin:0}.experience-summary i{width:1px;height:14px}
  .diagnosis-title{display:block}.diagnosis-title b{display:block;margin-top:8px}
  .diagnosis-flow{grid-template-columns:1fr;padding:18px}.fault{min-height:100px}
  .fault::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(#9db1cc 0 8px,transparent 8px 15px)}
  .fault::after{display:none}.diagnosis-conclusion{grid-template-columns:1fr}.diagnosis-stage{min-height:220px}
  .design-opportunity{grid-template-columns:1fr;padding:26px;gap:24px}.opportunity-main strong{font-size:22px}.opportunity-outcomes{grid-column:1;grid-template-columns:1fr}
}

/* Unified top navigation bar */
.case-nav{--nav-bg:#07152cdb;--nav-border:#8fb7ef38;--nav-text:#f7fbff;--nav-muted:#a9bddb;--nav-divider:#a9c8ef32;--track-bg:#77a7e51a;--track-border:#8ec7ff5c;--menu-bg:#07152cf2;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;width:100%;height:56px;padding:6px 7px 6px 5px;border:1px solid var(--nav-border);border-radius:18px;background:var(--nav-bg);color:var(--nav-text);backdrop-filter:blur(20px) saturate(145%);box-shadow:0 16px 42px #0613292b,inset 0 1px 0 #ffffff2b;transition:background .35s,border-color .35s,color .35s,box-shadow .35s;pointer-events:auto}
.case-nav.surface-light{--nav-bg:#f7faffdf;--nav-border:#6280a83d;--nav-text:#15243b;--nav-muted:#60728d;--nav-divider:#536b8d30;--track-bg:#1769ff0b;--track-border:#1769ff45;--menu-bg:#f8fbfff5}
.case-nav.surface-light .case-nav-trigger:hover,.case-nav.surface-light .case-nav.open .case-nav-trigger{background:#1769ff08}
.case-nav.surface-light .case-menu a{color:#5c6f8b}
.case-nav.surface-light .case-menu a:hover,.case-nav.surface-light .case-menu a.active{color:#13233b;background:#1769ff0d}

.nav-back{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;color:var(--nav-muted);text-decoration:none;font-size:13px;font-weight:500;line-height:1;transition:background .2s,color .2s}
.nav-back:hover{background:var(--nav-divider);color:var(--nav-text)}

.case-nav-trigger{display:grid;grid-template-columns:minmax(0,auto) 148px 30px;align-items:center;gap:14px;height:44px;padding:0 5px 0 18px;border:0;border-radius:13px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .25s}
.case-nav-trigger:hover,.case-nav.open .case-nav-trigger{background:var(--track-bg)}
.case-current{font-size:14px;font-weight:680;letter-spacing:.055em;color:var(--nav-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.progress{position:relative;width:148px;height:4px;border-radius:999px;border:1px solid var(--track-border);background:var(--track-bg);overflow:hidden}
.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#267cff,#65c9ff);box-shadow:0 0 8px #3b9dff70;transition:width .18s ease-out;position:relative;overflow:hidden}
.progress i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#e7fbffdb,transparent);background-size:38px 100%;opacity:.75;animation:progress-flow 1.8s linear infinite}
@keyframes progress-flow{from{transform:translateX(-42px)}to{transform:translateX(160px)}}
@media(prefers-reduced-motion:reduce){.progress i::before{animation:none}}

.case-chevron{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--nav-divider);border-radius:10px;color:var(--nav-muted);font-size:14px;line-height:1;transition:transform .25s,background .25s,border-color .25s}
.case-nav.open .case-chevron{transform:rotate(180deg)}
.case-nav-trigger:hover .case-chevron,.case-nav.open .case-chevron{border-color:var(--track-border);background:#379cff12}

.case-menu{position:absolute;top:64px;right:0;width:min(384px,92vw);padding:10px;border:1px solid var(--nav-border);border-radius:16px;background:var(--menu-bg);box-shadow:0 24px 64px #0006;backdrop-filter:blur(22px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .25s,visibility .25s,background .35s,border-color .35s}
.case-nav.open .case-menu{opacity:1;visibility:visible;transform:none}
.case-menu a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--nav-muted);text-decoration:none;font-size:13px;transition:.2s}
.case-menu a:hover{background:var(--nav-divider);color:var(--nav-text)}
.case-menu a.active{background:#1769ff20;color:var(--nav-text)}
.case-menu .num{font-size:10px;color:#6682aa}
.case-menu a.active .num{color:#76aaff}
.case-menu .dot{width:5px;height:5px;border-radius:50%;background:transparent}
.case-menu a.active .dot{background:#4d92ff;box-shadow:0 0 0 4px #1769ff22}

.nav-target{scroll-margin-top:90px}

@media(max-width:800px){
.case-nav{height:50px;padding:5px 6px 5px 5px;border-radius:16px}
.nav-back{padding:8px 10px}
.nav-back-text{display:none}
.case-nav-trigger{grid-template-columns:minmax(0,1fr) 30px;gap:10px;padding:0 4px 0 12px;height:40px}
.case-current{font-size:12px}
.progress{display:none}
.case-menu{top:60px;right:0;left:0;width:auto;max-height:72vh;overflow:auto}
}

.end .wrap::before { display:none; }
.end .wrap::after { display:none; }
.end .wrap { padding-left:0; }
.end h2 { max-width:920px; margin-top:34px; font-size:clamp(52px,6.5vw,84px); line-height:1.12; letter-spacing:-.045em; }
.end p { margin-top:42px; padding-top:16px; min-width:360px; }
@media(max-width:800px){.end .wrap{padding-left:0}.end h2{font-size:clamp(44px,12vw,62px);line-height:1.14;letter-spacing:-.04em}.end p{min-width:0;margin-top:34px}}
.end h2 { font-size:clamp(48px,5.26vw,68px); font-weight:600; }
@media(max-width:800px){.end h2{font-size:clamp(40px,10vw,54px)}}


/* Compact complete-experience map */
.end{position:relative;display:flex;align-items:center;min-height:720px;padding:150px 0;overflow:hidden;border-top:1px solid #ffffff18;background:radial-gradient(circle at 76% 34%,#1769ff42 0,transparent 24%),radial-gradient(circle at 92% 86%,#35a2ff18 0,transparent 22%),linear-gradient(135deg,#07172f 0%,#0a2858 62%,#071a39 100%)}.end::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#0008,transparent 78%)}.end::after{content:"";position:absolute;right:-190px;top:50%;width:620px;height:620px;border:1px solid #73a9ff29;border-radius:50%;box-shadow:0 0 0 70px #1769ff08,0 0 0 150px #1769ff05;transform:translateY(-50%)}.end .wrap{position:relative;z-index:2;padding:18px 0 18px 34px}.end .wrap::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:2px;background:linear-gradient(#68a3ff,transparent 76%)}.end .wrap::after{content:"";position:absolute;left:0;top:18px;width:110px;height:3px;background:linear-gradient(90deg,#68a3ff,transparent)}.end .kicker{display:flex;align-items:center;gap:16px;color:#8bb8ff!important;font-size:11px;letter-spacing:.24em}.end .kicker::after{content:"";width:72px;height:1px;background:#69a5ff75}.end h2{max-width:980px;margin:35px 0 0;font-size:clamp(54px,7.4vw,96px);line-height:1.02;letter-spacing:-.06em;text-wrap:balance;text-shadow:0 12px 42px #020c1f66}.end p{display:inline-block;margin:48px 0 0;padding-top:18px;border-top:1px solid #ffffff24;color:#c2d3eb;font-size:16px;letter-spacing:.04em}@media(max-width:800px){.end{min-height:600px;padding:110px 0}.end .wrap{padding-left:22px}.end::after{right:-380px}.end h2{font-size:clamp(46px,14vw,72px)}.end p{font-size:14px}}
.chapter-kicker{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.chapter-kicker b{font-size:12px;letter-spacing:.12em}.chapter-kicker span{padding:0;border:0;border-radius:0;font-size:8px;letter-spacing:.2em;font-weight:700;opacity:.58}.hero .chapter-kicker{color:#82b3ff}.hero .chapter-kicker b{font-size:11px}
main>section .head{display:block}main>section .head>.chapter-kicker{margin-bottom:28px}main>section .head>div:last-child{max-width:960px}main>section .head p{max-width:880px}.night .chapter-kicker span{color:#8db6f4}.soft .chapter-kicker span,main>section:not(.night) .chapter-kicker span{color:#6385b8}
#positioning .head{display:grid;grid-template-columns:240px 1fr;gap:60px}#positioning .head>.chapter-kicker{margin-bottom:0}#positioning .head>div:last-child{max-width:none}#positioning .head p{max-width:none}@media(max-width:800px){#positioning .head{grid-template-columns:1fr;gap:28px}#positioning .head>.chapter-kicker{margin-bottom:0}}
.experience-map{margin-top:62px}.value-chain{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:center;padding:24px;border:1px solid #d9e3f1;border-radius:20px;background:#fff}.value-chain span{padding:8px 12px}.value-chain i{display:block;color:#1769ff;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.12em}.value-chain b{display:block;margin-top:9px;font-size:14px}.value-chain em{display:block;margin-top:5px;color:#7d899b;font-size:9px;font-style:normal}.value-chain u{height:1px;background:linear-gradient(90deg,#bdcada,#1769ff);position:relative}.value-chain u::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid #1769ff;border-right:1px solid #1769ff;transform:rotate(45deg)}
.experience-canvas{position:relative;display:grid;grid-template-columns:.65fr 1.7fr .65fr;align-items:center;min-height:570px;margin-top:20px;padding:42px;border-radius:24px;background:radial-gradient(circle at 50% 45%,#1769ff2b,transparent 34%),linear-gradient(145deg,#07162e,#0b2347);overflow:hidden}.experience-canvas::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:48px 48px}.canvas-label,.canvas-screen{position:relative;z-index:2}.canvas-label{color:#fff}.canvas-label small{color:#6ea5ff;font-size:8px;font-weight:800;letter-spacing:.12em}.canvas-label strong{display:block;margin-top:13px;font-size:20px}.canvas-label p{color:#91a5c2;font-size:10px;line-height:1.7}.canvas-label span{display:block;margin-top:20px;padding-top:13px;border-top:1px solid #2e496e;color:#74a8f9;font-size:9px}.canvas-label.after{text-align:right}.canvas-screen{padding:7px;border:1px solid #3b5b85;border-radius:16px;background:#07101f;box-shadow:0 25px 60px #0006}.canvas-screen img{border-radius:10px}.canvas-screen.main{z-index:3}.canvas-screen.main b{position:absolute;left:18px;bottom:18px;padding:8px 11px;border-radius:8px;background:#07162ee8;color:#bcd3f5;font-size:9px}.canvas-screen.back,.canvas-screen.front{position:absolute;width:34%;right:6%;padding:5px}.canvas-screen.back{top:16%;transform:rotate(3deg);opacity:.7}.canvas-screen.front{bottom:13%;transform:rotate(-2deg)}
.experience-decisions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid #d9e3f1;border-radius:20px;overflow:hidden;background:#fff}.experience-decisions article{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:25px;border-left:1px solid #d9e3f1}.experience-decisions article:first-child{border-left:0}.experience-decisions i{color:#1769ff;font-size:10px;font-style:normal;font-weight:800}.experience-decisions small{color:#7b899d;font-size:8px}.experience-decisions strong{display:block;margin-top:8px;font-size:13px;line-height:1.45}.experience-decisions p{grid-column:2;margin:7px 0 0;color:#778599;font-size:9px;line-height:1.6}.experience-summary{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;padding:25px;border-radius:18px;background:#071831;color:#fff}.experience-summary small{margin-right:auto;color:#6da4ff;font-size:8px;font-weight:800;letter-spacing:.12em}.experience-summary strong{font-size:12px}.experience-summary i{width:30px;height:1px;background:#397ff1}

/* Project outcome, impact and iteration roadmap */
#reflection { position:relative; overflow:hidden; background:radial-gradient(circle at 88% 9%,#1769ff20,transparent 25%),#071226; }
#reflection::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(#000,transparent 72%); pointer-events:none; }
#reflection>.wrap { position:relative; z-index:1; }.project-outcome{margin-top:62px}.outcome-thesis{display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:center;padding:38px;border:1px solid #2b4266;border-radius:24px;background:linear-gradient(145deg,#0d2343,#08172f)}
.outcome-thesis small,.impact-title small,.iteration-head small,.reflection-close small{color:#659ef8;font-size:9px;font-weight:800;letter-spacing:.14em}.outcome-thesis strong{display:block;margin-top:16px;font-size:24px}.outcome-thesis p{color:#91a5c3;font-size:12px;line-height:1.75}.outcome-chain{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:center}.outcome-chain span{min-height:128px;padding:20px;border:1px solid #31517c;border-radius:15px;background:#0a1d39}.outcome-chain i{color:#4d91ff;font-size:10px;font-style:normal}.outcome-chain b{display:block;margin-top:20px;font-size:14px}.outcome-chain em{display:block;margin-top:7px;color:#7e94b3;font-size:9px;font-style:normal}.outcome-chain u{height:1px;background:#397ff1;position:relative}.outcome-chain u::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid #5d9cff;border-right:1px solid #5d9cff;transform:rotate(45deg)}
.impact-title,.iteration-head{display:grid;grid-template-columns:1fr .65fr;gap:70px;align-items:end;margin:84px 0 28px}.impact-title h3,.iteration-head h3{margin:14px 0 0;font-size:32px;line-height:1.4}.evidence-badge{display:flex;gap:11px;align-items:start;padding:16px;border:1px solid #2b4266;border-radius:14px;background:#0a1932}.evidence-badge i{flex:0 0 auto;width:8px;height:8px;margin-top:3px;border:2px solid #f0b74a;border-radius:50%}.evidence-badge span{color:#8398b7;font-size:9px;line-height:1.6}.evidence-badge b{display:block;margin-bottom:4px;color:#e1ebfa;font-size:10px}
.impact-layers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #2a4164;border-radius:22px;overflow:hidden}.impact-layers article{min-height:410px;padding:30px;border-left:1px solid #2a4164;background:#091a34}.impact-layers article:first-child{border-left:0}.impact-layers small,.road-phase small{color:#5f9cff;font-size:9px;font-weight:800;letter-spacing:.1em}.impact-layers h4{min-height:88px;margin:22px 0;font-size:18px;line-height:1.55}.impact-layers ul{margin:0;padding:0;list-style:none;border-top:1px solid #263e60}.impact-layers li{display:grid;gap:6px;padding:15px 0;border-bottom:1px solid #263e60}.impact-layers li b{font-size:11px}.impact-layers li span{color:#859ab8;font-size:10px;line-height:1.65}
.iteration-head p{margin:0;color:#8fa3c1;font-size:12px;line-height:1.8}.iteration-roadmap{position:relative;display:grid;gap:10px;padding-left:42px}.iteration-roadmap::before{content:"";position:absolute;left:15px;top:32px;bottom:32px;width:1px;background:linear-gradient(#1769ff,#315b91,#53647b)}.iteration-roadmap article{position:relative;display:grid;grid-template-columns:.65fr 1.35fr;border:1px solid #294064;border-radius:18px;background:#091a34}.iteration-roadmap article::before{content:"";position:absolute;left:-34px;top:31px;width:13px;height:13px;border:3px solid #1769ff;border-radius:50%;background:#071226;box-shadow:0 0 0 7px #1769ff18}.iteration-roadmap .later::before,.iteration-roadmap .govern::before{border-color:#617694}.road-phase{padding:26px;border-right:1px solid #294064}.road-phase strong{display:block;margin-top:13px;font-size:17px}.road-phase em{display:block;margin-top:8px;color:#8296b4;font-size:9px;font-style:normal}.road-content{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.road-content span{padding:25px;border-left:1px solid #253b5b;color:#8da2c0;font-size:9px;line-height:1.65}.road-content span:first-child{border-left:0}.road-content b{display:block;margin-bottom:8px;color:#dce8f8;font-size:10px}
.reflection-close{display:grid;grid-template-columns:190px 1fr;gap:40px;align-items:start;margin-top:66px;padding-top:34px;border-top:1px solid #294064}.reflection-close blockquote{margin:0;font-size:27px;line-height:1.55;letter-spacing:-.02em}.evidence-sources{display:grid;grid-template-columns:190px 1fr;gap:40px;margin-top:66px!important;padding-top:26px!important}.evidence-sources>b{color:#659ef8;font-size:9px;letter-spacing:.14em}

/* Complete experience as an information-value journey */
#experience { overflow:hidden; }
.experience-journey { margin-top:66px; }
.journey-axis { display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin-bottom:30px; }
.journey-axis::before,.axis-progress { content:""; position:absolute; left:0; right:0; top:15px; height:2px; background:#d8e2f0; }.axis-progress{right:25%;background:linear-gradient(90deg,#1769ff,#76a5f6);z-index:1}
.journey-axis span { position:relative; z-index:2; display:grid; grid-template-columns:30px 1fr; gap:2px 10px; }.journey-axis i{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border:2px solid #b8c8df;border-radius:50%;background:#f6f8fc;color:#788aa3;font-size:9px;font-style:normal;font-weight:800}.journey-axis span:not(:last-child) i{border-color:#1769ff;color:#1769ff;background:#fff}.journey-axis b{padding-top:2px;font-size:11px}.journey-axis em{color:#7a879b;font-size:9px;font-style:normal}
.journey-scene { display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; align-items:center; min-height:560px; padding:74px 0; border-top:1px solid #dbe4f0; }.journey-scene:nth-of-type(odd) .scene-copy{order:2}.journey-scene:nth-of-type(odd) .scene-stage{order:1}
.scene-copy small { color:#1769ff;font-size:9px;font-weight:800;letter-spacing:.14em}.scene-copy h3{margin:18px 0 21px;font-size:39px;line-height:1.25;letter-spacing:-.035em}.scene-copy p{color:#657288;font-size:14px;line-height:1.9}
.info-change { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-top:28px; padding-top:18px; border-top:1px solid #dbe4f0; color:#7b8798; font-size:10px; }.info-change i{height:1px;background:linear-gradient(90deg,#bdc9d9,#1769ff);position:relative}.info-change i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid #1769ff;border-right:1px solid #1769ff;transform:rotate(45deg)}.info-change strong{color:#1769ff;font-size:11px}
.scene-stage { position:relative; min-width:0; padding:14px; border:1px solid #d9e3f1; border-radius:24px; background:#fff; box-shadow:0 30px 70px #26496f1c; }.stage-main img,.stage-back img,.stage-front img,.action-stack img{border-radius:15px}.stage-note{position:absolute;z-index:5;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;width:245px;padding:16px 18px;border:1px solid #d8e4f3;border-radius:14px;background:#fffffff2;box-shadow:0 18px 45px #183a6926}.stage-note b{grid-row:1/3;color:#1769ff;font-size:10px}.stage-note span{color:#607087;font-size:9px;line-height:1.5}.n1,.n2{right:-28px;bottom:-24px}.n3,.n4{left:-28px;bottom:-24px}
.scene-stage.layered { min-height:435px; border:0; background:transparent; box-shadow:none; }.stage-back,.stage-front{position:absolute;width:82%;padding:8px;border:1px solid #d9e3f1;border-radius:18px;background:#fff;box-shadow:0 24px 55px #274b7625}.stage-back{left:0;top:0;transform:rotate(-2deg)}.stage-front{right:0;bottom:0;transform:rotate(2deg)}
.action-stack { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:#0a1932; border-color:#263e61; }.action-stack>div:not(.stage-note){overflow:hidden;border-radius:15px}.action-stack img{height:100%;object-fit:cover}
.journey-result { display:grid; grid-template-columns:1.4fr .6fr; gap:50px; align-items:center; margin-top:22px; padding:34px; border-radius:22px; background:#071831;color:#fff}.journey-result>div{display:flex;align-items:center;gap:13px}.journey-result small{margin-right:auto;color:#6da4ff;font-size:8px;font-weight:800;letter-spacing:.13em}.journey-result strong{font-size:12px;white-space:nowrap}.journey-result i{width:24px;height:1px;background:#397ff1}.journey-result p{margin:0;color:#91a5c1;font-size:10px;line-height:1.7}

/* Principles translated into an interface design system */
.design-system { margin-top:60px; }
.principle-bridge { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #294064; border-radius:18px; overflow:hidden; }
.principle-bridge span { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; padding:22px; border-left:1px solid #294064; background:#0a1932; }
.principle-bridge span:first-child { border-left:0; }.principle-bridge i { grid-row:1/3; color:#397ff1; font-size:11px; font-style:normal; font-weight:800; }
.principle-bridge b { font-size:14px; }.principle-bridge em { color:#8196b5; font-size:10px; font-style:normal; }
.system-foundation { display:grid; grid-template-columns:1.05fr 1fr 1fr .9fr; margin-top:22px; border:1px solid #294064; border-radius:22px; overflow:hidden; background:#091a35; }
.system-foundation > div { min-height:270px; padding:28px; border-left:1px solid #294064; }.system-foundation > div:first-child { border-left:0; }
.system-foundation small,.system-rule small,.system-summary small { display:block; color:#659ef8; font-size:9px; font-weight:800; letter-spacing:.14em; }
.system-title { display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,#0e264a,#08172f); }
.system-title strong { margin-top:18px; font-size:28px; }.system-title p,.shape-spec p { color:#8fa3c1; font-size:11px; line-height:1.7; }
.color-spec { display:grid; grid-template-columns:1fr 1fr; gap:13px; align-content:center; }.color-spec > small { grid-column:1/-1; margin-bottom:8px; }
.color-spec div { display:grid; grid-template-columns:24px 1fr; gap:4px 9px; align-items:center; }.color-spec i { grid-row:1/3; width:24px; height:36px; border:1px solid #ffffff1f; border-radius:7px; background:var(--c); }
.color-spec b { font-size:10px; }.color-spec code { color:#7186a5; font-size:8px; }
.type-spec { display:flex; flex-direction:column; justify-content:center; gap:13px; }.type-spec small { margin-bottom:8px; }.type-current { color:#fff; font-size:23px; font-weight:700; }.type-translation { color:#d4e2f8; font-size:14px; }.type-history { color:#71829c; font-size:11px; }
.contrast-note { display:flex; align-items:center; gap:8px; margin-top:10px; color:#6e84a4; font-size:8px; }.contrast-note b { color:#6ea5ff; }.contrast-note i { flex:1; height:2px; background:linear-gradient(90deg,#1769ff,#2a3950); }.contrast-note em { font-style:normal; }
.shape-spec { display:flex; flex-direction:column; justify-content:center; }.space-bars { display:flex; align-items:end; gap:6px; height:38px; margin:22px 0 8px; }.space-bars i { width:8px; height:8px; background:#1769ff; }.space-bars i:nth-child(2){width:16px;height:16px}.space-bars i:nth-child(3){width:24px;height:24px}.space-bars i:nth-child(4){width:32px;height:32px}.shape-spec b{font-size:11px}.radius-samples{display:flex;gap:8px;margin-top:15px}.radius-samples i{display:grid;place-items:center;width:38px;height:30px;border:1px solid #3a5b88;color:#7fa6dc;font-size:8px;font-style:normal}.radius-samples i:nth-child(1){border-radius:8px}.radius-samples i:nth-child(2){border-radius:16px}.radius-samples i:nth-child(3){border-radius:24px}.shape-spec>em{margin-top:7px;color:#7186a5;font-size:8px;font-style:normal}
.system-rules { margin-top:22px; border:1px solid #294064; border-radius:22px; overflow:hidden; }
.system-rule { display:grid; grid-template-columns:.9fr 1.25fr; gap:54px; align-items:center; min-height:440px; padding:46px; border-top:1px solid #294064; background:#08172f; }.system-rule:first-child{border-top:0}.system-rule.reverse .rule-copy{order:2}.system-rule.reverse .rule-screen{order:1}
.rule-copy h3 { margin:17px 0; font-size:29px; line-height:1.35; }.rule-copy p { color:#91a5c2; font-size:13px; line-height:1.8; }
.rule-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }.rule-tags span { padding:7px 10px; border:1px solid #31517c; border-radius:20px; color:#91acd2; font-size:9px; }
.rule-screen { position:relative; padding:7px; border:1px solid #34517a; border-radius:17px; background:#050d1c; box-shadow:0 28px 60px #0005; }.rule-screen img { border-radius:11px; }.rule-screen>b { position:absolute; left:18px; bottom:17px; padding:7px 10px; border-radius:8px; background:#07152de6; color:#a9c7f4; font-size:9px; }
.focus-line { position:absolute; left:25%; right:12%; height:1px; background:#1769ff; box-shadow:0 0 10px #1769ff; }.focus-line.one{top:37%}.focus-line.two{top:49%;opacity:.42}
.context-legend { display:flex; align-items:center; margin-top:25px; color:#8fa5c5; font-size:9px; }.context-legend span{display:flex;align-items:center;gap:5px}.context-legend span i{width:7px;height:7px;border:2px solid #4b8fff;border-radius:50%}.context-legend>b{flex:1;height:1px;margin:0 7px;background:#294a78}
.state-spec { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; }.state-spec span{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #294064;border-radius:9px;color:#a1b4cf;font-size:9px}.state-spec i{width:8px;height:8px;border-radius:50%;background:#607590}.state-spec .loading{border:2px solid #397ff1;border-top-color:transparent;background:transparent}.state-spec .preview{background:#f3be4d}.state-spec .accepted{background:#42c98b}.state-spec .editable{background:#8aa0bf}
.control-spec { display:flex; gap:7px; margin-top:14px; }.control-spec button { flex:1;padding:9px 6px;border:1px solid #31517c;border-radius:8px;background:transparent;color:#8fa5c5;font:inherit;font-size:8px}.control-spec button:last-child{border-color:#1769ff;background:#1769ff;color:#fff}
.rule-screen.split { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.rule-screen.split img { height:100%; object-fit:cover; object-position:center; }
.system-summary { display:flex; align-items:center; gap:16px; margin-top:22px; padding:28px 32px; border:1px solid #294064; border-radius:20px; background:linear-gradient(90deg,#0d2445,#08172f); }.system-summary small{margin-right:auto}.system-summary strong{font-size:13px;white-space:nowrap}.system-summary i{width:30px;height:1px;background:#397ff1}.system-summary p{max-width:300px;margin:0 0 0 15px;color:#899eba;font-size:10px;line-height:1.6}

/* Strategy translated into three continuous user experiences */
#strategy-in-practice { background:linear-gradient(180deg,#fff 0%,#f5f8fd 48%,#fff 100%); }
.practice-head { margin-bottom:62px; }
.experience-logic { position:relative; }
.experience-spine { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:18px; margin:0 0 24px 32%; color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.1em; }
.experience-spine i { height:1px; background:linear-gradient(90deg,#1769ff,#b6c9e7); position:relative; }
.experience-spine i::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #1769ff; border-right:1px solid #1769ff; transform:rotate(45deg); }
.experience-story { display:grid; grid-template-columns:minmax(310px,.78fr) minmax(0,1.22fr); gap:64px; align-items:center; padding:64px 0; border-top:1px solid #dce5f1; }
.experience-story.reverse .story-copy { order:2; }.experience-story.reverse .story-visual { order:1; }
.story-copy { position:relative; padding-left:38px; }
.story-index { position:absolute; left:0; top:0; color:#c9d8ee; font-size:13px; font-weight:800; }
.story-copy small { color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.story-copy h3 { margin:18px 0 20px; color:#111a2b; font-size:38px; line-height:1.25; letter-spacing:-.035em; }
.story-copy > p { color:#647188; font-size:15px; line-height:1.9; }
.story-logic { display:grid; margin-top:28px; border-top:1px solid #d9e3f0; }
.story-logic span { display:grid; grid-template-columns:76px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid #e4eaf3; color:#56657c; font-size:12px; line-height:1.6; }
.story-logic b { color:#18243a; }
.story-visual { position:relative; }
.story-visual::before { content:""; position:absolute; inset:-16px 18px 16px -18px; border:1px solid #dce6f5; border-radius:22px; background:#eef4ff; z-index:0; }
.story-visual .screen,.story-visual figure { position:relative; z-index:1; }
.visual-caption { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; width:82%; margin:-22px auto 0; padding:17px 20px; border:1px solid #d8e3f2; border-radius:14px; background:#fffffff2; box-shadow:0 16px 38px #24446b1c; }
.visual-caption b { color:#1769ff; font-size:11px; }.visual-caption span { color:#5f6d82; font-size:11px; line-height:1.55; }
.ai-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ai-compare figure { margin:0; }.ai-compare figcaption { padding-top:10px; color:#6e7c91; font-size:11px; text-align:center; }
.practice-conclusion { display:flex; align-items:center; gap:18px; padding:30px 34px; border-radius:22px; background:#071831; color:#fff; }
.practice-conclusion small { margin-right:auto; color:#6ea5ff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.practice-conclusion strong { font-size:17px; white-space:nowrap; }.practice-conclusion i { width:34px; height:1px; background:#397ff1; }
.practice-conclusion p { max-width:300px; margin:0 0 0 18px; color:#93a8c6; font-size:11px; line-height:1.65; }

/* Positioning-page decorative system */
#positioning { position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 88% 14%,#1769ff08,transparent 25%),#fff; }
#positioning > .wrap { position:relative; z-index:2; }
#positioning::before { content:""; position:absolute; z-index:0; width:390px; height:390px; right:-125px; top:55px; border:1px solid #1769ff16; border-radius:50%; box-shadow:0 0 0 54px #1769ff08,0 0 0 108px #1769ff05; }
#positioning::after { content:""; position:absolute; z-index:0; left:3.5%; top:335px; width:190px; height:150px; opacity:.34; background-image:radial-gradient(circle,#1769ff 1.4px,transparent 1.5px); background-size:18px 18px; mask-image:linear-gradient(90deg,#000,transparent); }
.position-page-decor { pointer-events:none; }
.position-orbit { position:absolute; right:-24px; top:-54px; width:250px; height:250px; border:1px solid #1769ff24; border-radius:50%; }
.position-orbit::before { content:""; position:absolute; left:37px; top:37px; right:37px; bottom:37px; border:1px dashed #1769ff24; border-radius:50%; }
.position-orbit::after { content:""; position:absolute; width:12px; height:12px; left:28px; top:50%; border-radius:50%; background:#1769ff; box-shadow:0 0 0 8px #1769ff13,145px -72px 0 -3px #78aaff,145px -72px 0 5px #1769ff0d; }
.position-data-rail { position:absolute; left:0; top:146px; display:grid; gap:13px; width:190px; }
.position-data-rail span { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:10px; color:#8794a8; font-size:10px; letter-spacing:.12em; }
.position-data-rail i { display:block; height:1px; background:linear-gradient(90deg,#1769ff,transparent); }
.position-data-rail b { color:#46627f; font-weight:700; }
.position-coordinate { position:absolute; right:12px; top:230px; writing-mode:vertical-rl; color:#1769ff4d; font-size:9px; letter-spacing:.24em; }
#positioning .statement { position:relative; padding-top:38px; }
#positioning .statement::before { content:"CORE QUESTION"; position:absolute; top:0; left:0; color:#1769ff; font-size:10px; font-weight:800; letter-spacing:.18em; }
#positioning .statement::after { content:""; position:absolute; left:0; bottom:-28px; width:150px; height:3px; border-radius:99px; background:linear-gradient(90deg,#1769ff,#76a7ff,transparent); box-shadow:170px 0 0 -1px #1769ff22,260px 0 0 -1px #1769ff12; }

@media(max-width:800px){
  #positioning::after,.position-data-rail,.position-coordinate{display:none}
  #positioning::before{width:260px;height:260px;right:-150px;top:70px}
  .position-orbit{width:150px;height:150px;right:-80px;top:-30px}
  #positioning .statement{padding-top:32px}
}

/* Final full-width glass navigation */
.nav{position:fixed;z-index:50;inset:0 0 auto;isolation:isolate;overflow:visible;border:0;background:linear-gradient(90deg,#06142cee 0%,#071a35e8 58%,#0a1d39de 100%);box-shadow:none;backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);pointer-events:auto}
.nav::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:46%;height:100%;background:radial-gradient(ellipse at 82% 0%,#66e4ff38 0%,transparent 52%),radial-gradient(ellipse at 46% 120%,#6f6cff2f 0%,transparent 58%),linear-gradient(105deg,transparent 10%,#297eff17 56%,#b76eff19 100%);pointer-events:none}
.nav:has(.case-nav.surface-light){background:linear-gradient(90deg,#fbfcfff0 0%,#f7faffeb 58%,#f4f8ffdf 100%)}
.nav:has(.case-nav.surface-light)::before{background:radial-gradient(ellipse at 82% 0%,#5bd9ff24 0%,transparent 54%),radial-gradient(ellipse at 46% 120%,#796cff1c 0%,transparent 58%),linear-gradient(105deg,transparent 10%,#4b8cff0d 58%,#bf77ff12 100%)}
.nav .wrap{display:flex;justify-content:space-between;width:min(1180px,86vw);height:68px;margin:auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.case-nav{position:relative;display:flex;justify-content:space-between;align-items:center;gap:32px;width:100%;height:68px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;color:var(--nav-text)}
.nav-back{flex:0 0 auto}
.case-nav-trigger{display:grid;grid-template-columns:minmax(110px,auto) 168px;align-items:center;gap:20px;height:44px;margin-left:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit}
.case-nav-trigger:hover,.case-nav.open .case-nav-trigger{background:transparent;opacity:.84}
.case-chevron{display:none}
.progress{width:168px;height:3px;border:0;background:var(--track-bg)}
.case-menu{top:62px;right:0}
@media(max-width:800px){.nav .wrap{width:92vw;height:60px}.case-nav{height:60px;gap:12px}.case-nav-trigger{grid-template-columns:minmax(0,1fr);gap:0}.progress{display:none}.nav::before{width:64%}.case-menu{top:58px}}

/* Keep the inner navigator visually unboxed; the top glass bar is the only surface */
.nav .case-nav,.nav .case-nav.surface-light,.nav .case-nav.surface-dark{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nav .case-nav-trigger,.nav .case-nav-trigger:hover,.nav .case-nav.open .case-nav-trigger{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Override the legacy inline offset and keep the glass layer visibly translucent */
html body nav.nav{inset:-1px 0 auto!important;background:linear-gradient(90deg,#06142cc9 0%,#071a35c2 58%,#0a1d39b8 100%)!important}
html body nav.nav:has(.case-nav.surface-light){background:linear-gradient(90deg,#fbfcffcf 0%,#f7faffc7 58%,#f4f8ffbd 100%)!important}
html body{padding-top:68px}
html::-webkit-scrollbar-track{margin-top:68px}
html body nav.nav .case-chevron{display:none!important;border:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:800px){html body{padding-top:60px}html::-webkit-scrollbar-track{margin-top:60px}}

/* Navigation background states: seamless on hero, lighter glass after scrolling */
html body nav.nav{inset:0 0 auto!important;border:0!important;background:linear-gradient(90deg,#0610244d 0%,#0a1b3b4d 58%,#0626504d 100%)!important}
html body nav.nav::before{opacity:0;transition:opacity .35s ease}
html body nav.nav.is-scrolled{background:linear-gradient(90deg,#06142c4d 0%,#071a354d 58%,#0a1d394d 100%)!important}
html body nav.nav.is-scrolled::before{opacity:1}
html body nav.nav.is-scrolled:has(.case-nav.surface-light){background:linear-gradient(90deg,#fbfcff4d 0%,#f7faff4d 58%,#f4f8ff4d 100%)!important}

/* Precise vertical alignment and text-only chromatic hover */
html body nav.nav .wrap,html body nav.nav .case-nav{align-items:center!important}
html body nav.nav .nav-back{align-self:center!important;background:transparent!important}
html body nav.nav .case-nav-trigger{align-self:center!important}
html body nav.nav .nav-back:hover{background:transparent!important;color:transparent!important;background-image:linear-gradient(90deg,#65dfff 0%,#6f9dff 48%,#bd7cff 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* Reduce only the opening space above the first-screen content by half */
.hero .hero-copy{padding-top:8.5vh}

/* Start the root scrollbar track below the fixed navigation */
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,::-webkit-scrollbar-track{margin-block-start:68px;margin-top:68px}
@media(max-width:800px){html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,::-webkit-scrollbar-track{margin-block-start:60px;margin-top:60px}}

/* The document scroll viewport begins directly below the fixed navigation */
html{height:100%;overflow:hidden!important}
html body{height:calc(100vh - 68px);margin:68px 0 0!important;padding-top:0!important;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}
html body::-webkit-scrollbar-track{margin-block-start:0!important;margin-top:0!important}
@media(max-width:800px){html body{height:calc(100vh - 60px);margin-top:60px!important}}

/* Clear, chromatic liquid-glass treatment without a neutral gray veil */
html body nav.nav,html body nav.nav.is-scrolled{background:radial-gradient(ellipse at 88% -40%,#56d8ff40 0%,transparent 44%),radial-gradient(ellipse at 66% 145%,#756cff32 0%,transparent 48%),linear-gradient(100deg,#07162fb8 0%,#0a2852a6 62%,#163a6b94 100%)!important;backdrop-filter:blur(28px) saturate(190%) brightness(1.08)!important;-webkit-backdrop-filter:blur(28px) saturate(190%) brightness(1.08)!important}
html body nav.nav::before,html body nav.nav.is-scrolled::before{opacity:.72;background:linear-gradient(108deg,transparent 18%,#47cfff12 58%,#9b72ff20 100%);filter:blur(12px)}
html body nav.nav:has(.case-nav.surface-light),html body nav.nav.is-scrolled:has(.case-nav.surface-light){background:radial-gradient(ellipse at 88% -40%,#4cdcff2b 0%,transparent 46%),radial-gradient(ellipse at 66% 145%,#806cff20 0%,transparent 50%),linear-gradient(100deg,#f5fbff9c 0%,#edf5ff88 62%,#e8eeff78 100%)!important;backdrop-filter:blur(28px) saturate(175%) brightness(1.04)!important;-webkit-backdrop-filter:blur(28px) saturate(175%) brightness(1.04)!important}

/* Saturated environment behind the transparent glass prevents a gray cast */
html{background:linear-gradient(110deg,#061329 0%,#082b5e 62%,#123f82 100%)}
html:has(.case-nav.surface-light){background:linear-gradient(110deg,#edf8ff 0%,#e3f1ff 62%,#e9e7ff 100%)}
html body nav.nav,html body nav.nav.is-scrolled{background:radial-gradient(ellipse at 90% -60%,#54e8ff38 0%,transparent 45%),radial-gradient(ellipse at 68% 150%,#765cff2b 0%,transparent 48%),linear-gradient(100deg,#0066cc24 0%,#008cff18 58%,#773dff20 100%)!important;backdrop-filter:blur(24px) saturate(220%) contrast(108%)!important;-webkit-backdrop-filter:blur(24px) saturate(220%) contrast(108%)!important}
html body nav.nav:has(.case-nav.surface-light),html body nav.nav.is-scrolled:has(.case-nav.surface-light){background:radial-gradient(ellipse at 90% -60%,#26dcff30 0%,transparent 46%),radial-gradient(ellipse at 68% 150%,#765cff22 0%,transparent 50%),linear-gradient(100deg,#ffffff1f 0%,#389cff16 58%,#936cff18 100%)!important;backdrop-filter:blur(24px) saturate(205%) contrast(104%)!important;-webkit-backdrop-filter:blur(24px) saturate(205%) contrast(104%)!important}

/* Soft blue frosted glass inspired by the supplied reference */
html{background:linear-gradient(110deg,#102966 0%,#245ea1 58%,#5a91c2 100%)}
html:has(.case-nav.surface-light){background:linear-gradient(110deg,#dcecff 0%,#c8e1fa 58%,#bcd7ef 100%)}
html body nav.nav,html body nav.nav.is-scrolled{background:radial-gradient(ellipse 24% 170% at 14% 76%,#b8e2ff45 0%,transparent 72%),radial-gradient(ellipse 28% 190% at 48% 18%,#d7eeff32 0%,transparent 70%),radial-gradient(ellipse 26% 180% at 82% 72%,#9fd5ff3b 0%,transparent 72%),linear-gradient(100deg,#183d8278 0%,#2c67a96b 55%,#6a9bc466 100%)!important;backdrop-filter:blur(34px) saturate(150%) brightness(1.08)!important;-webkit-backdrop-filter:blur(34px) saturate(150%) brightness(1.08)!important}
html body nav.nav::before,html body nav.nav.is-scrolled::before{opacity:.82;background:radial-gradient(ellipse 18% 230% at 30% 50%,#d9f2ff32 0%,transparent 72%),radial-gradient(ellipse 22% 220% at 72% 48%,#c4e8ff2b 0%,transparent 72%);filter:blur(18px)}
html body nav.nav:has(.case-nav.surface-light),html body nav.nav.is-scrolled:has(.case-nav.surface-light){background:radial-gradient(ellipse 24% 170% at 14% 76%,#ffffff61 0%,transparent 72%),radial-gradient(ellipse 28% 190% at 48% 18%,#ffffff45 0%,transparent 70%),radial-gradient(ellipse 26% 180% at 82% 72%,#a7d8ff45 0%,transparent 72%),linear-gradient(100deg,#d9eaff66 0%,#c3def760 55%,#a9cce95c 100%)!important;backdrop-filter:blur(34px) saturate(140%) brightness(1.06)!important;-webkit-backdrop-filter:blur(34px) saturate(140%) brightness(1.06)!important}

/* Softer glass tuned to the existing page backgrounds */
html{background:linear-gradient(135deg,#061024 0%,#0a1b3b 58%,#062650 100%)}
html:has(.case-nav.surface-light){background:#f6f8fc}
html body nav.nav,html body nav.nav.is-scrolled{background:radial-gradient(ellipse 26% 190% at 22% 72%,#b7ddff1f 0%,transparent 72%),radial-gradient(ellipse 28% 190% at 76% 24%,#c7e7ff18 0%,transparent 72%),linear-gradient(100deg,#0b234052 0%,#12345a48 58%,#1b466e42 100%)!important;backdrop-filter:blur(30px) saturate(125%) brightness(1.03)!important;-webkit-backdrop-filter:blur(30px) saturate(125%) brightness(1.03)!important}
html body nav.nav::before,html body nav.nav.is-scrolled::before{opacity:.48;background:radial-gradient(ellipse 20% 230% at 34% 50%,#d8efff1c 0%,transparent 72%),radial-gradient(ellipse 22% 220% at 78% 50%,#b9dcff18 0%,transparent 72%);filter:blur(20px)}
html body nav.nav:has(.case-nav.surface-light),html body nav.nav.is-scrolled:has(.case-nav.surface-light){background:radial-gradient(ellipse 26% 190% at 22% 72%,#ffffff38 0%,transparent 72%),radial-gradient(ellipse 28% 190% at 76% 24%,#b9dbff26 0%,transparent 72%),linear-gradient(100deg,#f8fbff52 0%,#eaf3fc48 58%,#daeaf844 100%)!important;backdrop-filter:blur(30px) saturate(120%) brightness(1.02)!important;-webkit-backdrop-filter:blur(30px) saturate(120%) brightness(1.02)!important}

/* The project mark becomes the live progress thumb in the navigation */
.nav .progress{overflow:visible}
.nav .progress i{overflow:visible}
.nav .progress i::before{clip-path:inset(0 round 999px)}
.nav .progress i::after{display:none}
.nav .progress-logo{position:absolute;z-index:3;left:0;top:50%;width:26px;height:26px;max-width:none;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #65dfffbb);transition:left .18s ease-out,transform .2s ease,filter .2s ease;pointer-events:none}
.nav .case-nav-trigger:hover .progress-logo{transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 0 8px #65dffff0)}

/* Static hero identity is out of flow, so existing first-screen content does not shift */
.hero-identity{display:flex;align-items:center;gap:18px;height:16px}
.hero-logo-static{position:static;flex:0 0 56px;width:56px;height:56px;object-fit:contain;transform:none;filter:drop-shadow(0 10px 24px #1769ff38)}
.hero-identity>.kicker{margin:0;align-items:center}
@media(max-width:800px){.hero-identity{gap:13px;height:14px}.hero-logo-static{position:static;flex-basis:44px;width:44px;height:44px;transform:none}.hero-identity>.kicker{margin:0;align-items:center}}



/* =========================================================
   BOE Meeting Assistant — Visual Refinement
   纯视觉精修，追加在文件末尾；不修改 HTML 结构与内容，
   不改动 Logo/SVG，不替换图片，保留滚动容器与进度 Logo 行为。
   ========================================================= */

/* ---------------------------------------------------------
   1. 设计令牌：统一深蓝 / BOE 蓝 / 冷青色调与形状节奏
   --------------------------------------------------------- */
:root {
  --mv-blue: #1769ff;
  --mv-blue-light: #82b3ff;
  --mv-blue-soft: #a9c8ff;
  --mv-cyan: #38bdf8;
  --mv-cyan-glow: rgba(56, 189, 248, 0.45);
  --mv-night: #071226;
  --mv-night-2: #0a1932;
  --mv-ink: #111827;
  --mv-muted: #667085;

  --mv-border-light: rgba(223, 231, 244, 0.95);
  --mv-border-dark: rgba(41, 64, 100, 0.82);
  --mv-border-glow: rgba(23, 105, 255, 0.14);

  --mv-shadow-light: 0 18px 46px rgba(29, 59, 112, 0.08);
  --mv-shadow-light-hover: 0 26px 64px rgba(29, 59, 112, 0.14);
  --mv-shadow-dark: 0 20px 50px rgba(0, 0, 0, 0.24);
  --mv-shadow-dark-hover: 0 28px 70px rgba(0, 0, 0, 0.32);
  --mv-shadow-glow: 0 0 30px rgba(23, 105, 255, 0.12);

  --mv-radius-sm: 12px;
  --mv-radius: 18px;
  --mv-radius-lg: 22px;
  --mv-radius-xl: 26px;

  --mv-transition-fast: 0.2s ease;
  --mv-transition-base: 0.35s ease;
  --mv-transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------
   2. 模块节奏：深浅模块之间的过渡与统一间距
   --------------------------------------------------------- */
.section,
.chapter {
  position: relative;
  padding: 118px 0;
}

/* 在背景发生切换的模块底部分隔线，制造呼吸感 */
#journey,
#strategy,
#strategy-in-practice,
#principles,
#experience {
  position: relative;
}

#journey::after,
#strategy::after,
#strategy-in-practice::after,
#principles::after,
#experience::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1180px, 86vw);
  height: 1px;
  transform: translateX(-50%);
  opacity: 0.7;
  pointer-events: none;
}

/* 深色 → 浅色：用浅蓝分隔线 */
#strategy::after,
#principles::after {
  background: linear-gradient(90deg, transparent, rgba(130, 179, 255, 0.32), transparent);
}

/* 浅色 → 深色：用深蓝分隔线 */
#journey::after,
#strategy-in-practice::after,
#experience::after {
  background: linear-gradient(90deg, transparent, rgba(41, 64, 100, 0.42), transparent);
}

/* 浅色模块加入极淡的纵向渐变，避免平面感 */
html body .section:not(.soft):not(.night) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

html body .soft {
  background: linear-gradient(180deg, #f6f8fc 0%, #f1f5fb 100%);
}

/* 深色模块加入统一的径向辉光，与首屏/结尾呼应 */
html body .night {
  background: radial-gradient(circle at 88% 12%, rgba(23, 105, 255, 0.08), transparent 28%), var(--mv-night);
}

/* ---------------------------------------------------------
   3. 标题、正文、标签的层级与阅读宽度
   --------------------------------------------------------- */
html body .lead {
  max-width: 720px;
  line-height: 1.52;
  color: #e6f0ff;
}

html body main > section .head h2,
html body .end h2,
html body .statement {
  text-wrap: balance;
}

html body main > section .head p {
  max-width: 760px;
  line-height: 1.7;
}

html body .statement {
  max-width: 980px;
  line-height: 1.22;
}

html body .card h3,
html body .principle b,
html body .diagnosis-stage h3,
html body .strategy-stage strong,
html body .story-copy h3,
html body .scene-copy h3,
html body .rule-copy h3,
html body .system-title strong {
  letter-spacing: -0.015em;
}

html body .card p,
html body .card li,
html body .principle p,
html body .reflection p,
html body .reflection li,
html body .sources,
html body .diagnosis-stage p,
html body .strategy-stage span,
html body .strategy-outcome p {
  line-height: 1.75;
}

html body .story-copy > p {
  max-width: 560px;
}

/* 小标签颜色统一 */
html body .kicker,
html body .card small,
html body .relation-node small,
html body .diagnosis-stage small,
html body .story-copy small,
html body .experience-decisions i,
html body .value-chain i,
html body .scene-copy small,
html body .loss-summary em,
html body .statement em {
  color: var(--mv-blue);
}

html body .night .kicker,
html body .strategy-stage small,
html body .knowledge-core small,
html body .system-foundation small,
html body .system-rule small,
html body .impact-layers small,
html body .iteration-roadmap .road-phase small,
html body .outcome-thesis small,
html body .practice-conclusion small,
html body .journey-result small,
html body .experience-summary small,
html body .rationale-evidence small,
html body .rationale-choice small,
html body .end .kicker {
  color: var(--mv-blue-light);
}

/* ---------------------------------------------------------
   4. 卡片/流程图/截图容器：边框、圆角、阴影、留白一致性
   --------------------------------------------------------- */

/* 大型视觉容器统一大圆角 */
.position-visual,
.journey-map,
.strategy-flow-map,
.experience-canvas,
.outcome-thesis,
.impact-layers,
.iteration-roadmap,
.value-chain,
.experience-decisions,
.experience-summary,
.system-rules,
.principle-bridge,
.system-foundation,
.design-opportunity,
.strategy-outcomes {
  border-radius: var(--mv-radius-xl);
}

/* 截图/设备框统一圆角 */
.screen,
.scene-stage,
.rule-screen,
.canvas-screen,
.gallery figure,
.hero-screen {
  border-radius: var(--mv-radius-lg);
}

/* 小型卡片统一圆角 */
.relation-node,
.diagnosis-stage,
.strategy-stage,
.strategy-outcome,
.principle-bridge span,
.system-foundation > div,
.system-rule,
.impact-layers article,
.iteration-roadmap article,
.outcome-chain span,
.experience-decisions article,
.value-chain span,
.visual-caption,
.stage-note,
.principle,
.card,
.action-stack,
.journey-result,
.practice-conclusion,
.opportunity-outcomes span {
  border-radius: var(--mv-radius);
}

/* 浅色卡片：统一边框与阴影 */
.position-visual,
.journey-map,
.design-opportunity,
.relation-node,
.diagnosis-stage,
.experience-decisions,
.value-chain,
.experience-decisions article,
.value-chain span,
.visual-caption,
.stage-note,
.scene-stage,
.gallery figure,
.card,
.opportunity-outcomes span {
  border-color: var(--mv-border-light);
  box-shadow: var(--mv-shadow-light);
  transition: transform var(--mv-transition-base), box-shadow var(--mv-transition-base), border-color var(--mv-transition-base);
}

/* 深色卡片：统一边框与阴影 */
.principle,
.strategy-flow-map,
.strategy-stage,
.strategy-outcome,
.rationale-evidence,
.rationale-choice,
.rationale-response,
.rationale-row > div:not(.rationale-arrow),
.strategy-thesis,
.strategy-outcomes,
.outcome-intro,
.strategy-outcome,
.principle-bridge,
.principle-bridge span,
.system-foundation,
.system-foundation > div,
.system-rules,
.system-rule,
.impact-layers,
.impact-layers article,
.iteration-roadmap,
.iteration-roadmap article,
.outcome-chain,
.outcome-chain span,
.road-phase,
.road-content span,
.experience-canvas,
.canvas-screen,
.rule-screen,
.screen,
.action-stack,
.journey-result,
.practice-conclusion,
.experience-summary,
.outcome-thesis {
  border-color: var(--mv-border-dark);
  box-shadow: var(--mv-shadow-dark);
  transition: transform var(--mv-transition-base), box-shadow var(--mv-transition-base), border-color var(--mv-transition-base);
}

/* 诊断流程断点标记增强 */
.fault u {
  box-shadow: 0 0 0 8px #fff, 0 0 0 10px rgba(240, 93, 71, 0.18);
}

/* 截图框内发光，突出界面内容 */
.screen,
.rule-screen,
.canvas-screen {
  border: 1px solid rgba(52, 81, 122, 0.7);
  box-shadow: var(--mv-shadow-dark), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 让画廊截图与说明之间的留白更稳 */
.gallery figure {
  padding: 10px;
  background: #ffffff;
}

.gallery img {
  border-radius: calc(var(--mv-radius) - 4px);
}

/* ---------------------------------------------------------
   5. 首屏、顶部玻璃导航、结尾页整体质感
   --------------------------------------------------------- */

/* Hero 标题增加深度，避免在亮渐变处发飘 */
html body .hero h1 {
  text-shadow: 0 14px 44px rgba(2, 12, 31, 0.45);
}

/* Hero 屏幕容器：更通透的玻璃质感 */
html body .hero-screen {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 -8px 40px rgba(23, 105, 255, 0.12), 0 40px 100px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html body .hero-screen img {
  border-radius: calc(var(--mv-radius-lg) - 4px) calc(var(--mv-radius-lg) - 4px) 0 0;
}

/* 导航玻璃：统一深蓝+冷青调，去除灰蒙感 */
html body nav.nav,
html body nav.nav.is-scrolled {
  background: radial-gradient(ellipse 26% 190% at 22% 72%, rgba(183, 221, 255, 0.24) 0%, transparent 72%),
              radial-gradient(ellipse 28% 190% at 76% 24%, rgba(199, 231, 255, 0.18) 0%, transparent 72%),
              linear-gradient(100deg, rgba(6, 18, 38, 0.82) 0%, rgba(10, 33, 66, 0.76) 58%, rgba(27, 70, 110, 0.72) 100%) !important;
  backdrop-filter: blur(30px) saturate(135%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(135%) brightness(1.04) !important;
  border-bottom: 1px solid rgba(130, 179, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 40px rgba(2, 12, 31, 0.18) !important;
}

html body nav.nav::before,
html body nav.nav.is-scrolled::before {
  opacity: 0.5;
  background: radial-gradient(ellipse 20% 230% at 34% 50%, rgba(216, 239, 255, 0.28) 0%, transparent 72%),
              radial-gradient(ellipse 22% 220% at 78% 50%, rgba(185, 220, 255, 0.24) 0%, transparent 72%);
  filter: blur(22px);
}

/* 浅色表面上的导航玻璃 */
html body nav.nav:has(.case-nav.surface-light),
html body nav.nav.is-scrolled:has(.case-nav.surface-light) {
  background: radial-gradient(ellipse 26% 190% at 22% 72%, rgba(255, 255, 255, 0.6) 0%, transparent 72%),
              radial-gradient(ellipse 28% 190% at 76% 24%, rgba(185, 219, 255, 0.36) 0%, transparent 72%),
              linear-gradient(100deg, rgba(248, 251, 255, 0.86) 0%, rgba(234, 243, 252, 0.82) 58%, rgba(218, 234, 248, 0.78) 100%) !important;
  border-bottom-color: rgba(98, 128, 168, 0.18) !important;
}

html body nav.nav:has(.case-nav.surface-light)::before,
html body nav.nav.is-scrolled:has(.case-nav.surface-light)::before {
  opacity: 0.45;
  background: radial-gradient(ellipse 20% 230% at 34% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 72%),
              radial-gradient(ellipse 22% 220% at 78% 50%, rgba(185, 219, 255, 0.5) 0%, transparent 72%);
}

/* 导航返回按钮：悬停时冷青→蓝紫渐变文字 */
html body nav.nav .nav-back {
  transition: color var(--mv-transition-fast), transform var(--mv-transition-fast);
}

html body nav.nav .nav-back:hover {
  color: transparent !important;
  background-image: linear-gradient(90deg, #65dfff 0%, #6f9dff 48%, #bd7cff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transform: translateX(-2px);
}

/* 导航章节菜单 */
html body nav.nav .case-menu {
  top: 66px;
  border-radius: var(--mv-radius-lg);
  border: 1px solid rgba(130, 179, 255, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: 10px;
}

html body nav.nav .case-nav.surface-light .case-menu {
  border-color: rgba(98, 128, 168, 0.22);
  box-shadow: 0 24px 64px rgba(29, 59, 112, 0.14);
}

html body nav.nav .case-menu a {
  border-radius: var(--mv-radius-sm);
  transition: background var(--mv-transition-fast), color var(--mv-transition-fast), transform var(--mv-transition-fast);
}

html body nav.nav .case-menu a:hover {
  transform: translateX(3px);
}

/* 进度条：BOE 蓝 → 冷青， thumb 增加辉光 */
html body nav.nav .progress {
  width: 148px;
  height: 4px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

html body nav.nav .case-nav.surface-light .progress {
  background: rgba(17, 24, 39, 0.08);
}

html body nav.nav .progress i {
  background: linear-gradient(90deg, var(--mv-blue), var(--mv-cyan));
  box-shadow: 0 0 10px var(--mv-cyan-glow);
}

html body nav.nav .progress-logo {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.65));
}

/* Meeting assistant navigation identity and aligned chapter control */
html body nav.nav .nav-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--nav-text);
  font-size: 15px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

html body nav.nav .nav-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 7px 14px rgba(23, 105, 255, 0.24));
}

html body nav.nav .case-nav-trigger {
  flex: 0 0 384px;
  width: 384px;
  margin-left: auto;
  grid-template-columns: max-content 168px;
  justify-content: start;
  gap: 24px;
}

html body nav.nav .case-menu {
  right: 0;
  width: 384px;
}

@media (max-width: 800px) {
  html body nav.nav .nav-brand {
    gap: 7px;
    font-size: 13px;
  }

  html body nav.nav .nav-brand img {
    width: 28px;
    height: 28px;
  }

  html body nav.nav .case-nav-trigger {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  html body nav.nav .case-menu {
    right: 0;
    left: 0;
    width: auto;
  }
}

/* 结尾页：加深空间感与文字层次 */
html body .end {
  background: radial-gradient(circle at 76% 34%, rgba(23, 105, 255, 0.42) 0, transparent 24%),
              radial-gradient(circle at 92% 86%, rgba(53, 162, 255, 0.16) 0, transparent 22%),
              linear-gradient(135deg, #071226 0%, #0a2858 62%, #071a39 100%);
}

html body .end h2 {
  text-shadow: 0 16px 50px rgba(2, 12, 31, 0.55);
}

html body .end p {
  color: #c8d8f0;
}

/* ---------------------------------------------------------
   6. 克制的 Hover / 进入动效（尊重 prefers-reduced-motion）
   --------------------------------------------------------- */

/* 进入动画更细腻 */
html body .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

html body .reveal.on {
  opacity: 1;
  transform: none;
}

/* 卡片悬停：轻微上浮 + 阴影加深 */
.relation-node:hover,
.diagnosis-stage:hover,
.strategy-stage:hover,
.strategy-outcome:hover,
.system-rule:hover,
.impact-layers article:hover,
.iteration-roadmap article:hover,
.experience-decisions article:hover,
.value-chain span:hover,
.outcome-chain span:hover,
.gallery figure:hover,
.visual-caption:hover,
.stage-note:hover,
.card:hover,
.principle:hover,
.opportunity-outcomes span:hover {
  transform: translateY(-4px);
  box-shadow: var(--mv-shadow-light-hover);
}

.principle:hover,
.strategy-stage:hover,
.strategy-outcome:hover,
.system-rule:hover,
.impact-layers article:hover,
.iteration-roadmap article:hover,
.outcome-chain span:hover {
  box-shadow: var(--mv-shadow-dark-hover);
}

/* 截图容器悬停 */
.screen:hover,
.scene-stage:hover,
.rule-screen:hover,
.canvas-screen:hover {
  transform: translateY(-3px);
  box-shadow: var(--mv-shadow-dark-hover), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hero 屏幕悬停保留冷青辉光 */
.hero-screen:hover {
  transform: translateY(-3px);
  box-shadow: 0 -12px 50px rgba(23, 105, 255, 0.18), 0 44px 110px rgba(0, 0, 0, 0.5);
}

/* 链接与按钮的微交互 */
.sources a {
  transition: color var(--mv-transition-fast);
}

.sources a:hover {
  color: var(--mv-blue-light);
}

/* 禁用动画时的兜底 */
@media (prefers-reduced-motion: reduce) {
  html body .reveal,
  html body .reveal.on {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .relation-node,
  .diagnosis-stage,
  .strategy-stage,
  .strategy-outcome,
  .system-rule,
  .impact-layers article,
  .iteration-roadmap article,
  .experience-decisions article,
  .value-chain span,
  .outcome-chain span,
  .gallery figure,
  .visual-caption,
  .stage-note,
  .card,
  .principle,
  .opportunity-outcomes span,
  .screen,
  .scene-stage,
  .rule-screen,
  .canvas-screen,
  .hero-screen {
    transition: none;
    transform: none !important;
  }

  html body nav.nav .progress i::before {
    animation: none;
  }

  html body nav.nav .nav-back:hover,
  html body nav.nav .case-menu a:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   7. 响应式微调
   --------------------------------------------------------- */
@media (max-width: 800px) {
  .section,
  .chapter {
    padding: 86px 0;
  }

  html body .hero-copy {
    padding-top: 10vh;
  }

  html body .hero h1 {
    font-size: clamp(44px, 12vw, 68px);
    letter-spacing: -0.04em;
  }

  html body .hero .lead {
    font-size: clamp(18px, 4.5vw, 24px);
  }

  /* 移动端隐藏装饰性背景线，避免拥挤 */
  #journey::after,
  #strategy::after,
  #strategy-in-practice::after,
  #principles::after,
  #experience::after {
    display: none;
  }

  /* 小屏下 story 视觉背后的装饰框容易溢出，隐藏 */
  .story-visual::before {
    display: none;
  }

  html body .visual-caption {
    width: 96%;
  }

  html body nav.nav .case-menu a:hover {
    transform: none;
  }
}