/* Digital Product Build Sequence — isolated homepage module. */
.build-sequence { padding-block: clamp(110px,12vw,190px); border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.build-intro { margin-bottom: clamp(60px,6vw,92px); }
.build-shell { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); gap: clamp(48px,6vw,96px); align-items: start; }
.build-steps { min-width: 0; border-top: 1px solid var(--line); }
.build-step { width: 100%; min-height: 134px; padding: 21px 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 16px; align-items: start; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: padding .28s ease, background .28s ease; }
.build-step-index { padding-top: 3px; color: var(--mid); font-size: calc(10px * var(--text-scale)); letter-spacing: .12em; }
.build-step-copy { min-width: 0; display: grid; gap: 9px; }
.build-step-copy strong { font-family: var(--font-title); font-size: calc(18px * var(--title-scale)); font-weight: 600; line-height: 1.28; letter-spacing: -.035em; }
.build-step-copy small { max-width: 410px; color: var(--gray); font-size: calc(11px * var(--text-scale)); line-height: 1.62; }
.build-step-status { padding-top: 4px; color: var(--gray); font-size: calc(8px * var(--text-scale)); letter-spacing: .08em; }
.build-step[aria-pressed="true"] { padding-inline: 16px; background: var(--paper); }
.build-step[aria-pressed="true"] .build-step-copy strong { color: var(--blue); }
.build-step:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.build-stage-wrap { position: sticky; top: calc(var(--header-h) + 28px); min-width: 0; }
.build-stage { min-width: 0; }
.build-stage-meta { height: 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; color: var(--gray); font-size: calc(8px * var(--text-scale)); letter-spacing: .08em; }
.build-stage-meta i { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.build-stage-meta i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--build-progress,12.5%); background: var(--blue); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.build-browser { border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.build-browser-bar { height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--gray); }
.build-browser-bar > span { width: 6px; height: 6px; border: 1px solid var(--gray); border-radius: 50%; }
.build-browser-bar > i { height: 1px; flex: 1; margin-left: 9px; background: var(--line); }
.build-browser-bar > b { font-size: calc(8px * var(--text-scale)); font-weight: 500; letter-spacing: .06em; }
.build-canvas { position: relative; aspect-ratio: 1.38; min-height: 470px; overflow: hidden; background: var(--surface); }
.build-grid-lines { position: absolute; inset: 0; opacity: .72; background: repeating-linear-gradient(0deg,transparent,transparent 47px,color-mix(in srgb,var(--ink) 5%,transparent) 48px),repeating-linear-gradient(90deg,transparent,transparent 47px,color-mix(in srgb,var(--ink) 5%,transparent) 48px); }
.build-scene { position: absolute; inset: 0; padding: clamp(22px,3vw,38px); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .34s ease, transform .34s ease, visibility .34s; pointer-events: none; }
.build-sequence[data-active-step="1"] [data-build-scene="1"],.build-sequence[data-active-step="2"] [data-build-scene="2"],.build-sequence[data-active-step="3"] [data-build-scene="3"],.build-sequence[data-active-step="4"] [data-build-scene="4"],.build-sequence[data-active-step="5"] [data-build-scene="5"],.build-sequence[data-active-step="6"] [data-build-scene="6"],.build-sequence[data-active-step="7"] [data-build-scene="7"],.build-sequence[data-active-step="8"] [data-build-scene="8"] { opacity: 1; visibility: visible; transform: none; }
.build-sequence[data-active-step="1"] { --build-progress:12.5%; }.build-sequence[data-active-step="2"] { --build-progress:25%; }.build-sequence[data-active-step="3"] { --build-progress:37.5%; }.build-sequence[data-active-step="4"] { --build-progress:50%; }.build-sequence[data-active-step="5"] { --build-progress:62.5%; }.build-sequence[data-active-step="6"] { --build-progress:75%; }.build-sequence[data-active-step="7"] { --build-progress:87.5%; }.build-sequence[data-active-step="8"] { --build-progress:100%; }

