/* The city and the screen content share one coordinate plane. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cinematic-lab{display:block;width:var(--cinema-width,100%);max-width:100%;margin-inline:auto;border-radius:12px;background:#0b0e13}
.cinematic-lab .scenario-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px;gap:8px;border:0;border-bottom:1px solid #ffffff18;background:#101318}
.cinematic-lab .scenario-nav button{padding:12px 14px;gap:5px;min-height:74px}
.cinematic-lab .scenario-nav button small{display:none}
.cinematic-lab .scenario-nav button.selected:before{left:20px;right:20px;top:auto;bottom:0;width:auto;height:2px}
.city-experience{position:relative;background:#080c12}
.city-stage{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size}
.city-world{position:absolute;inset:0;transform:scale(1.015);transform-origin:50% 55%;animation:city-breathe 24s ease-in-out infinite alternate}
.city-plate{position:absolute;width:100%;height:100%;object-fit:fill;inset:0;transition:filter .45s;user-select:none}
.city-world:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#080c12a6,transparent 28%,transparent 77%,#080c1255);z-index:8}
.city-ad{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#080b10;backface-visibility:hidden;will-change:transform;box-shadow:0 0 28px #fd166b22}
.city-ad-content{position:absolute;inset:0;overflow:hidden;background:#140306;transition:opacity .4s,filter .45s}
.city-ad-content>img{width:100%;height:100%;object-fit:cover;animation:creative-breathe 12s ease-in-out infinite alternate;transform-origin:center 38%}
.city-ad-content:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#070208c9,transparent 48%),repeating-linear-gradient(0deg,transparent 0 3px,#0000000e 3px 4px);pointer-events:none}
.city-ad-copy{position:absolute;z-index:2;left:7%;right:5%;bottom:8%;font-size:43px;line-height:1.13;letter-spacing:-.035em;font-weight:600;color:white;text-shadow:0 1px 5px #0006}
.city-ad-copy small{display:block;font-size:15px;font-weight:400;letter-spacing:0;margin-top:12px;color:#f8dce5}
.city-ad[data-screen="portrait"] .city-ad-copy{font-size:42px;bottom:7%;left:9%}
.city-ad[data-screen="portrait"] .city-ad-copy small{font-size:19px}
.city-ad[data-screen="panoramic"] .city-ad-content>img{width:46%;position:absolute;right:0;object-fit:contain;animation:none}
.city-ad[data-screen="panoramic"] .city-ad-copy{right:46%;font-size:40px;top:40%;bottom:auto;left:6%}
.city-ad[data-screen="panoramic"] .city-ad-copy small{font-size:16px;margin-top:10px}
.city-ad-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1f2030,#080b10 80%);transition:opacity .4s}
.city-ad-idle img{width:18%;height:auto;opacity:.55;filter:drop-shadow(0 0 14px #f23e8733)}
.city-ad[data-screen="portrait"] .city-ad-idle img{width:35%}
.city-ad[data-screen="source"] .city-ad-idle{opacity:0}
.city-ad[data-screen="portrait"] .city-ad-content,.city-ad[data-screen="panoramic"] .city-ad-content{opacity:0}
.cinematic-lab[data-phase="3"] .city-ad-content{opacity:1}
.cinematic-lab[data-phase="3"] .city-ad-idle{opacity:0}
.cinematic-lab[data-scenario="closure"]:not([data-phase="0"]) .city-ad[data-screen="source"] .city-ad-content{filter:brightness(.38) saturate(.3)}
.cinematic-lab[data-scenario="offline"]:not([data-phase="0"]) .city-ad[data-screen="source"] .city-ad-content{opacity:0}
.cinematic-lab[data-scenario="offline"]:not([data-phase="0"]) .city-ad[data-screen="source"] .city-ad-idle{opacity:0}
.cinematic-lab[data-scenario="weather"]:not([data-phase="0"]):not(.is-restored) .city-plate{filter:brightness(.8) saturate(.8) hue-rotate(5deg)}
.cinematic-lab[data-scenario="weather"][data-phase="3"]:not(.is-restored) .city-ad-content>img{filter:hue-rotate(295deg) saturate(.82)}
.cinematic-lab.is-restored .city-ad[data-screen="source"] .city-ad-content{opacity:1!important;filter:none!important}
.city-atmosphere,.city-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.city-connections{overflow:visible;opacity:0;transition:opacity .35s}
.cinematic-lab[data-phase="2"] .city-connections,.cinematic-lab[data-phase="3"] .city-connections{opacity:1}
.city-connections path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.connection-glow{stroke:#e5004e;stroke-width:8;filter:blur(7px);opacity:.55}
.connection-track{stroke:#ff90b6;stroke-width:1.3;opacity:.4}
.connection-pulse{stroke:#fff;stroke-width:2;stroke-dasharray:7 93;animation:connection-flow 1.6s linear infinite}
.connection-pulse.second{animation-delay:-.8s}
.city-hub{position:absolute;z-index:6;left:48%;top:64%;width:4.5%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#100e1bba;border:1px solid #ff73a388;box-shadow:0 0 40px #ec1c6655;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .6s,transform .6s;backdrop-filter:blur(8px)}
.city-hub img{width:58%;height:auto}
.cinematic-lab[data-phase="2"] .city-hub,.cinematic-lab[data-phase="3"] .city-hub{opacity:1;transform:translate(-50%,-50%) scale(1)}
.city-topline{position:absolute;z-index:10;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none;font-size:12px;color:#e4e7ed;text-shadow:0 2px 8px #000}
.city-topline>span{display:flex;align-items:center;gap:8px}
.city-topline i{width:6px;height:6px;display:block;background:#ff518c;border-radius:50%;box-shadow:0 0 12px #ff518c}
.city-topline small{font-size:11px;color:#d7dce5}
.city-event{position:absolute;left:4%;bottom:6%;z-index:10;max-width:48%;display:flex;align-items:center;gap:12px;padding:15px 18px;background:#0a1019c9;border:1px solid #ffffff26;border-radius:7px;backdrop-filter:blur(16px);box-shadow:0 12px 35px #0003}
.city-event-icon{color:#ff799f;display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;font-size:19px;border:1px solid #ff4c7e55;border-radius:50%}
.city-event p{margin:0;line-height:1.5;font-size:13px;font-weight:600}
.city-event small{display:block;font-size:11px;line-height:1.5;color:#b2bbc9;margin-top:2px;font-weight:400}
.city-screen-label{position:absolute;z-index:9;display:flex;align-items:center;gap:6px;border:1px solid #ffffff25;border-radius:3px;background:#09101bba;backdrop-filter:blur(8px);padding:5px 8px;font-size:10px;line-height:1.4;white-space:nowrap;transform:translateX(-50%);color:#c6cfdc;transition:color .5s,border-color .5s}
.city-screen-label i{width:4px;height:4px;border-radius:50%;background:#8794a7}
.cinematic-lab[data-phase="3"] .city-screen-label{color:#fff;border-color:#fd609765}
.cinematic-lab[data-phase="3"] .city-screen-label i{background:#ff6098;box-shadow:0 0 6px #ff6098}
.cinematic-lab[data-scenario="offline"]:not(.is-restored) [data-screen-label="source"] i,.cinematic-lab[data-scenario="closure"]:not(.is-restored) [data-screen-label="source"] i{background:#ffbc82;box-shadow:none}
.city-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:16px 24px;background:#0c1016;border-bottom:1px solid #ffffff13}
.city-timeline button{padding:0;border:0;background:none;text-align:left;color:#7e8999;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:center;position:relative}
.city-timeline button:after{content:'';position:absolute;top:-17px;left:0;height:2px;width:100%;background:#ffffff0f}
.city-timeline button.active{color:white}
.city-timeline button.active:after{background:#ff357a;box-shadow:0 0 14px #ff357a40}
.city-timeline button>span{font-size:11px;opacity:.6}
.cinematic-lab .simulation-result{min-height:112px;padding:18px 24px 12px;border:0;background:#0c1016}
.cinematic-lab .simulation-result p{max-width:840px}
.cinematic-lab .simulation-footer{padding:0 24px 16px;background:#0c1016;align-items:center;flex-wrap:wrap;gap:6px 20px}
.cinema-controls{display:flex;gap:20px;align-items:center}
.cinematic-lab .cinema-controls button{min-height:38px;text-decoration:none;display:flex;align-items:center;gap:7px}
.cinematic-lab .cinema-controls button:hover{color:white}
.cinematic-lab #city-playback{border:1px solid #ffffff30;border-radius:30px;padding:8px 15px}
.city-progress{height:2px;background:#ffffff08;overflow:hidden}
.city-progress:after{content:'';display:block;width:100%;height:100%;background:#e5004e;transform:scaleX(var(--city-progress,0));transform-origin:left}
.cinematic-lab:not(.city-running) .city-world,.cinematic-lab:not(.city-running) .city-ad-content>img,.cinematic-lab:not(.city-running) .connection-pulse{animation-play-state:paused}
@keyframes city-breathe{from{transform:scale(1.015) translateX(-.25%)}to{transform:scale(1.045) translateX(.3%)}}
@keyframes creative-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes connection-flow{to{stroke-dashoffset:-100}}
@media(max-width:950px){.cinematic-lab .scenario-nav button{padding:15px 12px}.cinematic-lab .scenario-nav button.selected:before{left:12px;right:12px}.city-event{padding:10px 12px;gap:8px}.city-event p{font-size:12px}.city-screen-label{font-size:9px;padding:3px 5px}.city-topline{top:17px;left:20px;right:20px}}
@media(max-width:600px){.cinematic-lab .scenario-nav{grid-template-columns:1fr 1fr;padding:9px;gap:5px}.cinematic-lab .scenario-nav button{min-height:48px;padding:10px 9px;gap:4px}.cinematic-lab .scenario-nav button>span{font-size:12px}.cinematic-lab .scenario-nav button small{display:none}.city-stage{overflow:visible;margin-bottom:72px}.city-topline{top:10px;left:12px;right:12px;font-size:9px;gap:8px}.city-topline small{font-size:8px}.city-world{overflow:hidden}.city-screen-label{display:none}.city-event{bottom:-70px;left:0;right:0;max-width:none;min-height:72px;border-radius:0;border-width:0 0 1px;padding:14px 16px;background:#0c1016;box-shadow:none}.city-event p{font-size:12px}.city-event small{font-size:11px}.city-event-icon{width:27px;height:27px;font-size:16px}.city-timeline{padding:20px 16px;gap:12px}.city-timeline button{font-size:11px;gap:5px;align-items:flex-start}.city-timeline button>span{font-size:10px}.city-timeline button:after{top:-21px}.cinematic-lab .simulation-result{padding:20px 16px 10px;min-height:0}.cinematic-lab .simulation-result strong{font-size:15px}.cinematic-lab .simulation-result p{font-size:12px}.cinematic-lab .simulation-footer{padding:0 16px 20px;display:block}.cinematic-lab .simulation-footer>span{font-size:11px}.cinema-controls{margin-top:12px;gap:17px;flex-wrap:wrap}.cinematic-lab .cinema-controls button{font-size:11px;margin:0}.cinematic-lab #city-playback{padding:7px 12px}.city-hub{width:6%}}
@media(prefers-reduced-motion:reduce){.city-world,.city-ad-content>img,.connection-pulse{animation:none!important}.city-world{transform:none}.city-ad-content,.city-plate,.city-event,.city-connections{transition:none}}