/* Six-theme local preview. Source artwork and the main case remain unchanged. */
/* Static image wrappers reuse existing dimensions and device decoration only. */
.portfolio-case--grc{--theme-stage-height:min(820px,90svh,calc(var(--grc-canvas-width)*.48));--stage-copy-lift:clamp(24px,calc(var(--grc-canvas-width)*.025),48px)}
/* Retain the existing carrier and chapter join when moving navigation above content. */
.theme-stage-flow{--stage-scroll-distance:1400px;--stage-carrier-height:calc((100svh + var(--theme-stage-height))/2 - 36px + var(--grc-chapter-space))}
.stage-chapter{--stage-floor:#09132c;--stage-heading-height:calc(16.5px + 18px + var(--grc-chapter-title-size)*1.2);--stage-nav-top:calc(36px + var(--stage-heading-height) + 20px);--stage-nav-bottom:calc(var(--stage-nav-top) + 45px);--stage-mobile-right:var(--grc-content-right);--stage-mobile-width:min(683px,calc(var(--grc-canvas-width)*.332));--stage-phone-height:min(calc(min(560px,62svh,calc((var(--stage-mobile-width) - 24px)*1334/1500))*1400/1334),calc(var(--theme-stage-height) - var(--stage-nav-bottom) - 76px));--stage-focus-y:max(calc(var(--stage-phone-height)/2 + 70px),min(calc(var(--grc-canvas-width)*.185),48svh));position:relative;height:calc(var(--stage-carrier-height) + var(--stage-scroll-distance));background:var(--stage-floor);color:#f2f5ff}
.portfolio-case main .stage-chapter,.portfolio-case main .stage-panel{scroll-margin-top:0}
.theme-pinned-stage{position:sticky;top:0;height:var(--stage-carrier-height);overflow:clip;isolation:isolate;background:var(--stage-floor)}
.stage-surface{position:relative;top:calc((100svh - var(--theme-stage-height))/2);width:100%;height:var(--theme-stage-height);overflow:hidden;isolation:isolate}
.stage-heading{position:absolute;z-index:5;top:36px;left:var(--grc-content-left);right:var(--grc-content-right);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.stage-heading .eyebrow{color:#dfb86f}
.portfolio-case .stage-heading h2{font-size:var(--grc-chapter-title-size);line-height:1.2;font-weight:740;letter-spacing:-.025em;text-wrap:balance}
.stage-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Keep the example-data caption with the sticky presentation instead of the scroll track. */
.portfolio-case--grc .theme-pinned-stage>.stage-boundary{position:absolute;bottom:max(24px,calc(var(--stage-carrier-height) - 100svh + 24px));z-index:5;pointer-events:none}
.portfolio-case--grc .stage-boundary>.lean-boundary{margin:0}
.stage-panel{position:absolute;inset:0;visibility:hidden;pointer-events:none;--scene-alpha:0;--title-alpha:0;--detail-alpha:0;--mobile-alpha:0;--mobile-x:0px;--mobile-y:0px;--detail-y:0px;--scene-solid:45%;--scene-mid:56%;--scene-end:78%}
.stage-panel.is-visible{visibility:visible}
.stage-panel.is-active .stage-mobiles{pointer-events:auto}
.stage-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--scene-alpha);will-change:opacity}
.stage-scene img{position:absolute;width:var(--grc-canvas-width);max-width:none;height:auto;left:calc(var(--grc-canvas-width)*-.1);top:calc(var(--stage-nav-bottom) - var(--grc-canvas-width)*.03);mask-image:linear-gradient(90deg,#000 0%,#000 var(--scene-solid),rgba(0,0,0,.65) var(--scene-mid),transparent var(--scene-end));-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 var(--scene-solid),rgba(0,0,0,.65) var(--scene-mid),transparent var(--scene-end));transform:none;will-change:auto}
.stage-scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--stage-floor) 0%,var(--stage-floor) calc(var(--stage-nav-bottom) + 8px),transparent calc(var(--stage-nav-bottom) + 72px),transparent 78%,var(--stage-floor) 100%)}
.stage-copy{position:absolute;z-index:2;isolation:isolate;left:var(--grc-content-left);top:max(calc(var(--stage-nav-bottom) + 24px),calc(min(calc(var(--grc-canvas-width)*.234),calc(var(--theme-stage-height) - 300px)) - var(--stage-copy-lift)));width:min(580px,calc(var(--grc-canvas-width)*.282));pointer-events:none}
.stage-copy::before{content:"";position:absolute;inset:-24px -36px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#09132ce8 0%,#09132cb3 60%,#09132c00 100%);filter:blur(18px)}
/* Long passages need a quieter local scene, with soft edges and no added card. */
#case-year .stage-copy::before,#case-june .stage-copy::before{background:radial-gradient(ellipse at 44% 48%,#09132cf5 0%,#09132ce6 65%,#09132c80 83%,#09132c00 100%)}
.stage-copy::before,.stage-copy .stage-eyebrow,.stage-copy h3{opacity:var(--title-alpha)}
.stage-copy h4,.stage-copy>p:last-child{opacity:var(--detail-alpha);transform:translate3d(0,var(--detail-y),0);will-change:opacity,transform}
.stage-eyebrow{font:500 11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;color:#dfb86f;margin-bottom:16px}
.portfolio-case .stage-copy h3{font-size:28px;line-height:1.4;letter-spacing:0;font-weight:650;margin:0;text-wrap:pretty}
.portfolio-case .stage-copy h4{font-size:20px;line-height:1.5;font-weight:550;color:#e5ebf8;margin-top:18px}
.stage-copy>p:last-child{font-size:16px;line-height:1.85;color:#fff;margin-top:14px;text-wrap:pretty;text-shadow:none}
.stage-mobiles{position:absolute;right:var(--stage-mobile-right);width:var(--stage-mobile-width);top:max(calc(var(--stage-nav-bottom) + 36px),calc(var(--stage-focus-y) - var(--stage-phone-height)/2));display:flex;align-items:flex-start;justify-content:center;gap:24px;z-index:3;opacity:var(--mobile-alpha);transform:translate3d(var(--mobile-x),var(--mobile-y),0);will-change:opacity,transform}
.stage-mobiles figure{position:relative;flex:none;min-width:0;margin:0;width:calc(var(--stage-phone-height)*750/1400)}
/* Presentation reference: a pale device rim, soft depth and unobstructed artwork. */
.stage-mobiles .image-button{isolation:isolate;--device-rim:calc(var(--stage-phone-height)*.012);--device-radius:calc(var(--stage-phone-height)*.042)}
.stage-mobiles .image-button::before{content:"";position:absolute;inset:calc(-1*var(--device-rim));z-index:-1;border:1px solid #f6f8fc;border-radius:calc(var(--device-radius) + var(--device-rim));background:linear-gradient(115deg,#fff 0%,#e8edf4 34%,#c4cedb 72%,#f7f9fc 100%);box-shadow:inset 0 0 0 1px #96a2b1,inset 0 0 0 2px #ffffff80,0 18px 42px #01071480,0 3px 9px #02081760;pointer-events:none}
.stage-mobiles figure::before,.stage-mobiles figure::after{content:"";position:absolute;z-index:0;top:20%;width:3px;height:8%;border-radius:2px;background:linear-gradient(90deg,#8e9bae,#e7edf6 48%,#8490a1);pointer-events:none}
.stage-mobiles figure::before{left:calc(var(--stage-phone-height)*-.012 - 2px);height:5%;box-shadow:0 calc(var(--stage-phone-height)*.08) 0 #a6b2c2}
.stage-mobiles figure::after{right:calc(var(--stage-phone-height)*-.012 - 2px)}
.stage-mobiles .screen-surface{height:var(--stage-phone-height);border-radius:var(--device-radius);border-color:#151e30;box-shadow:inset 0 0 0 1px #030813;background:#0f1329}
.stage-mobiles .screen-surface img{width:100%;height:auto}
.stage-footer{position:absolute;top:var(--stage-nav-top);bottom:auto;left:var(--grc-content-left);right:var(--grc-content-right);z-index:4;display:flex;justify-content:space-between;align-items:center;gap:24px;color:#a8b8d0;pointer-events:none}
.stage-theme-tabs{display:flex;align-items:center;gap:clamp(16px,calc(var(--grc-canvas-width)*.018),32px);max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#455471 transparent;pointer-events:auto}
.stage-theme-tabs a{position:relative;display:inline-flex;align-items:center;flex:none;gap:8px;min-height:44px;padding:10px 0 12px;text-decoration:none;white-space:nowrap;font-family:inherit;font-size:14px;line-height:1.5;font-weight:500;color:#a8b8d0;border-bottom:2px solid transparent;transition:color .15s}
.stage-theme-tabs a:hover{color:#f3ce8a}
.stage-theme-tabs a.is-active{color:#f3ce8a;border-bottom-color:#e9bc6a}
.stage-tab-number{font:500 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;opacity:.7}
.stage-theme-tabs a.is-active .stage-tab-number{opacity:1}
.stage-theme-tabs a:focus-visible{outline:2px solid #e9bc6a;outline-offset:-2px}
.stage-scroll-cue{flex:none;font-size:12px;letter-spacing:.02em;display:flex;gap:18px;align-items:center}
.stage-scroll-cue>span{font-size:20px;color:#e5bd78}
body.is-theme-stage .portfolio-mark{background:transparent;--portfolio-brand:#edf3ff;--portfolio-brand-accent:#e9bc6a}
body.is-theme-stage .arch-index{top:50%}
body.is-theme-stage :focus-visible{outline-color:#e9bc6a}
body.is-theme-stage .scroll-progress{background:#e9bc6a}
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  /* Native sticky layout keeps the join stable in the scroll compositor, with no JS counter-motion. */
  .theme-stage-flow{position:relative;display:flow-root}
  .theme-stage-flow::after{content:"";display:block;height:var(--stage-scroll-distance)}
  .stage-continuation{position:sticky;top:var(--stage-carrier-height);margin-top:calc(-1 * var(--stage-scroll-distance))}
}
@media(max-height:760px){
  .stage-chapter{--stage-heading-height:calc(var(--grc-chapter-title-size)*1.2)}
  .stage-heading{flex-direction:row;align-items:center;gap:24px}
  .stage-copy{top:max(calc(var(--stage-nav-bottom) + 24px),calc(min(calc(var(--grc-canvas-width)*.234),calc(var(--theme-stage-height) - 328px)) - var(--stage-copy-lift)))}
  .portfolio-case .stage-copy h3{font-size:26px}
  .stage-eyebrow{margin-bottom:12px}
  .portfolio-case .stage-copy h4{margin-top:12px}
  .stage-copy>p:last-child{margin-top:10px}
}
/* Full PPT paragraphs retain 16px type and clear the phone presentation. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  .stage-copy{width:min(640px,calc(var(--grc-content-width) - var(--stage-mobile-width) - 32px));top:max(calc(var(--stage-nav-bottom) + 24px),min(calc(min(calc(var(--grc-canvas-width)*.234),calc(var(--theme-stage-height) - 328px)) - var(--stage-copy-lift)),calc(var(--theme-stage-height) - 484px)))}
}
@media(max-height:699px),(prefers-reduced-motion:reduce){
  .stage-chapter{height:auto;padding:var(--grc-chapter-space) 0;--stage-phone-height:min(calc(min(400px,48svh)*1400/1334),calc((var(--grc-content-width) - 24px)*1400/1500))}
  .theme-pinned-stage{position:relative;display:block;height:auto;overflow:visible}
  .portfolio-case--grc .theme-pinned-stage>.stage-boundary{position:static;margin-block:32px 0;pointer-events:auto}
  .stage-surface{top:auto;height:auto;overflow:visible;display:flex;flex-direction:column}
  .stage-heading{order:0;position:relative;top:auto;left:auto;right:auto;width:var(--grc-content-width);margin-block:0 32px;margin-inline:var(--grc-content-left) var(--grc-content-right);flex-direction:column;align-items:flex-start;gap:18px}
  .stage-panel{order:2;position:relative;visibility:visible;pointer-events:auto;width:var(--grc-content-width);margin-inline:var(--grc-content-left) var(--grc-content-right);padding:0 0 64px;--scene-alpha:1;--title-alpha:1;--detail-alpha:1;--mobile-alpha:1;will-change:auto}
  .stage-panel+.stage-panel{padding-top:64px;border-top:1px solid #35435c}
  .stage-panel:last-of-type{padding-bottom:0}
  .stage-scene{position:relative;height:auto;overflow:hidden;margin-bottom:28px;opacity:1;will-change:auto}
  .stage-scene img{position:relative;left:0;top:0;width:100%;height:auto;mask-image:none;-webkit-mask-image:none;transform:none;will-change:auto}
  .stage-scene::before{display:none}
  .stage-copy{position:relative;left:auto;top:auto;width:100%;max-width:640px;margin:0 0 36px;pointer-events:auto}
  .stage-copy::before{display:none}
  .stage-copy .stage-eyebrow,.stage-copy h3,.stage-copy h4,.stage-copy>p:last-child{opacity:1;transform:none;will-change:auto}
  .portfolio-case .stage-copy h3{font-size:26px}
  .stage-mobiles{position:relative;right:auto;top:auto;width:100%;height:auto;justify-content:center;align-items:start;gap:24px;max-width:580px;margin:auto;opacity:1;transform:none;will-change:auto}
  .stage-footer{order:1;position:sticky;top:64px;left:auto;right:auto;bottom:auto;display:flex;width:var(--grc-content-width);margin-block:0 32px;margin-inline:var(--grc-content-left) var(--grc-content-right);padding:8px 0;background:var(--stage-floor);box-shadow:0 8px 16px #09132c;pointer-events:auto}
  .stage-theme-tabs{width:100%;gap:24px}
  .stage-scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){.stage-panel{transition:none!important}}

/* v65 pilot: give the source screen its own reading band, above the explanation. */
.stage-case-heading{opacity:var(--title-alpha)}
.portfolio-case .stage-case-heading h3{font-size:28px;line-height:1.4;letter-spacing:0;font-weight:650;margin:0;text-wrap:pretty}
.stage-copy-paragraph{display:block;margin-top:12px}
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  /* v66: keep the top anchored; use existing lower safety space for a more open rhythm. */
  .stage-surface{--stage-display-height:min(820px,90svh,max(700px,calc(var(--grc-canvas-width)*.48)));--stage-display-top:calc((100svh - var(--stage-display-height))/2);--stage-breathing-room:clamp(0px,calc(var(--stage-carrier-height) - var(--stage-display-top) - var(--stage-display-height) - 8px),64px);height:calc(var(--stage-display-height) + var(--stage-breathing-room));top:var(--stage-display-top)}
  .stage-panel:not(.stage-panel--visual-first){height:var(--theme-stage-height);bottom:auto}
  /* All themes share one image band; handset count changes horizontal framing only. */
  .stage-chapter{--stage-scene-offset:0px;--stage-pair-shift:calc(var(--stage-phone-height)*750/2800 + 36px)}
  .stage-chapter[data-scene-layout="pair"]{--stage-scene-offset:calc(-1 * var(--stage-pair-shift))}
  .stage-panel--visual-first{--stage-space-step:clamp(0px,calc((var(--grc-canvas-width) - 1320px)*.067),8px);--stage-case-line:39.2px;--stage-note-lines:4;--stage-note-line:29.6px;--stage-note-gap:24px;--stage-note-inset:58px;--stage-note-reserve:calc(var(--stage-note-lines)*var(--stage-note-line) + var(--stage-note-gap) + var(--stage-note-inset));--stage-scene-reference-width:calc(var(--grc-content-width) - var(--stage-mobile-width) - 32px - var(--stage-space-step)*2);--stage-story-top:calc(var(--stage-nav-bottom) + 24px + var(--stage-space-step)*.75);--stage-story-bottom:24px;--stage-story-gap:calc(20px + var(--stage-space-step)*.5);--stage-scene-band:max(0px,calc(var(--stage-display-height) + var(--stage-breathing-room) - var(--stage-story-top) - var(--stage-story-bottom) - var(--stage-case-line) - var(--stage-note-reserve) - var(--stage-story-gap)*2))}
  .stage-panel--visual-first .stage-story{--stage-story-width:var(--stage-scene-reference-width);position:absolute;top:var(--stage-story-top);bottom:var(--stage-story-bottom);left:var(--grc-content-left);width:var(--stage-story-width);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--stage-case-line) var(--stage-scene-band) var(--stage-note-reserve);gap:var(--stage-story-gap);min-height:0}
  .stage-panel--visual-first .stage-story--single{--stage-story-width:calc(var(--grc-content-width) - var(--stage-mobile-width)/2 - var(--stage-phone-height)*750/2800 - 32px - var(--stage-space-step)*2)}
  .stage-panel--visual-first .stage-case-heading{display:flex;align-items:baseline;gap:24px;min-width:0}
  .stage-panel--visual-first .stage-case-heading h3{order:0;flex:none}
  .stage-panel--visual-first .stage-case-heading .stage-eyebrow{order:1;white-space:nowrap;margin:0;color:#dfb86f}
  /* Keep the screen and handset group inside the same centered content edges. */
  .stage-panel--visual-first .stage-scene{position:relative;inset:auto;width:var(--grc-content-width);height:var(--stage-scene-band);min-height:0;margin-left:0;overflow:hidden}
  .stage-panel--visual-first .stage-scene img{--stage-scene-width:min(var(--grc-content-width),calc(var(--stage-scene-band)*1920/440));width:var(--stage-scene-width);left:0;top:calc((var(--stage-scene-band) - var(--stage-scene-width)*440/1920)/2 - var(--stage-scene-width)*100/1920);mask-image:linear-gradient(90deg,#000 0%,#000 70%,#0009 84%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,#0009 84%,transparent 100%);transform:translate3d(var(--stage-scene-offset),0,0);transition:transform .54s cubic-bezier(.22,.61,.36,1)}
  .stage-panel--visual-first .stage-mobiles{justify-content:flex-end}
  .stage-panel--visual-first .stage-scene::before{background:linear-gradient(180deg,var(--stage-floor) 0%,transparent 8%,transparent 83%,var(--stage-floor) 100%)}
  .stage-panel--visual-first .stage-copy{position:relative;inset:auto;width:100%;min-width:0;z-index:2;margin-top:calc(4px + var(--stage-space-step)*.5);align-self:end}
  .stage-panel--visual-first .stage-copy::before{display:none}
  .portfolio-case .stage-panel--visual-first .stage-copy h4{margin:0}
  .stage-panel--visual-first .stage-copy>p:last-child{margin-top:calc(16px + var(--stage-space-step)*.5)}
  .stage-panel--visual-first .stage-copy-paragraph{margin-top:calc(18px + var(--stage-space-step)*.75)}
}
@media(min-height:700px) and (max-width:1359px) and (prefers-reduced-motion:no-preference){
  .stage-panel--visual-first{--stage-note-lines:5}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .stage-panel--visual-first{--stage-case-line:36.4px;--stage-note-line:28.8px;--stage-note-gap:14px;--stage-note-inset:44px;--stage-story-top:calc(var(--stage-nav-bottom) + 16px);--stage-story-gap:14px;--stage-story-bottom:8px}
  .portfolio-case .stage-case-heading h3{font-size:26px}
  .stage-panel--visual-first .stage-case-heading{gap:14px}
  .portfolio-case .stage-panel--visual-first .stage-copy h4{line-height:1.4}
  .stage-panel--visual-first .stage-copy{margin-top:4px}
  .stage-panel--visual-first .stage-copy>p:last-child{margin-top:12px;line-height:1.8}
  .stage-panel--visual-first .stage-copy-paragraph{margin-top:14px}
}
@media(min-height:700px) and (max-height:760px) and (max-width:1279px) and (prefers-reduced-motion:no-preference){
  /* Keep the shared source band clear of the longest paragraph on compact desktops. */
  .stage-panel--visual-first{--stage-note-lines:6}
}
@media(max-height:699px),(prefers-reduced-motion:reduce){
  .stage-case-heading{margin-bottom:24px;opacity:1}
  .portfolio-case .stage-case-heading h3{font-size:26px}
}

/* v67: annotations specify vertical locations only; keep all existing dimensions. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  .stage-surface{--stage-upper-lift:clamp(0px,calc(var(--stage-display-top) + 36px - 13svh),116px);--stage-scene-lift:min(80px,calc(var(--stage-upper-lift)*.72));--stage-handset-lift:min(84px,calc(var(--stage-upper-lift)*.75));overflow:visible}
  .stage-heading,.stage-footer{transform:translateY(calc(-1*var(--stage-upper-lift)))}
  .stage-panel--visual-first .stage-case-heading{transform:translateY(calc(-1*var(--stage-upper-lift)))}
  .stage-panel--visual-first .stage-scene,.stage-panel--visual-first .stage-copy{transform:translateY(calc(-1*var(--stage-scene-lift)))}
  .stage-panel--visual-first .stage-mobiles{transform:translate3d(var(--mobile-x),calc(var(--mobile-y) - var(--stage-handset-lift)),0)}
  /* v70: all six themes inherit the approved June explanation position. */
  .stage-panel--visual-first .stage-copy{transform:translateY(calc(-1*var(--stage-scene-lift) - 100px))}
}

/* v71: remove redundant labels without letting the source row expand and rescale. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  .stage-panel--visual-first .stage-copy{--stage-removed-heading-height:30px;--stage-text-lift:clamp(0px,calc((var(--grc-canvas-width) - 1200px)*.15),var(--stage-removed-heading-height));padding-bottom:var(--stage-text-lift)}
  .stage-panel--visual-first .stage-copy>p:last-child{margin-top:calc(16px + var(--stage-space-step)*.5 + var(--stage-removed-heading-height) - var(--stage-text-lift))}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .stage-panel--visual-first .stage-copy{--stage-removed-heading-height:28px}
  .stage-panel--visual-first .stage-copy>p:last-child{margin-top:calc(12px + var(--stage-removed-heading-height) - var(--stage-text-lift))}
}

/* Chart presentations use the original PPT's source selection / phone composition. */
.chart-stage-flow{--chart-surface:var(--paper);--chart-stage-height:min(860px,94svh);--chart-content-width:var(--grc-content-width);--chart-left:var(--grc-content-left);--chart-right:var(--grc-content-right);--chart-scroll-distance:1600px;--chart-carrier-height:calc((100svh + var(--chart-stage-height))/2 - 36px + var(--grc-chapter-space));--chart-phone-height:min(490px,calc(var(--chart-stage-height) - 430px),calc(((var(--chart-content-width) - 48px)*.425 - 48px)*1400/1500));position:relative;display:flow-root}
.portfolio-case .stage-continuation #reading{padding:0}
.chart-stage-chapter{position:relative;background:var(--chart-surface);color:var(--ink)}
.chart-stage-deck{position:relative;height:calc(var(--chart-carrier-height) + var(--chart-scroll-distance))}
.chart-intro{padding:var(--grc-chapter-space) var(--chart-right) 48px var(--chart-left)}
.chart-intro-heading{margin-bottom:32px}
.portfolio-case .chart-intro-heading h2{margin-top:18px;font-size:var(--grc-chapter-title-size);line-height:1.2;font-weight:740;letter-spacing:-.025em;text-wrap:balance}
.chart-intro-lead{max-width: none;margin-top:16px;font-size:var(--grc-body-size);line-height:1.8;color:var(--soft);text-wrap: wrap}
.chart-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.chart-intro-classification{min-width:0}
.portfolio-case .chart-intro-classification h3{margin:0 0 24px;font-size:28px;line-height:1.4;font-weight:650}
.chart-intro .chart-taxonomy{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.chart-intro .chart-type-group:first-child{grid-column:1/-1}
.chart-intro .chart-type-group:not(:first-child){padding-bottom:0;border-bottom:0}
.chart-intro-montage{width:min(100%,calc(360px * 1920 / 1104));justify-self:end;margin:0}
.chart-intro-montage>img{display:block;width:100%;height:auto;border-radius:4px}
.chart-intro-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:32px;padding-top:24px;border-top:1px solid #c9d5e6}
.portfolio-case .chart-intro-principles h4{margin:0 0 12px;font-size:18px;line-height:1.5;font-weight:650;color:var(--blue)}
.chart-intro-principles p{margin:0;font-size:var(--grc-body-size);line-height:1.8;color:var(--soft);text-wrap:pretty}
.chart-pinned-stage{position:sticky;top:0;height:var(--chart-carrier-height);overflow:clip;isolation:isolate;background:var(--chart-surface)}
/* The following chapter must have its own opaque surface over the sticky chart layer. */
.portfolio-case #visual{position:relative;background:#edf2f8;border-top:1px solid var(--line)}
.chart-stage-surface{position:relative;top:calc((100svh - var(--chart-stage-height))/2);height:var(--chart-stage-height);width:100%;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;padding:36px var(--chart-right) 36px var(--chart-left)}
.chart-panel{position:relative;grid-area:2/1;inset:auto;min-height:0;width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:24px;visibility:hidden;pointer-events:none;--scene-alpha:0;--title-alpha:0;--detail-alpha:0;--mobile-alpha:0;--mobile-x:0px;--mobile-y:0px;--detail-y:0px}
.chart-panel.is-visible{visibility:visible}
.chart-panel.is-active{pointer-events:auto}
.chart-panel-copy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start;min-height:88px}
.chart-panel-copy>div{opacity:var(--title-alpha)}
.portfolio-case .chart-panel-copy h3{font-size:28px;line-height:1.4;font-weight:650;letter-spacing:0;text-wrap:pretty;margin:0}
.chart-panel-copy>p{opacity:var(--detail-alpha);transform:translate3d(0,var(--detail-y),0);font-size:var(--grc-body-size);line-height:1.8;color:var(--soft);margin:0;text-wrap:pretty}
.chart-correspondence{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;min-height:0;container-type:size}
.chart-source{min-width:0;margin:0;opacity:var(--scene-alpha)}
.chart-source-image{display:block;width:min(100%,calc((100cqh - 84px)*2560/1440));border-radius:4px}
.chart-key--blue{--chart-color:#246bd2;--chart-fill:rgba(57,125,237,.13)}
.chart-key--gold{--chart-color:#96641d;--chart-fill:rgba(235,181,76,.10)}
.chart-region{position:absolute;z-index:1;left:calc(var(--region-x)/var(--crop-w)*100%);top:calc(var(--region-y)/var(--crop-h)*100%);width:calc(var(--region-w)/var(--crop-w)*100%);height:calc(var(--region-h)/var(--crop-h)*100%);border:2px solid var(--chart-color);background:var(--chart-fill);pointer-events:none}
.chart-region>span{position:absolute;top:8px;right:8px;display:grid;place-items:center;min-width:28px;height:24px;padding:0 5px;border-radius:3px;background:var(--chart-color);color:#fff;font:500 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.chart-phones{--chart-phone-height:min(490px,calc(100cqh - 130px),calc(((var(--chart-content-width) - 48px)*.425 - 48px)*1400/1500));display:flex;justify-content:center;align-items:flex-start;gap:24px;width:100%;min-width:0;opacity:var(--mobile-alpha);transform:translate3d(var(--mobile-x),var(--mobile-y),0)}
.chart-phone{width:calc((100% - 24px)/2);flex:none;min-width:0;margin:0}
.chart-phone-label{display:flex;align-items:center;gap:8px;min-height:42px;margin-bottom:12px;font-size:var(--grc-caption-size);line-height:1.5;font-weight:550;color:var(--ink)}
.chart-key{flex:none;display:grid;place-items:center;width:26px;height:24px;border-radius:3px;background:var(--chart-color);color:#fff;font:500 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.chart-device{width:calc(var(--chart-phone-height)*750/1400 + 12px);max-width:100%;margin-inline:auto;padding:5px;border:1px solid #f6f8fc;border-radius:26px;background:linear-gradient(115deg,#fff 0%,#e8edf4 34%,#c4cedb 72%,#f7f9fc 100%);box-shadow:inset 0 0 0 1px #96a2b1,0 14px 28px #17294620,0 3px 8px #17294618}
.chart-device-screen{display:block;overflow:hidden;height:var(--chart-phone-height);width:100%;border:1px solid #141f34;border-radius:20px;background:#101429}
.chart-device-screen img{display:block;width:100%;height:auto;max-width:none;margin-top:calc(var(--phone-crop-y,0)*-100%/750)}
.chart-panel figcaption{font-size:var(--grc-caption-size);line-height:1.75;margin-top:14px;color:var(--soft);text-wrap:pretty}
.chart-phone figcaption{min-height:49px}
.chart-stage-footer{position:relative;grid-area:1/1;bottom:auto;left:auto;width:100%;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:24px}
.chart-stage-tabs{display:flex;align-items:center;gap:clamp(14px,calc(var(--grc-canvas-width)*.015),28px);max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a5b7d1 transparent}
.chart-stage-tabs a{display:inline-flex;align-items:center;flex:none;gap:8px;min-height:44px;padding:10px 0 12px;text-decoration:none;white-space:nowrap;font-size:14px;line-height:1.5;font-weight:500;color:var(--soft);border-bottom:2px solid transparent}
.chart-stage-tabs a>span{font:500 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;opacity:.7}
.chart-stage-tabs a:hover,.chart-stage-tabs a.is-active{color:var(--blue)}
.chart-stage-tabs a.is-active{border-bottom-color:var(--blue)}
.chart-stage-tabs a.is-active>span{opacity:1}
.chart-stage-tabs a:focus-visible{outline-offset:-2px}
.chart-scroll-cue{flex:none;display:flex;align-items:center;gap:16px;font-size:12px;color:var(--soft)}
.chart-scroll-cue>span{font-size:20px;color:var(--blue)}
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  /* The chapter is introduced once, before the six-case presentation. */
  /* Share the blank carrier head with the intro; keep the pinned composition centered. */
  .chart-stage-deck{margin-top:calc(-1 * (100svh - var(--chart-stage-height))/2)}
  .chart-intro{position:relative;z-index:1}
  /* The second sticky continuation keeps the chart / interface join stable too. */
  .chart-stage-flow::after{content:"";display:block;height:var(--chart-scroll-distance)}
  .chart-stage-continuation{position:sticky;top:var(--chart-carrier-height);margin-top:calc(-1 * var(--chart-scroll-distance))}
  .chart-panel.is-visible .chart-source,.chart-panel.is-visible .chart-phones,.chart-panel.is-visible .chart-panel-copy>p{will-change:opacity,transform}
}
@media(max-height:760px){
  .chart-intro-grid{gap:48px}
  .chart-intro-montage{width:min(100%,calc(320px * 1920 / 1104))}
  .portfolio-case .chart-intro-classification h3{font-size:26px}
  .chart-stage-flow{--chart-phone-height:min(340px,calc(var(--chart-stage-height) - 400px),calc(((var(--chart-content-width) - 32px)*.425 - 48px)*1400/1500))}
  .chart-panel{gap:20px}
  .chart-panel-copy,.chart-correspondence{gap:32px}
  .portfolio-case .chart-panel-copy h3{font-size:26px}
  .chart-panel-copy>p{line-height:1.7}
  .chart-stage-tabs{gap:16px}
}
@media(max-height:699px),(prefers-reduced-motion:reduce){
  .chart-stage-chapter{height:auto;padding-block:var(--grc-chapter-space)}
  .portfolio-case .stage-continuation #reading{padding:var(--grc-chapter-space) 0}
  .chart-stage-deck{height:auto}
  .chart-intro{padding-top:0;padding-bottom:0;margin-bottom:64px}
  .chart-pinned-stage{position:relative;display:block;height:auto;overflow:visible}
  .chart-stage-surface{top:auto;height:auto;overflow:visible;display:flex;flex-direction:column;padding:0}
  .chart-stage-footer{order:1;position:sticky;top:64px;left:auto;bottom:auto;width:var(--chart-content-width);margin-block:0 36px;margin-inline:var(--chart-left) var(--chart-right);padding-block:8px;background:var(--chart-surface);box-shadow:0 8px 16px var(--chart-surface);z-index:5}
  .chart-scroll-cue{display:none}
  .chart-stage-tabs{width:100%;gap:24px}
  .chart-panel{order:2;position:relative;inset:auto;width:var(--chart-content-width);height:auto;margin-block:0 64px;margin-inline:var(--chart-left) var(--chart-right);visibility:visible;pointer-events:auto;display:block}
  .chart-panel+.chart-panel{padding-top:40px;border-top:1px solid var(--line)}
  .chart-panel:last-of-type{margin-bottom:0}
  .chart-panel-copy{grid-template-columns:minmax(0,1fr);gap:14px;min-height:0;margin-bottom:32px}
  .portfolio-case .chart-panel-copy h3{font-size:26px}
  .chart-panel-copy>div,.chart-panel-copy>p,.chart-source,.chart-phones{opacity:1;transform:none;will-change:auto}
  .chart-correspondence{grid-template-columns:minmax(0,1fr);gap:32px;container-type:normal}
  .chart-source{max-width:760px}
  .chart-source-image{width:100%}
  .chart-phones{max-width:580px;gap:32px;justify-content:flex-start}
  .chart-phone{width:min(264px,calc((var(--chart-content-width) - 32px)/2));max-width:100%}
  .chart-device-screen{height:auto;aspect-ratio:750/1400}
  .chart-device{width:100%}
  .chart-phone figcaption{min-height:0}
}

/* v80: move the composition up without resizing its artwork after removing visible headings. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  .chart-panel{grid-template-rows:minmax(0,1fr);gap:0;padding-bottom:63.2px}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .chart-panel{padding-bottom:56.4px}
}

/* v45: the PPT taxonomy and six cases share one presentation, not eight split examples. */
.chart-panel-copy{display:block;min-height:0}
.chart-correspondence{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.chart-source-image{width:min(100%,calc((100cqh - var(--chart-note-space,160px))*var(--crop-w)/var(--crop-h)))}
.chart-panel .chart-case-explanation{font-size:var(--grc-body-size);line-height:1.8;margin-top:20px}
.chart-touch-note{display:block;margin-top:10px;color:var(--ink)}
.chart-key--cyan{--chart-color:#137a89;--chart-fill:rgba(38,180,195,.12)}
.chart-phones{--chart-columns:2;--chart-gap:20px;--chart-grid-gap:48px;--chart-ideal-width:calc(((100cqw - var(--chart-grid-gap))*.55 - (var(--chart-columns) - 1)*var(--chart-gap))/var(--chart-columns) - 12px);--chart-phone-height:min(490px,calc(100cqh - 114px),calc(var(--chart-ideal-width)*1400/750));gap:var(--chart-gap)}
.chart-phones--three{--chart-columns:3}
.chart-phones--single{--chart-columns:1}
.chart-phone{width:calc((100% - (var(--chart-columns) - 1)*var(--chart-gap))/var(--chart-columns))}
.chart-phone-label{min-height:24px}
.chart-phone .chart-key{width:auto;min-width:26px;padding-inline:5px}
.chart-device{width:calc(var(--chart-phone-height)*750/1400 + 12px)}
.chart-device-screen{border:0}
.chart-phone figcaption{min-height:0;text-align:center}
/* Complete pages retain their proportions inside the shared handset rim. */
.chart-phone--long{--chart-page-height:min(560px,calc(100cqh - 114px),calc(var(--chart-ideal-width)*var(--chart-view-height)/750))}
.chart-phone--long .chart-device{width:calc(var(--chart-page-height)*750/var(--chart-view-height) + 12px)}
.chart-phone--long .chart-device-screen{height:var(--chart-page-height)}
.chart-caption-part{display:flex;align-items:baseline;justify-content:center;gap:8px}
.chart-caption-part>span{font:500 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--chart-color)}
.chart-phone--search{align-self:center}
.chart-phone--search .chart-device-screen{height:calc(var(--chart-phone-height)*550/1400)}
.chart-phones--single .chart-phone{width:min(330px,100%)}
.chart-type-overview{gap:64px}
.chart-taxonomy{display:grid;gap:28px}
.chart-type-group{padding-bottom:24px;border-bottom:1px solid #c9d5e6}
.chart-type-group:last-child{padding-bottom:0;border-bottom:0}
.portfolio-case .chart-type-group h4,.portfolio-case .chart-principles h4{margin:0 0 12px;font-size:18px;line-height:1.5;font-weight:650;color:var(--blue)}
.chart-type-group ul{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;padding:0;margin:0;font-size:var(--grc-body-size);line-height:1.75;color:var(--ink)}
.chart-type-group li{margin:0}
.chart-principles{display:grid;gap:28px;align-content:start;transform:translate3d(var(--mobile-x),var(--mobile-y),0)}
.chart-principles p{margin:0;font-size:var(--grc-body-size);line-height:1.8;color:var(--soft)}
@media(max-height:760px){
  .chart-phones{--chart-grid-gap:32px}
  .chart-panel .chart-case-explanation{line-height:1.7;margin-top:16px}
  .chart-taxonomy,.chart-principles{gap:20px}
  .chart-type-group{padding-bottom:18px}
}
@media(max-height:699px),(prefers-reduced-motion:reduce){
  .chart-correspondence{grid-template-columns:minmax(0,1fr)}
  .chart-source-image{width:100%}
  .chart-phones{max-width:900px;gap:32px;--chart-gap:32px}
  .chart-phone{width:min(264px,calc((100% - (var(--chart-columns) - 1)*32px)/var(--chart-columns)))}
  .chart-phone--search{align-self:flex-start}
  .chart-device{width:100%}
  .chart-phone--search .chart-device-screen{height:auto;aspect-ratio:750/550}
  .chart-phone--long .chart-device{width:100%}
  .chart-phone--long .chart-device-screen{height:auto;aspect-ratio:750/var(--chart-view-height)}
  .chart-phones--single .chart-phone{width:min(264px,100%)}
  .chart-type-overview{gap:36px}
  .chart-taxonomy{max-width:760px}
  .chart-principles{max-width:760px;gap:28px;transform:none}
}

/* v48: one PPT-like composition for the curve case only. */
.curve-connectors{display:none}
#chart-curves-sample .chart-touch-note{display:inline;margin:0}
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  /* The presentation sits below the shared navigation, without a negative title offset. */
  #chart-curves-sample .chart-panel-copy h3{font-size:28px;line-height:1.4;font-weight:650}
  #chart-curves-sample .chart-correspondence{--curve-stagger:min(96px,17cqh);--curve-phone-width:min(248px,18.9cqw,calc((100cqh - var(--curve-stagger) - 94px)*750/1400 + 12px));--curve-source-top:clamp(22px,8cqh,44px);--curve-source-reserve:112px;--curve-source-width:min(66.8cqw,calc((100cqh - var(--curve-source-top) - var(--curve-source-reserve))*2));--curve-image-top:var(--curve-source-top);--curve-source-end:calc(var(--curve-source-width)*2521/2880);--curve-first-left:calc(100cqw - var(--curve-phone-width)*2 - 24px);--curve-last-left:calc(100cqw - var(--curve-phone-width));--curve-network-y:calc(var(--curve-image-top) + var(--curve-source-width)*104/2880);--curve-resource-y:calc(var(--curve-image-top) + var(--curve-source-width)*1422/2880);--curve-resource-route:max(calc(var(--curve-image-top) + var(--curve-source-width)/2 + 8px),calc((var(--curve-phone-width) - 12px)*1400/750 + 96.5px));position:relative;display:block;isolation:isolate}
  #chart-curves-sample .chart-correspondence::before{content:"";position:absolute;z-index:0;left:8%;right:-32px;top:20%;height:59%;background:#f3f6fa;pointer-events:none;opacity:var(--scene-alpha)}
  #chart-curves-sample .chart-source{position:absolute;z-index:1;left:0;top:var(--curve-source-top);width:66.8cqw;max-width:none}
  #chart-curves-sample .chart-source-image{width:var(--curve-source-width);border-radius:2px;mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 90%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 90%)}
  #chart-curves-sample .chart-region{border-style:dashed;border-width:1px}
  #chart-curves-sample .chart-case-explanation{width:min(100%,calc(var(--curve-first-left) - 24px));margin-top:16px;line-height:1.8}
  #chart-curves-sample .chart-phones{--chart-phone-height:calc((var(--curve-phone-width) - 12px)*1400/750);position:absolute;z-index:3;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none}
  #chart-curves-sample .chart-phone{position:absolute;top:0;left:var(--curve-first-left);width:var(--curve-phone-width);pointer-events:auto}
  #chart-curves-sample .chart-phone:nth-child(2){left:var(--curve-last-left);top:var(--curve-stagger)}
  #chart-curves-sample .chart-phone-label{min-height:24px;margin-bottom:12px}
  #chart-curves-sample .chart-device{width:100%;box-shadow:inset 0 0 0 1px #96a2b1,0 16px 28px #17294626,0 3px 8px #17294618}
  #chart-curves-sample .chart-phone figcaption{margin-top:14px;min-height:0}
  #chart-curves-sample .curve-connectors{position:absolute;display:block;z-index:2;inset:0;pointer-events:none;opacity:var(--mobile-alpha)}
  #chart-curves-sample .curve-connector{position:absolute;color:var(--chart-color)}
  #chart-curves-sample .curve-connector--network{left:var(--curve-source-end);right:calc(var(--curve-phone-width)*2 + 40px);top:23px;height:calc(var(--curve-network-y) - 23px);border-top:1px dashed currentColor;border-left:1px dashed currentColor}
  #chart-curves-sample .curve-connector--network::after,#chart-curves-sample .curve-link-end::after{content:"";position:absolute;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
  #chart-curves-sample .curve-connector--network::after{right:-3px;top:-4px}
  #chart-curves-sample .curve-connector--resource{inset:0}
  #chart-curves-sample .curve-connector--resource>span{position:absolute}
  #chart-curves-sample .curve-link-start{left:var(--curve-source-end);top:var(--curve-resource-y);height:calc(var(--curve-resource-route) - var(--curve-resource-y));border-left:1px dashed currentColor}
  #chart-curves-sample .curve-link-rise{display:none}
  #chart-curves-sample .curve-link-bridge{left:var(--curve-source-end);right:calc(var(--curve-phone-width) + 16px);top:var(--curve-resource-route);border-top:1px dashed currentColor}
  #chart-curves-sample .curve-link-end{right:calc(var(--curve-phone-width) + 16px);top:var(--curve-resource-route);width:0;height:0}
  #chart-curves-sample .curve-link-end::after{right:-3px;top:-4px}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  #chart-curves-sample .chart-panel-copy h3{font-size:26px}
  #chart-curves-sample .chart-correspondence{--curve-stagger:10cqh;--curve-source-top:22px;--curve-source-reserve:132px;--curve-resource-y:calc(var(--curve-image-top) + var(--curve-source-width)*1081.5/2880);--curve-resource-route:var(--curve-resource-y)}
  #chart-curves-sample .chart-case-explanation{line-height:1.7}
}
@media(max-height:699px),(prefers-reduced-motion:reduce){
  #chart-curves-sample .chart-source-image{--crop-w:2560!important}
}

/* v49: the remaining PPT cases use one canvas, with layouts matching their evidence. */
.fusion-connectors{display:none}
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  .portfolio-case .chart-panel--fusion .chart-panel-copy h3{font-size:28px;line-height:1.4;font-weight:650}
  .chart-panel--fusion .chart-correspondence{--fusion-stagger:min(80px,12cqh);--fusion-phone-width:min(232px,18.9cqw,calc((100cqh - var(--fusion-stagger) - 140px)*750/1400 + 12px));--fusion-source-top:clamp(22px,8cqh,44px);--fusion-source-limit:66.8cqw;--fusion-source-aspect:1.777778;--fusion-source-width:min(var(--fusion-source-limit),calc((100cqh - var(--fusion-source-top) - var(--fusion-note-reserve))*var(--fusion-source-aspect)));--fusion-first-left:calc(100cqw - var(--fusion-phone-width)*2 - 24px);position:relative;display:block;isolation:isolate}
  .chart-panel--fusion .chart-correspondence::before{content:"";position:absolute;z-index:0;left:8%;right:-32px;top:20%;height:59%;background:#f3f6fa;pointer-events:none;opacity:var(--scene-alpha)}
  .chart-panel--fusion .chart-source{position:absolute;z-index:1;left:0;top:var(--fusion-source-top);width:var(--fusion-source-limit);max-width:none}
  .chart-panel--fusion .chart-source-image{width:var(--fusion-source-width);border-radius:2px}
  .chart-panel--fusion .chart-region{border-style:dashed;border-width:1px}
  .chart-panel--fusion .chart-case-explanation{width:min(100%,calc(var(--fusion-first-left) - 24px));margin-top:32px;line-height:1.8}
  .chart-panel--fusion .chart-phones{--chart-phone-height:calc((var(--fusion-phone-width) - 12px)*1400/750);position:absolute;z-index:3;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none}
  .chart-panel--fusion .chart-phone{position:absolute;top:0;left:var(--fusion-first-left);width:var(--fusion-phone-width);pointer-events:auto}
  .chart-panel--fusion .chart-phone:nth-child(2){left:calc(100cqw - var(--fusion-phone-width));top:var(--fusion-stagger)}
  .chart-panel--fusion .chart-phone-label{min-height:42px;margin-bottom:12px}
  .chart-panel--fusion .chart-device{width:100%;box-shadow:inset 0 0 0 1px #96a2b1,0 16px 28px #17294626,0 3px 8px #17294618}
  .chart-panel--fusion .chart-phone figcaption{margin-top:14px;min-height:0}
  .chart-panel--fusion .fusion-connectors{position:absolute;display:block;z-index:2;inset:0;pointer-events:none;opacity:var(--mobile-alpha)}
  .chart-panel--fusion .fusion-connectors svg{display:block;width:100%;height:100%;overflow:visible}
  .fusion-guide{fill:none;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
  .fusion-guide-arrow{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
  .chart-panel--fusion-three .chart-correspondence{--fusion-phone-width:min(192px,15.2cqw,calc((100cqh - var(--fusion-stagger) - 140px)*750/1400 + 12px));--fusion-source-limit:49.5cqw;--fusion-first-left:calc(100cqw - var(--fusion-phone-width)*3 - 40px)}
  .chart-panel--fusion-three .chart-phone:nth-child(2){left:calc(100cqw - var(--fusion-phone-width)*2 - 20px);top:calc(var(--fusion-stagger)*.5)}
  .chart-panel--fusion-three .chart-phone:nth-child(3){left:calc(100cqw - var(--fusion-phone-width));top:var(--fusion-stagger)}
  #chart-ranking .chart-phone--search{top:min(150px,25cqh)}
  .chart-panel--fusion-long .chart-correspondence{--fusion-phone-width:min(192px,15.2cqw,calc((100cqh - 120px)*750/2020 + 2px))}
  .chart-panel--fusion-long .chart-phone:nth-child(2){top:var(--fusion-stagger)}
  .chart-panel--fusion-long .chart-phone:nth-child(3){top:0}
  .chart-panel--fusion .chart-phone--long{--chart-page-height:calc((var(--fusion-phone-width) - 12px)*var(--chart-view-height)/750)}
  .chart-panel--fusion-single .chart-correspondence{--fusion-phone-width:min(232px,22cqw,calc((100cqh - 144px)*750/1920 + 2px));--fusion-source-limit:68.4cqw;--fusion-source-aspect:2;--fusion-first-left:calc(100cqw - var(--fusion-phone-width) - 4cqw)}
  .chart-panel--fusion-single .chart-phone{top:0}
  .chart-panel--fusion-single .chart-phone-label,.chart-panel--fusion-single .chart-phone figcaption{--fusion-label-width:min(240px,calc(var(--fusion-phone-width) + 8cqw));position:relative;left:calc((100% - var(--fusion-label-width))/2);width:var(--fusion-label-width)}
  /* v75: one task example, then the related curve and ring screenshots join their own type groups. */
  .chart-panel--task .chart-correspondence{--fusion-source-aspect:1.777778;--fusion-phone-width:min(258px,22cqw,calc((100cqh - 130px)*750/1620 + 12px))}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .portfolio-case .chart-panel--fusion .chart-panel-copy h3{font-size:26px}
  .chart-panel--fusion .chart-correspondence{--fusion-stagger:10cqh;--fusion-source-top:22px}
  #chart-ranking .chart-correspondence{--fusion-note-reserve:218px}
  .chart-panel--fusion .chart-case-explanation{line-height:1.7}
}

/* Quantity-based evidence layout: independent source and mobile columns. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  #reading .chart-panel .chart-correspondence{
    --evidence-source-share:.6;--evidence-phone-share:.4;--evidence-count:2;
    position:relative;display:grid;grid-template-columns:minmax(0,calc((100% - 40px)*var(--evidence-source-share))) minmax(0,1fr);
    gap:40px;align-items:start;
  }
  #reading .chart-panel--fusion-single .chart-correspondence{--evidence-source-share:.7;--evidence-phone-share:.3;--evidence-count:1}
  #reading .chart-panel--fusion-three .chart-correspondence{--evidence-source-share:.5;--evidence-phone-share:.5;--evidence-count:3}
  #reading .chart-panel .chart-correspondence::before{left:calc(50% - 50vw);right:auto;width:100vw;top:18%;height:calc(var(--chart-backdrop-bottom,100cqh) - 18%)}
  #reading .chart-panel .chart-source{position:relative;inset:auto;width:100%;max-width:none;padding-top:36px}
  #reading .chart-panel .chart-source-image{
    width:min(100%,calc((100cqh - 220px)*var(--crop-w)/var(--crop-h)));
    mask-image:none;-webkit-mask-image:none;
  }
  #reading .chart-panel .chart-case-explanation{width:100%;margin-top:20px}
  #reading .chart-panel .chart-phones{
    --evidence-item-width:calc(((100cqw - 40px)*var(--evidence-phone-share) - (var(--evidence-count) - 1)*20px)/var(--evidence-count));
    --evidence-device-width:min(258px,var(--evidence-item-width),calc((100cqh - 120px)*750/1400 + 12px));
    --chart-phone-height:calc((var(--evidence-device-width) - 12px)*1400/750);
    position:relative;inset:auto;width:100%;height:auto;padding-top:36px;display:flex;gap:20px;align-items:flex-start;justify-content:center;pointer-events:auto;
  }
  #reading .chart-panel .chart-phone{position:relative;inset:auto!important;width:var(--evidence-item-width);align-self:flex-start}
  #reading .chart-panel .chart-phone-label{position:static;width:100%;min-height:42px;margin-bottom:12px}
  #reading .chart-panel .chart-device{width:var(--evidence-device-width);max-width:100%}
  #reading .chart-panel .chart-phone figcaption{position:static;width:100%;margin-top:14px;min-height:0}
  #reading .chart-panel .chart-phone--long{
    --chart-page-height:min(100cqh - 120px,calc((var(--evidence-item-width) - 12px)*var(--chart-view-height)/750));
  }
  #reading .chart-panel .chart-phone--long .chart-device{width:calc(var(--chart-page-height)*750/var(--chart-view-height) + 12px)}
}

@media(min-height:700px) and (prefers-reduced-motion:no-preference){
  #reading .curve-connectors{display:none}
}

.stage-scroll-cue,.chart-scroll-cue{pointer-events:auto;text-decoration:none;color:inherit;padding-block:8px}
.stage-scroll-cue:hover,.chart-scroll-cue:hover{text-decoration:underline;text-underline-offset:5px}
.stage-scroll-cue:focus-visible,.chart-scroll-cue:focus-visible{outline:2px solid currentColor;outline-offset:4px}