:root{
  --status-green:#5ee494;
  --status-red:#f07e69;
  --status-amber:#ecbf66;
  --ui-line:rgba(255,255,255,.14);
  --ui-bg-top:rgba(18,25,40,.94);
  --ui-bg-bottom:rgba(8,13,23,.92);
  --sky-top:#08162f;
  --sky-mid:#17426d;
  --sky-bottom:#b7d0df;
  --night-factor:1;
  --ambient-brightness:1;
  --ambient-saturation:1;
  --cloud-opacity:.28;
  --roof-light-opacity:1;
  --roof-beam-opacity:.56;
  --wall-beam-opacity:.82;
  --ground-reflection-opacity:.42;
  --window-warm-opacity:.82;
  --window-warm-closed-opacity:.42;
  --side-warm-closed-opacity:.30;
  --entrance-reflection-opacity:.58;
  --cloud-back-opacity:.15;
  --cloud-mid-opacity:.20;
  --horizon-opacity:.18;
  --parallax-x:0px;
  --parallax-y:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.02,.25,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#071a37}
body{
  font-family:var(--font-ar,'GE SS Two',sans-serif);
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
.en{font-family:var(--font-en,'Barlow',sans-serif);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

.scene-root{
  position:relative;
  width:100%;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  isolation:isolate;
  background:#071a37;
}
.sky,.visual-stage{position:absolute;inset:0}
.sky{z-index:0;overflow:hidden}
.visual-stage{z-index:2;pointer-events:none}

.sky-gradient{
  position:absolute;inset:-4%;
  background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-bottom) 100%);
  transition:background 1s linear;
}
.sky-gradient::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 103%,rgba(255,255,255,.08),transparent 33%),
    linear-gradient(to bottom,transparent 40%,rgba(6,18,38,.035) 72%,rgba(6,18,38,.16));
}
.solar-haze{
  position:absolute;z-index:1;width:min(52vw,820px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,225,155,.42) 0%,rgba(255,184,104,.20) 28%,transparent 70%);
  filter:blur(12px);opacity:0;pointer-events:none;will-change:left,top,opacity;
}
.stars{position:absolute;inset:0;opacity:var(--night-factor);transition:opacity .8s;pointer-events:none}
.star{
  position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);
  box-shadow:0 0 8px rgba(255,255,255,.62);animation:twinkle var(--d) ease-in-out var(--delay) infinite alternate;
}
.star:nth-child(3n){background:#d8e7ff}
.star:nth-child(5n){box-shadow:0 0 14px rgba(255,255,255,.74)}
@keyframes twinkle{from{opacity:calc(var(--o)*.35);transform:scale(.72)}to{opacity:var(--o);transform:scale(1.18)}}

.celestial{
  position:absolute;z-index:2;width:clamp(64px,5vw,110px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);will-change:left,top,opacity;pointer-events:none;
  transition:opacity .5s linear,left .9s linear,top .9s linear;
}
.celestial-sun{background:#fff1b5;box-shadow:0 0 24px #ffd878,0 0 78px rgba(255,221,132,.66),0 0 170px rgba(255,196,88,.34)}
.celestial-moon{background:radial-gradient(circle at 35% 30%,#fffdf1 0 18%,#f0ead8 45%,#cbc7bc 100%);box-shadow:0 0 24px rgba(255,255,235,.48),0 0 88px rgba(177,208,255,.27)}
.moon-crater{position:absolute;border-radius:50%;background:rgba(148,146,141,.16)}
.moon-crater.m1{width:20%;height:20%;left:22%;top:25%}
.moon-crater.m2{width:13%;height:13%;right:24%;top:46%}
.moon-crater.m3{width:16%;height:16%;left:42%;bottom:20%}

.cloud-lane{position:absolute;inset-inline:-30%;width:170%;pointer-events:none;mix-blend-mode:screen;transition:opacity .8s}
.cloud-lane--back{top:7%;filter:blur(.6px);opacity:var(--cloud-back-opacity)}
.cloud-lane--mid{top:18%;opacity:var(--cloud-mid-opacity)}
.cloud-lane--front{top:31%;opacity:var(--cloud-opacity)}
.cloud-track{display:flex;width:max-content;gap:clamp(85px,9vw,200px);will-change:transform}
.cloud-track svg{width:clamp(210px,23vw,420px);height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.08))}
.cloud-lane--back .cloud-track{animation:cloudMove 82s linear infinite}
.cloud-lane--mid .cloud-track{animation:cloudMove 57s linear infinite reverse}
.cloud-lane--front .cloud-track{animation:cloudMove 43s linear infinite}
@keyframes cloudMove{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}

.horizon-shape{
  position:absolute;bottom:0;width:23vw;min-width:220px;height:19vh;min-height:110px;background:#d8dde2;opacity:var(--horizon-opacity);
  clip-path:polygon(0 100%,0 40%,14% 40%,14% 28%,29% 28%,29% 52%,45% 52%,45% 36%,59% 36%,59% 60%,100% 60%,100% 100%);
  transition:opacity 1s linear;
}
.horizon-shape--left{left:-2vw}
.horizon-shape--right{right:-2vw;transform:scaleX(-1)}

.scene-header{
  position:absolute;z-index:34;top:max(18px,env(safe-area-inset-top));left:clamp(18px,3vw,42px);right:clamp(18px,3vw,42px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;pointer-events:none;
}
.scene-logo{pointer-events:auto;display:block;width:100px;padding:0;border:0;background:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.scene-logo img{display:block;width:100%;height:auto}
.scene-meta{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(7,12,21,.20);backdrop-filter:blur(15px);font-size:15px;font-weight:760;color:rgba(255,255,255,.94);
  box-shadow:0 10px 34px rgba(0,0,0,.10);
}
.scene-meta time{font-size:17px;font-weight:800}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--status-green);box-shadow:0 0 0 5px rgba(89,219,145,.12);animation:livePulse 2.2s ease-in-out infinite}
.meta-sep{opacity:.36}
@keyframes livePulse{50%{box-shadow:0 0 0 11px rgba(89,219,145,0)}}

.building-stage{
  position:absolute;inset:0;
  transform:translate3d(var(--parallax-x),var(--parallax-y),0);
  filter:brightness(var(--ambient-brightness)) saturate(var(--ambient-saturation)) contrast(1.05) drop-shadow(0 20px 34px rgba(0,0,0,.12));
  transition:filter .9s var(--ease),transform .22s ease-out;
  will-change:transform,filter;
}
.building-stage>svg{display:block;width:100%;height:100%;overflow:visible}
.ambient-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 46%,rgba(5,11,23,.04) 77%,rgba(4,8,17,.15) 114%);pointer-events:none}

