.experience{padding:26px 0 56px;overflow:hidden}
.experience__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px}
.experience__intro h1{font-family:var(--f-display);font-size:clamp(36px,4.2vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.04;margin-top:10px;max-width:800px}
.experience__intro h1 br{display:none}.experience__intro h1 em:before{content:" "}
.experience__intro h1 em{font-style:normal;color:#8a6030}
.experience__intro>p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:300px;padding-bottom:5px}
.home-demo{border:1px solid #d8d2c8;border-radius:24px;background:#eee9e0;overflow:hidden;box-shadow:0 22px 60px -40px #78644966}
.demo-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px}
.demo-stage{height:clamp(440px,36vw,560px);position:relative;min-width:0;background:radial-gradient(ellipse at 48% 48%,#fbf7ef,#e9e3d7 75%);overflow:hidden;isolation:isolate;transition:background .8s}
.home-demo[data-sky="night"] .demo-stage{background:radial-gradient(ellipse at 48% 48%,#c8c4bd,#8a9399 85%)}
.demo-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;position:absolute;inset:0}
.demo-stage canvas:active{cursor:grabbing}
.demo-stage__label{position:absolute;left:24px;top:20px;pointer-events:none;z-index:2}
.demo-stage__label small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#655e52}
.demo-stage__label p{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.25;margin-top:3px}
.demo-stage__label>span{font-size:12px;color:#655e52;display:block;margin-top:4px}
.demo-stage__roof{position:absolute;right:18px;top:20px;z-index:3;border:1px solid #d3cec4;background:#f7f4eced;border-radius:999px;min-height:40px;padding:0 14px;font-size:12px;font-weight:600}
.camera-tools{position:absolute;bottom:20px;right:18px;display:flex;gap:5px;z-index:3;padding:5px;border-radius:999px;border:1px solid #d7d0c4;background:#faf7f0e8;box-shadow:0 4px 16px #40382a0d}
.camera-tools button{border:0;background:transparent;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:20px;line-height:1}
.camera-tools button:hover{background:#eadfc8}.camera-tools button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.demo-instruction{position:absolute;bottom:30px;left:24px;font-size:11px;color:#665e50;pointer-events:none}
.device-point{position:absolute;z-index:4;transform:translate(-50%,-50%);border:1px solid #fff;background:#fff8;min-height:36px;padding:4px 10px 4px 5px;border-radius:999px;display:flex;gap:6px;align-items:center;box-shadow:0 3px 15px #24242433;font-size:11px;white-space:nowrap;backdrop-filter:blur(8px)}
.device-point i{display:block;width:23px;height:23px;border-radius:50%;background:#1f2328;color:#fff;font-style:normal;display:grid;place-items:center;font-size:12px}
.device-point[data-active="true"] i{background:#f0a93b;color:#1f2328}
.device-point:hover{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.demo-panel{padding:24px 22px;background:#fbfaf6;border-left:1px solid #d8d2c8;display:flex;flex-direction:column;min-width:0}
.demo-panel__eyebrow{color:#706b61;display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.demo-panel h2{font-family:var(--f-display);font-size:25px;line-height:1.1;letter-spacing:-.02em;margin:14px 0 18px;max-width:210px}
.overview-controls p{font-size:14px;color:#676256;line-height:1.6}
.overview-controls button{display:flex;align-items:center;gap:10px;margin:20px 0 24px;background:#1f2328;color:#fff;border:0;border-radius:999px;padding:11px 16px;font-size:13px;font-weight:600;min-height:44px}
.overview-controls button span{font-size:18px}
.overview-controls ol{display:grid;gap:12px;counter-reset:step}
.overview-controls li{display:flex;gap:10px;font-size:12px;line-height:1.4;color:#696256;counter-increment:step}
.overview-controls li:before{content:"0" counter(step);font-size:10px;min-width:22px;color:#a2783a;font-weight:700;line-height:1.7}
.demo-control{margin-bottom:20px}
.demo-control label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:500;margin-bottom:7px}
.demo-control output{font-weight:700;font-size:12px;color:#6e572f}
.demo-control input,.day-control input{display:block;width:100%;height:20px;margin:0;accent-color:#bd873c;cursor:pointer}
.demo-control__ends{display:flex;justify-content:space-between;color:#80796d;font-size:10px;margin-top:3px}
.demo-extra{padding-top:16px;border-top:1px solid #e4dfd5}
.demo-extra__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.demo-extra h3{font-size:13px;font-weight:600}.demo-extra p{font-size:11px;color:#70695d;line-height:1.5;margin-top:8px}
.device-switch{width:44px;min-width:44px;height:26px;border:0;border-radius:999px;background:#d6d1c6;padding:3px;display:block;transition:background .2s}
.device-switch:before{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s}
.device-switch[aria-checked="true"]{background:#c89345}.device-switch[aria-checked="true"]:before{transform:translateX(18px)}
.demo-extra small{display:block;font-size:10px;margin-top:7px;color:#6e572f}
.device-status{border-radius:7px;background:#eee9df;padding:7px 10px;font-size:10px;color:#5f5b51;margin-top:16px;line-height:1.5}
.day-control{border-top:1px solid #e4dfd5;padding-top:15px;margin-top:auto}
.day-control label{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-bottom:7px;color:#655e52}
.day-control span{font-weight:600}
.room-strip{display:flex;gap:6px;padding:14px 18px;background:#fbfaf6;border-top:1px solid #d8d2c8;overflow-x:auto;scrollbar-width:thin}
.room-strip button{flex:1 0 auto;border:1px solid transparent;background:transparent;min-height:44px;padding:6px 13px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;white-space:nowrap;font-weight:600}
.room-strip button i{width:9px;height:9px;border-radius:50%;background:var(--room-color,#c4bbab)}
.room-strip button[aria-pressed="true"]{border-color:#d0c4af;background:#eae4d8;color:#584429}.room-strip button:hover{background:#efebe3}
.scene-strip{margin-top:18px;display:flex;align-items:center;gap:24px;justify-content:space-between}
.scene-strip__buttons{display:flex;gap:6px;flex-wrap:wrap}
.scene-strip__buttons button{min-height:44px;padding:9px 15px;border-radius:999px;background:transparent;border:1px solid #d6d1c6;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.scene-strip__buttons button[aria-pressed="true"]{background:#1f2328;border-color:#1f2328;color:#fff}.scene-strip__buttons button:hover{border-color:#8a7960}
.scene-strip__buttons button>span{font-size:17px}
.scene-caption{display:flex;gap:13px;align-items:center;min-width:260px;max-width:355px}
.scene-caption time{border-right:1px solid #d5cdbf;padding-right:13px;font-size:20px;font-family:var(--f-display);font-weight:600;white-space:nowrap;min-width:72px}
.scene-caption strong{font-size:12px;display:block}.scene-caption p{font-size:11px;line-height:1.5;color:#726a5d;margin-top:2px}
.demo-footnote{font-size:10px;color:#736c60;margin-top:17px;display:flex;justify-content:space-between;gap:14px}
.demo-footnote a{text-decoration:none;color:#584429;font-weight:600}
.render-message{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#eee9e0;z-index:6;gap:8px;padding:30px;font-size:14px;color:#665e50}
.render-message img{width:min(450px,100%);border-radius:12px;margin:0 auto 12px}.render-message strong{font-size:18px;font-family:var(--f-display)}
@media(min-width:1500px){.experience>.wrap{max-width:1440px}.demo-stage{height:590px}}
@media(max-width:1000px){.scene-strip{align-items:flex-start;gap:16px;flex-direction:column}.scene-caption{max-width:none}.demo-layout{grid-template-columns:minmax(0,1fr) 260px}.demo-panel{padding:22px 18px}.demo-stage{height:480px}.experience__intro>p{max-width:250px;font-size:14px}.room-strip{padding:10px;gap:2px}.room-strip button{padding:6px 10px}}
@media(max-width:700px){.experience{padding:26px 0 40px}.experience__intro{display:block;margin-bottom:20px}.experience__intro h1{font-size:40px;max-width:510px}.experience__intro>p{max-width:430px;margin-top:14px;font-size:14px}.demo-layout{grid-template-columns:1fr}.demo-stage{height:410px}.demo-panel{border-left:0;border-top:1px solid #d8d2c8;padding:20px;display:block}.demo-panel h2{font-size:24px;max-width:none;margin:7px 0 15px}.room-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.demo-control{margin-bottom:14px}.demo-extra{padding-top:0;border:0}.device-status{margin-top:4px;grid-column:1/-1}.day-control{margin-top:16px;padding-top:12px}.day-control input{max-width:100%}.overview-controls>p{font-size:13px}.overview-controls button{margin:12px 0 16px}.overview-controls ol{display:flex;gap:14px;flex-wrap:wrap}.overview-controls li{max-width:135px;font-size:11px}.demo-stage__label{left:16px;top:14px}.demo-stage__label p{font-size:17px}.demo-stage__label>span{max-width:170px;font-size:10px}.demo-stage__roof{top:14px;right:12px;font-size:10px;min-height:36px;padding:0 10px}.demo-instruction{bottom:13px;left:16px;font-size:10px}.camera-tools{bottom:34px;right:12px}.camera-tools button{width:32px;height:32px}.room-strip{padding:10px 12px}.room-strip button{flex:0 0 auto}.scene-strip__buttons button{padding:7px 12px}.demo-footnote{display:block}.demo-footnote a{display:inline-block;margin-top:6px}.device-point{font-size:10px;padding-right:7px;gap:4px}}
@media(max-width:380px){.experience__intro h1{font-size:34px}.demo-stage{height:355px}.room-controls{gap:0 14px}.demo-panel{padding:17px}.scene-strip__buttons{gap:5px}.scene-strip__buttons button{font-size:11px;padding:7px 10px}.scene-caption time{font-size:18px}.demo-stage__label>span{max-width:155px}.demo-stage__roof{font-size:9px}}
@media(prefers-reduced-motion:reduce){.demo-stage,.device-switch,.device-switch:before{transition:none}}
/* Keep the view as tall as its controls, with no unused strip beneath the canvas. */
@media(min-width:701px){
  .demo-stage{height:auto;min-height:440px}
  .demo-panel{padding:20px}
  .demo-panel h2{font-size:23px;margin:10px 0 14px}
  .demo-control{margin-bottom:12px}
  .demo-control label{margin-bottom:3px}
  .demo-control__ends{margin-top:0;line-height:1.2}
  .demo-extra{padding-top:12px}
  .demo-extra p{margin-top:5px;line-height:1.4}
  .demo-extra small{margin-top:3px}
  .device-status{padding:5px 8px;margin-top:10px}
  .day-control{padding-top:12px;margin-top:12px}
}
.experience>.wrap>.scene-strip{margin-top:0;margin-bottom:16px}
.room-strip{border-top:0;border-bottom:1px solid #d8d2c8}
@media(min-width:701px) and (max-width:1000px){.demo-instruction{bottom:75px;font-size:10px}}
@media(max-width:700px){
  .scene-strip{gap:9px}
  .scene-strip__buttons{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:3px;scrollbar-width:thin}
  .scene-strip__buttons button{flex:0 0 auto}
  .scene-caption{min-width:0;gap:10px}
  .scene-caption time{font-size:15px;min-width:55px;padding-right:10px}
  .scene-caption p{display:none}
  .experience>.wrap>.scene-strip{margin-bottom:12px}
  .room-strip{scrollbar-width:none}
}