@charset "UTF-8";
:root{color-scheme:dark;--bg:#080b10;--surface:#10141b;--text:#f1f3f6;--muted:#8a939f;--line:#ffffff16;--accent:#eab976;--ease:cubic-bezier(.22,1,.36,1);font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}img{max-width:100%;height:auto;display:block}h1,h2,h3,p{margin:0}::selection{background:#b58c59;color:#080b10}[hidden]{display:none!important}.quiet{color:#737e8c}.skip{position:fixed;top:-100px;left:20px;z-index:50;background:#fff;color:#080b10;padding:15px}.skip:focus{top:20px}
.header{height:90px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{display:flex;gap:11px;align-items:center;font-size:19px;letter-spacing:-.6px;font-weight:600}.brand img{border-radius:7px}.header nav{display:flex;gap:36px;font-size:13px;color:#adb5bf}.header nav a{transition:color .25s}.header nav a:hover{color:#fff}.nav-cta{padding:10px 16px;border:1px solid #ffffff30;border-radius:30px;font-size:12px;display:flex;gap:20px;transition:background .3s}.nav-cta:hover{background:#ffffff0c}.header nav a span{font-size:14px;margin-left:4px}
.hero{position:relative;overflow:hidden;padding:58px 0 0;isolation:isolate}.hero-light{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 87%,#202d424f,transparent 56%);pointer-events:none}.hero-copy{text-align:center;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:500;line-height:1.8}.hero-copy .eyebrow{display:flex;justify-content:center;align-items:center;gap:12px;color:#bec6d0}.hero-copy .eyebrow>span{display:block;width:18px;height:1px;background:var(--accent)}h1{font-size:clamp(45px,5.7vw,82px);font-weight:550;line-height:1.23;letter-spacing:-3px;margin:22px 0 25px}h1>span{display:block;animation:title-in 1.2s var(--ease) both}h1>span:nth-child(2){animation-delay:.12s}.hero-description{font-size:16px;color:#9da6b3;line-height:1.8;animation:fade-in 1.4s var(--ease) both}.primary-link{display:inline-flex;gap:30px;align-items:center;background:#edf0f4;color:#161c24;border:1px solid #fff;border-radius:30px;padding:15px 23px;font-size:13px;font-weight:500;box-shadow:0 0 25px #ffffff08;transition:background .3s,translate .4s var(--ease)}.primary-link span{font-size:18px;transition:transform .4s}.primary-link:hover{background:#fff}.primary-link:hover span{transform:translate(3px,-3px)}.hero-copy>.primary-link{margin-top:29px}.hero-stage{width:min(980px,90%);height:590px;margin:55px auto 0;position:relative;--scroll:0}.hero-tablet{position:absolute;left:5%;top:10px;width:78%;padding:14px 17px;border-radius:25px;background:linear-gradient(140deg,#4b5058,#20242b 22%,#343a42 70%,#15191e);border:1px solid #68707d;box-shadow:0 24px 90px #000b;transform:translateY(calc(var(--scroll)*-18px));transition:transform .12s linear;animation:device-in 1.8s var(--ease) both}.screen{position:relative;border-radius:12px;overflow:hidden;background:#10171f}.hero-tablet .screen{aspect-ratio:1.45}.hero-tablet img{width:100%;height:100%;object-fit:contain}.camera{position:absolute;left:5px;top:50%;height:4px;width:4px;border-radius:50%;background:#657487;box-shadow:0 0 0 2px #151b23}.hero-phone{position:absolute;right:3%;top:91px;width:18%;padding:6px;border-radius:28px;background:linear-gradient(120deg,#757f8c,#20262f 35%,#505b6a);border:1px solid #7d8795;box-shadow:-16px 20px 60px #000a;transform:translateY(calc(var(--scroll)*-48px));transition:transform .12s linear;animation:phone-in 1.8s .13s var(--ease) both}.hero-phone .screen{border-radius:22px}.hero-phone img{width:100%;height:auto}.speaker{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:34%;height:9px;border-radius:10px;background:#151a20}.stage-rule{position:absolute;inset:40% -15% auto;border-top:1px solid #ffffff09;transform:none;z-index:-1}.stage-caption{position:absolute;bottom:1px;left:5%;right:3%;display:flex;justify-content:space-between;color:#757f8e;font-size:11px;letter-spacing:1px}.stage-caption span:last-child{font-size:9px;letter-spacing:1.7px}.product-strip{max-width:1180px;margin:40px auto 0;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#adb5c1;font-size:14px}.product-strip>div{display:flex;gap:28px;align-items:center;color:#84909e;font-size:12px}.product-strip i{width:3px;height:3px;background:#58616d;border-radius:50%}.product-strip>a{font-size:22px;color:#c4ccd7;transition:translate .3s}.product-strip>a:hover{translate:0 5px}.shell{max-width:1320px;margin:auto;padding:115px 5%}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:48px}.section-head .eyebrow,.space-heading .eyebrow{margin-bottom:20px}h2{font-size:clamp(34px,3.8vw,53px);font-weight:500;letter-spacing:-1.7px;line-height:1.3}.section-head>p,.space-heading>p:last-child{color:#8e98a6;font-size:15px;line-height:1.9}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:60px}.demo-card{border:0;background:transparent;padding:0;min-width:0;position:relative}.card-top{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#87919f;font-size:10px;letter-spacing:1.5px}.outline-label{color:#acb6c3;font-size:12px;letter-spacing:.5px}.demo-card h3{font-size:30px;font-weight:500;letter-spacing:-.7px;margin-top:14px}.demo-card h3 span{display:block;color:#8b96a4;font-size:15px;letter-spacing:0;font-weight:400;margin-top:8px}.demo-art{height:540px;display:flex;align-items:center;justify-content:center;position:relative}.ipad-device{width:100%;max-width:680px;padding:10px 13px;background:#30363e;border:1px solid #68727f;border-radius:18px;box-shadow:0 30px 45px #0007;position:relative;transform:none;transition:transform 1.1s var(--ease)}.ipad-device .screen{aspect-ratio:4/3;border-radius:7px;background:#dbd8d0}.ipad-device img{width:100%;height:100%;object-fit:contain}.phone-device{width:220px;padding:5px;background:#3c4450;border:1px solid #8b95a3;border-radius:22px;box-shadow:0 25px 35px #0007;transform:none;transition:transform 1.1s var(--ease)}.phone-device .screen{border-radius:17px}.phone-device img{width:100%;height:auto}.phone-device .speaker{height:7px}.demo-card:hover .ipad-device{transform: translateY(-5px)}.demo-card:hover .phone-device{transform: translateY(-7px)}.card-bottom{border-top:1px solid #ffffff10;min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#8d98a7}.demo-status{color:#a4aebc}.demo-launch{color:var(--accent)}.demo-note{font-size:12px;line-height:1.8;color:#6f7b8b;margin-top:18px}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff14 48%,transparent 60%);transform:translateX(-140%);transition:transform 1.6s var(--ease)}.demo-card:hover .screen:after{transform:translateX(140%)}
.spaces{display:grid;grid-template-columns:1fr 1.3fr;gap:75px;padding-top:40px}.space-heading>p:last-child{margin-top:28px}.feature{display:flex;gap:22px;border-top:1px solid var(--line);padding:30px 0}.feature-no{font-size:10px;color:#647285;padding-top:6px}.feature h3{font-size:19px;font-weight:500;letter-spacing:-.3px}.feature p{font-size:14px;line-height:1.9;color:#84909f;margin-top:13px}.feature-icon{margin-left:auto;font-size:27px;color:#596778}.start{text-align:center;padding-top:60px;padding-bottom:120px;position:relative}.start-line{height:1px;max-width:800px;margin:0 auto 75px;background:linear-gradient(90deg,transparent,#d4a87155,transparent)}.start .eyebrow{color:#b8a181}.start h2{font-size:clamp(40px,4.8vw,68px);margin:25px 0}.start p:not(.eyebrow){font-size:15px;color:#8b96a6}.start-actions{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:35px}.secondary-link{font-size:13px;display:flex;gap:20px;color:#b9c1ce}.footer{max-width:1320px;margin:auto;border-top:1px solid var(--line);padding:30px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px}.footer .brand{font-size:16px}.footer>span{font-size:12px;color:#68778a}.footer>div{display:flex;gap:25px;color:#8b97a7;font-size:11px}
.motion-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.motion-ready .reveal.visible{opacity:1;transform:none}.motion-ready .demo-card:not(.visible) .ipad-device{transform: translateY(35px)}.motion-ready .demo-card:not(.visible) .phone-device{transform: translateY(40px)}.magnetic{translate:var(--magnet-x,0px) var(--magnet-y,0px)}
@keyframes title-in{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes device-in{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}@keyframes phone-in{from{opacity:0;translate:0 45px}to{opacity:1;translate:0 0}}
@media(min-width:1550px){.hero-stage{width:1000px;height:610px}}
@media(max-width:1250px){.product-strip{margin-left:5%;margin-right:5%}.hero-stage{width:850px;height:535px}.hero{padding-top:45px}.spaces{gap:45px}.demo-art{height:470px}.phone-device{width:200px}}
@media(max-width:900px){.hero-stage{width:88%;height:54vw;margin-top:50px}.stage-caption{bottom:-18px}.hero-phone{top:16%}.product-strip{margin-top:70px}.demo-grid{gap:36px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.demo-art{height:410px}.ipad-device{padding:8px 11px}.phone-device{width:180px}.spaces{grid-template-columns:1fr;gap:40px}.shell{padding-top:85px;padding-bottom:85px}.spaces{padding-top:0}.section-head>p{font-size:13px}.header nav{gap:24px}.footer>span{display:none}}
@media(max-width:600px){.header{height:76px;padding:0 6%}.brand{font-size:17px;gap:8px}.brand img{width:26px;height:26px}.header nav{display:none}.nav-cta{font-size:11px;gap:13px;padding:9px 13px}.hero{padding-top:40px}.hero-copy{padding:0 5%}.hero-copy .eyebrow{font-size:9px;letter-spacing:1.5px}h1{font-size:clamp(35px,8.9vw,53px);letter-spacing:-1.5px;margin-top:22px;line-height:1.35}.hero-description{font-size:13px;max-width:290px;margin:auto;line-height:1.9}.primary-link{font-size:12px;padding:13px 20px;gap:24px}.hero-copy>.primary-link{margin-top:24px}.hero-stage{width:96%;height:67vw;max-height:370px;margin-top:50px}.hero-tablet{width:82%;left:2%;top:0;padding:6px 9px;border-radius:13px}.hero-tablet .screen{border-radius:6px}.camera{left:3px;width:2px;height:2px}.hero-phone{right:2%;width:23%;top:20%;padding:3px;border-radius:15px}.hero-phone .screen{border-radius:12px}.speaker{height:5px;top:3px}.stage-caption{left:4%;right:4%;bottom:-10px;font-size:9px;letter-spacing:.5px}.stage-caption span:last-child{font-size:6px;letter-spacing:.7px}.product-strip{margin:45px 6% 0;padding:24px 0;gap:15px;flex-wrap:wrap}.product-strip>span{font-size:13px}.product-strip>div{order:3;width:100%;gap:15px;justify-content:space-between;font-size:10px}.product-strip>a{font-size:18px}.shell{padding:65px 6%}.section-head{display:block;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:1.6px}h2{font-size:34px;letter-spacing:-1px}.section-head .eyebrow,.space-heading .eyebrow{margin-bottom:16px}.section-head>p{margin-top:20px;font-size:13px}.demo-grid{grid-template-columns:1fr;gap:42px}.card-top{font-size:9px;letter-spacing:1px}.demo-card h3{font-size:28px;margin-top:12px}.demo-card h3 span{font-size:14px}.demo-art{height:auto;padding:30px 0}.phone-card .demo-art{height:auto;padding:30px 0}.phone-device{width:190px}.ipad-device{max-width:none}.card-bottom{font-size:10px;min-height:65px}.demo-note{font-size:11px;margin-top:17px}.spaces{padding-top:10px;gap:30px}.space-heading>p:last-child{font-size:14px;margin-top:22px}.feature{gap:17px;padding:25px 0}.feature h3{font-size:17px}.feature p{font-size:12px}.feature-icon{font-size:22px}.start{padding-top:15px;padding-bottom:70px}.start-line{margin-bottom:55px}.start h2{font-size:40px}.start p:not(.eyebrow){font-size:14px}.start-actions{gap:28px}.secondary-link{font-size:12px;gap:15px}.footer{padding:28px 6%;flex-wrap:wrap;gap:23px}.footer>div{width:100%;font-size:10px;gap:20px}.footer>div>span{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}.magnetic{translate:0 0}.screen:after{display:none}}
/* DIY and the original-model exhibit are intentionally frameless. */
button{font:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.diy{padding-top:25px}.diy-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:50px;align-items:center}.diy-preview{position:relative;overflow:hidden;border-radius:9px;background:#111820}.diy-preview>img{width:100%;height:auto;aspect-ratio:2714/1872;object-fit:contain}.image-caption{position:absolute;bottom:14px;right:14px;font-size:10px;color:#c5cbd4;background:#080b10b8;padding:7px 10px;border-radius:4px;pointer-events:none}.diy-option{display:flex;text-align:left;gap:16px;width:100%;padding:25px 0;border:0;border-top:1px solid var(--line);background:none;color:#8a96a5;cursor:pointer;transition:color .3s}.diy-option:last-child{border-bottom:1px solid var(--line)}.diy-option strong{display:block;font-size:20px;font-weight:500;color:inherit}.diy-option small{display:block;font-size:13px;line-height:1.9;margin-top:13px;color:#7e8a9b}.option-no{font-size:10px;padding-top:6px;color:#637084}.option-arrow{margin-left:auto;color:#6b7684;transition:translate .3s}.diy-option.active{color:#f1f3f6}.diy-option.active .option-no,.diy-option.active .option-arrow{color:var(--accent)}.diy-option:hover .option-arrow{translate:2px -2px}.component-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:50px 0 24px}.component-heading h3{font-size:19px;font-weight:400}.component-heading>span{font-size:11px;color:#7b8798}.component-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.component-rail figure{margin:0;min-width:0}.component-rail img{width:100%;height:auto;aspect-ratio:520/300;object-fit:contain;border-radius:7px;background:#0d1219;transition:translate .4s var(--ease)}.component-rail figure:hover img{translate:0 -4px}.component-rail figcaption{font-size:12px;color:#8c99ab;margin-top:12px}.models{padding-top:25px}.model-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:24px}.model-toolbar>span{font-size:11px;color:#748297}.model-filters{display:flex;gap:8px;flex-wrap:wrap}.model-filters button{background:none;color:#8a97a7;border:0;border-radius:22px;padding:10px 18px;cursor:pointer;font-size:13px;transition:color .25s,background .25s}.model-filters button[aria-pressed=true]{background:#e8ecf1;color:#141c26}.model-filters button:hover:not([aria-pressed=true]){background:#ffffff08;color:#fff}.model-gallery{position:relative;min-height:200px;margin-top:12px}.model-gallery canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.model-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px}.model-item{position:relative;border-bottom:1px solid #ffffff0d;padding-bottom:21px;min-width:0}.model-viewport{height:150px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7e8c9e}.model-item h3{font-size:14px;font-weight:400;color:#b6bfcc}.model-index{position:absolute;right:0;bottom:23px;font-size:10px;color:#536176}.model-feedback{font-size:11px;color:#758396;min-height:18px;line-height:1.8;margin-top:17px}.model-footer{display:flex;justify-content:space-between;gap:22px;margin-top:20px;font-size:12px;color:#8c98a9}.model-footer a{color:#bec7d3}.model-footer a span{margin-left:12px}
@media(max-width:900px){.diy-layout{gap:28px;grid-template-columns:1.35fr 1fr}.diy-option{padding:17px 0;gap:10px}.diy-option strong{font-size:16px}.diy-option small{font-size:12px;margin-top:8px}.component-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.component-heading>span{display:none}.model-viewport{height:155px}.model-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}}
@media(max-width:600px){.diy,.models{padding-top:15px}.diy-layout{grid-template-columns:1fr;gap:22px}.diy-options{display:grid;gap:0}.diy-option{padding:20px 0}.diy-option strong{font-size:18px}.diy-option small{font-size:13px}.component-heading{margin-top:35px}.component-heading h3{font-size:17px;line-height:1.6}.component-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.component-rail figcaption{font-size:11px;margin-top:9px}.image-caption{font-size:8px;right:8px;bottom:8px;padding:5px 7px}.model-toolbar{display:block;padding-bottom:18px}.model-toolbar>span{display:block;margin-top:18px;font-size:10px}.model-filters{gap:3px}.model-filters button{padding:9px 13px;font-size:12px}.model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.model-viewport{height:140px}.model-item{padding-bottom:16px}.model-item h3{font-size:12px}.model-index{bottom:18px;font-size:9px}.model-footer{flex-direction:column;font-size:11px;gap:15px}}

.model-themes{display:flex;gap:7px;flex-wrap:wrap}.model-themes button{display:flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:5px;background:none;padding:8px 10px;color:#8491a3;font-size:11px;cursor:pointer}.model-themes button[aria-pressed=true]{border-color:#ffffff35;color:#e3e8ee}.model-themes i{width:9px;height:9px;border-radius:50%;display:block}.warm-swatch{background:#b98558}.default-swatch{background:#7d8799}@media(max-width:600px){.model-themes{margin-top:15px}.model-themes button{padding:8px 9px;font-size:11px}}
/* Page rhythm: product → finished demos → DIY → materials → installation. */
.header{height:76px}.hero{padding-top:38px}.hero-actions{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:26px}.hero-actions .primary-link{margin:0}h1{font-size:clamp(45px,5.2vw,74px);margin:19px 0 20px}.hero-stage{width:min(880px,90%);height:535px;margin-top:36px}.product-strip{margin-top:15px;padding-top:24px;padding-bottom:24px}.shell{padding-top:86px;padding-bottom:86px}.section-head{margin-bottom:34px}h2{font-size:clamp(32px,3.3vw,46px)}.diy-layout{gap:45px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}.diy-option strong{font-size:18px}.component-heading{margin-top:35px}.models{border-top:1px solid var(--line)}.experience{border-top:1px solid var(--line)}.model-toolbar{flex-wrap:wrap;gap:15px;padding-bottom:18px;scroll-margin-top:30px}.model-filters{gap:4px}.model-filters button{padding:9px 13px;font-size:12px}.category-count{font-size:10px;margin-left:6px;opacity:.6}.model-viewport{height:132px}.model-item{padding-bottom:16px}.model-item h3{font-size:12px;max-width:calc(100% - 23px);line-height:1.6}.model-index{bottom:19px;font-size:9px}.model-pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:25px}.model-pagination button{border:0;color:#8d9bae;background:none;padding:8px 11px;border-radius:5px;cursor:pointer;font-size:12px;min-height:34px}.model-pagination button:disabled{opacity:.3;cursor:default}.model-pagination button[aria-current=page]{background:#e5ebf2;color:#10151b}.model-pagination button:hover:not(:disabled):not([aria-current]){background:#ffffff0a;color:#fff}#model-pages{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.model-feedback{margin-top:15px}.model-footer{margin-top:14px}.demo-art{height:540px}.demo-card h3{font-size:28px}.start{padding-top:20px;padding-bottom:95px}.start-line{margin-bottom:55px}
@media(max-width:900px){.header nav{gap:19px}.hero-stage{width:88%;height:54vw}.shell{padding-top:65px;padding-bottom:65px}.diy-layout{grid-template-columns:1.3fr 1fr;gap:25px}.diy-option strong{font-size:16px}.model-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.model-viewport{height:145px}.demo-art{height:405px}.start{padding-top:15px}}
@media(max-width:600px){.header{height:70px}.hero{padding-top:30px}h1{font-size:clamp(35px,8.9vw,53px)}.hero-actions{gap:21px;flex-wrap:wrap;margin-top:23px}.hero-actions .primary-link{padding:12px 17px;font-size:11px;gap:16px}.hero-actions .secondary-link{font-size:11px;gap:10px}.hero-stage{width:96%;height:67vw;margin-top:38px}.product-strip{margin-top:35px}.shell{padding:55px 6%}.section-head{margin-bottom:26px}h2{font-size:32px}.diy-layout{grid-template-columns:1fr;gap:20px}.diy-option strong{font-size:17px}.component-heading{margin-top:29px}.model-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}.model-viewport{height:110px}.model-item h3{font-size:10px;max-width:100%;line-height:1.7}.model-index{display:none}.model-item{padding-bottom:11px}.model-filters{gap:3px}.model-filters button{padding:8px 10px;font-size:11px}.model-themes{margin-top:0}.model-pagination{gap:8px;flex-wrap:wrap}.model-pagination>button{font-size:11px;padding:7px 9px}#model-pages{order:3;width:100%;gap:3px}.model-pagination #model-pages button{font-size:11px;padding:7px 9px;min-height:32px}.demo-art,.phone-card .demo-art{height:auto;padding:25px 0}.start{padding-top:10px}.start h2{font-size:37px}}
/* Keep the entire opening composition inside the first viewport. */
.hero{height:calc(100svh - 76px);min-height:500px;max-height:1050px;display:flex;flex-direction:column;padding-top:clamp(16px,3svh,35px)}
.hero-copy{flex:none}.hero h1{font-size:clamp(36px,6.3svh,68px);line-height:1.2;margin:15px 0 16px}.hero-description{font-size:14px}.hero-actions{margin-top:20px}.hero-actions .primary-link{padding:12px 21px}.hero-stage{container-type:size;flex:1;min-height:0;width:min(940px,92%);height:auto;max-height:none;margin:22px auto 18px}
.hero-tablet{width:min(78cqw,calc((100cqh - 65px)*1.45));left:50%;top:4px;transform:translateX(-57%);animation:hero-complete-in 1.2s var(--ease) both}
.hero-phone{width:min(18cqw,calc((100cqh - 60px)*.459));left:calc(50% + min(29cqw,calc((100cqh - 65px)*.43)));right:auto;top:12%;transform:translateX(-50%);animation:hero-complete-in 1.2s .1s var(--ease) both}
.stage-caption{bottom:0;left:8%;right:8%}.stage-rule{inset:45% 0 auto}
@keyframes hero-complete-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.hero{height:calc(100svh - 70px);min-height:510px;max-height:830px;padding-top:22px}.hero h1{font-size:clamp(33px,8.9vw,46px);margin:18px 0}.hero-description{font-size:13px}.hero-actions{margin-top:22px;gap:18px}.hero-actions .primary-link{padding:11px 16px}.hero-stage{flex:1;width:96%;max-height:350px;margin-top:30px;margin-bottom:20px}.hero-tablet{width:min(80cqw,calc((100cqh - 45px)*1.45));padding:6px 9px}.hero-phone{width:min(23cqw,calc((100cqh - 40px)*.459));left:calc(50% + min(30cqw,calc((100cqh - 45px)*.43)));top:15%}.stage-caption{left:4%;right:4%;bottom:3px}}
@media(max-height:650px) and (min-width:601px){.hero{min-height:400px;padding-top:10px}.hero h1{font-size:34px;margin:10px 0}.hero-actions{margin-top:12px}.hero-stage{margin-top:12px;margin-bottom:12px}.hero .eyebrow{font-size:9px}.hero-description{font-size:12px}.hero-actions .primary-link{padding:9px 18px}}

/* Native anchors land on the content, without the section's decorative top gap.
   The model grid and pagination reserve their final geometry in the HTML. */
.shell{scroll-margin-top:-86px}
#start{scroll-margin-top:0}
.model-toolbar{scroll-margin-top:0}
@media(max-width:900px){.shell{scroll-margin-top:-65px}#start{scroll-margin-top:0}}
@media(max-width:600px){.shell{scroll-margin-top:-55px}#start{scroll-margin-top:0}.model-feedback{min-height:36px}}

/* A single, manually browsed row keeps the complete component library compact. */
.component-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}.component-controls>span{font-size:11px;color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums}.component-controls button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#bec7d3;cursor:pointer;transition:background .2s}.component-controls button:hover:not(:disabled){background:#ffffff0a}.component-controls button:disabled{opacity:.25;cursor:default}
.component-rail{--component-columns:6;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 75px)/6);gap:15px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#39424f transparent;padding:6px 0 15px}.component-rail figure{scroll-snap-align:start}.component-rail:focus-visible{outline:1px solid var(--accent);outline-offset:5px}.component-scene{aspect-ratio:520/300;border-radius:7px;background:#e9e1d3;display:flex;align-items:center;justify-content:center;gap:12px}.component-scene>img{width:28px;height:28px;background:transparent;opacity:.6}.component-scene span{display:flex;flex-direction:column;gap:5px}.component-scene strong{color:#414141;font-size:13px;font-weight:500;letter-spacing:2px}.component-scene small{color:#656565;font-size:8px;letter-spacing:3px}
@media(max-width:900px){.component-rail{--component-columns:3;grid-auto-columns:calc((100% - 30px)/3)}}
@media(max-width:600px){.component-heading{align-items:flex-start;flex-direction:column;gap:12px}.component-controls{align-self:flex-end}.component-rail{--component-columns:2;grid-auto-columns:calc((100% - 15px)/2)}}
/* Give the finished demos more of the viewport, with straight device frames. */
.experience{max-width:1480px;padding-left:3%;padding-right:3%}.demo-grid{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:34px}.demo-art{height:clamp(520px,51vw,710px)}.ipad-device{max-width:900px}.phone-device{width:clamp(220px,20vw,280px)}
@media(max-width:900px){.demo-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px}.demo-art{height:450px}.phone-device{width:190px}}
@media(max-width:600px){.experience{padding-left:4%;padding-right:4%}.demo-grid{grid-template-columns:1fr;gap:32px}.demo-art,.phone-card .demo-art{height:auto;padding:22px 0}.phone-device{width:min(240px,75vw)}}
/* Shared side controls for the component rail and model pages. */
.side-carousel{position:relative;padding:0 56px}.side-carousel>button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:76px;border:1px solid #ffffff16;border-radius:14px;background:#131a22;color:#d4dce7;font-size:25px;cursor:pointer;transition:background .2s,border-color .2s}.side-carousel>button:first-child{left:0}.side-carousel>button:last-child{right:0}.side-carousel>button:hover:not(:disabled){background:#25303d;border-color:#ffffff35}.side-carousel>button:disabled{opacity:.25;cursor:default}.model-pagination{justify-content:center}.component-controls{gap:0}.component-controls>span{margin:0}.model-viewport img{width:100%;height:100%;object-fit:contain}.component-scene{background:radial-gradient(ellipse at 60% 0%,#142029,transparent 70%),linear-gradient(#10161c,#080d11);border:1px solid #ffffff20;gap:0}.component-scene-pill{width:68%;display:flex;justify-content:center;align-items:center;gap:8px;border:1px solid #71787d;border-radius:50px;padding:8px 6px;background:linear-gradient(#454d53,#252c32);box-shadow:inset 0 0 9px #ffffff18}.component-scene-pill>img{width:23px;height:23px;background:transparent;filter:invert(.58);border-radius:0}.component-scene-pill strong{font-size:clamp(9px,1vw,16px);letter-spacing:2px;color:#9a9fa3;font-weight:400}.component-scene-pill small{font-size:6px;letter-spacing:2px;color:#8b949c}.component-scene span{gap:2px}
@media(max-width:600px){.side-carousel{padding:0 34px}.side-carousel>button{width:28px;height:66px;border-radius:10px;font-size:20px}.component-scene-pill{width:80%;gap:4px;padding:6px 3px}.component-scene-pill>img{width:16px;height:16px}.component-scene-pill strong{font-size:9px;letter-spacing:1px}.component-scene-pill small{font-size:5px;letter-spacing:1px}.model-grid{gap:0 6px}}
.component-scene{container-type:inline-size}.component-scene-pill{width:66%;gap:4cqw;padding:4cqw 3cqw}.component-scene-pill>img{flex:none;width:12cqw;height:12cqw}.component-scene-pill strong{font-size:6cqw;letter-spacing:.08em;white-space:nowrap}.component-scene-pill small{font-size:2.5cqw;letter-spacing:.18em;white-space:nowrap}
/* Quiet arrows: generous hit areas without a button frame. */
.side-carousel>button{border:0;border-radius:0;background:transparent;color:#8f9bab;font-size:24px;box-shadow:none;transition:color .2s,opacity .2s}.side-carousel>button:hover:not(:disabled){background:transparent;border-color:transparent;color:#f1f4f8}.side-carousel>button:disabled{opacity:.18}.side-carousel>button::before{content:"";position:absolute;inset:0 -6px}.side-carousel>button:focus-visible{outline:1px solid var(--accent);outline-offset:0;border-radius:4px}
/* Preserve supplied screenshots; the screen viewport hides editor chrome. */
.hero-tablet .hero-slides{aspect-ratio:1632/1138;touch-action:pan-y}.hero-tablet .hero-slide{position:absolute;max-width:none;width:156.862745%;height:111.68717%;left:-28.431373%;top:-10.017575%;object-fit:fill;filter:contrast(1.08);opacity:0;transition:opacity .8s ease;pointer-events:none}.hero-tablet .hero-slide.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-tablet .hero-slide{transition:none}}
/* Phone: retain the original portrait, followed by two supplied dashboard views. */
.hero-phone .hero-phone-slides{aspect-ratio:441/960;touch-action:pan-y}.hero-phone .hero-slide{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .8s ease;pointer-events:none}.hero-phone .hero-slide.is-editor-capture{inset:auto;width:488.549618%;height:112.081129%;left:-194.274809%;top:-10.141093%}.hero-phone .hero-slide.is-active{opacity:1}.hero-phone .speaker{z-index:2}
@media(prefers-reduced-motion:reduce){.hero-phone .hero-slide{transition:none}}
/* Make DIY choices legible: real results, their ingredients, and optional layout annotations. */
.diy-composition{min-width:0}.diy-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:11px;color:#8995a5}.diy-preview-header button{border:0;padding:7px 0;background:none;color:#c5cdd7;font-size:11px;cursor:pointer}.diy-preview-header button span{margin-left:9px;color:var(--accent)}.diy-preview-header button[aria-pressed=true]{color:var(--accent)}.diy-option em{display:inline-block;font-size:10px;letter-spacing:1px;font-style:normal;margin-top:13px;color:#657387;transition:color .3s}.diy-option.active em{color:var(--accent)}.diy-option .option-arrow{align-self:center}.diy-recipe{display:flex;align-items:center;gap:16px;margin-top:17px;font-size:11px;line-height:1.8}.diy-recipe>span{color:#6f7d90;flex:none}#diy-ingredients{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#c0cad6}#diy-ingredients i{font-style:normal;color:#596574;font-size:10px}.diy-freedom{display:flex;align-items:center;gap:24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:#95a0af}.diy-freedom>span{color:#647287;font-size:11px}.diy-freedom p{display:flex;gap:19px;flex-wrap:wrap}.diy-freedom i{font-style:normal;color:#485260}.diy-zones{position:absolute;inset:0;background:#060c1740;pointer-events:none}.diy-zones[hidden]{display:none}.diy-zone{position:absolute;border:1px solid #e4bd777a;border-radius:5px;background:#e4bd7708;animation:zone-in .45s ease both}.diy-zone b{position:absolute;top:7px;left:7px;background:#111a25ed;border:1px solid #ffffff16;padding:4px 7px;color:#e4c58f;font-size:10px;font-weight:400;white-space:nowrap}.zone-info{left:1%;top:1%;width:20%;height:24%}.zone-nav{left:1%;top:26%;width:20%;height:36%;animation-delay:.07s}.zone-chart{left:1%;top:63%;width:20%;height:35%;animation-delay:.14s}.zone-main{left:23%;top:3%;width:75%;height:94%;animation-delay:.21s}.diy-preview[data-layout=lights] .zone-main,.diy-preview[data-layout=devices] .zone-main{top:5%;height:92%}.diy-zones:not([hidden])~.image-caption{display:none}@keyframes zone-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:900px){.diy-layout{grid-template-columns:1.45fr 1fr;gap:25px}.diy-recipe{align-items:flex-start;flex-direction:column;gap:5px}.diy-option small{font-size:12px}.diy-zone b{font-size:8px;left:3px;top:3px;padding:3px 4px}}
@media(max-width:600px){.diy-layout{grid-template-columns:1fr}.diy-preview-header{font-size:10px;gap:8px}.diy-preview-header button{font-size:10px}.diy-recipe{font-size:10px}.diy-freedom{align-items:flex-start;flex-direction:column;gap:10px}.diy-freedom p{font-size:11px;gap:10px}.diy-zone b{font-size:6px;padding:2px 3px}.diy-option small{font-size:13px}}
@media(prefers-reduced-motion:reduce){.diy-zone{animation:none}}
/* Restrained graphite hardware: a fine metal edge around a dark inner bezel. */
.hero-tablet{--device-radius:clamp(14px,2vw,24px);padding:clamp(7px,.8vw,11px) clamp(9px,1vw,14px);border-radius:var(--device-radius);border:1px solid #858d976b;background:linear-gradient(145deg,#616a75 0%,#303842 12%,#131921 40%,#202833 78%,#4b5664 100%);box-shadow:inset 0 1px 1px #ffffff45,inset 0 -1px 1px #030609,0 3px 4px #0009,0 22px 45px -15px #000c,0 50px 85px -40px #000b}.hero-tablet::before,.hero-phone::before{content:"";position:absolute;inset:3px;border:1px solid #a7b3c022;border-radius:calc(var(--device-radius) - 3px);pointer-events:none}.hero-tablet .screen{border-radius:calc(var(--device-radius) - 8px);box-shadow:0 0 0 1px #03070cad,0 1px 0 #c4d5e51a;background:#10151c}.hero-tablet .camera{left:4px;width:3px;height:3px;background:radial-gradient(circle at 35% 35%,#334456,#0a1018 70%);box-shadow:0 0 0 1px #080d14,0 0 0 2px #8191a517}.hero-phone{--device-radius:clamp(17px,2.25vw,30px);padding:5px;border-radius:var(--device-radius);border:1px solid #a0adbc8c;background:linear-gradient(135deg,#8995a4 0%,#4b5665 8%,#161e28 30%,#263140 68%,#707e8d 100%);box-shadow:inset 0 1px 1px #ffffff65,inset 0 -1px 1px #04080e,0 2px 3px #0009,-10px 16px 35px -12px #000d,0 35px 65px -28px #000c}.hero-phone .screen{border-radius:calc(var(--device-radius) - 5px);box-shadow:0 0 0 1px #05090f;background:#111820}.hero-phone .speaker{top:5px;width:29%;height:6px;background:#080c12;border:1px solid #020407;border-radius:10px;box-shadow:0 1px 0 #ffffff0d}.hero-phone .speaker::after{content:"";position:absolute;right:3px;top:1px;width:2px;height:2px;border-radius:50%;background:#253b51;box-shadow:0 0 1px #6e92ba55}
@media(max-width:600px){.hero-tablet{padding:6px 8px}.hero-tablet .screen{border-radius:calc(var(--device-radius) - 6px)}.hero-tablet .camera{left:2px;width:2px;height:2px}.hero-phone{padding:4px}.hero-phone .screen{border-radius:calc(var(--device-radius) - 4px)}.hero-phone .speaker{top:4px;height:5px}}