.lights-on{background:#0b1316}
.lights-on summary{position:relative;min-height:78px;padding-left:24px}
.lights-on summary:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-action);box-shadow:0 0 0 6px #f5821614;flex:none}
.lights-on summary>span{margin-right:auto}
.lights-on summary small{font:500 11px/1.3 var(--font-body);letter-spacing:.08em}
.lights-on summary b{font:600 20px/1.2 var(--font-body);letter-spacing:-.025em}
.lights-content{padding:22px 18px 24px}
.lights-content>h2{max-width:420px;font-size:30px}
.lights-content>p:not(.eyebrow,.light-disclaimer){font-size:15px;line-height:1.5;color:#b9c8ca;max-width:560px}
.lights-weather{margin-bottom:20px;font-family:var(--font-body);font-size:11px;letter-spacing:.03em}

/* Offline vector cartography. Lighting does not change the geography. */
.moscow-light-map{position:relative;margin:24px 0 20px;overflow:hidden;border:1px solid #34484b;border-radius:18px;background:#102126;isolation:isolate}
.moscow-light-canvas{position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 49%,#203435 0,#14282e 55%,#101f26 100%)}
.moscow-light-canvas:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 48%,#06121b38 100%)}
.moscow-map-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:1000/760;margin:0 auto}
.moscow-map-stage>.light-cartography{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.light-districts path{fill:#263a3c;fill-opacity:.42;stroke:#6b8586;stroke-opacity:.19;stroke-width:1;stroke-linejoin:round;transition:fill .8s ease,fill-opacity .8s ease,stroke-opacity .8s ease}
.light-districts path:nth-child(3n+2){fill:#2b3c3b}
.light-districts path:nth-child(3n){fill:#1d343b}
.light-districts path.is-lit{fill:#c39d58;fill-opacity:calc(.04 + var(--map-illumination,0)*.095);stroke-opacity:.25}
.light-centre-glow{opacity:var(--map-illumination,0);pointer-events:none;transition:opacity .7s ease}
.light-landmark-glows ellipse{opacity:var(--landmark-power,0);transition:opacity .65s ease;pointer-events:none}
.light-roads path,.light-roads use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.light-side-streets{stroke:#7b9494;stroke-width:1.25;opacity:.22}
.light-main-streets{stroke:#91a09a;stroke-width:2.4;opacity:.29}
.light-street{opacity:clamp(0,calc(var(--street-progress,0)*4),1);transition:opacity .35s ease}
.light-street use{stroke-dasharray:calc(var(--street-progress,0)*100) 100;transition:stroke-dasharray .65s cubic-bezier(.2,.7,.25,1)}
.light-street-bloom{stroke:#ffae4b;stroke-width:7;stroke-opacity:.2}
.light-street-line{stroke:#ffdd96;stroke-width:1.65;stroke-opacity:.95}
.light-waterways use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.light-water-halo{stroke:#edaa56;stroke-width:calc(var(--water-width) + 12px);opacity:calc(var(--map-illumination,0)*.14);transition:opacity .7s ease}
.light-water-bank{stroke:#081a21;stroke-width:calc(var(--water-width) + 5px);opacity:.85}
.light-water-shore{stroke:#f1bd75;stroke-width:calc(var(--water-width) + 2px);opacity:calc(.12 + var(--map-illumination,0)*.76);transition:opacity .6s ease}
.light-water-body{stroke:url(#lightMapWater);stroke-width:var(--water-width)}
.light-water-depth{stroke:#173c4d;stroke-width:calc(var(--water-width)*.42);opacity:.23}
.light-water-flow{stroke:url(#lightMapWaterLight);stroke-width:1.5;stroke-dasharray:7 100 16 220 3 150;opacity:.65;animation:light-water-drift 34s linear infinite;animation-play-state:paused;pointer-events:none}
.light-water-flow-fine{--flow-cycle:-471px;stroke:#b8d7d4;stroke-width:.65;stroke-dasharray:2 140 6 200 3 120;opacity:.35;animation-duration:48s;animation-delay:-19s}
.light-waterway-yauza .light-water-flow{stroke-width:.7;opacity:.35}
.light-waterway-canal .light-water-flow{stroke-width:.8;opacity:.45}
.light-waterway .light-water-reflection{--flow-cycle:-455px;stroke:#ffe0a0;stroke-width:2.1;stroke-dasharray:5 170 8 160 2 110;opacity:calc(var(--map-illumination,0)*.8);animation-duration:42s;animation-delay:-13s;transition:opacity .7s ease}
.light-waterway-yauza .light-water-reflection,.light-waterway-canal .light-water-reflection{stroke-width:1.1}
.lights-on.is-water-running .light-water-flow{animation-play-state:running}
@keyframes light-water-drift{to{stroke-dashoffset:var(--flow-cycle,-496px)}}

.district-labels text{fill:#9cafae;font:500 17px/1.2 var(--font-body);letter-spacing:.04em;text-anchor:middle;stroke:none;opacity:.67;pointer-events:none}
.light-map-labels text{fill:#8bafb6;font:italic 400 15px/1 var(--font-body);letter-spacing:.08em;text-anchor:middle;stroke:none;opacity:.8;pointer-events:none}
.light-object-links{pointer-events:none}
.light-object-links g{opacity:0;transition:opacity .3s ease}
.light-object-links path{fill:none;stroke:#dba467;stroke-width:.8;stroke-opacity:.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.light-object-links circle{fill:#f9c27a;stroke:#294143;stroke-width:1}
.light-object-links .is-lit{opacity:.65}
.light-object-links .is-selected{opacity:1}
.light-object-links .is-selected path{stroke-opacity:.9;stroke-width:1}
.light-object{position:absolute;z-index:3;left:var(--x);top:var(--y);width:44px;height:44px;min-width:44px;min-height:44px;padding:0;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.light-object:before{content:"";position:absolute;inset:4px;border:1px solid #ffd49370;border-radius:50%;background:radial-gradient(circle,#ffe4b36b,#ffa6362e 42%,transparent 72%);opacity:0;pointer-events:none}
.light-object.is-igniting:before{animation:light-ignition 1.05s cubic-bezier(.2,.7,.25,1) var(--ignition-delay,0ms) both}
@keyframes light-ignition{0%{opacity:0;transform:scale(.5)}18%{opacity:.85;transform:scale(.95)}100%{opacity:0;transform:scale(2.1)}}
.light-object span{display:grid;place-items:center;width:7px;height:7px;border:1px solid #809594;border-radius:50%;background:#203437;color:#ffc67d;transition:width .35s ease,height .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.light-object span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s ease;pointer-events:none}
.light-object:disabled{cursor:default;pointer-events:none;opacity:.6}
.light-object.is-lit span{width:29px;height:29px;color:#ffe3ad;border-color:#ffd28dd9;background:#4d4030;box-shadow:0 2px 5px #06101670,0 0 12px #ffb14b59,0 0 27px #ed9b3526}
.light-object.is-lit span svg{opacity:1}
.light-object.is-selected{z-index:5}
.light-object.is-selected span{background:#f4ad5d;color:#142429;border-color:#ffe0ad;box-shadow:0 0 0 4px #f5b36724,0 0 24px #f5b36745}
.light-object:focus-visible{outline:2px solid #ffd293;outline-offset:-1px}
@media(hover:hover){.light-object.is-lit:hover span{background:#3b463e;border-color:#ffe2b4}.light-object.is-selected:hover span{background:#ffbd76}}
.light-map-compass{position:absolute;z-index:2;top:20px;left:20px;display:grid;justify-items:center;gap:3px;color:#9cafb1;font:500 10px/1 var(--font-body);opacity:.75;pointer-events:none}
.light-map-compass svg{width:14px;height:22px;fill:#a0b4b3;stroke:#a0b4b3;stroke-width:.7}
.light-water-toggle{position:absolute;z-index:6;top:9px;right:9px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#102127a6;color:#acbdbd;cursor:pointer}
.light-water-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.light-water-toggle:hover{background:#2a3e42;color:#f7d4a6}
.light-water-toggle:focus-visible{outline:2px solid #ffd293;outline-offset:-2px}
.water-play-icon,.light-water-toggle[aria-pressed="true"] .water-pause-icon{display:none}
.light-water-toggle[aria-pressed="true"] .water-play-icon{display:block}

.light-map-readout{position:relative;z-index:2;min-height:110px;margin:0;padding:18px 20px;background:#0d1b20;border-top:1px solid #68817c2e;display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-areas:"count kicker" "count title" "count note";column-gap:18px;row-gap:4px;align-content:center;font-family:var(--font-body)}
.light-map-count{grid-area:count;align-self:center;color:#f2b36c;font:500 27px/1 var(--font-body);letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.light-map-readout small{grid-area:kicker;min-width:0;font:500 10px/1.3 var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:#adbdba}
.light-map-readout b{grid-area:title;min-width:0;color:#f1f1e9;font-size:16px;line-height:1.3;overflow-wrap:anywhere;font-weight:600}
.light-map-readout span{grid-area:note;min-width:0;max-width:480px;color:#aebfbf;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.light-stage-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 14px}
.light-stage-strip span{position:relative;padding-top:10px;font:500 clamp(10px,2.8vw,12px)/1.2 var(--font-body);color:#90a4a8;text-align:center}
.light-stage-strip span:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:#2d4045;transition:background .25s ease}
.light-stage-strip span.is-active{color:#e8bd89}
.light-stage-strip span.is-active:before{background:#e9a55a}
.lights-on label{font-family:var(--font-body);font-size:11px;color:#aebabc}
.lights-on output{font-size:14px;color:#f0ac61;font-variant-numeric:tabular-nums}
.lights-on input[type="range"]{height:44px;margin:4px 0;cursor:pointer;accent-color:#f58216}
.light-result{margin-top:12px;background:#1b2d29;border:0;border-left:2px solid #d8ad74;border-radius:0 7px 7px 0}
.light-result b{font-size:14px;color:#e7ba80}
.light-result span{font-size:12px;color:#b6c9c1}
.light-disclaimer{margin:14px 0 0;font-size:11px!important;line-height:1.5!important;color:#8ea2a6!important}
.light-disclaimer a{display:inline-flex;align-items:center;min-height:36px;color:#aebfbb;text-decoration-color:#aebfbb70;text-underline-offset:3px}
@media(max-width:600px){
 .moscow-light-map{margin-inline:-10px;border-radius:14px}
 .moscow-map-stage{min-height:260px}
 .district-labels text{font-size:23px;opacity:.65}
 .district-labels text[data-for="arbat"],.district-labels text[data-for="tverskoy"],.district-labels text[data-for="zamoskvorechye"],.district-labels text[data-for="meshchansky"]{opacity:0}
 .light-map-labels text{font-size:21px}
 .light-map-readout{min-height:136px;padding:15px;grid-template-columns:60px minmax(0,1fr);column-gap:12px}
 .light-map-count{font-size:23px}
 .light-map-readout b{font-size:15px}
 .light-map-readout span{font-size:12px}
 .light-map-compass{top:16px;left:15px}
}
@media(max-width:370px){.light-map-readout{padding:13px;grid-template-columns:52px minmax(0,1fr);column-gap:10px}.light-map-count{font-size:21px}.district-labels text[data-for="yakimanka"],.district-labels text[data-for="krasnoselsky"]{opacity:0}}
@media(prefers-reduced-motion:reduce){.light-water-flow,.light-object.is-igniting:before{animation:none}.light-water-toggle{display:none}.light-centre-glow,.light-landmark-glows ellipse,.light-districts path,.light-street,.light-street use,.light-water-halo,.light-water-shore,.light-water-reflection,.light-object,.light-object span,.light-object span svg,.light-object-links g{transition:none}}

.district-labels text.is-obscured,.light-map-labels text.is-obscured{opacity:0}