/* Website-owned product story. All selectors are confined to the new chapter. */
.chapter-entry { display:flex; align-items:center; gap:24px; height:180px; color:var(--subtle); font:.625rem var(--font-technical); letter-spacing:.08em; }
.chapter-entry i { height:1px; background:var(--border); flex:1; max-width:40%; }
.chapter-index { color:var(--muted); font:.75rem var(--font-technical); letter-spacing:.06em; margin-bottom:28px; }
.chapter-index > span { color:var(--accent); margin-right:10px; }
.chapter-title { font-size:clamp(3.4rem,7.7vw,10rem); line-height:.96; letter-spacing:-.065em; font-weight:700; }
.chapter-title > span { color:var(--accent); }
.chapter-context { color:var(--muted); font-size:clamp(1rem,1.15vw,1.3rem); line-height:1.6; }
.workflow-header { padding-block:36px 100px; }
.workflow-header .chapter-context { margin-top:32px; }
.workflow-composition { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:start; padding-right:7vw; }
.workflow-stories { padding-top:8vh; }
.workflow-step { min-height:70vh; display:flex; align-items:flex-start; padding-top:6vh; }
.workflow-step:last-child { min-height:90vh; }
.workflow-step button { display:block; width:100%; text-align:left; opacity:.72; transition:opacity 180ms var(--ease); }
.workflow-step button[aria-pressed='true'], .workflow-step button:focus-visible { opacity:1; }
.workflow-step button > span { display:block; margin-bottom:30px; font:.6875rem var(--font-technical); color:var(--accent); letter-spacing:.08em; }
.workflow-step strong { display:block; font-size:clamp(2rem,3.65vw,4.6rem); font-weight:500; line-height:1.02; letter-spacing:-.045em; }
.workflow-step small { display:block; margin-top:28px; color:var(--muted); font-size:clamp(.875rem,1.05vw,1.125rem); line-height:1.7; }
.workflow-panel-stage { position:sticky; top:calc(var(--header-height) + 28px); width:min(100%,480px); justify-self:center; }
.panel-stage-caption { display:flex; justify-content:space-between; gap:12px; padding-bottom:18px; font:.5625rem var(--font-technical); letter-spacing:.05em; color:var(--muted); }
.panel-stage-caption span + span { color:var(--accent); min-width:100px; text-align:right; }
.panel-window { max-height:75svh; overflow:hidden; border:1px solid #3a4047; background:#181a1d; }
.product-panel { position:relative; transform:translateY(var(--panel-offset,0px)); transition:transform 240ms var(--ease); --u:clamp(.8px,.095svh,1px); color:#f5f7fa; padding:calc(16 * var(--u)); font:calc(12 * var(--u))/1.45 'Segoe UI',system-ui,sans-serif; }
.product-panel button,.product-panel input,.product-panel select { font:inherit; }
.product-panel button:focus-visible,.product-panel input:focus-visible,.product-panel select:focus-visible { outline:2px solid #75b2ff; outline-offset:3px; }
.replica-brand { text-align:center; padding:calc(6 * var(--u)) 0 calc(10 * var(--u)); }
.replica-brand > div { display:flex; align-items:center; width:52%; gap:5.9%; margin:auto; }
.replica-brand > div > img { width:24.9%; height:auto; }
.replica-brand span { flex:1; min-width:0; }
.replica-brand span img { display:block; width:100%; height:auto; }
.replica-brand small { display:block; font-size:calc(8 * var(--u)); letter-spacing:calc(1.4 * var(--u)); margin-top:5px; white-space:nowrap; }
.replica-brand p { margin-top:calc(8 * var(--u)); font-size:calc(9 * var(--u)); font-weight:600; letter-spacing:calc(2.8 * var(--u)); }
.panel-region { position:relative; padding:calc(8 * var(--u)) calc(8 * var(--u)); border:1px solid transparent; opacity:1; transition:opacity 180ms var(--ease),border-color 180ms var(--ease); }
.workflow-ready .panel-region { opacity:.72; }
.workflow-ready[data-focus='system'] [data-panel-region='system'],.workflow-ready[data-focus='geometry'] [data-panel-region='geometry'],.workflow-ready[data-focus='appearance'] [data-panel-region='appearance'],.workflow-ready[data-focus='generate'] [data-panel-region='generate'] { opacity:1; border-color:#607994; }
.replica-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:5px; border:1px solid #3a4047; border-radius:11px; background:#121418; margin-bottom:calc(12 * var(--u)); }
.replica-tabs button { min-height:calc(36 * var(--u)); border:1px solid transparent; border-radius:7px; color:#a3abb5; font-size:calc(10 * var(--u)); font-weight:700; letter-spacing:.45px; }
.replica-tabs button[aria-selected='true'] { background:#182a42; border-color:#2684ff; color:#fff; }
.product-panel h3 { display:flex; align-items:center; gap:12px; margin:0 0 calc(14 * var(--u)); font-size:calc(12 * var(--u)); font-weight:650; letter-spacing:.55px; }
.product-panel h3::after { content:''; height:1px; background:#3a4047; flex:1; }
.replica-artwork { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:10px; }
.product-panel select { width:100%; min-width:0; min-height:calc(36 * var(--u)); padding:0 8px; border:1px solid #30353b; border-radius:8px; background:#25292e; color:#f5f7fa; font-size:calc(10 * var(--u)); }
.replica-tab-view { min-height:calc(66 * var(--u)); }
.replica-secondary { background:#2684ff; border:1px solid #2684ff; border-radius:8px; font-size:calc(10 * var(--u))!important; font-weight:700!important; }
.replica-range { display:grid; grid-template-columns:calc(112 * var(--u)) minmax(0,1fr) calc(50 * var(--u)); gap:10px; min-height:calc(28 * var(--u)); align-items:center; font-size:calc(10 * var(--u)); font-weight:650; }
.replica-range output { text-align:right; }
.product-panel input[type='range'],.layout-fields input[type='range'] { width:100%; height:4px; margin:0; border:0; border-radius:5px; background:linear-gradient(to right,#2684ff var(--range-progress,30%),#3a4047 var(--range-progress,30%)); appearance:none; touch-action:pan-y; }
.product-panel input[type='range']::-webkit-slider-thumb,.layout-fields input[type='range']::-webkit-slider-thumb { appearance:none; width:15px; height:15px; border:0; border-radius:50%; background:#2684ff; }
.product-panel input[type='range']::-moz-range-thumb,.layout-fields input[type='range']::-moz-range-thumb { width:15px; height:15px; border:0; border-radius:50%; background:#2684ff; }
.product-panel h3.replica-color-title { margin-top:calc(10 * var(--u)); }
.replica-colors { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.replica-colors button { display:flex; flex-direction:column; gap:4px; align-items:center; font-size:calc(7.5 * var(--u)); font-weight:650; min-width:0; }
.replica-colors button span { min-height:calc(18 * var(--u)); }
.replica-colors i,.layout-color i { width:calc(44 * var(--u)); height:calc(24 * var(--u)); border:2px solid #2684ff; border-radius:8px; background:var(--swatch); box-shadow:inset 0 0 0 3px #181a1d; }
.replica-colors small { font:calc(8 * var(--u)) Consolas,monospace; color:#a3abb5; }
.replica-checks { display:grid; grid-template-columns:1fr 1fr; gap:calc(6 * var(--u)) 8px; }
.replica-checks label { display:flex; align-items:center; font-size:calc(9.5 * var(--u)); font-weight:650; min-height:calc(10 * var(--u)); }
.replica-checks input { appearance:none; width:calc(20 * var(--u)); height:calc(20 * var(--u)); flex:none; margin:0 7px 0 0; border:1.5px solid #2684ff; border-radius:6px; }
.replica-checks input:checked { background:#2684ff; }
.replica-checks input:checked::after { content:'✓'; display:block; text-align:center; color:white; font-size:calc(10 * var(--u)); }
.replica-geometry { min-height:calc(140 * var(--u)); }
.replica-fit { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.replica-fit label { font-size:calc(9 * var(--u)); font-weight:650; }
.replica-fit select { display:block; margin-top:6px; }
.replica-number { display:flex; justify-content:space-between; border:1.5px solid #2684ff; border-radius:7px; padding:7px; margin-top:6px; }
.replica-generate { background:#25292e; border-radius:13px; margin-top:calc(12 * var(--u)); }
.replica-generate p { min-height:calc(26 * var(--u)); text-align:center; font-size:calc(9 * var(--u)); color:#a3abb5; }
.replica-primary { width:100%; min-height:calc(42 * var(--u)); border-radius:8px; background:#2684ff; color:white; font-weight:700!important; font-size:calc(11 * var(--u))!important; letter-spacing:.4px; transition:background 140ms var(--ease); }
.replica-primary[data-pressed='true'] { background:#1473e6; }
.replica-secondary-actions { display:flex; justify-content:center; gap:28px; margin-top:calc(8 * var(--u)); font-size:calc(9 * var(--u)); color:#a3abb5; }
.workflow-panel-stage figcaption { color:var(--muted); font-size:.6875rem; margin-top:18px; }
.workflow-fallback { font-size:.875rem; line-height:1.6; color:var(--muted); padding-block:32px; }
.result-bridge { height:220px; display:flex; flex-direction:column; align-items:center; gap:24px; font:.625rem var(--font-technical); letter-spacing:.08em; color:var(--muted); }
.result-bridge i { display:block; flex:1; width:1px; background:linear-gradient(#2684ff,#3a4047); }
.comparison-header { display:flex; align-items:end; justify-content:space-between; gap:48px; padding-block:70px 64px; }
.comparison-header .chapter-title { font-size:clamp(3.4rem,6.7vw,8.5rem); }
.comparison-header .chapter-context { padding-bottom:6px; }
.comparison-figure { width:92%; max-width:1720px; margin:auto; }
.comparison-labels { display:flex; justify-content:space-between; padding-bottom:18px; color:var(--muted); font:.625rem var(--font-technical); letter-spacing:.08em; }
.comparison-board { position:relative; height:clamp(400px,68vh,740px); overflow:hidden; background:#101316; border-block:1px solid var(--border); isolation:isolate; }
.comparison-clean,.comparison-constructed { position:absolute; inset:0; }
.comparison-constructed { clip-path:inset(0 0 0 var(--split)); background:#101316; }
.result-svg { width:100%; height:100%; display:block; }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--split); width:1px; background:#a0a7ad; pointer-events:none; transform:translateX(-.5px); }
.comparison-divider span { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; display:grid; place-items:center; border:1px solid #a0a7ad; background:var(--bg); color:var(--fg); border-radius:50%; font-size:22px; }
.comparison-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; touch-action:pan-y; cursor:ew-resize; }
.comparison-board:has(.comparison-input:focus-visible) { outline:2px solid var(--accent-light); outline-offset:6px; }
.comparison-board:has(.comparison-input:focus-visible) .comparison-divider span { border:2px solid var(--accent-light); }
.comparison-figure figcaption { display:flex; justify-content:space-between; gap:20px; padding-block:20px; font:.5625rem var(--font-technical); letter-spacing:.05em; color:var(--muted); }
.comparison-value { width:70px; flex:none; text-align:right; }
.layout-scene { margin-top:180px; padding-block:110px 140px; background:#0d1013; }
.layout-header { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:80px; }
.layout-header .chapter-index { grid-column:1/-1; margin:0; }
.layout-header .chapter-title { font-size:clamp(3.4rem,8vw,10rem); }
.layout-header .chapter-context { justify-self:end; max-width:300px; margin-bottom:6px; }
.layout-figure { width:80%; max-width:1500px; margin:auto; }
.layout-canvas-caption { display:flex; justify-content:space-between; gap:16px; font:.5625rem var(--font-technical); color:var(--muted); letter-spacing:.05em; padding-bottom:16px; }
.layout-canvas-caption span + span { min-width:280px; text-align:right; }
.layout-canvas { border:1px solid var(--border); background:#101519; }
.layout-svg { display:block; width:100%; max-height:68vh; }
.layout-grid { fill:none; stroke:var(--layout-color,#737d8c); stroke-width:var(--layout-stroke,.5); opacity:var(--layout-opacity,.55); }
.layout-grid path { vector-effect:non-scaling-stroke; }
.layout-figure figcaption { margin-top:16px; color:var(--muted); font-size:.6875rem; }
.layout-controls { width:80%; max-width:1500px; margin:36px auto 0; }
.layout-systems { display:flex; gap:40px; border-bottom:1px solid var(--border); }
.layout-systems button { min-height:64px; font-size:1.25rem; color:var(--muted); text-align:left; }
.layout-systems button > span { font:.625rem var(--font-technical); margin-right:14px; color:var(--subtle); }
.layout-systems button i { font-style:normal; margin-left:12px; visibility:hidden; }
.layout-systems button[aria-pressed='true'] { color:var(--fg); border-bottom:2px solid var(--accent); }
.layout-systems button[aria-pressed='true'] i { visibility:visible; color:var(--accent); }
.layout-fields { display:grid; grid-template-columns:1.3fr 1.1fr 1fr 1fr 1fr .7fr; gap:24px; align-items:end; padding-top:28px; }
.layout-fields label,.layout-color { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; min-width:0; font:.625rem var(--font-technical); color:var(--muted); }
.layout-fields select { width:100%; min-width:0; height:44px; padding:0 8px; font:.625rem var(--font-technical); border:1px solid var(--border); border-radius:4px; color:var(--fg); background:#181a1d; }
.layout-fields input[type='range'] { margin-block:20px; }
.layout-color { align-items:center; min-height:74px; }
.layout-color i { width:30px; height:22px; }
.layout-color small { font-size:.5625rem; }
.layout-status { min-height:20px; margin-top:24px; color:var(--muted); font:.625rem var(--font-technical); }
.workflow-scene input:focus-visible,.workflow-scene select:focus-visible,.layout-scene input:focus-visible,.layout-scene select:focus-visible { outline:2px solid var(--accent-light); outline-offset:5px; }
.precision-cursor[data-state='view'] .cursor-ring::before,.precision-cursor[data-state='drag'] .cursor-ring::before { transform:scale(.8); border-width:1.25px; border-color:var(--accent-light); }
.precision-cursor[data-state='view'] .cursor-ring::after,.precision-cursor[data-state='drag'] .cursor-ring::after { content:'VIEW'; color:var(--fg); font:.5625rem var(--font-technical); letter-spacing:.06em; }
.precision-cursor[data-state='drag'] .cursor-ring::after { content:'DRAG'; }
.precision-cursor[data-state='view'] .cursor-point,.precision-cursor[data-state='drag'] .cursor-point { opacity:0; }
.workflow-scene:not(.workflow-ready) .workflow-step button { opacity:1; }
.comparison-scene:not(.comparison-ready) .comparison-instruction { visibility:hidden; }
@media(max-width:1100px) {
  .workflow-composition { gap:4vw; padding-right:var(--page-gutter); grid-template-columns:.8fr 1.2fr; }
  .layout-fields { grid-template-columns:repeat(3,1fr); }
  .layout-figure,.layout-controls { width:90%; }
}
@media(max-width:900px) {
  .workflow-header { padding-bottom:56px; }
  .workflow-composition { display:flex; flex-direction:column-reverse; gap:32px; }
  .workflow-panel-stage { position:relative; top:auto; width:min(100%,560px); margin:auto; }
  .workflow-stories { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; padding:0; }
  .workflow-step,.workflow-step:last-child { min-height:0; padding:16px 0; }
  .workflow-step button { padding:16px; border-left:1px solid var(--border); height:100%; }
  .workflow-step button[aria-pressed='true'] { border-left:2px solid var(--accent); }
  .workflow-step strong { font-size:1.75rem; }
  .workflow-step button > span { margin-bottom:16px; }
  .workflow-step small { margin-top:16px; font-size:.875rem; }
  .product-panel { position:relative; transform:translateY(var(--panel-offset,0px)); transition:transform 240ms var(--ease); --u:1px; }
  .result-bridge { margin-top:64px; height:160px; }
  .comparison-header { display:block; }
  .comparison-header .chapter-context { margin-top:24px; }
  .layout-header { display:block; }
  .layout-header .chapter-title { margin-top:28px; }
  .layout-header .chapter-context { margin-top:24px; max-width:none; }
  .layout-scene { margin-top:100px; }
}
@media(max-width:600px) {
  .chapter-entry { height:120px; font-size:.5rem; gap:16px; }
  .chapter-title,.comparison-header .chapter-title,.layout-header .chapter-title { font-size:clamp(2.65rem,11.7vw,4.2rem); }
  .chapter-index { font-size:.625rem; margin-bottom:24px; }
  .workflow-header { padding-block:24px 48px; }
  .workflow-header .chapter-context { margin-top:24px; }
  .chapter-context { font-size:1rem; }
  .workflow-ready .panel-window { height:358px; overflow:hidden; }
  .product-panel { padding:16px 10px; }
  .workflow-ready .product-panel { transform:translateY(var(--panel-offset,0px)); transition:transform 240ms var(--ease); }
  .panel-region { padding:12px 6px; }
  .replica-brand > div { width:72%; }
  .replica-brand small { font-size:7px; }
  .replica-brand p { font-size:8px; letter-spacing:2px; }
  .replica-colors { grid-template-columns:repeat(3,1fr); gap:14px 6px; }
  .replica-colors button { min-height:64px; font-size:8px; }
  .replica-colors button span { min-height:0; }
  .replica-colors i { width:44px; height:24px; }
  .replica-checks { grid-template-columns:1fr 1fr; gap:10px 6px; }
  .replica-checks label { font-size:9px; min-height:36px; }
  .replica-checks input { width:20px; height:20px; }
  .replica-geometry { min-height:244px; }
  .replica-artwork { grid-template-columns:minmax(0,1fr) 62px; gap:6px; }
  .product-panel select { min-height:44px; font-size:10px; }
  .replica-tabs button { min-height:44px; }
  .replica-tab-view { min-height:74px; }
  .replica-range { min-height:44px; grid-template-columns:104px minmax(0,1fr) 46px; gap:8px; }
  .replica-range input { padding-block:20px; background-clip:content-box!important; box-sizing:content-box; }
  .replica-primary { min-height:44px; }
  .workflow-stories { gap:8px 12px; }
  .workflow-step button { padding:12px; }
  .workflow-step strong { font-size:1.13rem; }
  .workflow-step button > span { font-size:.5rem; }
  .workflow-step small { font-size:.75rem; line-height:1.55; }
  .workflow-step small br { display:none; }
  .panel-stage-caption { font-size:.5rem; }
  .workflow-panel-stage figcaption { font-size:.625rem; min-height:30px; line-height:1.6; }
  .comparison-header { padding-block:48px 40px; }
  .comparison-figure { width:calc(100% - 40px); }
  .comparison-labels { font-size:.5rem; }
  .comparison-board { height:380px; }
  .comparison-divider span { width:44px; height:44px; }
  .comparison-figure figcaption { flex-wrap:wrap; gap:14px; font-size:.5rem; }
  .comparison-instruction { order:3; width:100%; font-size:.5rem; }
  .layout-scene { padding-block:64px 72px; margin-top:80px; }
  .layout-header { margin-bottom:40px; }
  .layout-figure,.layout-controls { width:calc(100% - 40px); }
  .layout-canvas-caption { font-size:.4375rem; flex-wrap:wrap; }
  .layout-canvas-caption span + span { min-width:0; width:100%; text-align:left; }
  .layout-svg { min-height:270px; }
  .layout-figure figcaption { font-size:.625rem; line-height:1.6; }
  .layout-controls { margin-top:24px; }
  .layout-systems { gap:16px; }
  .layout-systems button { font-size:.8125rem; min-height:52px; flex:1; }
  .layout-systems button > span { font-size:.5rem; margin-right:4px; }
  .layout-systems button i { margin-left:4px; }
  .layout-fields { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .layout-fields label,.layout-color { font-size:.5625rem; }
  .layout-fields input[type='range'] { height:44px; padding-block:20px; background-clip:content-box; border-radius:0; margin:0; }
  .layout-status { line-height:1.6; min-height:32px; }
}
@media(prefers-reduced-motion:reduce) {
  .workflow-step button,.panel-region,.product-panel,.workflow-ready .product-panel,.replica-primary { transition:none; }
}

.workflow-scene:not(.workflow-ready) .panel-window { max-height:none; overflow:visible; }

.product-panel { display:flex; flex-direction:column; }
.replica-brand { order:1; } .replica-system { order:2; } .replica-appearance { order:3; min-height:calc(216 * var(--u)); } .replica-geometry { order:4; } .replica-generate { order:5; }
[data-panel-tab="layout"] .replica-geometry { order:3; } [data-panel-tab="layout"] .replica-appearance { order:4; }
.replica-number input { width:100%; min-width:0; background:transparent; border:0; color:#f5f7fa; }
.replica-layout-swatch { display:inline-block; width:40px; height:24px; border:2px solid #2684ff; border-radius:8px; background:var(--swatch); vertical-align:middle; }
@media(max-width:600px) { .replica-number { min-height:44px; } }

.workflow-scene { overflow-anchor:none; }