/* Two independent glass rails around an unobstructed model viewport. */
:root{--left-rail:236px;--right-rail:290px;--gap:18px;--glow-x:60%;--glow-y:42%}
body{isolation:isolate;background:#0b101a}
#scene-aura{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 60% 35%,#2932475c,transparent 70%)}
#scene-aura::before,#scene-aura::after{content:'';position:absolute;width:70vw;height:80vh;left:var(--glow-x);top:var(--glow-y);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#cf96672b,transparent 67%);transition:left 1.3s ease-out,top 1.3s ease-out,background 1.5s;will-change:transform}
#scene-aura::after{left:calc(100% - var(--glow-x));top:calc(95% - var(--glow-y));background:radial-gradient(ellipse,#6579da35,transparent 68%);width:85vw;height:100vh}
body[data-time=morning] #scene-aura::before{background:radial-gradient(ellipse,#68c4c32c,transparent 65%)}
body[data-time=dusk] #scene-aura::before{background:radial-gradient(ellipse,#ec98663d,transparent 65%)}
body[data-time=dusk] #scene-aura::after{background:radial-gradient(ellipse,#bd6da22c,transparent 65%)}
body[data-time=night] #scene-aura::before{background:radial-gradient(ellipse,#8d73d334,transparent 65%)}
body[data-time=night] #scene-aura::after{background:radial-gradient(ellipse,#447cb73c,transparent 65%)}
#viewport{inset:96px calc(var(--right-rail) + var(--gap) + 10px) 137px calc(var(--left-rail) + var(--gap) + 10px)}
#panel,#display-panel{position:absolute;top:108px;bottom:22px;padding:19px 15px;overflow:auto;border:1px solid #c7d8ff24;border-top-color:#e6eeff40;border-radius:24px;background:linear-gradient(145deg,#46506a45,#161e2f94 50%,#171c2ba8);box-shadow:0 20px 48px #0004,inset 0 1px 0 #ffffff0b;backdrop-filter:blur(24px) saturate(135%);scrollbar-width:thin;scrollbar-color:#b8c5e92b transparent;transition:transform .22s,opacity .22s;z-index:3}
#panel{left:var(--gap);width:var(--left-rail)}
#display-panel{right:var(--gap);width:var(--right-rail)}
#panel header,#display-panel header{margin:0 0 18px}
#panel header h2,#display-panel header h2{margin:0;color:#e9edf8;font-size:15px;font-weight:600;letter-spacing:1px}
#panel details:first-of-type{border:0;padding-top:0}
#panel footer{margin-top:16px;line-height:1.8;color:#939dae}
#home-bar{top:23px;left:24px;right:24px;gap:12px}
#home-bar h1{font-size:24px;letter-spacing:2px;margin:0 0 5px}
#home-bar .eyebrow{display:none}
#home-bar p{font-size:11px}
.home-symbol{background:linear-gradient(145deg,#6f8cc946,#35446533);border-color:#9cbeff44;box-shadow:inset 0 1px 1px #fff3}
#quick-power{width:48px;height:48px;padding:13px}
#panel-toggle,body.panel-hidden #panel-toggle{top:39px;left:250px;right:auto}
#display-toggle{position:absolute;top:39px;right:88px;padding:8px 11px;font-size:10px;background:#a4baff0e;border-color:#a9c1ed2b;z-index:4}
body.panel-hidden #panel{transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none}
body.display-hidden #display-panel{transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none}
body.panel-hidden #viewport{left:12px}body.display-hidden #viewport{right:12px}
#time-dock,body.panel-hidden #time-dock{left:calc(50% + (var(--left-rail) - var(--right-rail))/2);bottom:25px;gap:8px;padding:8px;border-radius:26px;background:#33415b2e;backdrop-filter:blur(22px) saturate(145%);border-color:#c3d7ff27;box-shadow:0 16px 45px #0004,inset 0 1px 0 #fff1}
#time-dock button{width:88px;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:12px 8px;text-align:center;background:linear-gradient(145deg,#ffffff0a,#ffffff02);box-shadow:inset 0 1px 0 #fff1;border-radius:19px}
#time-dock strong{font-size:12px;align-self:center}#time-dock .time-icon{font-size:26px;line-height:27px}
#time-dock [data-time=morning]{--accent:119,214,198}#time-dock [data-time=noon]{--accent:125,177,255}#time-dock [data-time=dusk]{--accent:242,168,125}#time-dock [data-time=night]{--accent:177,148,244}
#time-dock button .time-icon{color:rgb(var(--accent));filter:drop-shadow(0 0 8px rgba(var(--accent),.25))}
#time-dock button[aria-pressed=true]{background:linear-gradient(145deg,rgba(var(--accent),.29),rgba(var(--accent),.10));border-color:rgba(var(--accent),.65);box-shadow:inset 0 1px 2px #ffffff26,0 4px 22px rgba(var(--accent),.12)}
#time-dock button:hover{background-color:#ffffff0b}
.space-details button{--accent:134,177,243;border-color:rgba(var(--accent),.19);background:rgba(var(--accent),.045)}
.space-details button:nth-child(3n){--accent:125,205,188}.space-details button:nth-child(3n + 1){--accent:193,164,231}
.space-details button.active{background:linear-gradient(135deg,rgba(var(--accent),.28),rgba(var(--accent),.10));border-color:rgba(var(--accent),.65);color:#f1f5ff;box-shadow:inset 0 1px 1px #fff2}
.tabs{background:#a9bce60b;border-color:#b5c5e424;top:-19px}
.tabs [aria-selected=true]{background:linear-gradient(145deg,#839fe144,#5c70ad25);box-shadow:inset 0 1px 0 #c7d7ff38;color:#d7e7ff}
#walk-toggle{background:linear-gradient(125deg,#4c9d9952,#506f8d25);border-color:#7cc3c35e;color:#c5eee5}
.room-control{background:linear-gradient(145deg,#c7d4fa08,#ffffff02);border-color:#c7d4fa1c}
.lamp-card.lamp-on{background:linear-gradient(125deg,#d6a36733,#987ca01a);border-color:#dab38365;box-shadow:inset 0 1px 0 #ffe2b71c,0 3px 15px #bd916708}
.lamp-on .lamp-icon{background:linear-gradient(135deg,#ffe8c3,#d9a86e);box-shadow:0 0 18px #edb46c38,inset 0 1px 1px #fff8}
.oak-swatch{background:repeating-linear-gradient(0deg,#b47955 0 2px,#c58f6b 2px 5px,#b27b58 5px 6px)}
.material-swatches{margin-bottom:7px}.material-swatches small{font-size:9px}
#caption,body.panel-hidden #caption{left:calc(var(--left-rail) + 30px);bottom:126px;max-width:calc(100vw - var(--left-rail) - var(--right-rail) - 60px)}
body.panel-hidden #caption{left:24px}
#render-state{display:none}#view-name{color:#b4c2da}#light-badge{background:#798daf13;color:#aebbd2}
#selection{top:108px;right:calc(var(--right-rail) + 30px);max-width:260px;z-index:2;background:#263149bd;backdrop-filter:blur(18px)}
body.display-hidden #selection{right:24px}
#walk-help{top:98px;left:calc(var(--left-rail) + 30px);right:calc(var(--right-rail) + 30px);z-index:2}
#crosshair{left:calc(50% + (var(--left-rail) - var(--right-rail))/2);top:calc(50% - 20px)}
body.panel-hidden #crosshair{left:calc(50% - var(--right-rail)/2)}body.display-hidden #crosshair{left:calc(50% + var(--left-rail)/2)}
body.panel-hidden.display-hidden #crosshair{left:50%}
@media(min-width:1600px){:root{--left-rail:250px;--right-rail:310px;--gap:24px}}
@media(max-width:1100px){:root{--left-rail:208px;--right-rail:258px;--gap:12px}#panel,#display-panel{padding:17px 13px}#panel-toggle,body.panel-hidden #panel-toggle{left:228px}#time-dock button{width:70px;min-height:70px}#time-dock{gap:6px}}
@media(max-width:900px){#viewport{inset:94px 0 130px}#panel,#display-panel{width:min(290px,calc(100vw - 30px));top:102px;bottom:133px}#panel{left:15px}#display-panel{right:15px}#time-dock,body.panel-hidden #time-dock{left:50%;width:auto;max-width:calc(100vw - 26px)}#caption,body.panel-hidden #caption{left:20px;max-width:calc(100vw - 40px);bottom:124px}#selection{right:16px;top:108px}#crosshair,body.panel-hidden #crosshair,body.display-hidden #crosshair{left:50%}#walk-help{left:16px;right:16px}#home-bar h1{font-size:21px}}
@media(max-width:600px){#home-bar{left:16px;top:17px;gap:9px}#home-bar h1{font-size:18px}#home-bar p{font-size:9px}.home-symbol{width:37px;height:42px}#quick-power{width:40px;height:40px;padding:11px}#panel-toggle,body.panel-hidden #panel-toggle{top:72px;left:16px;right:auto;padding:6px 12px}#display-toggle{top:72px;right:16px;padding:6px 12px}#panel,#display-panel{top:110px}#viewport{top:105px}#time-dock button{width:67px;min-height:67px;gap:6px}#time-dock{bottom:20px;border-radius:23px}#time-dock strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){#scene-aura::before,#scene-aura::after{transition:none}button,input,#panel,#display-panel{transition:none}}
