:root{color-scheme:dark;--ink:#f4f5f7;--dim:#858b94;--hair:rgba(244,245,247,.13);--gold:#a99a6a}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07080a}
body{font-family:Alexandria,system-ui,sans-serif;color:var(--ink)}
.viewer{position:relative;width:100%;height:100%;min-height:620px;overflow:hidden;background:
  radial-gradient(ellipse 60% 46% at 52% 44%,rgba(169,154,106,.09),transparent 70%),
  linear-gradient(145deg,#0b0d10,#050608 74%)}
#stage{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}
header{position:absolute;top:0;left:0;right:0;padding:28px 30px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--hair);pointer-events:none}
header>div{display:flex;flex-direction:column;gap:7px}header strong{font-size:13px;font-weight:400;letter-spacing:.04em}
.eyebrow,.release{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.release{color:#626873}
.readout{position:absolute;left:30px;bottom:130px;display:grid;grid-template-columns:28px minmax(0,310px);gap:16px;align-items:start}
.readout>span{color:var(--gold);font-size:10px;letter-spacing:.15em;padding-top:4px}
.readout strong{font-size:clamp(22px,3.1vw,34px);font-weight:500;letter-spacing:-.025em}
.readout p{color:var(--dim);font-size:12px;line-height:1.55;margin:7px 0 0}
.open-readout{position:absolute;left:30px;top:92px;width:min(330px,calc(100% - 60px));padding:13px 15px;border-left:1px solid var(--gold);background:rgba(6,7,9,.62);backdrop-filter:blur(12px);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.open-readout.open{opacity:1;transform:none}
.open-readout span{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.open-readout p{color:var(--dim);font-size:10px;font-weight:300;line-height:1.55;margin:6px 0 0}
.gesture-note{position:absolute;right:30px;bottom:132px;color:#676d76;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.controls{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 14px;border:1px solid var(--hair);background:rgba(6,7,9,.74);backdrop-filter:blur(18px)}
button{appearance:none;border:0;background:transparent;color:#747a84;font:500 9px Alexandria,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:9px 10px;cursor:pointer;transition:color .25s ease,background .25s ease}
button:hover,button.active{color:var(--ink)}button.active{background:rgba(169,154,106,.12)}
.states,.modes{display:flex;align-items:center;gap:2px;min-width:0}.modes{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.modes label{display:flex;align-items:center;gap:10px;color:#747a84;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:0 10px}
.finish-select select{appearance:none;border:1px solid var(--hair);border-radius:0;background:#090a0d;color:#a9afb8;font:500 8px Alexandria,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 24px 7px 8px;background-image:linear-gradient(45deg,transparent 50%,#747a84 50%),linear-gradient(135deg,#747a84 50%,transparent 50%);background-position:calc(100% - 10px) 11px,calc(100% - 7px) 11px;background-size:3px 3px,3px 3px;background-repeat:no-repeat}
.finish-select select:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
input[type=range]{width:90px;accent-color:var(--gold)}
.engineering-download{color:#747a84;font-size:8px;font-weight:500;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;white-space:nowrap;padding:9px 7px;transition:color .25s ease}
.engineering-download:hover,.engineering-download:focus-visible{color:var(--ink);outline:0}
.explainers{position:absolute;z-index:3;top:90px;right:24px;width:min(286px,calc(100% - 48px));max-height:calc(100% - 210px);overflow:auto;border:1px solid var(--hair);background:rgba(6,7,9,.82);backdrop-filter:blur(20px);opacity:0;transform:translateX(16px);pointer-events:none;transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
.explainers.open{opacity:1;transform:none;pointer-events:auto}
.explainer-head{padding:16px 17px 14px;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:5px}
.explainer-head span{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.explainer-head small{color:#626873;font-size:8px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase}
.component-list{display:grid}
.component-item{appearance:none;width:100%;display:grid;grid-template-columns:26px 1fr;gap:10px;text-align:left;padding:12px 16px;border-bottom:1px solid var(--hair);background:transparent;text-transform:none;letter-spacing:0}
.component-item:last-child{border-bottom:0}
.component-item:hover,.component-item:focus-visible{background:rgba(169,154,106,.08);outline:0}
.component-item b{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.12em}
.component-item strong{display:block;color:var(--ink);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
.component-item span{display:block;color:var(--dim);font-size:9px;font-weight:300;line-height:1.5;letter-spacing:0;text-transform:none;margin-top:3px}
.component-markers{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease}
.component-markers.open{opacity:1}
.component-marker{position:absolute;width:25px;height:25px;border:1px solid rgba(169,154,106,.72);border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(7,8,10,.88);box-shadow:0 0 0 4px rgba(7,8,10,.38);font-size:8px;font-weight:600;letter-spacing:.04em;transform:translate(-50%,-50%);transition:opacity .18s ease,background .18s ease,color .18s ease}
.component-marker.focus{color:#07080a;background:var(--gold)}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:#747a84;background:#07080a;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:opacity .5s ease}
.loading.done{opacity:0;pointer-events:none}
.embedded .viewer{min-height:0}
.embedded header,.embedded .gesture-note{display:none}
.embedded .readout{left:18px;bottom:94px;grid-template-columns:24px minmax(0,260px)}
.embedded .open-readout{top:18px;left:18px;width:min(310px,calc(100% - 36px))}
.embedded .controls{left:12px;right:12px;bottom:12px;padding:9px 10px;gap:8px}
.embedded .engineering-download,.embedded #reset{display:none}
.embedded .explainers{top:16px;right:16px;max-height:calc(100% - 112px)}
@media(max-width:1480px) and (min-width:621px){
  .readout{bottom:188px}.gesture-note{bottom:190px}
  .controls{align-items:stretch;flex-direction:column;gap:8px;padding:10px 12px}
  .controls>*{min-width:0}.states{justify-content:space-between}.states button{flex:1}
  .modes{justify-content:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:8px}
  .modes label{padding:0 7px}.finish-select{margin-left:auto}.engineering-download{margin-left:auto}
  .explainers{max-height:calc(100% - 270px)}
}
@media(max-width:620px){
  .viewer{min-height:560px}header{padding:20px}.release,.gesture-note{display:none}
  .readout{left:20px;right:20px;bottom:146px;grid-template-columns:22px 1fr}
  .open-readout{left:20px;top:72px;width:calc(100% - 40px)}
  .controls{left:10px;right:10px;bottom:10px;display:block;padding:9px}
  .states{justify-content:space-between}.states button{padding:8px 5px;font-size:8px}
  .modes{justify-content:space-between;border-top:1px solid var(--hair);padding-top:7px}
  .modes{gap:1px;flex-wrap:wrap}.modes label{gap:6px;padding:0 5px}.modes button{padding-left:6px;padding-right:6px}
  .finish-select{order:4}.finish-select select{max-width:108px}
  .engineering-download{order:5;padding:6px}
  input[type=range]{width:58px}
  .explainers{top:70px;right:10px;width:calc(100% - 20px);max-height:calc(100% - 238px)}
  .component-list{grid-template-columns:1fr 1fr}.component-item{padding:10px 12px}.component-item:nth-last-child(-n+2){border-bottom:0}
  .component-marker{width:21px;height:21px;font-size:7px}
  .embedded .viewer{min-height:0}
  .embedded .readout{left:14px;right:14px;bottom:118px}
  .embedded .readout strong{font-size:20px}
  .embedded .readout p{font-size:10px;max-width:27ch}
  .embedded .controls{left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:stretch;padding:7px}
  .embedded .states{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .embedded .states::-webkit-scrollbar{display:none}
  .embedded .states button{flex:0 0 auto;padding:7px 9px}
  .embedded .modes{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .embedded .modes::-webkit-scrollbar{display:none}
  .embedded .modes label{flex:0 0 auto}
  .embedded .explainers{top:10px;right:10px;max-height:calc(100% - 126px)}
}
@media(prefers-reduced-motion:reduce){button,.loading,.open-readout,.explainers,.component-markers,.component-marker{transition:none}}

/* Scroll-controlled editorial embed. The parent page supplies one normalized
   progress value; the CAD viewer remains the sole geometry renderer. */
body.scroll-mode,.scroll-mode .viewer{background:transparent}
.scroll-mode .viewer{min-height:0}
.scroll-mode header,
.scroll-mode .readout,
.scroll-mode .open-readout,
.scroll-mode .gesture-note,
.scroll-mode .controls,
.scroll-mode .explainers,
.scroll-mode .component-markers{display:none!important}
.scroll-mode #stage{cursor:default;pointer-events:none}
.scroll-mode .grain{opacity:.1}