/* 01 — Idea and task. */
.build-scene-idea { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.idea-sheet { align-self: stretch; padding: clamp(22px,3vw,34px); border: 1px solid var(--line); background: var(--paper); }
.idea-sheet header,.ux-sitemap header,.backend-flow header,.admin-main header,.architecture-head,.performance-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--gray); font-size: calc(8px * var(--text-scale)); letter-spacing: .08em; }
.idea-sheet h3 { max-width: 450px; margin: clamp(28px,4vw,54px) 0 28px; font: 600 clamp(28px,3.4vw,52px)/1.02 var(--font-title); letter-spacing: -.055em; }
.idea-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.idea-fields p { min-width: 0; min-height: 96px; margin: 0; padding: 15px; display: grid; gap: 8px; align-content: start; background: var(--surface); }
.idea-fields small { color: var(--mid); font-size: calc(7px * var(--text-scale)); letter-spacing: .07em; }
.idea-fields strong { font-size: calc(10px * var(--text-scale)); line-height: 1.45; font-weight: 520; }
.idea-path { width: 84px; display: grid; justify-items: center; gap: 8px; color: var(--gray); font-size: calc(7px * var(--text-scale)); }
.idea-path i { width: 1px; height: 42px; background: var(--mid); }

/* 02 — Architecture and engineering. */
.build-scene-architecture { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
.architecture-map { position: relative; min-height: 300px; }
.arch-node { position: absolute; width: 31%; min-height: 78px; padding: 13px 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-content: center; border: 1px solid var(--line); background: var(--paper); z-index: 2; }
.arch-node small { grid-row: span 2; color: var(--mid); font-size: calc(7px * var(--text-scale)); }.arch-node strong { font-size: calc(11px * var(--text-scale)); }.arch-node span { color: var(--gray); font-size: calc(8px * var(--text-scale)); }
.arch-user { left: 0; top: 40%; }.arch-front { left: 34.5%; top: 10%; }.arch-back { left: 34.5%; top: 43%; }.arch-data { left: 69%; top: 43%; }.arch-admin { left: 34.5%; top: 76%; }.arch-integrations { left: 69%; top: 10%; }
.arch-line { position: absolute; z-index: 1; background: var(--mid); opacity: .65; }.arch-line.l1 { left: 27%; top: 50%; width: 15%; height: 1px; transform: rotate(-20deg); }.arch-line.l2 { left: 27%; top: 54%; width: 15%; height: 1px; }.arch-line.l3 { left: 61%; top: 54%; width: 15%; height: 1px; }.arch-line.l4 { left: 49.8%; top: 27%; width: 1px; height: 28%; }.arch-line.l5 { left: 65%; top: 25%; width: 9%; height: 1px; transform: rotate(-24deg); }
.architecture-foot { display: flex; flex-wrap: wrap; gap: 8px; }.architecture-foot span { padding: 7px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--gray); font-size: calc(7px * var(--text-scale)); }

