/* One light, continuous chapter. Scroll distance is separate from its visual spacing. */
.tech-track{--tech-pin:90px;position:relative;isolation:isolate;background:#F0F2F5;color:#0B0D10;scroll-margin-top:calc(var(--tech-pin) - 108px);color-scheme:light}
.tech-stage{position:relative;isolation:isolate;overflow:hidden;background:#F0F2F5}
.tech-scene{padding-block:48px}
.tech-topline{position:relative;z-index:2;margin-bottom:32px}
.tech-topline h2{font-size:30px;line-height:1.3;font-weight:400;letter-spacing:-.035em;color:#0B0D10}
.tech-title-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;transition:text-decoration-color 180ms ease}
.tech-title-link:hover{text-decoration-color:#778391}
.tech-title-link:focus-visible,.tech-artwork:focus-visible{outline:2px solid #0B0D10;outline-offset:6px!important}
.tech-composition{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.tech-artwork{position:relative;display:block;min-width:0;width:100%;height:480px;margin:0;background:none;border:0;padding:0;touch-action:pan-y;cursor:pointer}
.tech-svg{width:100%;height:100%;overflow:hidden;display:block}
.tech-caption{position:relative;min-width:0}
.tech-chapter{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin:0 0 44px}
.tech-chapter:last-child{margin-bottom:0}
.tech-eyebrow{display:flex;align-items:center;gap:16px;color:#4F5B69;font-size:11px;letter-spacing:.025em;line-height:1.6;margin-bottom:19px}
.tech-eyebrow span{font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;color:#4F5B69}
.tech-chapter h3{font-size:clamp(34px,3.3vw,48px);line-height:1.17;letter-spacing:-.045em;font-weight:400;color:#0B0D10}
.tech-chapter h3 em{font-style:normal;color:#546171}
.tech-explanation{max-width:26rem;color:#4F5B69;font-size:17px;line-height:1.7;letter-spacing:-.014em;margin-top:23px}
.tech-ready .tech-track::after{content:"";display:block;height:200svh;pointer-events:none}
.tech-ready .tech-stage{position:sticky;top:var(--tech-pin)}
.tech-ready .tech-artwork{height:min(calc((100vw - var(--gutter) * 2 - 48px) * .6 * .605634),calc(100svh - var(--tech-pin) - 172px))}
.tech-ready .tech-caption{height:300px}
.tech-ready .tech-chapter{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);will-change:opacity,transform}
.tech-ready .tech-chapter:first-child{opacity:1;visibility:visible;transform:none}
.tech-ready .tech-fallback-art{display:none}
.technology-detail{--ink:#0B0D10;background:#F0F2F5;color:#0B0D10}
.technology-detail .section-overline{color:#4F5B69}
.detail-panel.technology-detail>.technology-intro{color:#4F5B69;font-size:16px;line-height:1.8;max-width:76ch;margin-top:24px}
html:not(.panels-ready) .detail-source:has(.technology-detail){background:#F0F2F5;padding-inline:var(--gutter)}
.engine-detail{display:grid;grid-template-columns:24px 1fr;gap:16px;margin-top:30px;border-top:1px solid #C9D0D9;padding-top:24px}
.engine-detail>span{font:10px/2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#4F5B69}
.engine-detail h3{font-weight:500;font-size:19px;letter-spacing:-.02em;line-height:1.3}
.engine-detail p{font-size:16px;color:#4F5B69;line-height:1.8;margin-top:12px;max-width:76ch}
.detail-dialog:has(.technology-detail){--ink:#0B0D10;width:min(960px,calc(100vw - 48px));background:#F0F2F5;color:#0B0D10;color-scheme:light;border-color:#C9D0D9}
.detail-dialog .technology-detail{padding:74px 56px 52px}
.detail-dialog .technology-detail .section-overline{color:#4F5B69}
.detail-dialog:has(.technology-detail) .dialog-controls{background:#F0F2F5}
.detail-dialog:has(.technology-detail) .dialog-close{color:#0B0D10}
.detail-dialog:has(.technology-detail) .dialog-close:hover{background:#0B0D1009}
@media(max-width:1100px){.tech-track{--tech-pin:80px}}
@media(max-width:1023px){
 .tech-composition{display:flex;flex-direction:column;gap:24px;align-items:stretch}
 .tech-ready .tech-track::after{height:180svh}
 .tech-ready .tech-artwork{height:min(400px,calc(100svh - var(--tech-pin) - 448px));flex:none}
 .tech-ready .tech-caption{height:252px;flex:none}
 .tech-chapter{justify-content:flex-start}
 .tech-chapter h3{font-size:39px}
 .tech-explanation{max-width:36rem;font-size:16px;margin-top:20px}
 .tech-artwork{height:400px}
}
@media(max-width:700px){
 .tech-track{scroll-margin-top:calc(var(--tech-pin) - 92px)}
 .tech-scene{padding-block:32px}
 .tech-topline{margin-bottom:28px}
 .tech-topline h2{font-size:24px}
 .tech-ready .tech-artwork{height:min(330px,calc((100vw - var(--gutter) * 2) * .86),calc(100svh - var(--tech-pin) - 440px))}
 .tech-ready .tech-caption{height:280px}
 .tech-chapter h3{font-size:clamp(30px,8.5vw,38px);line-height:1.19}
 .tech-eyebrow{font-size:10px;gap:12px;margin-bottom:14px}
 .tech-explanation{font-size:15px;line-height:1.65;margin-top:19px;max-width:330px}
 .tech-artwork{height:290px}
 .engine-detail{gap:11px;grid-template-columns:20px 1fr}
 .engine-detail p{font-size:15px}
 .detail-panel.technology-detail>.technology-intro{font-size:15px}
 .detail-dialog:has(.technology-detail){width:calc(100vw - 20px)}
 .detail-dialog .technology-detail{padding:72px 26px 30px}
}
/* Short screens and reduced motion retain all three chapters in normal flow. */
.tech-static .tech-track::after,.reduced .tech-track::after{display:none!important}
.tech-static .tech-stage,.reduced .tech-stage{position:relative;top:auto}
.tech-static .tech-composition,.reduced .tech-composition{align-items:start}
.tech-static .tech-artwork,.reduced .tech-artwork{height:380px;flex:auto}
.tech-static .tech-caption,.reduced .tech-caption{height:auto;flex:auto}
.tech-static .tech-chapter,.reduced .tech-chapter{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;margin:0 0 42px;will-change:auto}
.tech-static .tech-chapter:last-child,.reduced .tech-chapter:last-child{margin-bottom:0}
@media(max-width:1023px){.tech-static .tech-composition,.reduced .tech-composition{align-items:stretch}}
@media(max-width:700px){.tech-static .tech-artwork,.reduced .tech-artwork{height:290px}}
@media print{.tech-track,.tech-stage{height:auto!important;position:relative!important;padding:25px 0!important}.tech-artwork{display:none!important}.tech-topline,.tech-composition,.tech-caption,.tech-chapter{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;height:auto!important}.tech-composition{display:block!important}.tech-chapter{margin:20px 0!important}.tech-chapter *{color:#222!important}}

/* Let the technical form and its explanation share the full desktop field. */
@media(min-width:1101px){
 .tech-topline h2{font-size:clamp(32px,2.5vw,64px)}
 .tech-title-link{min-height:1.45em}
 .tech-topline{margin-bottom:32px}
 .tech-composition{gap:clamp(48px,4vw,102px)}
 .tech-chapter h3{font-size:clamp(40px,min(3.5vw,7.8svh),92px)}
 .tech-eyebrow{font-size:clamp(14px,1vw,20px);gap:18px;margin-bottom:clamp(20px,1.5vw,36px)}
 .tech-eyebrow span{font-size:clamp(12px,.8vw,17px)}
 .tech-explanation{max-width:33ch;font-size:clamp(19px,1.3vw,30px);line-height:1.6;margin-top:clamp(24px,1.8vw,40px)}
 .tech-ready .tech-artwork{height:min(calc((100vw - var(--gutter) * 2 - clamp(48px,4vw,102px)) * .6 * .605634),calc(100svh - var(--tech-pin) - 128px - clamp(32px,2.5vw,64px) * 1.45))}
 .tech-ready .tech-caption{height:min(clamp(320px,24vw,540px),calc(100svh - var(--tech-pin) - 128px - clamp(32px,2.5vw,64px) * 1.45))}
 .tech-static .tech-artwork,.reduced .tech-artwork{height:clamp(380px,32vw,800px)}
 .tech-static .tech-caption,.reduced .tech-caption{height:auto}
}
@media(max-width:700px){.tech-eyebrow{font-size:12px}.tech-eyebrow span{font-size:11px}.tech-explanation{font-size:16px}}

/* Match the expanded technology chapter to the larger desktop reading scale. */
@media(min-width:1101px){
 .detail-dialog:has(.technology-detail){width:min(1240px,calc(100vw - var(--gutter) * 2))}
 .detail-dialog .technology-detail{padding:clamp(80px,4.5vw,100px) clamp(48px,3.5vw,76px) clamp(52px,3vw,68px)}
 .technology-detail .section-overline{font-size:clamp(16px,1vw,20px);margin-bottom:26px}
 .technology-detail h2{font-size:clamp(38px,2.4vw,52px);max-width:none}
 .technology-detail .engine-detail{grid-template-columns:28px 1fr;gap:20px;margin-top:clamp(30px,2vw,40px);padding-top:clamp(26px,1.8vw,36px)}
 .technology-detail .engine-detail>span{font-size:12px}
 .technology-detail .engine-detail h3{font-size:clamp(22px,1.3vw,26px)}
 .technology-detail .engine-detail p{font-size:clamp(18px,1.15vw,22px);line-height:1.7;max-width:76ch;margin-top:14px}
 .detail-panel.technology-detail>.technology-intro{font-size:clamp(18px,1.15vw,22px);line-height:1.7}
}
/* Chapter names are reading landmarks, synchronized with the geometric gesture. */
.tech-eyebrow{color:#0B0D10;font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.025em;gap:16px;margin-bottom:22px}
.tech-eyebrow span{font-size:22px;line-height:1.15;color:#546171;letter-spacing:-.035em}
@media(min-width:1101px){
 .tech-eyebrow{font-size:clamp(22px,1.55vw,32px);gap:20px;margin-bottom:clamp(22px,1.5vw,36px)}
 .tech-eyebrow span{font-size:clamp(24px,1.7vw,36px)}
}
@media(max-width:700px){
 .tech-eyebrow{font-size:16px;gap:13px;margin-bottom:18px}
 .tech-eyebrow span{font-size:18px}
}