/* Shenzhen weather and date live around the exhibition, not over its controls. */
.has-weather {
  --ambient-ink: #e8eef0;
  --ambient-muted: #7c95aa;
  --ambient-accent: #edc896;
  --ambient-glass: rgba(171, 202, 220, .045);
  background-color: #0b192a;
}
.has-weather[data-weather="rain"],
.has-weather[data-weather="snow"],
.has-weather[data-weather="fog"],
.has-weather[data-weather-night="true"] { --ambient-accent: #86b9d4; }

.has-weather #universe-canvas { z-index:3; }
.has-weather .universe-vignette { z-index:0; }
.weather-atmosphere {
  position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  opacity: .48; isolation: isolate; transition: opacity .9s ease;
}
.weather-atmosphere *, .ambient-widgets { pointer-events: none; }
.weather-sky, .weather-sun, .weather-rays, .weather-clouds,
#weather-particles, .weather-horizon { position: absolute; inset: 0; }
.weather-sky {
  background: radial-gradient(ellipse at 5% 15%, rgba(90, 137, 158, .12), transparent 67%),
    linear-gradient(125deg, rgba(22, 43, 61, .08), transparent 55%, rgba(80, 119, 145, .08));
  transition: opacity 1.3s ease; opacity: .5;
}
[data-weather="sunny"] .weather-sky {
  background: radial-gradient(ellipse at 5% 13%, rgba(220, 180, 115, .18), transparent 65%),
    radial-gradient(ellipse at 90% 85%, rgba(85, 141, 166, .12), transparent 66%);
  opacity: 1;
}
[data-weather="rain"] .weather-sky,
[data-weather="snow"] .weather-sky {
  background: radial-gradient(ellipse at 28% 0, rgba(124, 166, 194, .19), transparent 67%),
    linear-gradient(145deg, rgba(70, 116, 143, .12), transparent 60%, rgba(59, 108, 139, .15));
  opacity: 1;
}
[data-weather="cloudy"] .weather-sky,
[data-weather="fog"] .weather-sky { opacity: 1; }
.weather-sun {
  inset: -35vh auto auto -30vw; width: 90vw; height: 100vh; opacity: 0;
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 205, .3), rgba(237, 200, 150, .16) 18%, rgba(237, 200, 150, .045) 42%, transparent 67%);
  transition: opacity 1.7s ease, transform 1.7s ease;
}
[data-weather="sunny"]:not([data-weather-night="true"]) .weather-sun { opacity: 1; }
.weather-rays { opacity: 0; mix-blend-mode: screen; transition: opacity 1.5s ease; }
.weather-rays i {
  position: absolute; top: -40%; left: 2%; width: 17vw; height: 155%;
  transform: rotate(-32deg); transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(237, 200, 150, .065) 48%, rgba(255, 235, 195, .09) 55%, transparent);
  filter: blur(7px); animation: ambient-sun-drift 27s ease-in-out infinite alternate;
}
.weather-rays i:nth-child(2) { left: 15%; width: 7vw; opacity: .65; animation-delay: -12s; }
.weather-rays i:nth-child(3) { left: 24%; width: 24vw; opacity: .5; animation-delay: -6s; }
[data-weather="sunny"]:not([data-weather-night="true"]) .weather-rays { opacity: 1; }
.weather-clouds {
  inset: -8%; opacity: 0; filter: blur(28px);
  background: radial-gradient(ellipse at 19% 4%, rgba(157, 184, 198, .12), transparent 35%),
    radial-gradient(ellipse at 77% 18%, rgba(156, 178, 195, .075), transparent 32%),
    radial-gradient(ellipse at 4% 75%, rgba(125, 165, 191, .075), transparent 30%);
  transition: opacity 1.5s ease; animation: ambient-cloud-drift 43s ease-in-out infinite alternate;
}
[data-weather="cloudy"] .weather-clouds,
[data-weather="rain"] .weather-clouds { opacity: .9; }
[data-weather="fog"] .weather-clouds { opacity: 1; filter: blur(18px); }
[data-weather="snow"] .weather-clouds { opacity: .7; }
#weather-particles { width: 100%; height: 100%; display: block; opacity: .85; }
.weather-horizon {
  inset: auto -15% 0; height: 28%; opacity: .45;
  background: radial-gradient(ellipse at 45% 110%, rgba(134, 185, 212, .11), transparent 67%);
  transition: opacity 1.5s ease;
}
[data-weather="rain"] .weather-horizon { opacity: .85; }
[data-weather-night="true"] .weather-sky {
  background: radial-gradient(ellipse at 13% 2%, rgba(149, 177, 211, .15), transparent 62%),
    radial-gradient(ellipse at 92% 90%, rgba(65, 108, 159, .1), transparent 64%);
}
[data-weather-night="true"] .weather-sun {
  background: radial-gradient(ellipse at 50% 50%, rgba(185, 211, 231, .17), rgba(134, 185, 212, .055) 32%, transparent 62%);
  opacity: .72;
}
[data-weather-night="true"] .weather-rays { opacity: 0; }
[data-weather="neutral"] .weather-sun,
[data-weather="neutral"] .weather-rays { opacity: 0; }