/* 03 — Structure and UX. */
.build-scene-ux { display: grid; grid-template-columns: .72fr 1.28fr; gap: 22px; }
.ux-sitemap { min-width: 0; padding: 18px; border: 1px solid var(--line); background: var(--paper); }
.sitemap-root { width: 72%; margin: 40px auto 32px; padding: 13px; border: 1px solid var(--mid); text-align: center; font-size: calc(9px * var(--text-scale)); position: relative; }.sitemap-root::after { content:""; position:absolute; left:50%; top:100%; height:18px; width:1px; background:var(--mid); }
.sitemap-children { display: grid; gap: 10px; }.sitemap-children span { padding: 11px; border-left: 2px solid var(--sky); background: var(--surface); font-size: calc(8px * var(--text-scale)); }
.ux-wireframe { min-width: 0; position: relative; border: 1px solid var(--line); background: var(--surface); }
.ux-nav { position:absolute; left:7%; right:7%; top:8%; height:10%; display:flex; align-items:center; gap:7%; border-bottom:1px solid var(--line); font-size:calc(7px * var(--text-scale)); }.ux-nav span { margin-right:auto; }.ux-nav i { width:11%; height:1px; background:var(--gray); }.ux-nav b { padding:6px 8px; border:1px solid var(--mid); font-size:inherit; font-weight:500; }
.ux-hero { position:absolute; left:7%; top:28%; width:43%; display:grid; gap:9px; }.ux-hero strong { font-size:calc(13px * var(--text-scale)); }.ux-hero > span { height:6px; background:var(--line); }.ux-hero > span:nth-of-type(2) { width:72%; }.ux-hero button { width:max-content; margin-top:5px; padding:7px 10px; border:1px solid var(--mid); border-radius:0; background:transparent; color:var(--ink); font:inherit; font-size:calc(7px * var(--text-scale)); }
.ux-media { position:absolute; right:7%; top:28%; width:37%; height:36%; display:grid; place-items:center; border:1px dashed var(--mid); color:var(--gray); font-size:calc(7px * var(--text-scale)); }.ux-blocks { position:absolute; left:7%; right:7%; bottom:8%; height:17%; display:grid; grid-template-columns:repeat(3,1fr); gap:5%; }.ux-blocks i { border:1px solid var(--line); background:var(--paper); }

/* 04 — Visual design and content. */
.build-scene-design { display: grid; grid-template-columns: .38fr 1fr; gap: 20px; }
.design-tokens { padding: 18px; display:grid; align-content:start; gap:22px; border:1px solid var(--line); background:var(--paper); }.token-title { padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--gray); font-size:calc(8px * var(--text-scale)); }.token-colors { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.token-colors i { aspect-ratio:1; border:1px solid var(--line); }.token-colors i:nth-child(1){background:var(--blue);}.token-colors i:nth-child(2){background:var(--mid);}.token-colors i:nth-child(3){background:var(--sky);}.token-colors i:nth-child(4){background:var(--warm);}
.token-type { display:grid; gap:7px; }.token-type strong { font:600 calc(20px * var(--title-scale))/1.1 var(--font-title); }.token-type span { color:var(--gray); font-size:calc(8px * var(--text-scale)); }.token-components { display:flex; flex-wrap:wrap; gap:6px; }.token-components>* { padding:7px 9px; border:1px solid var(--line); font-size:calc(7px * var(--text-scale)); font-weight:500; }.token-components b { background:var(--blue); color:var(--on-primary); border-color:var(--blue); }
.design-page,.final-site { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--surface); }.design-nav,.final-nav { position:absolute; left:6%; right:6%; top:7%; height:9%; display:flex; align-items:center; gap:7%; border-bottom:1px solid var(--line); font-size:calc(7px * var(--text-scale)); }.design-nav b,.final-nav b { margin-right:auto; }.design-nav span,.final-nav span { color:var(--gray); }.design-nav i,.final-nav i { width:25px; height:8px; background:var(--blue); }
.design-copy,.final-copy { position:absolute; left:6%; top:25%; width:48%; display:grid; gap:10px; }.design-copy small,.final-copy small { color:var(--mid); font-size:calc(6px * var(--text-scale)); }.design-copy strong,.final-copy strong { font:600 clamp(24px,2.8vw,44px)/1.02 var(--font-title); letter-spacing:-.05em; }.design-copy p,.final-copy p { margin:0; color:var(--gray); font-size:calc(7px * var(--text-scale)); line-height:1.55; }.design-copy>span,.final-copy>span { width:max-content; padding:7px 9px; background:var(--blue); color:var(--on-primary); font-size:calc(6px * var(--text-scale)); }
.design-visual,.final-visual { position:absolute; right:6%; top:25%; width:34%; height:39%; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 9%,transparent),transparent 60%); }.design-visual i,.final-visual i { position:absolute; inset:20%; border:1px solid var(--mid); transform:rotate(45deg); }.design-visual b,.final-visual span { position:absolute; right:8%; bottom:8%; color:var(--mid); font-size:calc(8px * var(--text-scale)); }.design-cards,.final-cards { position:absolute; left:6%; right:6%; bottom:7%; height:17%; display:grid; grid-template-columns:repeat(3,1fr); gap:4%; }.design-cards span { display:grid; align-items:end; padding:10px; border-top:2px solid var(--blue); background:var(--paper); font-size:calc(7px * var(--text-scale)); }.final-cards i { border-top:2px solid var(--blue); background:var(--paper); }

