/* ==========================================================================
   SETL MAP — lifescene.css  (scene agent, prefix .sc-)
   ========================================================================== */
.sc-host { position: relative; overflow: hidden; background: var(--sky); isolation: isolate; touch-action: pan-y; }
.sc-root { position: absolute; inset: 0; }
.sc-ill { --sw: 1.5; fill: none; stroke: var(--ink); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; }
.sc-ill .hl { stroke: var(--line-strong); stroke-width: calc(var(--sw) * .6); }
.sc-ill .hlr { stroke: #5A5272; stroke-width: calc(var(--sw) * .6); }
.sc-ill .sc-gh { fill: none; stroke: var(--ink-2); stroke-opacity: .6; stroke-width: calc(var(--sw) * .85); stroke-dasharray: 4 4; }
.sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.sc-facade { width: 100%; height: auto; }
.sc-skyline .sk-w { fill: rgba(43, 42, 61, .3); stroke: none; transition: fill .6s var(--ease-standard) var(--d, 0s); }
.sc-skyline .sk-w.is-lit { fill: var(--glow); }

/* windows that light up with the hour */
.sc-svg .sk-w { fill: rgba(42, 33, 27, .12); stroke: none; transition: fill .5s var(--ease-standard); }
.sc-svg .sk-w.is-lit { fill: var(--glow); }
.sc-svg .at-w { fill: var(--dusk-3); stroke: var(--ink); stroke-width: calc(var(--sw) * .7); transition: fill .5s var(--ease-standard); }
.sc-svg .at-w.is-lit { fill: var(--glow); }
.sc-svg .nb-w { fill: var(--sky); stroke: var(--ink); stroke-width: calc(var(--sw) * .7); transition: fill .5s var(--ease-standard); }
.sc-svg .nb-w.is-lit { fill: var(--glow); }

/* cast shadows: the hour decides the skew and the strength */
.sc-svg .shadows { --k: 0deg; --a: .12; }
.sc-svg .shk { transform: skewX(var(--k)) scaleY(.45); fill: rgba(94, 60, 24, var(--a)); stroke: none; }

.sc-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* budget tower, routes, ring */
.sc-svg .tw { fill: rgba(42, 33, 27, .14); stroke: none; transition: fill .35s var(--ease-standard); }
.sc-svg .tw.is-lit { fill: var(--glow); }
.sc-svg .route-p { stroke: var(--sun-deep); stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-dasharray: 6 5; fill: none; opacity: .92; }
.sc-svg .ring-c { stroke: var(--sun-deep); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 6 6; fill: none; }
.sc-svg .headl.is-on { fill: var(--glow); }
.sc-svg .badge text { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ===== film ribbon (tuesday) ===== */
.sc-ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 4px 16px calc(4px + var(--safe-b, 0px)); background: var(--glass-paper); border-top: 1px solid var(--line);
  visibility: hidden; opacity: 0;
}
.sc-ribbon__t { flex: none; font: 500 var(--fs-micro, .75rem)/1 var(--font-text); color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .04em; }
.sc-ribbon__track { position: relative; flex: 1; height: 48px; margin: 0 10px; cursor: pointer; touch-action: none; }
.sc-ribbon__rail, .sc-ribbon__fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; }
.sc-ribbon__rail { background: var(--paper-3); }
.sc-ribbon__fill { background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); }
.sc-ribbon__marks { position: absolute; inset: 0; pointer-events: none; }
.sc-ribbon__mark { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 2px var(--card-2), 0 0 0 3.5px var(--ink); }
.sc-ribbon__thumb {
  position: absolute; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--grad-sun); box-shadow: 0 0 0 6px var(--glow-soft), var(--shadow-soft); cursor: grab; touch-action: none;
}
.sc-ribbon__thumb:active { cursor: grabbing; }
.sc-ribbon__thumb:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 9px var(--glow-soft); }

/* ===== «Здесь будет: …» caption: never over the focal part of the scene =====
   Questions (phones): a slim single-line strip docked on the ground line, just above the sheet.
   Results hero: the caption leaves the picture and sits right under the frame.
   (These overrides live here because the scene owns what is drawn on top of it.) */
@media (max-width: 1023px) {
  .q-slot .q-manifest {
    left: 12px; right: 12px; bottom: 30px; padding: 4px 14px 5px; border-radius: var(--r-pill);
    font-size: clamp(.875rem, 3.9vw, 1.0625rem); line-height: 1.25; white-space: nowrap; overflow: hidden;
    background: rgba(252, 248, 240, .8); box-shadow: 0 2px 10px rgba(42, 33, 27, .1);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .q-slot .q-manifest__empty { font-size: .9375rem; }
  .q-slot .q-manifest__label { margin-right: .3em; }
  .q-slot .q-w { gap: .3em; margin-right: .3em; }
}

.rs-hero__scene.rs-hero__scene {
  aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
/* the frame itself: a pseudo-element carries the ratio, radius and shadow the scene used to have */
.rs-hero__scene.rs-hero__scene::before {
  content: ""; display: block; flex: none; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--r-card); background: var(--grad-sky); box-shadow: var(--shadow-scene);
}
.rs-hero__scene.rs-hero__scene > .rs-hero__art,
.rs-hero__scene.rs-hero__scene > .scene-host {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: var(--r-card);
}
.rs-hero__scene.rs-hero__scene .rs-hero__manifest {
  position: static; max-width: 100%; margin: 0 0 0 4px; padding: 0; background: none; box-shadow: none; border-radius: 0;
  color: var(--ink-2);
}
@media (min-width: 1024px) {
  .rs-hero__scene.rs-hero__scene::before { aspect-ratio: 4 / 3; border-radius: var(--r-scene); }
  .rs-hero__scene.rs-hero__scene > .rs-hero__art,
  .rs-hero__scene.rs-hero__scene > .scene-host { aspect-ratio: 4 / 3; border-radius: var(--r-scene); }
}