/* One shared geometry keeps both background cards and the foreground controls aligned. */
.has-weather {
  --ambient-left:5vw; --ambient-top:138px; --ambient-width:260px;
  --ambient-card-height:320px; --ambient-gap:14px; --ambient-padding:20px;
  --ambient-radius:12px; --ambient-tools-height:52px;
}
.ambient-widgets {
position:fixed;left:var(--ambient-left);top:var(--ambient-top);width:var(--ambient-width);
display:grid;grid-template-rows:var(--ambient-card-height);gap:var(--ambient-gap);
z-index:2;opacity:.62;color:var(--ambient-ink);transition:opacity .45s ease,visibility .45s;
}
.ambient-calendar-aside {
position:fixed;right:var(--ambient-left);top:var(--ambient-top);width:var(--ambient-width);
display:grid;grid-template-rows:var(--ambient-card-height);gap:var(--ambient-gap);
z-index:2;opacity:.62;color:var(--ambient-ink);transition:opacity .45s ease,visibility .45s;
}
.weather-station,.ambient-calendar {
  position:relative;box-sizing:border-box;width:100%;height:var(--ambient-card-height);min-height:0;
  padding:var(--ambient-padding);overflow:hidden;border:1px solid rgba(195,217,230,.10);
  border-radius:var(--ambient-radius);background:linear-gradient(135deg,rgba(201,222,232,.035),rgba(152,184,208,.012));
  box-shadow:none;transition:opacity .45s ease,visibility .45s,border-color 1.3s ease;
}
.weather-station p { margin:0; }
.weather-tools {
  position:fixed;left:calc(var(--ambient-left) + var(--ambient-padding) + 1px);
  top:calc(var(--ambient-top) + var(--ambient-card-height) - var(--ambient-padding) - var(--ambient-tools-height) - 1px);
  width:calc(var(--ambient-width) - 2 * var(--ambient-padding) - 2px);height:var(--ambient-tools-height);
  z-index:7;pointer-events:none;transition:opacity .45s ease,visibility .45s;
}
.ambient-eyebrow { font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.04em; }
.ambient-eyebrow > span { display:inline-block;margin-left:10px;padding-left:11px;border-left:1px solid rgba(200,219,230,.2);font-size:9px;font-weight:400;color:#9bafbd;letter-spacing:.04em; }
#weather-city-name { cursor:default; }
.weather-reading { display:flex;align-items:center;gap:14px;margin-top:12px;height:80px; }
.weather-reading > div { display:flex;align-items:flex-start; }
.weather-reading strong { font-size:78px;line-height:1;font-weight:250;letter-spacing:-.075em;font-variant-numeric:tabular-nums; }
#weather-unit { font-size:34px;line-height:1.4;font-weight:300;margin-left:4px;color:#c2d2db; }
.weather-icon { display:block;color:var(--ambient-accent);width:37px;height:37px;opacity:.88; }
.weather-icon svg { width:100%;height:100%;stroke-width:1.25; }
#weather-description { margin-top:9px;font-size:15px;line-height:1.5;letter-spacing:.03em; }
#weather-range { margin-top:5px;font-size:10px;line-height:1.8;color:#9eb2c2; }
#weather-status { margin-top:7px;font-size:9px;line-height:1.5;color:var(--ambient-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.weather-presets { display:flex;align-items:center;gap:5px; }
.weather-city-select {
  appearance:none;-webkit-appearance:none;pointer-events:auto;min-height:31px;padding:5px 24px 5px 9px;
  border:1px solid rgba(177,201,216,.14);border-radius:5px;color:#93aabd;background:rgba(15,35,53,.19);
  font-size:10px;font-weight:400;line-height:1.4;white-space:nowrap;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 8px) 55%,calc(100% - 4px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.weather-city-select:hover { color:#e8eef0;border-color:rgba(210,225,235,.4);background:rgba(119,161,188,.08); }
.weather-city-select:focus-visible { outline:2px solid var(--ambient-accent);outline-offset:4px; }
.weather-city-select option { color:#dce8f0;background:#0b1826;font-weight:500; }
.weather-presets button {
  pointer-events:auto;min-height:31px;padding:5px 9px;border:1px solid rgba(177,201,216,.14);
  border-radius:5px;color:#93aabd;background:rgba(15,35,53,.19);font-size:10px;font-weight:400;line-height:1.4;white-space:nowrap;
}
.weather-presets button:hover:not(:disabled) { color:#e8eef0;border-color:rgba(210,225,235,.4);background:rgba(119,161,188,.08); }
.weather-presets button[aria-pressed="true"] { color:var(--ambient-accent);border-color:rgba(190,209,220,.3);background:rgba(167,188,199,.085); }
.weather-presets button:focus-visible,.weather-credit:focus-visible { outline:2px solid var(--ambient-accent);outline-offset:4px; }
.weather-credit { display:inline-block;pointer-events:auto;margin-top:7px;font-size:8px;line-height:12px;color:#70899d;text-decoration:none;text-underline-offset:3px;white-space:nowrap; }
.weather-credit:hover { color:#b0c4d0;text-decoration:underline; }
[data-weather-preview="true"] #weather-status { color:#bcac94; }

.calendar-topline { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b9cbd7;font-size:11px;line-height:18px;white-space:nowrap; }
.calendar-topline > span:last-child { color:#738da2;font-size:8px; }
.calendar-date { display:flex;align-items:center;gap:12px;height:88px;padding:10px 0; }
.calendar-date > strong { font-size:46px;font-weight:250;letter-spacing:-.05em;line-height:1;color:rgba(232,238,240,.9);flex-shrink:0; }
.calendar-date > div { display:flex;flex-direction:column;gap:7px; }
#calendar-weekday { font-size:13px;font-weight:400;color:#b7c8d3; }
#calendar-full-date { font-size:9px;color:#7c95aa;letter-spacing:.03em; }
.calendar-weekdays,.calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center; }
.calendar-clock { font-family:"Bahnschrift","Consolas",tabular-monospace;font-size:10px;letter-spacing:1px;color:var(--ambient-accent,#e8bd7b);font-variant-numeric:tabular-nums; }
.calendar-clock-hero { font-family:"Bahnschrift","Consolas",tabular-monospace;font-size:24px;font-weight:250;letter-spacing:1px;line-height:1.1;color:rgba(232,238,240,.9);font-variant-numeric:tabular-nums; }
.calendar-weekdays { height:28px;align-items:center;border-top:1px solid rgba(170,198,217,.12);font-size:9px;color:#6f8aa0; }
.calendar-grid { gap:1px 0;font-size:10px;line-height:22px;font-variant-numeric:tabular-nums;color:#a5bac9; }
.calendar-grid > span { justify-self:center;width:23px;height:23px;border:1px solid transparent;border-radius:50%; }
.calendar-grid .is-weekend { color:#718b9f; }
.calendar-grid .is-today { color:var(--ambient-accent);border-color:rgba(213,214,197,.3);background:rgba(190,204,207,.1); }
 .ambient-compact { display:flex;position:fixed;bottom:33px;left:42px;z-index:2;opacity:.62;align-items:center;gap:11px;font-size:11px;color:#71899e;pointer-events:none; }
.ambient-compact > span + span { padding-left:11px;border-left:1px solid rgba(163,189,207,.15); }
.has-weather .gallery-intro { left:29%;right:29%;top:157px; }
.has-weather .gallery-arrows { left:calc(var(--ambient-left) + var(--ambient-width) + 24px); }
.has-weather .gallery-intro h1 { font-size:clamp(25px,2.2vw,39px); }
.has-weather .gallery-intro > p { color:#8eacbd;font-size:10px;letter-spacing:.06em; }
.has-weather .gallery-intro > span { color:#7f98ad;font-size:12px; }
.has-weather.has-panel .ambient-widgets,.has-weather.has-panel .ambient-calendar-aside,.has-weather.has-panel .weather-tools { opacity:0;visibility:hidden; }
.has-weather.has-panel .weather-atmosphere { opacity:.22; }
.has-weather.has-panel .ambient-compact { display:flex; }
.has-weather.has-guide .ambient-calendar,.has-weather.has-guide .ambient-calendar-aside { opacity:0;visibility:hidden; }
.has-weather[data-panel="news"] .weather-atmosphere,.has-weather[data-panel="news-article"] .weather-atmosphere { opacity:.12; }
[data-weather-motion="false"] .weather-atmosphere *,.has-panel .weather-atmosphere * { animation-play-state:paused !important; }
@keyframes ambient-sun-drift { from { transform:rotate(-32deg) translateX(0);opacity:.62; } to { transform:rotate(-29deg) translateX(2vw);opacity:.95; } }
@keyframes ambient-cloud-drift { from { transform:translate3d(-2%,0,0); } to { transform:translate3d(3%,1%,0); } }

@media (max-width:1280px) and (min-width:901px) {
  .has-weather { --ambient-left:32px;--ambient-width:236px;--ambient-padding:18px; }
  .weather-reading strong { font-size:72px; }
  .has-weather .gallery-intro { left:29%;right:28%;top:151px; }
  .has-weather .gallery-intro h1 { font-size:29px; }
}
@media (max-height:900px) and (min-width:901px) {
  .has-weather { --ambient-top:116px;--ambient-card-height:268px;--ambient-padding:18px;--ambient-tools-height:48px; }
  .weather-reading { height:58px;margin-top:8px;gap:12px; }
  .weather-reading strong { font-size:58px; }
  #weather-unit { font-size:28px; }
  .weather-icon { width:31px;height:31px; }
  #weather-description { margin-top:6px;font-size:14px; }
  #weather-range { margin-top:4px;line-height:1.6; }
  #weather-status { margin-top:6px;line-height:1.4; }
  .weather-presets button { min-height:29px;font-size:9px; }
  .calendar-topline { line-height:16px; }
  .calendar-date { height:70px;padding:8px 0; }
  .calendar-date > strong { font-size:54px; }
  .calendar-weekdays { height:25px; }
  .calendar-grid { line-height:16px;font-size:9px; }
  .calendar-grid > span { width:18px;height:18px; }
  .has-weather .gallery-intro { top:129px; }
  .has-weather .gallery-intro h1 { font-size:27px; }
  .has-weather .gallery-intro > span { display:none; }
}
@media (max-height:760px) and (min-width:901px) {
  .has-weather { --ambient-top:108px;--ambient-card-height:234px;--ambient-gap:12px;--ambient-padding:16px;--ambient-tools-height:44px; }
  .weather-reading { height:46px;margin-top:6px; }
  .weather-reading strong { font-size:46px; }
  #weather-description { font-size:12px;margin-top:4px; }
  #weather-range { font-size:9px;margin-top:3px; }
  #weather-status { font-size:8px;margin-top:4px; }
  .weather-presets button { min-height:27px;padding:4px 8px; }
  .weather-credit { margin-top:4px; }
  .calendar-date { height:60px;padding:7px 0; }
  .calendar-date > strong { font-size:46px; }
  .calendar-weekdays { height:23px; }
  .calendar-grid { line-height:14px; }
  .calendar-grid > span { width:16px;height:16px; }
}
@media (max-height:640px) and (min-width:901px) {
  .has-weather { --ambient-top:104px;--ambient-card-height:200px; }
  #weather-range,.calendar-weekdays,.calendar-grid { display:none; }
  .calendar-date { height:130px; }
}
@media (max-width:900px) {
  .has-weather { --ambient-top:139px;--ambient-width:clamp(200px,36vw,260px);--ambient-card-height:188px;--ambient-gap:12px;--ambient-padding:14px;--ambient-tools-height:44px;--ambient-radius:10px; }
  .ambient-eyebrow { font-size:11px; }
  .ambient-eyebrow > span { font-size:8px;margin-left:6px;padding-left:7px; }
  .weather-reading { height:44px;margin-top:6px;gap:9px; }
  .weather-reading strong { font-size:44px; }
  #weather-unit { font-size:23px; }
  .weather-icon { width:25px;height:25px; }
  #weather-description { margin-top:6px;font-size:12px; }
  #weather-range { display:none; }
  #weather-status { font-size:8px;margin-top:5px;-webkit-line-clamp:1; }
  .weather-presets { gap:4px; }
  .weather-presets button { min-height:27px;padding:4px 7px;font-size:9px; }
  .weather-credit { font-size:7px;margin-top:4px; }
  .ambient-calendar { display:flex;flex-direction:column; }
  .calendar-topline { font-size:10px;line-height:15px; }
  .calendar-topline > span:last-child { font-size:7px; }
  .calendar-date { flex:1;min-height:0;height:auto;padding:10px 0 0;gap:13px; }
  .calendar-date > strong { font-size:62px; }
  #calendar-weekday { font-size:12px; }
  #calendar-full-date { font-size:8px; }
  .calendar-weekdays,.calendar-grid { display:none; }
  .has-weather .gallery-intro { display:none; }
  .has-weather .gallery-arrows { left:13px;right:13px;top:calc(var(--ambient-top) + 2 * var(--ambient-card-height) + var(--ambient-gap) + 12px); }
  .ambient-compact { left:22px;bottom:32px;max-width:calc(100vw - 135px);flex-wrap:wrap;gap:3px 8px;font-size:10px;line-height:1.6; }
  .ambient-compact > span + span { padding-left:8px; }
}
@media (max-width:600px) {
  .has-weather { --ambient-left:23px;--ambient-top:137px;--ambient-width:171px;--ambient-card-height:156px;--ambient-padding:10px;--ambient-radius:9px; }
  .ambient-eyebrow { font-size:10px;line-height:14px; }
  .weather-reading { height:40px;margin-top:5px;gap:8px; }
  .weather-reading strong { font-size:40px; }
  #weather-unit { font-size:21px;margin-left:2px; }
  .weather-icon { width:23px;height:23px; }
  #weather-description { margin-top:4px;font-size:11px;line-height:17px; }
  #weather-status { display:none; }
  .weather-presets button { min-height:26px;padding:4px 6px;font-size:8px;border-radius:4px; }
  .weather-credit { font-size:7px; }
  .calendar-topline { font-size:9px;line-height:14px; }
  .calendar-topline > span:last-child { display:none; }
  .calendar-date { gap:10px;padding-top:8px; }
  .calendar-date > strong { font-size:50px; }
  #calendar-weekday { font-size:10px;white-space:nowrap; }
  #calendar-full-date { font-size:7px;white-space:nowrap;letter-spacing:0; }
  .weather-sun { width:145vw;left:-70vw; }
  .weather-rays i { width:35vw; }
  .weather-rays i:nth-child(2) { left:7%;width:22vw; }
  .weather-rays i:nth-child(3) { left:18%;width:40vw; }
  .ambient-compact { bottom:30px;left:17px;max-width:calc(100vw - 118px);font-size:9px;gap:2px 7px; }
}
@media (max-height:760px) and (max-width:900px) {
  .has-weather { --ambient-top:130px;--ambient-card-height:148px;--ambient-padding:10px; }
  .ambient-eyebrow { font-size:10px;line-height:14px; }
  .weather-reading { height:36px;margin-top:4px; }
  .weather-reading strong { font-size:36px; }
  #weather-description { margin-top:3px;font-size:11px;line-height:17px; }
  #weather-status { display:none; }
  .calendar-date > strong { font-size:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .weather-atmosphere *,.ambient-widgets,.ambient-calendar,.weather-tools { animation:none !important;transition:none !important; }
}