/* 05 — Frontend development. */
.build-scene-frontend { padding: 26px; }
.frontend-page { position:absolute; inset:26px 34% 26px 26px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }.frontend-nav { position:absolute; left:7%; right:7%; top:7%; height:9%; display:flex; gap:7%; align-items:center; border-bottom:1px solid var(--line); font-size:calc(7px * var(--text-scale)); }.frontend-nav b { margin-right:auto; }.frontend-nav span { color:var(--gray); }.frontend-nav i { width:24px; height:8px; background:var(--blue); }.frontend-copy { position:absolute; left:7%; top:28%; width:50%; display:grid; gap:9px; }.frontend-copy small { color:var(--mid); font-size:calc(6px * var(--text-scale)); }.frontend-copy strong { font:600 clamp(21px,2.4vw,38px)/1 var(--font-title); letter-spacing:-.05em; }.frontend-copy p { margin:0; color:var(--gray); font-size:calc(7px * var(--text-scale)); line-height:1.5; }.frontend-copy button { width:max-content; padding:7px 9px; border:0; border-radius:0; background:var(--blue); color:var(--on-primary); font:inherit; font-size:calc(6px * var(--text-scale)); }.frontend-module { position:absolute; right:7%; top:28%; width:31%; height:44%; padding:12px; display:grid; align-content:start; gap:9px; border:1px solid var(--line); background:var(--paper); color:var(--gray); font-size:calc(6px * var(--text-scale)); }.frontend-module i { height:12px; border-left:2px solid var(--sky); background:var(--surface); }
.frontend-code { position:absolute; right:26px; top:26px; width:29%; padding:16px; display:grid; gap:7px; border:1px solid color-mix(in srgb,var(--sky) 55%,var(--line)); background:var(--graphite); color:var(--inverse-soft); font:500 calc(7px * var(--text-scale))/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; box-shadow:-12px 12px 0 color-mix(in srgb,var(--blue) 8%,transparent); }.frontend-code span:nth-child(3){color:var(--sky);}
.frontend-devices { position:absolute; right:26px; bottom:28px; width:29%; display:grid; gap:7px; }.frontend-devices span { padding:8px 10px; border:1px solid var(--line); background:var(--paper); color:var(--gray); font-size:calc(7px * var(--text-scale)); }