#roof-lights,#wall-lights,#roof-light-beams,#wall-light-beams,#ground-reflections,#entrance-reflection,
#upper-left-warmth,#upper-right-warmth,#lower-left-warmth,#lower-right-warmth,#side-entrance-warmth,
#interior-scene,#closure-chain,#glass-sheen{transition:opacity .55s var(--ease),transform .72s var(--ease-io)}
#door-left,#door-right,#closure-chain{transform-box:fill-box}
#closure-chain{transform-origin:center}
#door-left,#door-right{transform-box:fill-box;transition:transform .72s var(--ease-io),opacity .4s var(--ease)}
#door-left{transform-origin:left center}
#door-right{transform-origin:right center}
#closed-hardware,#interior-dark-overlay{transition:opacity .35s var(--ease)}
#glass-sheen{animation:glassBreath 5.5s ease-in-out infinite alternate}
@keyframes glassBreath{from{opacity:.10}to{opacity:.24}}
.ac-fan{transform-box:view-box}
.scene-root[data-power="on"] .ac-fan{animation:acSpin 9s linear infinite}
@keyframes acSpin{to{transform:rotate(360deg)}}
@keyframes lampPulse{0%,100%{opacity:.94}50%{opacity:1}}

.scene-root[data-gym="open"] #door-left{transform:translateX(-61px) skewY(-5deg)}
.scene-root[data-gym="open"] #door-right{transform:translateX(61px) skewY(5deg)}
.scene-root[data-gym="open"] #closed-hardware{opacity:0}
.scene-root[data-gym="open"] #closure-chain{opacity:0;transform:scale(.84)}
.scene-root[data-gym="closed"] #door-left,.scene-root[data-gym="closed"] #door-right{transform:translateX(0)}
.scene-root[data-gym="closed"] #closed-hardware{opacity:1}
.scene-root[data-gym="closed"] #closure-chain{opacity:1;transform:scale(1.14)}
.scene-root[data-gym="closed"] #interior-dark-overlay{opacity:.96}
.scene-root[data-gym="closed"] #interior-scene{opacity:0!important}

