/* CHIEL Home 3D — public, device-free architectural showroom. */
:root{color-scheme:dark;--ink:#eaf2f4;--muted:#9bb4be;--sea:#6ccbc5;--line:rgba(178,222,232,.17)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.showcase-page{margin:0;min-height:100vh;min-height:100dvh;background:#07121c!important;color:var(--ink)!important;font:400 15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;overflow-x:hidden}
.showcase-page:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 81% 0%,#1944599e,transparent 50%),radial-gradient(ellipse at 4% 41%,#21403560,transparent 48%),#07121c}
.showcase-sheen{position:absolute;top:0;right:0;width:44vw;height:48vh;background:radial-gradient(ellipse,#2b6a7d38 0%,transparent 70%);filter:blur(45px);pointer-events:none}
.showcase-shell{width:min(1480px,calc(100% - 64px));margin:0 auto;padding-bottom:32px;position:relative;z-index:1}
.showcase-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.showcase-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#ecf9fa;letter-spacing:.13em;font-weight:850;font-size:14px}
.showcase-brand em{font-style:normal;font-weight:400;color:#8fd3ca;letter-spacing:.1em}
.showcase-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #6dd5cb68;border-radius:14px;background:linear-gradient(145deg,#185568,#0c2737);color:#bcfbeb;font-size:24px;box-shadow:0 5px 24px #44a7a021}
.showcase-nav-right{display:flex;align-items:center;gap:22px}
.showcase-status{font-size:10px;letter-spacing:.13em;font-weight:790;color:#c1e4dd;white-space:nowrap}
.showcase-status i{display:inline-block;width:7px;height:7px;border-radius:100%;background:#73d2ad;box-shadow:0 0 12px #73d2ad88;margin-right:5px}
.showcase-nav-link{font-size:12px;text-decoration:none;color:#d8f5f2;font-weight:760;border:1px solid var(--line);border-radius:999px;padding:10px 16px;transition:background .2s,border-color .2s}
.showcase-nav-link:hover{background:#1b4253;border-color:#78cec4}
.showcase-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,440px);gap:30px;align-items:center;min-height:300px;padding:64px 0 42px}
.showcase-eyebrow,.showcase-mini-label{font-size:10px;letter-spacing:.22em;color:#8bd0c5;font-weight:800}
.showcase-eyebrow{display:flex;align-items:center;gap:12px}
.showcase-eyebrow-line{width:22px;height:1px;background:#89ccbd}
.showcase-hero h1{font-size:clamp(36px,5vw,78px);letter-spacing:-.065em;line-height:1.08;font-weight:770;margin:18px 0 21px;color:#f5f9f8}
.showcase-hero h1 span{color:#91d7c8;font-weight:470;font-style:italic}
.showcase-hero-copy>p{margin:0;max-width:580px;color:#a9c1c7;font-size:clamp(14px,1.45vw,17px);line-height:1.7}
.showcase-keyfacts{display:flex;gap:0;flex-wrap:wrap;margin-top:27px}
.showcase-keyfacts span{display:flex;align-items:baseline;gap:8px;color:#a3b6be;font-size:12px;padding:0 20px;border-left:1px solid #57738065}
.showcase-keyfacts span:first-child{padding-left:0;border:0}
.showcase-keyfacts b{color:#ecf8f5;font-size:22px;font-weight:740;letter-spacing:-.04em}
.showcase-hero-side{height:238px;display:grid;justify-items:center;place-content:center;gap:14px;opacity:.85}
.showcase-hero-side>span{letter-spacing:.24em;font-size:9px;font-weight:740;color:#78b2b3}
.showcase-diagram{position:relative;width:285px;height:172px;transform:skewY(-6deg)}
.showcase-diagram span{position:absolute;display:block;transform:skewY(6deg) rotate(-17deg);border:1px solid #94d9ca7f;box-shadow:0 0 32px #40c1b124}
.diagram-main{width:160px;height:87px;top:35px;left:55px;background:linear-gradient(130deg,#74bdb23f,#12374899);border-radius:4px}
.diagram-roof{width:160px;height:54px;top:10px;left:55px;background:linear-gradient(145deg,#7dd7c355,#163b508f);border-radius:4px}
.diagram-annex{width:75px;height:40px;top:103px;left:166px;background:linear-gradient(110deg,#4fa99a33,#183b5277)}
.diagram-ground{width:250px;height:3px;top:150px;left:5px;background:#7fbdad55}
.showcase-section-header{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:8px 0 17px}
.showcase-section-header h2{font-size:clamp(22px,2.5vw,34px);line-height:1.2;letter-spacing:-.04em;color:#f1f7f6;margin:8px 0 0;font-weight:740}
.showcase-section-header>p{font-size:12px;color:#99bac3;margin:0 0 3px}
.showcase-page #modelView{display:block!important;border:1px solid #527e8680;border-radius:24px;margin:0;overflow:hidden;box-shadow:0 28px 72px #0009,0 0 0 1px #afdedb0e;background:#0b1c27;min-width:0}
.showcase-page #modelView[hidden]{display:block!important}
.showcase-page .model3d-head{padding:22px 30px;gap:20px;background:linear-gradient(102deg,#173d4e,#122e40 50%,#103446);border-bottom:1px solid #668b8a4d}
.showcase-page .model3d-overline{font-size:10px;color:#a1e7c8;letter-spacing:.18em}
.showcase-page .model3d-head h2{font-size:clamp(19px,2.6vw,30px);font-weight:760;line-height:1.12;letter-spacing:-.04em;color:#ecf9f6}
.showcase-page .model3d-head p{font-size:12px;line-height:1.65;color:#bdd2d2;max-width:720px}
.showcase-page .model3d-control-link{background:#d3e8e1;color:#0b2c33;border:1px solid #dbf3eb;border-radius:100px;font-size:12px;padding:11px 19px;font-weight:800;box-shadow:0 3px 18px #0c162b5a}
.showcase-page .model3d-toolbar{background:#102c3b;border:0;padding:16px 23px;gap:12px;border-bottom:1px solid #68879143}
.showcase-page .model3d-pills{gap:6px}
.showcase-page .model3d-pills button{min-height:42px;border:1px solid #63828d76;border-radius:999px;background:#163546;color:#d6e6e9;font-size:12px;font-weight:730;padding:10px 16px;transition:background .18s,transform .18s,border-color .18s}
.showcase-page .model3d-pills button:hover{background:#255369;border-color:#9ecbcc;transform:translateY(-1px)}
.showcase-page .model3d-pills button[aria-pressed=true]{background:#a5d7ca;border-color:#bdede0;color:#082631;box-shadow:0 2px 15px #7ae0c522}
.showcase-page .model3d-pills #modelEvening[aria-pressed=true]{background:#725f81;border-color:#dfc5ed;color:#fff4fc}
.showcase-page .model3d-viewer{height:clamp(540px,66vw,820px);border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff1c;background:radial-gradient(ellipse at 45% 36%,#bdd0cb,#607c8e 78%,#324c62)}
.showcase-page .model3d-topbar{left:17px;right:17px;top:16px}
.showcase-page .model3d-topbar #modelState{border-radius:50px;background:#0e3245d9;border:1px solid #a8d9cf80;padding:9px 14px;backdrop-filter:blur(12px);font-size:11px;color:#f0faf8}
.showcase-page #modelLightState,.showcase-page #modelSensorToggle{display:none!important}
.showcase-page .model3d-bottom span{border-radius:999px;background:#0a2e3bd9;border:1px solid #b6ded64a;padding:8px 12px;font-size:11px}
.showcase-page .model3d-rooms{padding:23px 26px;background:linear-gradient(100deg,#102e3d,#0d2635)}
.showcase-page .model3d-rooms>strong{font-size:16px;font-weight:700;color:#e2f1ef}
.showcase-page .model3d-room-buttons{margin-top:16px;gap:8px}
.showcase-page .model3d-room-buttons button{background:#214355;border-color:#62838e7d;padding:9px 17px;min-height:42px;color:#d5e8e7;font-size:12px;font-weight:670;transition:background .2s,border-color .2s}
.showcase-page .model3d-room-buttons button:hover{background:#316578}
.showcase-page .model3d-room-buttons button[aria-pressed=true]{background:#a4d8cf;border-color:#ddfff5;color:#112d37}
.showcase-page .model3d-light-explain{display:block;margin-top:14px;font-size:12px;max-width:980px;line-height:1.65;color:#9cbcc1}
.showcase-page .model3d-light-explain strong{color:#cceee3}
.showcase-page .model3d-description{padding:16px 26px 22px;color:#acc7c8;background:#102333;border-color:#42616b60;font-size:12px;line-height:1.75}
.showcase-page .model3d-description strong{color:#b7e3d3}
.showcase-info{margin:55px 0 25px;padding:35px;border-radius:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);align-items:center;gap:35px;background:linear-gradient(130deg,#153746,#0c2934);border:1px solid #5e918b50}
.showcase-info h2{margin:12px 0;font-size:clamp(25px,3vw,42px);letter-spacing:-.05em;line-height:1.2;color:#e9f6f0}
.showcase-info p{color:#a9c9ca;line-height:1.7;font-size:13px;max-width:580px;margin:0}
.showcase-info-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.showcase-info-chips span{border:1px solid #668d9380;border-radius:12px;min-height:68px;display:flex;align-items:center;padding:13px;color:#dcefea;font-size:12px;font-weight:700;background:#16394a6e}
.showcase-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 0 4px;border-top:1px solid var(--line);font-size:11px;color:#98b7ba}
.showcase-footer strong{font-size:12px;letter-spacing:.12em;color:#c6e5dc;white-space:nowrap}
.showcase-footer p{margin:0;max-width:620px}
.showcase-footer a{color:#b9e6d9;text-decoration:none;font-size:12px;white-space:nowrap}
.showcase-page .model3d-viewer:focus-visible{outline:2px solid #affbea;outline-offset:-3px}
.showcase-page #showcaseDemoBadge{position:absolute;top:65px;left:17px;background:#102d3fdc;color:#c9e4df;padding:7px 12px;border:1px solid #b7dbc26a;border-radius:999px;font-size:10px;pointer-events:none;z-index:3;backdrop-filter:blur(10px)}
@media(max-width:940px){
 .showcase-shell{width:min(100% - 36px,980px)}
 .showcase-hero{grid-template-columns:1fr;min-height:0;padding:42px 0 30px}
 .showcase-hero-side{display:none}
 .showcase-page .model3d-toolbar{justify-content:flex-start}
 .showcase-info{grid-template-columns:1fr}
 .showcase-footer{flex-wrap:wrap}
}
@media(max-width:650px){
 .showcase-shell{width:calc(100% - 22px)}
 .showcase-nav{padding:15px 1px}
 .showcase-nav-right{gap:9px}
 .showcase-brand{font-size:12px;gap:8px}
 .showcase-mark{width:33px;height:33px;font-size:19px;border-radius:10px}
 .showcase-status{display:none}
 .showcase-nav-link{padding:8px 10px;font-size:10px}
 .showcase-hero{padding:37px 8px 29px}
 .showcase-hero h1{font-size:clamp(36px,10vw,52px);margin:13px 0 17px;letter-spacing:-.055em}
 .showcase-hero-copy>p{font-size:14px}
 .showcase-keyfacts{margin-top:22px;gap:12px}
 .showcase-keyfacts span{padding:0 10px 0 13px;font-size:10px}
 .showcase-keyfacts b{font-size:18px}
 .showcase-section-header{padding:6px 6px 17px;align-items:start;flex-direction:column;gap:9px}
 .showcase-section-header>p{font-size:11px}
 .showcase-page #modelView{border-radius:18px}
 .showcase-page .model3d-head{padding:20px 17px;flex-direction:column;align-items:flex-start;gap:15px}
 .showcase-page .model3d-head h2{font-size:22px}
 .showcase-page .model3d-head p{font-size:11px}
 .showcase-page .model3d-control-link{width:100%;text-align:center}
 .showcase-page .model3d-toolbar{padding:12px 11px;gap:9px}
 .showcase-page .model3d-pills{width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .showcase-page .model3d-pills::-webkit-scrollbar{display:none}
 .showcase-page .model3d-pills button{font-size:10px;min-height:39px;padding:9px 10px;white-space:nowrap}
 .showcase-page .model3d-viewer{height:clamp(490px,66dvh,750px)}
 .showcase-page .model3d-topbar #modelState{max-width:90%;font-size:9px;padding:7px 9px}
 .showcase-page .model3d-bottom{left:7px;right:7px;bottom:9px;font-size:9px}
 .showcase-page .model3d-bottom span{font-size:9px;padding:6px 9px}
 .showcase-page .model3d-rooms{padding:19px 15px}
 .showcase-page .model3d-rooms>strong{font-size:14px}
 .showcase-page .model3d-room-buttons{gap:7px}
 .showcase-page .model3d-room-buttons button{padding:9px 12px;min-height:39px;font-size:11px}
 .showcase-page .model3d-description{padding:15px}
 .showcase-page #showcaseDemoBadge{top:54px;left:9px;font-size:9px;padding:6px 8px}
 .showcase-info{padding:24px 20px;margin-top:36px;gap:24px}
 .showcase-info-chips{gap:8px}
 .showcase-info-chips span{min-height:68px;padding:10px;font-size:10px}
 .showcase-footer{padding:20px 7px;align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.showcase-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


.showcase-page .model3d-head>div{min-width:0;max-width:100%;overflow-wrap:break-word}
.showcase-page .model3d-head h2{overflow-wrap:break-word}