@font-face { font-family: 'Dyson Sans Modern'; src: url('assets/dyson/dyson-sans-modern.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.dyson-page { --dyson-muted: #697171; --dyson-rule: #d9dddd; overflow-x: clip; }
.dyson-page .topbar { border-color: var(--dyson-rule); }
.dyson-page main { font-family: 'Dyson Sans Modern', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; text-transform: none; }
.dyson-page figure { margin: 0; min-width: 0; }
.dyson-page img { display: block; width: 100%; height: auto; }
.dyson-page a:hover { text-decoration: underline; text-underline-offset: 5px; }
.dyson-meta { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0; font-size: 12px; }
.dyson-hero { margin-inline: calc(50% - 50vw) !important; }
.dyson-intro { padding: clamp(80px, 10vw, 145px) 0; text-align: center; }
.eyebrow { margin: 0; font-size: 12px; color: var(--dyson-muted); }
.dyson-intro h1 { margin: 22px 0 28px; font-size: clamp(58px, 8vw, 104px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.dyson-tagline { font-size: clamp(20px, 2vw, 28px); line-height: 1.5; margin: 0; }
.dyson-facts { margin-top: 28px; font-size: 12px; color: var(--dyson-muted); }
.dyson-statement { max-width: 760px; margin: auto; padding: clamp(65px, 9vw, 125px) 0; text-align: center; }
.dyson-statement h2 { margin: 27px 0 25px; font-size: clamp(30px, 4vw, 53px); line-height: 1.2; font-weight: 400; letter-spacing: -.035em; }
.dyson-statement > p:last-child:not(.eyebrow) { max-width: 510px; margin: auto; font-size: 16px; line-height: 1.7; color: var(--dyson-muted); }
.dyson-principles { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 60px; padding: 0 0 clamp(65px,8vw,110px); }
.dyson-principles p { margin: 0; font-size: 14px; color: var(--dyson-muted); }
.dyson-chapter { padding: clamp(65px, 9vw, 125px) 0; border-top: 1px solid var(--dyson-rule); }
.chapter-heading { text-align: center; margin-bottom: clamp(35px, 5vw, 65px); }
.chapter-heading h2 { margin: 22px 0 0; font-size: clamp(28px, 3.5vw, 46px); font-weight: 400; line-height: 1.2; letter-spacing: -.03em; }
.dyson-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; align-items: start; }
.dyson-page figcaption { padding-top: 15px; font-size: 12px; line-height: 1.5; color: var(--dyson-muted); }
.chapter-note { max-width: 520px; margin: 22px auto 0; font-size: 16px; line-height: 1.7; color: var(--dyson-muted); text-align: center; }
.dyson-sketches { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.7fr); gap: 40px; align-items: start; }
.axis-diagram { position: relative; width: 90px; height: 110px; margin: 44px auto 32px; }
.door-outline { position: absolute; inset: 10px 15px 0; border: 1px solid #b5c0c0; border-bottom: 0; }
.air-axis { position: absolute; left: 50%; top: 52%; width: 72px; height: 6px; background: #243e42; border-radius: 4px; transform: translate(-50%,-50%) translateY(-46px); }
.dyson-vertical.is-visible .air-axis { animation: turn-axis 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes turn-axis { to { transform: translate(-50%,-50%) translateX(-37px) rotate(90deg); } }
.dyson-closing { padding-bottom: 45px; }
.dyson-colophon, .dyson-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 12px; padding: 30px 0; }
.dyson-colophon { color: var(--dyson-muted); }
.dyson-footer { border-top: 1px solid var(--dyson-rule); padding-bottom: 45px; }
@media(max-width:760px) {
 .dyson-pair, .dyson-sketches { grid-template-columns: 1fr; gap: 40px; }
 .dyson-sketches figure:first-child { max-width: 440px; margin: auto; }
 .dyson-meta { font-size: 12px; }
 .dyson-principles { gap: 16px 30px; }
}
@media(prefers-reduced-motion:reduce) { .dyson-vertical.is-visible .air-axis { animation: none; transform: translate(-50%,-50%) translateX(-37px) rotate(90deg); } }
/* Research is shown as a short visual sequence before the form exploration. */
.air-explainer { max-width: 800px; margin: 0 auto; }
.air-explainer svg { display: block; width: 100%; height: auto; }
.research-source { margin: 28px 0 0; text-align: center; font-size: 12px; line-height: 1.65; color: var(--dyson-muted); }
.research-source a { text-decoration: underline; text-underline-offset: 3px; }
.dyson-market { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; text-align: center; }
.market-label { margin: 0; font-size: 13px; color: var(--dyson-muted); }
.market-value { margin: 24px 0 0; font-size: clamp(28px,3.2vw,44px); letter-spacing: -.045em; white-space: nowrap; }
.market-value span { margin-left: .15em; font-size: .55em; letter-spacing: 0; color: var(--dyson-muted); }
.dyson-research-priorities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 75px; padding-top: 40px; border-top: 1px solid var(--dyson-rule); }
.dyson-research-priorities h3 { margin: 0 0 14px; font-weight: 400; font-size: 22px; }
.dyson-research-priorities p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--dyson-muted); }
.coverage-research { margin-bottom: clamp(85px,11vw,150px); }
.coverage-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,8vw,100px); align-items: center; max-width: 950px; margin: auto; }
.coverage-door { position: relative; width: min(100%,340px); margin: 20px auto 0; border: 2px solid #a2b0b0; border-bottom: 0; padding: 10px; }
.coverage-nozzle { position: absolute; top: -15px; left: -8px; right: -8px; height: 16px; border-radius: 8px; background: #243e42; }
.coverage-zone { height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.coverage-zone span { font-size: 13px; }
.coverage-zone strong { font-size: 30px; font-weight: 400; }
.coverage-zone--upper { background: #c2d5d7; }
.coverage-zone--middle { background: #d8e3e4; }
.coverage-zone--lower { background: #edf1f1; }
.coverage-copy h3 { margin: 22px 0; font-size: clamp(24px,2.6vw,34px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.coverage-copy > p:not(.eyebrow):not(.research-source) { margin: 0; font-size: 16px; line-height: 1.75; color: var(--dyson-muted); }
.coverage-copy .research-source { text-align: left; }
@media(max-width:760px) {
 .dyson-market, .dyson-research-priorities, .coverage-layout { grid-template-columns: 1fr; }
 .dyson-market { gap: 42px; }
 .market-value { font-size: 40px; margin-top: 16px; }
 .dyson-research-priorities { margin-top: 55px; gap: 32px; }
 .coverage-copy { text-align: center; }
 .coverage-copy .research-source { text-align: center; }
 .air-explainer { margin-inline: -12px; }
}

/* Give the visual explanation room, with a deliberate pause before the turn. */
.dyson-research-priorities { text-align: center; }
.research-icon { display: block; width: 160px; height: 100px; margin: 0 auto 28px; color: #243e42; }
.axis-diagram { width: 120px; height: 150px; margin: 55px auto 36px; }
.door-outline { inset: 10px 20px 0; }
.air-axis { width: 96px; height: 7px; transform: translate(-50%,-50%) translateY(-65px); }
.dyson-vertical.is-visible .air-axis { animation: turn-axis-slow 3.6s .8s cubic-bezier(.35,0,.25,1) forwards; }
@keyframes turn-axis-slow {
  0%, 12% { transform: translate(-50%,-50%) translateY(-65px); }
  90%, 100% { transform: translate(-50%,-50%) translateX(-51px) rotate(90deg); }
}
@media(prefers-reduced-motion:reduce) { .dyson-vertical.is-visible .air-axis { animation: none; transform: translate(-50%,-50%) translateX(-51px) rotate(90deg); } }

/* Quiet, continuous motion across the explanatory illustrations. */
.dyson-motion-toggle { margin-top:24px; padding:8px 12px; border:1px solid var(--dyson-rule); border-radius:0; background:transparent; color:var(--dyson-muted); font:inherit; font-size:12px; cursor:pointer; }
.dyson-motion-toggle:focus-visible { outline:2px solid #243e42; outline-offset:4px; }
.dyson-motion .flow-lines path { stroke-dasharray:10 12; animation:dyson-airflow 2s linear infinite; }
@keyframes dyson-airflow { to { stroke-dashoffset:-44; } }
.dyson-motion .material-modules rect { transform-box:fill-box; transform-origin:center; animation:dyson-module 4s ease-in-out infinite; }
.dyson-motion .material-modules rect:nth-child(2) { animation-delay:.25s; }
.dyson-motion .material-modules rect:nth-child(3) { animation-delay:.5s; }
@keyframes dyson-module { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.dyson-motion .sensor-lines path { animation:dyson-sensor 3s ease-in-out infinite; }
.dyson-motion .sensor-lines path:nth-of-type(2) { animation-delay:.35s; }
@keyframes dyson-sensor { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.dyson-motion .premium-bar { animation:dyson-sensor 4s ease-in-out infinite; }
.coverage-zone { position:relative; overflow:hidden; }
.coverage-zone > * { position:relative; z-index:1; }
.dyson-motion .coverage-zone::after { content:''; position:absolute; inset:-100% 0 0; pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 42px,rgba(84,123,130,.10) 43px 45px,transparent 46px 80px); animation:dyson-coverage 3s linear infinite; }
@keyframes dyson-coverage { to { transform:translateY(80px); } }
.dyson-motion.axis-diagram .air-axis { animation:dyson-axis-loop 8s ease-in-out infinite; }
@keyframes dyson-axis-loop { 0%,15%,100% { transform:translate(-50%,-50%) translateY(-65px); } 45%,65% { transform:translate(-50%,-50%) translateX(-51px) rotate(90deg); } }
.dyson-motion.dyson-drawing { animation:dyson-drawing-loop 6s ease-in-out infinite; }
@keyframes dyson-drawing-loop { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.dyson-motion:not(.motion-visible), .dyson-motion:not(.motion-visible) *, .dyson-motion:not(.motion-visible) ::after,
.dyson-page.motion-paused .dyson-motion, .dyson-page.motion-paused .dyson-motion *, .dyson-page.motion-paused .dyson-motion ::after { animation-play-state:paused !important; }
@media(prefers-reduced-motion:reduce) { .dyson-motion, .dyson-motion *, .dyson-motion ::after { animation:none !important; } .dyson-motion-toggle { display:none; } }

/* AirWall system: the same quiet diagram language as the research. */
.dyson-statement + .dyson-research { border-top: 0; }
.airwall-system { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,7vw,100px); align-items: center; max-width: 1000px; margin: 0 auto; }
.airwall-system-drawing { max-width: 420px; width: 100%; margin: 0 auto !important; }
.airwall-system-drawing svg { display: block; width: 100%; height: auto; }
.airwall-system-key { min-width: 0; }
.airwall-components { list-style: none; margin: 30px 0 0; padding: 0; }
.airwall-components li { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--dyson-rule); font-size: 16px; line-height: 1.4; }
.component-swatch { width: 14px; height: 14px; border-radius: 3px; }
.component-swatch--motor { background: #A49ACB; }.component-swatch--fan { background: #5B9C91; }.component-swatch--battery { background: #536BB0; }.component-swatch--air { background: #CC7956; }.component-swatch--screen { background: #263238; }
.component-index { color: var(--dyson-muted); font-size: 12px; }
.airwall-materials { max-width: 1000px; margin: clamp(60px,8vw,105px) auto 0; padding-top: 44px; border-top: 1px solid var(--dyson-rule); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; text-align: center; }
.material-sample { display: block; width: 42px; height: 42px; margin: 0 auto 23px; border-radius: 50%; }
.material-sample--aluminum { background: linear-gradient(120deg,#8d999b,#dbe1e1 44%,#abb6b7 65%,#737f82); }
.material-sample--abs { background: #344b4e; }
.material-sample--mesh { background-color: #445b5e; background-image: radial-gradient(#d4dcdc 1px,transparent 1px); background-size: 4px 4px; }
.airwall-materials h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 400; }
.airwall-materials p { margin: 9px 0 0; font-size: 13px; color: var(--dyson-muted); }
.airwall-originals { margin-top: 65px; border-top: 1px solid var(--dyson-rule); }
.airwall-originals summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 23px 0; font-size: 13px; color: var(--dyson-muted); }
.airwall-originals summary::-webkit-details-marker { display: none; }
.airwall-originals summary span { font-size: 20px; line-height: 1; }
.airwall-originals[open] summary span { transform: rotate(45deg); }
.airwall-originals .dyson-pair { margin-top: 20px; }
@media(max-width:760px) {
 .airwall-system { grid-template-columns: 1fr; gap: 45px; }
 .airwall-system-drawing { max-width: 320px; }
 .airwall-components li { gap: 15px; padding: 19px 0; }
 .airwall-materials { gap: 16px; }
 .airwall-materials h3 { font-size: 14px; }
 .airwall-materials p { font-size: 12px; }
}

/* Explore the system directly on the drawing. */
.airwall-system { display:block; max-width:700px; }
.airwall-system-drawing { position:relative; max-width:420px; }
.airwall-part { cursor:pointer; transition:filter .18s ease; outline:none; }
.airwall-part:hover,.airwall-part:focus-visible,.airwall-part.is-active { filter:brightness(1.15); stroke:#243e42; stroke-width:2; }
.airwall-part[data-part="air"] { pointer-events:stroke; stroke-width:5; }
.airwall-part-tooltip { position:absolute; z-index:2; width:210px; padding:17px 20px; border:1px solid #dce2df; border-radius:10px; background:rgba(248,248,246,.98); box-shadow:0 8px 28px #243e4210; pointer-events:none; transform:translate(-50%,-100%); text-align:left; }
.airwall-part-tooltip[hidden] { display:none; }
.airwall-part-tooltip strong { display:block; font-size:16px; font-weight:400; }
.airwall-part-tooltip span { display:block; margin-top:6px; font-size:13px; line-height:1.5; color:var(--dyson-muted); }
.airwall-explore-hint { text-align:center; font-size:12px; color:var(--dyson-muted); margin:18px 0 0; }

/* Keep the component deep dive beside the drawing. */
.airwall-system { display:grid; grid-template-columns:minmax(0,420px) minmax(0,380px); gap:clamp(45px,8vw,110px); max-width:950px; align-items:center; }
.airwall-part-tooltip { position:static; width:auto; min-height:210px; padding:0 0 0 32px; border:0; border-left:2px solid var(--part-color,#dce2df); border-radius:0; background:none; box-shadow:none; transform:none; pointer-events:auto; }
.airwall-part-tooltip .eyebrow { margin:0 0 24px; font-size:12px; color:var(--dyson-muted); }
.airwall-part-tooltip strong { font-size:clamp(25px,3vw,36px); line-height:1.15; }
.airwall-part-tooltip span { font-size:18px; line-height:1.5; color:var(--dyson-ink,#242424); margin-top:20px; }
.airwall-part-tooltip .airwall-part-detail { margin:22px 0 0; max-width:32ch; font-size:14px; line-height:1.65; color:var(--dyson-muted); }
@media(max-width:760px) {
 .airwall-system { grid-template-columns:1fr; gap:40px; }
 .airwall-part-tooltip { min-height:190px; margin:0 auto; width:min(100%,320px); padding-left:22px; }
}

.airwall-render-gallery { margin:0; }
.airwall-render-gallery img { width:100%; height:auto; display:block; }
.airwall-render-gallery figcaption { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; text-align:center; color:var(--dyson-ink,#242424); font-size:18px; }
.airwall-render-gallery figcaption span { display:block; }
.airwall-render-gallery small { display:block; margin-bottom:9px; font-size:11px; letter-spacing:.04em; color:var(--dyson-muted); }
@media(max-width:760px) { .airwall-render-gallery figcaption { gap:12px; margin-top:18px; font-size:13px; } .airwall-render-gallery small { font-size:9px; } }

/* Sketchbook sheets, mounted with translucent masking tape. */
.dyson-paper-figure { padding-top:22px; }
.dyson-paper { position:relative; padding:clamp(16px,2.2vw,32px); background:#f3eddf; box-shadow:2px 7px 10px #34352e14,0 1px 2px #34352e12; transform:rotate(-.65deg); isolation:isolate; }
.dyson-paper-figure:nth-child(even) .dyson-paper { transform:rotate(.65deg); background:#eee8df; }
.dyson-paper::before { content:''; position:absolute; z-index:2; width:86px; height:35px; left:calc(50% - 43px); top:-18px; transform:rotate(-5deg); background:linear-gradient(100deg,#e6cf9b90,#f0ddb4c9 38%,#d8c4979c); box-shadow:0 1px 2px #574a3020; clip-path:polygon(1% 5%,7% 0,13% 4%,20% 0,27% 4%,34% 0,41% 4%,48% 0,55% 4%,62% 0,69% 4%,76% 0,83% 4%,90% 0,98% 4%,100% 97%,93% 100%,86% 96%,79% 100%,72% 96%,65% 100%,58% 96%,51% 100%,44% 96%,37% 100%,30% 96%,23% 100%,16% 96%,9% 100%,1% 96%); }
.dyson-paper-figure:nth-child(even) .dyson-paper::before { transform:rotate(7deg); background:linear-gradient(95deg,#ddd9cfaa,#eee9dbcc,#d5d0c3aa); }
.dyson-paper::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.25; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23998a70' filter='url(%23n)' opacity='.24' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.dyson-paper img { display:block; width:100%; height:auto; filter:grayscale(1) brightness(1.2) contrast(1.15); mix-blend-mode:multiply; animation:none!important; }
.dyson-paper-figure figcaption { margin-top:25px; text-align:center; }
.dyson-pair:has(.dyson-paper),.dyson-sketches:has(.dyson-paper) { gap:clamp(36px,5vw,76px); padding:8px; }
@media(max-width:760px) { .dyson-paper { padding:18px; } .dyson-paper::before { width:66px; left:calc(50% - 33px); height:29px; top:-15px; } }

/* Adhesive note sheets: a quiet top edge and a lifted lower edge. */
.dyson-paper,.dyson-paper-figure:nth-child(even) .dyson-paper {
 background:linear-gradient(180deg,#e8dfae 0,#f4edc6 12%,#f6efcf 80%,#eee4bc 100%);
 transform:none; border-radius:1px 1px 5px 2px;
 box-shadow:0 1px 2px #554a2415,3px 12px 13px -7px #554a2438;
}
.dyson-paper-figure:nth-child(even) .dyson-paper { background:linear-gradient(180deg,#e3dfc6 0,#f1eddb 12%,#f6f2e5 80%,#eae5d3 100%); }
.dyson-paper::before { display:none; }
.dyson-paper::after { opacity:.2; }
.dyson-paper-figure { padding-top:0; }
.dyson-sketches:has(.dyson-paper) { grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr); align-items:stretch; }
.dyson-sketches .dyson-paper-figure { display:flex; flex-direction:column; min-width:0; margin:0; }
.dyson-sketches .dyson-paper { height:clamp(360px,43vw,650px); display:flex; align-items:center; justify-content:center; }
.dyson-sketches .dyson-paper img { width:100%; height:100%; object-fit:contain; }
.dyson-sketches .dyson-paper-figure figcaption { margin:25px 0 0; }
@media(max-width:760px) {
 .dyson-sketches:has(.dyson-paper) { grid-template-columns:1fr; }
 .dyson-sketches .dyson-paper-figure:first-child { max-width:none; width:100%; }
 .dyson-sketches .dyson-paper { height:430px; }
}

/* Restore masking tape while retaining the aligned sticky-note sheets. */
.dyson-paper::before { display:block; }
.dyson-paper-figure { padding-top:22px; }

/* Fixed accent rule for every component hover detail. */
.airwall-part-tooltip { position: relative; border-left: 0; }
.airwall-part-tooltip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 210px;
  background: var(--part-color, #dce2df);
}

.dyson-exploded { margin:0 auto 36px; }
.dyson-exploded img { width:100%; height:auto; object-fit:contain; }
.dyson-component-key { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:0 0 80px; padding-top:28px; border-top:1px solid var(--dyson-rule); }
.dyson-component-key span { font-size:11px; color:var(--dyson-muted); }
.dyson-component-key h3 { margin:14px 0 10px; font-size:18px; font-weight:400; }
.dyson-component-key p { margin:0; font-size:13px; line-height:1.7; color:var(--dyson-muted); }
@media(max-width:760px) { .dyson-component-key { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; } }

.dyson-page .dyson-exploded { margin-top:40px; margin-bottom:55px; }
.dyson-component-key { margin-top:45px; margin-bottom:30px; }

/* An interactive assembly on the same neutral surface as the presentation. */
.airwall-explorer { margin:65px 0; }
.airwall-explorer .chapter-heading h3 { font-size:clamp(25px,3vw,38px); font-weight:400; margin:20px 0 0; letter-spacing:-.025em; }
.assembly-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:30px; }
.assembly-controls button { padding:10px 14px; border:1px solid var(--dyson-rule); color:var(--dyson-muted); background:transparent; font:inherit; font-size:12px; cursor:pointer; transition:background .2s,color .2s; }
.assembly-controls button[aria-pressed="true"] { background:#243e42; border-color:#243e42; color:#fff; }
.assembly-controls button:hover { border-color:#243e42; }
.assembly-layout { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(240px,1fr); gap:35px; align-items:center; }
.assembly-stage { position:relative; isolation:isolate; }
.assembly-stage > img,.assembly-closeup { mix-blend-mode:multiply; }
.assembly-highlight { position:absolute; pointer-events:none; opacity:0; border:1px solid #547b82; background:#547b8210; border-radius:8px; transition:top .4s,left .4s,width .4s,height .4s,opacity .2s; }
.assembly-highlight.is-active { opacity:1; }
.assembly-point { position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%; border:1px solid #547b82; background:#f8f8f6; color:#243e42; font:12px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 0 0 5px #f8f8f688; }
.assembly-point[aria-pressed="true"] { background:#243e42; color:#fff; }
.assembly-detail { min-width:0; border-left:1px solid var(--dyson-rule); padding-left:30px; }
.assembly-closeup { width:100%; height:260px; display:block; margin:20px 0; overflow:hidden; }
.assembly-detail h4 { font-size:24px; font-weight:400; letter-spacing:-.02em; margin:0 0 14px; }
.assembly-description { font-size:14px; line-height:1.8; color:var(--dyson-muted); margin:0; min-height:100px; }
.assembly-step-controls { display:flex; align-items:center; justify-content:space-between; margin-top:25px; gap:20px; }
.assembly-step-controls button { border:1px solid var(--dyson-rule); background:transparent; width:40px; height:40px; color:#243e42; font-size:20px; cursor:pointer; }
.assembly-count,.assembly-caption { font-size:11px; color:var(--dyson-muted); line-height:1.7; }
.assembly-caption { margin-top:28px; }
.assembly-caption a { margin-left:15px; text-decoration:underline; }
.airwall-explorer button:focus-visible { outline:2px solid #243e42; outline-offset:4px; }
@media(max-width:760px) { .assembly-layout { grid-template-columns:1fr; gap:25px; } .assembly-detail { border-left:0; border-top:1px solid var(--dyson-rule); padding:25px 0 0; } .assembly-closeup { height:230px; } .assembly-description { min-height:0; } .assembly-controls { gap:6px; } .assembly-controls button { padding:9px 10px; } .assembly-point { width:28px; height:28px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .assembly-highlight,.assembly-controls button { transition:none; } }

.assembly-motion-render { display:block; width:100%; height:auto; aspect-ratio:3/2; mix-blend-mode:multiply; overflow:visible; }
.assembly-moving-part { mix-blend-mode:multiply; }
.assembly-opening .assembly-points,.assembly-opening .assembly-highlight { opacity:0; pointer-events:none; }
.assembly-points { transition:opacity .4s ease; }
.assembly-replay { display:block; margin:28px 0 0; border:1px solid var(--dyson-rule); padding:10px 16px; background:transparent; color:#243e42; font:inherit; font-size:12px; cursor:pointer; }
.assembly-replay:hover { background:#e9eeed; }
@media(prefers-reduced-motion:reduce) { .assembly-replay { display:none; } .assembly-points { transition:none; } }

/* Transparent isolated parts; the main view becomes the close-up. */
.assembly-stage { overflow:hidden; background:transparent; }
.assembly-stage > img,.assembly-motion-render,.assembly-moving-part { mix-blend-mode:normal; }
.assembly-motion-render { overflow:hidden; }
.assembly-detail { background:transparent; }
.assembly-layout { grid-template-columns:minmax(0,2.2fr) minmax(220px,.8fr); }
@media(max-width:760px) { .assembly-layout { grid-template-columns:1fr; } }