.scene-root[data-power="on"] #roof-lights,.scene-root[data-power="on"] #wall-lights{opacity:var(--roof-light-opacity)}
.scene-root[data-power="on"] #roof-light-beams{opacity:var(--roof-beam-opacity)}
.scene-root[data-power="on"] #wall-light-beams{opacity:var(--wall-beam-opacity)}
.scene-root[data-power="on"] #ground-reflections{opacity:var(--ground-reflection-opacity)}
.scene-root[data-power="on"] #roof-lights rect,.scene-root[data-power="on"] #wall-lights circle{animation:lampPulse 3.8s ease-in-out infinite}
.scene-root[data-power="off"] #roof-lights,.scene-root[data-power="off"] #wall-lights,.scene-root[data-power="off"] #roof-light-beams,.scene-root[data-power="off"] #wall-light-beams,.scene-root[data-power="off"] #ground-reflections,.scene-root[data-power="off"] #upper-left-warmth,.scene-root[data-power="off"] #upper-right-warmth,.scene-root[data-power="off"] #lower-left-warmth,.scene-root[data-power="off"] #lower-right-warmth,.scene-root[data-power="off"] #side-entrance-warmth{opacity:0}
.scene-root[data-power="on"] #upper-left-warmth,.scene-root[data-power="on"] #upper-right-warmth,.scene-root[data-power="on"] #lower-left-warmth,.scene-root[data-power="on"] #lower-right-warmth,.scene-root[data-power="on"] #side-entrance-warmth{opacity:var(--window-warm-opacity)}
.scene-root[data-power="on"][data-gym="open"] #interior-scene{opacity:1}
.scene-root[data-power="on"][data-gym="open"] #interior-dark-overlay{opacity:.03}
.scene-root[data-power="on"][data-gym="open"] #entrance-reflection{opacity:var(--entrance-reflection-opacity)}
.scene-root[data-power="off"][data-gym="open"] #interior-scene{opacity:.08}
.scene-root[data-power="off"][data-gym="open"] #interior-dark-overlay{opacity:.86}
.scene-root[data-power="on"][data-gym="closed"] #upper-left-warmth,.scene-root[data-power="on"][data-gym="closed"] #upper-right-warmth,.scene-root[data-power="on"][data-gym="closed"] #lower-left-warmth,.scene-root[data-power="on"][data-gym="closed"] #lower-right-warmth{opacity:var(--window-warm-closed-opacity)}
.scene-root[data-power="on"][data-gym="closed"] #side-entrance-warmth{opacity:var(--side-warm-closed-opacity)}
.scene-root[data-power="on"][data-gym="closed"] #entrance-reflection{opacity:0}
.scene-root[data-power="off"][data-gym="closed"] #interior-dark-overlay{opacity:.985}
.scene-root[data-power="unknown"] #roof-lights,.scene-root[data-power="unknown"] #wall-lights,.scene-root[data-power="unknown"] #roof-light-beams,.scene-root[data-power="unknown"] #wall-light-beams,.scene-root[data-power="unknown"] #ground-reflections,.scene-root[data-power="unknown"] #upper-left-warmth,.scene-root[data-power="unknown"] #upper-right-warmth,.scene-root[data-power="unknown"] #lower-left-warmth,.scene-root[data-power="unknown"] #lower-right-warmth,.scene-root[data-power="unknown"] #side-entrance-warmth{opacity:0}
.scene-root[data-gym="unknown"] #door-left{transform:translateX(-24px)}
.scene-root[data-gym="unknown"] #door-right{transform:translateX(24px)}
.scene-root[data-gym="unknown"] #closure-chain,.scene-root[data-gym="unknown"] #closed-hardware{opacity:.18}
.scene-root[data-confidence="unknown"] .building-stage{filter:brightness(var(--ambient-brightness)) saturate(.9) contrast(1.02) drop-shadow(0 14px 26px rgba(0,0,0,.10))}
.scene-root[data-confidence="unknown"] .status-dock{border-color:rgba(232,179,91,.34)}
.state-change .building-stage{animation:sceneFocus .7s var(--ease)}
@keyframes sceneFocus{0%{filter:brightness(calc(var(--ambient-brightness)*.97)) saturate(var(--ambient-saturation)) contrast(1.04)}55%{filter:brightness(calc(var(--ambient-brightness)*1.04)) saturate(var(--ambient-saturation)) contrast(1.04)}100%{filter:brightness(var(--ambient-brightness)) saturate(var(--ambient-saturation)) contrast(1.04)}}