/* 06 — Backend and admin panel. */
.build-scene-backend { display:grid; grid-template-rows:auto 1fr; gap:18px; }
.backend-flow { padding:17px; border:1px solid var(--line); background:var(--paper); }.backend-nodes { margin-top:22px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:8px; align-items:center; }.backend-nodes span { padding:10px 8px; border:1px solid var(--line); background:var(--surface); text-align:center; font-size:calc(7px * var(--text-scale)); }.backend-nodes i { color:var(--mid); font-style:normal; }.backend-services { margin-top:12px; display:flex; gap:7px; flex-wrap:wrap; }.backend-services span { padding:6px 8px; border-left:2px solid var(--sky); color:var(--gray); font-size:calc(7px * var(--text-scale)); }
.admin-panel { min-height:0; display:grid; grid-template-columns:.28fr 1fr; border:1px solid var(--line); background:var(--surface); }.admin-side { padding:16px; display:grid; align-content:start; gap:12px; border-right:1px solid var(--line); background:var(--graphite); color:var(--inverse-soft); }.admin-side b { padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid rgba(var(--inverse-text-rgb),.18); color:var(--inverse-text); font-size:calc(9px * var(--text-scale)); }.admin-side span { font-size:calc(7px * var(--text-scale)); }.admin-main { min-width:0; padding:16px; }.admin-main header strong { color:var(--ink); font-size:calc(11px * var(--text-scale)); }.admin-stats { margin:18px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.admin-stats span { padding:11px; display:grid; gap:3px; border:1px solid var(--line); color:var(--gray); font-size:calc(7px * var(--text-scale)); }.admin-stats b { color:var(--blue); font-size:calc(16px * var(--title-scale)); }.admin-table { display:grid; gap:7px; }.admin-table i { height:18px; border-left:2px solid var(--mid); background:var(--paper); }

/* 07 — SEO, speed, traffic and scale. */
.build-scene-performance { display:grid; grid-template-rows:auto 1fr; gap:18px; }
.performance-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.perf-card { padding:17px; display:grid; align-content:start; gap:8px; border:1px solid var(--line); background:var(--paper); }.perf-card small { color:var(--mid); font-size:calc(7px * var(--text-scale)); }.perf-card strong { margin-bottom:5px; font:600 calc(14px * var(--title-scale))/1.25 var(--font-title); }.perf-card>span { padding-top:7px; border-top:1px solid var(--line); color:var(--gray); font-size:calc(7px * var(--text-scale)); }.perf-card.wide { grid-column:1/-1; }.traffic-bars { height:62px; display:flex; align-items:end; gap:5px; padding:8px 0 2px; }.traffic-bars i { flex:1; background:var(--mid); opacity:.82; }.traffic-bars i:nth-child(1){height:22%;}.traffic-bars i:nth-child(2){height:34%;}.traffic-bars i:nth-child(3){height:47%;}.traffic-bars i:nth-child(4){height:61%;}.traffic-bars i:nth-child(5){height:78%;}.traffic-bars i:nth-child(6){height:100%;background:var(--blue);}

/* 08 — Security, QA and final product. */
.build-scene-final { padding:24px; }.final-site { position:absolute; inset:24px 29% 24px 24px; }.final-checks { position:absolute; right:24px; top:24px; width:25%; display:grid; gap:7px; }.final-checks span { padding:8px 9px; display:flex; justify-content:space-between; gap:8px; border:1px solid var(--line); background:var(--paper); color:var(--gray); font-size:calc(6px * var(--text-scale)); }.final-checks b { color:var(--blue); }.final-status { position:absolute; right:24px; bottom:24px; width:25%; min-height:108px; padding:14px; display:grid; align-content:center; gap:5px; border:1px solid var(--mid); background:var(--surface); }.final-status i { width:18px; height:18px; border:1px solid var(--sky); border-radius:50%; position:relative; }.final-status i::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--blue); }.final-status span { color:var(--gray); font-size:calc(6px * var(--text-scale)); }.final-status strong { font:600 calc(18px * var(--title-scale))/1.1 var(--font-title); color:var(--blue); }

