:root{font-family:Arial,"Microsoft YaHei",sans-serif;color:#151b20;background:#f6f6f3;--accent:#ff7936}*{box-sizing:border-box}body{margin:0}button,a,select{font:inherit}button,select{cursor:pointer}button{color:inherit;background:transparent;border:1px solid #dce0e2;border-radius:12px;padding:13px 20px}button:hover,button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}a{color:inherit;text-decoration:none}.topbar{height:88px;border-bottom:1px solid #e1e3e3;display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:25px;background:#f6f6f3;position:relative;z-index:5}.logo{font-size:28px;font-weight:900}.topbar nav{display:flex;gap:32px;align-items:center}.topbar nav button{border:0}.topbar>span{font-size:10px;letter-spacing:2px;color:#77828a}main{padding:30px 40px 100px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent);font-weight:bold}h1{font-size:clamp(32px,3.5vw, sixty);font-size:48px;letter-spacing:-2px;margin:12px 0 30px}.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.categories button{text-align:left;min-height:82px;font-weight:bold}.series{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.series button{padding:10px 18px}.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.product-card{background:white;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding:20px}.product-card img,.placeholder{width:100%;height:155px;object-fit:contain;grid-column:1/-1;margin-bottom:18px}.placeholder{display:grid;place-items:center;font-size:85px;color:#bdc8cd;background:#f8f9fa;border-radius:12px}.product-card strong{font-size:20px}.product-card span{color:var(--accent);font-size:12px}#browse{transition:opacity .35s,transform .35s;transform-origin:top} .showing #browse{opacity:0;transform:translateY(-50px) scale(.97);pointer-events:none}#combo{position:absolute;top:106px;left:50%;transform:translateX(-50%);z-index:4;background:white;font-weight:bold}#stage{position:fixed;inset:170px 0 85px;pointer-events:none;visibility:hidden}.showing #stage{visibility:visible}#viewer{width:62vw;height:100%;margin:auto;opacity:0;pointer-events:auto;will-change:transform}#viewer canvas{display:block;width:100%;height:100%}#info{position:absolute;left:6vw;top:15%;width:30vw;pointer-events:none}#info>*{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .3s}#info.visible>*{opacity:1;transform:none}#info>*:nth-child(2){transition-delay:50ms}#info>*:nth-child(3){transition-delay:100ms}#info>*:nth-child(4){transition-delay:150ms}#info>*:nth-child(5){transition-delay:200ms}#info>*:nth-child(6){transition-delay:250ms}#info small{color:#6c7880}#info p{line-height:1.5}.certifications{color:var(--accent);font-size:13px}footer{position:fixed;bottom:16px;left:40px;right:40px;display:flex;align-items:center;gap:12px;z-index:5;background:#f6f6f3eF;padding:8px;border-radius:16px}footer select{padding:8px;border:1px solid #dce0e2;border-radius:8px;background:white}#brand{margin-left:auto}#status{position:fixed;bottom:92px;left:40px;font-size:12px;color:#68767e;z-index:4}.product-selector{width:100vw;height:100vh;max-width:none;max-height:none;border:0;padding:40px;background:#f6f6f3}.product-selector header{display:flex;justify-content:space-between;align-items:center}.product-selector input{width:100%;padding:18px;border:1px solid #cbd2d6;border-radius:12px;font:inherit;margin:20px 0}.selector-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.selector-results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.selector-results button{text-align:left;background:white;min-height:85px}.desktop-only{display:none}@media(max-width:900px){#app{display:none}.desktop-only{display:block;padding:40px}.desktop-only a{display:block;margin-top:20px}}@media(prefers-reduced-motion:reduce){#browse,#info>*{transition-duration:1ms}}
:root:has(.showing) { overflow: hidden; }
/* Fold the lists upward before revealing the compact product selector. */
#app #browse { transition: transform 350ms cubic-bezier(.22,.7,.2,1), opacity 300ms ease; transform-origin: 50% 0; }
#app.showing #browse { transform: translateY(-145px) scale(.88); opacity: 0; }
#app.showing #combo { animation: selector-arrive 220ms 240ms both; }
@keyframes selector-arrive { from { opacity: 0; transform: translate(-50%,22px) scale(.94); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
.product-selector,
[data-showcase-mode="production"] dialog.product-selector {
  width: min(1320px, calc(100vw - 64px)); height: auto; max-height: calc(100dvh - 120px);
  margin: 90px auto auto; padding: 28px; border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--line, #dce0e2) 65%, transparent);
  background: color-mix(in srgb, var(--page-bg, #f6f6f3) 76%, transparent);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 24px 90px #0003; overflow-y: auto; overscroll-behavior: contain;
}
.product-selector[open] { animation: selector-popup 180ms ease-out; }
.product-selector::backdrop { background: #10182024; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.product-selector header h2 { margin: 0; font-size: 22px; }
.product-selector h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: .04em; }
.product-selector .selector-section { padding: 16px 0; border-bottom: 1px solid var(--line,#dce0e2); margin-bottom: 16px; }
.product-selector .selector-filters { margin-bottom: 0; }
.selector-hint { color: var(--muted-ink,#68767e); font-size: 14px; padding: 8px 0; }
.product-selector .selector-product-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0; }
.selector-thumbnail { width: 100%; height: 138px; display: grid; place-items: center; background: color-mix(in srgb,var(--page-bg,#f6f6f3) 70%,transparent); border-radius: 10px; color: var(--muted-ink,#68767e); font-size: 13px; margin-bottom: 4px; }
.selector-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.selector-product-card strong { font-size: 18px; overflow-wrap: anywhere; }
.selector-product-card small { color: var(--muted-ink,#68767e); font-size: 13px; }
.product-selector .selector-results { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); }
.product-selector .selector-results button,
[data-showcase-mode="production"] .product-selector .selector-results button { background: color-mix(in srgb,var(--card-bg,#fff) 60%,transparent); min-height: 66px; }
@keyframes selector-popup { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { #app #browse { transition-duration: 1ms; } #app.showing #combo,.product-selector[open] { animation: none; } }
#app .topbar { position: fixed; inset: 0 0 auto; }
#app main { padding-top: 118px; }
#app #combo { position: fixed; }
.logo svg { display: block; width: 150px; height: 34px; }
#stage { overflow: hidden; }
h1 { font-size: clamp(32px, 3.5vw, 60px); }
/* Prototype canvas spans the entire viewport, including beneath the header. */
#app #stage { inset: 0; z-index: 1; }
#app #viewer { width: 100vw; height: 100vh; margin: 0; }
#app.showing .topbar { background: transparent; border-color: transparent; }
#app #info { top: 26%; z-index: 2; }
#app #combo { z-index: 6; }
#app footer { flex-wrap: wrap; }
.assembly-adjustments { width: min(680px, 90vw); max-height: 85vh; border: 1px solid #dde2e5; border-radius: 18px; padding: 28px; background: #fafaf8; color: #151b20; }
.assembly-adjustments::backdrop { background: #10182070; backdrop-filter: blur(5px); }
.assembly-adjustments header { display: flex; align-items: center; justify-content: space-between; }
.assembly-adjustments form > label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }
.assembly-adjustments input:not([type=checkbox]), .assembly-adjustments select { width: 175px; padding: 10px; border: 1px solid #cbd2d6; border-radius: 8px; font: inherit; }
.assembly-adjustments .check { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin: 10px 0; overflow-wrap: anywhere; }
.assembly-adjustments fieldset { border: 1px solid #dce0e2; border-radius: 12px; max-height: 220px; overflow: auto; }
.adjustment-note { font-size: 13px; line-height: 1.6; color: #637078; }
.adjustment-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.assembly-order-row { display: flex; align-items: center; gap: 6px; }
.assembly-order-row label { flex: 1; min-width: 0; }
.assembly-order-row button { flex: none; padding: 5px 10px; }
#app #info { top: 174px; bottom: var(--info-bottom, 140px); display: flex; flex-direction: column; min-height: 0; }
#app #info.visible { pointer-events: auto; }
.info-heading { flex: none; }
#info .info-heading h1 { margin: 8px 0 18px; }
.info-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 14px 16px 0; overflow-wrap: anywhere; }
.info-body h3 { color: var(--accent); font-size: 15px; margin: 20px 0 12px; }
.info-body h3:first-child { margin-top: 0; }
.info-body h4 { color: #637078; font-size: 13px; margin: 16px 0 10px; }
#info .info-spec-row p { margin: 5px 0 15px; white-space: pre-wrap; }
.info-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.showcase-certifications { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; padding: 8px 0 16px; }
.showcase-certification { --cert-scale: 1; --cert-aspect: 1; --cert-offset-x: 0%; --cert-offset-y: 0%; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: calc(32px * var(--cert-aspect) * var(--cert-scale)); min-width: 32px; height: 40px; padding: 0; color: #263238; font-size: 12px; text-align: center; }
.showcase-certification img { display: block; flex: none; height: 32px; width: auto; max-width: none; object-fit: contain; transform-origin: center; transform: scale(var(--cert-scale)) translate(var(--cert-offset-x), var(--cert-offset-y)); }