.status-dock{
  position:absolute;z-index:25;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:grid;grid-template-columns:minmax(430px,1fr) minmax(300px,.84fr);align-items:center;gap:18px;
  width:min(1080px,calc(100vw - 24px));min-height:122px;padding:16px 18px 16px 18px;border:1px solid var(--ui-line);border-radius:28px;
  background:linear-gradient(180deg,var(--ui-bg-top),var(--ui-bg-bottom));backdrop-filter:blur(18px) saturate(1.22);
  box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity .16s ease,transform .16s ease,box-shadow .25s ease;
}
.dock-primary{display:grid;grid-template-columns:1fr 1px 1fr;gap:14px;align-items:center}
.dock-divider{width:1px;height:70px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.18),transparent)}
.dock-state{display:flex;align-items:center;justify-content:flex-start;gap:13px;min-width:0}
.dock-icon{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:#dfe6ef}
.dock-icon svg{width:22px;height:22px;fill:currentColor}
.dock-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.dock-copy small{font-size:12px;color:rgba(255,255,255,.55)}
.dock-copy strong{font-size:35px;line-height:1;color:#f0f4fb;letter-spacing:-.02em;white-space:nowrap}
.dock-secondary{display:grid;grid-template-columns:1fr auto;grid-template-areas:"times refresh" "confidence refresh";gap:10px 16px;align-items:center;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.08)}
.dock-confirmations{grid-area:times;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dock-confirmations span{display:flex;flex-direction:column;gap:3px}
.dock-confirmations small{font-size:10px;color:rgba(255,255,255,.44)}
.dock-confirmations time{font-size:14px;font-weight:800;color:rgba(255,255,255,.9)}
.confidence-text{grid-area:confidence;font-size:12px;color:rgba(255,255,255,.62)}
.refresh-button{grid-area:refresh;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.refresh-button:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.refresh-button svg{width:22px;height:22px;fill:#fff}
.refresh-button.is-loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene-root[data-power="on"] .dock-state--power .dock-icon,.scene-root[data-gym="open"] .dock-state--gym .dock-icon{color:var(--status-green);border-color:rgba(89,219,145,.34);background:rgba(89,219,145,.09)}
.scene-root[data-power="on"] .dock-state--power strong,.scene-root[data-gym="open"] .dock-state--gym strong{color:var(--status-green)}
.scene-root[data-power="off"] .dock-state--power .dock-icon,.scene-root[data-gym="closed"] .dock-state--gym .dock-icon{color:var(--status-red);border-color:rgba(226,90,73,.34);background:rgba(226,90,73,.09)}
.scene-root[data-power="off"] .dock-state--power strong,.scene-root[data-gym="closed"] .dock-state--gym strong{color:#f08a7c}
.scene-root[data-power="unknown"] .dock-state--power .dock-icon,.scene-root[data-gym="unknown"] .dock-state--gym .dock-icon{color:var(--status-amber);border-color:rgba(232,179,91,.28)}
.scene-root[data-power="unknown"] .dock-state--power strong,.scene-root[data-gym="unknown"] .dock-state--gym strong{color:var(--status-amber)}

@media (max-width:1200px){
  .scene-logo{width:88px}
  .scene-meta{min-height:50px;padding:0 17px;font-size:13px}
  .scene-meta time{font-size:15px}
}

@media (max-width:900px){
  .scene-root{min-height:700px}
  .scene-header{top:max(14px,env(safe-area-inset-top));left:14px;right:14px}
  .scene-logo{width:72px}
  .scene-meta{min-height:42px;padding:0 13px;font-size:11px}
  .scene-meta time{font-size:12px}
  .status-dock{width:min(860px,calc(100vw - 18px));min-height:116px;padding:13px 14px 13px 15px;gap:14px}
  .dock-copy strong{font-size:28px}
}

@media (max-width:560px){
  body{overflow:hidden}
  .scene-root{height:100dvh;min-height:100dvh}
  .scene-header{left:10px;right:10px;top:max(10px,env(safe-area-inset-top))}
  .scene-logo{width:58px}
  .scene-meta{max-width:calc(100vw - 90px);min-height:40px;padding:0 12px;font-size:10px;overflow:hidden;white-space:nowrap}
  .scene-meta time{font-size:12px}
  .meta-sep{display:none}

  .status-dock{
    top:68px;bottom:auto;left:11px;right:11px;transform:none;width:auto;min-height:258px;border-radius:24px;padding:14px 14px 16px;
    grid-template-columns:1fr;gap:14px;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .dock-primary{grid-template-columns:1fr;gap:10px}
  .dock-divider{display:none}
  .dock-state{
    justify-content:space-between;gap:12px;padding:14px 14px;border-radius:18px;
    border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.028));
  }
  .dock-icon{order:-1;width:56px;height:56px;flex-basis:56px;border-radius:17px}
  .dock-icon svg{width:22px;height:22px}
  .dock-copy strong{font-size:34px}
  .dock-copy small{font-size:10px}
  .dock-secondary{
    grid-template-columns:1fr 60px;grid-template-areas:"times refresh" "confidence refresh";
    padding-inline-start:0;padding-top:10px;border-inline-start:0;border-top:1px solid rgba(255,255,255,.09);gap:8px 10px
  }
  .dock-confirmations{gap:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .dock-confirmations span{align-items:center;text-align:center;padding:8px 7px;border-radius:14px;background:rgba(255,255,255,.03)}
  .dock-confirmations small{font-size:8.5px}
  .dock-confirmations time{font-size:13px}
  .confidence-text{text-align:center;font-size:10.5px}
  .refresh-button{width:56px;height:56px;border-radius:17px;align-self:stretch}
  .refresh-button svg{width:20px;height:20px}
  .scene-root.dock-hold-hidden .status-dock{opacity:0;transform:translateY(-18px) scale(.97);box-shadow:none}

  .building-stage{top:clamp(286px,43svh,374px);bottom:-2px;left:0;right:0;transform:translateY(-28px)}
  .horizon-shape{bottom:0;opacity:.13}
  .cloud-lane--back{top:18%}
  .cloud-lane--mid{top:34%}
  .cloud-lane--front{top:51%;opacity:calc(var(--cloud-opacity)*.98)}
  .cloud-track svg{width:172px}
  .celestial{width:72px}
}

@media (max-height:760px) and (max-width:560px){
  .status-dock{top:62px;min-height:242px;padding:13px 13px 15px}
  .building-stage{top:clamp(258px,41svh,334px);bottom:-2px;transform:translateY(-30px)}
  .scene-logo{width:52px}
  .scene-meta{min-height:34px;font-size:9.2px}
  .scene-meta time{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .cloud-track{animation:none!important}
}