.build-stage-footer { min-height: 64px; display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.build-stage-footer span,.build-stage-footer small { color: var(--gray); font-size: calc(8px * var(--text-scale)); letter-spacing: .06em; }.build-stage-footer strong { font-family: var(--font-title); font-size: calc(14px * var(--title-scale)); font-weight: 600; letter-spacing: -.02em; }.build-stage-footer small { color: var(--mid); }
.build-cta { margin-top: 52px; }

@media (max-width: 1100px) {
  .build-shell { grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); gap: 38px; }
  .build-step { grid-template-columns: 38px minmax(0,1fr); min-height: 128px; }.build-step-status { grid-column: 2; padding-top: 0; }
  .build-canvas { min-height: 430px; }
  .idea-fields { grid-template-columns:1fr; }.idea-fields p { min-height:72px; }
  .build-scene-design { grid-template-columns:.34fr 1fr; gap:14px; }.token-components { display:grid; }
}
@media (max-width: 820px) {
  .build-shell { grid-template-columns:1fr; gap:32px; }
  .build-stage-wrap { position:static; order:1; }.build-steps { order:2; }
  .build-step { min-height:0; padding:18px 0; }
  .build-canvas { min-height:500px; }
}
@media (max-width: 680px) {
  .build-sequence { padding-block: 86px; }.build-intro { margin-bottom:45px; }
  .build-stage-meta { gap:9px; }.build-stage-meta span { font-size:calc(7px * var(--text-scale)); }
  .build-browser-bar { height:36px; }.build-browser-bar>b { display:none; }
  .build-canvas { aspect-ratio:.78; min-height:520px; }
  .build-scene { padding:18px; }
  .build-step { grid-template-columns:32px minmax(0,1fr); gap:10px; }.build-step[aria-pressed="true"]{padding-inline:10px;}.build-step-copy strong{font-size:calc(16px * var(--title-scale));}.build-step-copy small{font-size:calc(10px * var(--text-scale));}.build-step-status{display:none;}
  .build-scene-idea { grid-template-columns:1fr; }.idea-path { width:auto; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; }.idea-path i { width:100%; height:1px; }.idea-sheet h3 { margin:24px 0 20px; font-size:calc(30px * var(--title-scale)); }.idea-fields p { min-height:72px; }
  .arch-node { width:46%; min-height:70px; }.arch-user{left:0;top:42%;}.arch-front{left:0;top:5%;}.arch-back{left:54%;top:5%;}.arch-data{left:54%;top:42%;}.arch-admin{left:0;top:79%;}.arch-integrations{left:54%;top:79%;}.arch-line{display:none;}.architecture-foot{gap:5px;}
  .build-scene-ux { grid-template-columns:1fr; grid-template-rows:.62fr 1fr; }.sitemap-root{margin:20px auto 22px;}.sitemap-children{grid-template-columns:repeat(2,1fr);}
  .build-scene-design { grid-template-columns:1fr; grid-template-rows:auto 1fr; }.design-tokens{grid-template-columns:auto 1fr; gap:12px;}.token-title{grid-column:1/-1;}.token-type,.token-components{display:none;}.design-page{min-height:290px;}.design-copy strong,.final-copy strong{font-size:calc(25px * var(--title-scale));}
  .build-scene-frontend{padding:18px;}.frontend-page{inset:18px 18px 44% 18px;}.frontend-code{right:18px;top:auto;bottom:18px;width:56%;padding:11px;}.frontend-devices{right:auto;left:18px;bottom:18px;width:34%;}.frontend-module{display:none;}.frontend-copy{width:72%;}
  .build-scene-backend{padding:16px;}.backend-nodes{grid-template-columns:1fr 1fr; gap:6px;}.backend-nodes i{display:none;}.admin-panel{grid-template-columns:.34fr 1fr;}.admin-side{padding:10px;gap:9px;}.admin-stats{grid-template-columns:1fr;}.admin-stats span{grid-template-columns:auto 1fr;align-items:center;}.admin-table{display:none;}
  .performance-grid{grid-template-columns:1fr;}.perf-card.wide{grid-column:auto;}.perf-card{padding:14px;}
  .build-scene-final{padding:16px;}.final-site{inset:16px 16px 40% 16px;}.final-checks{left:16px;right:auto;top:auto;bottom:16px;width:56%;grid-template-columns:1fr 1fr;}.final-status{right:16px;bottom:16px;width:34%;min-height:132px;}.final-copy{width:65%;}.final-visual{display:none;}
  .build-stage-footer{grid-template-columns:52px 1fr;min-height:58px;}.build-stage-footer small{display:none;}.build-stage-footer strong{font-size:calc(12px * var(--title-scale));}.build-cta{margin-top:38px;}
}
@media (prefers-reduced-motion: reduce) {
  .build-scene,.build-stage-meta i::after,.build-step { transition:none; }
}

/* v1.15.0 — narrow-screen reflow: prevent aspect-ratio from expanding canvas width. */
@media (max-width: 440px) {
  .build-canvas { width: 100%; min-width: 0; aspect-ratio: auto; }
}