/* ==========================================================================
   Supercompute experience. Scoped under #sc-stage so it can't reach a host page.
   Fills Ecolab's frame: fixed 800 tall, up to 1376 wide. Type is fixed px.
   No viewport units, nothing fixed, nothing posted to the host.
   ========================================================================== */
#sc-stage {
  --science-blue: #006bd3;
  --ink: #0a2f66;
  --hot: #ff8a00;
  --out: cubic-bezier(.16, 1, .3, 1);
  --cam: cubic-bezier(.72, 0, .14, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --ramp: #ffe100, #ff8a00, #ff4d6d, #ee4fd6, #3f6bff, #00f0ff, #3f6bff, #ee4fd6, #ff4d6d, #ff8a00, #ffe100;
  --warm: #ffe100, #ff8a00, #ff4d6d, #ee4fd6, #ff4d6d, #ff8a00, #ffe100;
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  background: #0a1018;
  color: #fff;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  container: sc / size;
}
#sc-stage *, #sc-stage *::before, #sc-stage *::after { box-sizing: border-box; }
#sc-stage h1, #sc-stage h2, #sc-stage p, #sc-stage ul, #sc-stage ol { margin: 0; padding: 0; list-style: none; }
#sc-stage button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#sc-stage :focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px rgba(5, 11, 22, .7); }

/* ---- the camera and the world. The world is the image, sized and placed so it
        always covers the frame; everything on it moves with it. ---- */
.sc-cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.2s var(--cam), filter .8s ease .3s; }
.sc-cam.is-dim { filter: blur(7px) brightness(.42) saturate(1.2); }
.sc-cam.is-dim.is-mono { filter: blur(7px) brightness(.42) saturate(0); }
.sc-look { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -6px), 0) scale(1.025); transition: transform .8s var(--out); }
.sc-look.is-flat { transform: none; }
.sc-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sc-plate, .sc-clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
/* stills swap at once: they differ, and a clip is covering the swap. A crossfade let the last screen bleed through on landing */
.sc-plate { transition: none; }
.sc-plate.is-on { opacity: 1; }
/* the close: the room's real equipment and its lit lines, in place inside the building still. The full room image sits over them only at the very start and end of the move, fading against the building through a soft edge */
.sc-core { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none; }
.sc-world.is-inset .sc-core { opacity: 1; }
.sc-world.is-inset .sc-core, .sc-world.is-inset .sc-plate[data-still="home"], .sc-world.is-inset #sc-trail { transform-origin: 0 0; transform: translate(38.519%, 18.359%) scale(.498); }
.sc-world.is-inset .sc-plate[data-still="home"] { z-index: 1; opacity: 0; transition: opacity 1.8s ease; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.sc-world.is-inset.is-full .sc-plate[data-still="home"] { opacity: 1; }
.sc-world.is-inset.is-full.is-landing .sc-plate[data-still="home"] { transition-delay: 3.2s; }
#sc-trail path { transition: stroke-width 5s cubic-bezier(.5, 0, .2, 1); }
.sc-world.is-inset #sc-trail .line { stroke-width: 13; }
.sc-world.is-inset #sc-trail .halo { stroke-width: 48; }
.sc-world.is-inset #sc-trail .pulse { stroke-width: 9; }
.sc-clip { z-index: 2; pointer-events: none; }
/* the coolant moving in the sight glass, set into the still exactly where it sits */
.sc-loop { position: absolute; z-index: 1; left: 50.104%; top: 16.111%; width: 4.6875%; height: 17.037%; object-fit: fill; opacity: 0; transition: opacity .3s ease; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent), linear-gradient(transparent, #000 4% 96%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent), linear-gradient(transparent, #000 4% 96%, transparent); mask-composite: intersect; }
.sc-loop.is-on { opacity: 1; }
/* the roof's sky and stacks: COACT's camera is locked, so it sits on the still pixel for pixel and fades out into the rooftop GPT continued */
.sc-hold { position: absolute; z-index: 1; left: 53.646%; top: 0; width: 44.965%; height: 40%; object-fit: fill; opacity: 0; transition: opacity .3s ease; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 20% 98%, transparent), linear-gradient(#000 86%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 20% 98%, transparent), linear-gradient(#000 86%, transparent); mask-composite: intersect; }
.sc-hold.is-on { opacity: 1; }
/* section 5: the heat's whole path, lit along the real pipes. Two lines, because the fluids stay separate */
.sc-trail { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.sc-trail.is-on { visibility: visible; }
.sc-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-trail .line { stroke-width: 6.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-trail .halo { stroke-width: 24; opacity: .55; filter: url(#sc-glow); stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-trail .pulse { stroke: rgba(255, 255, 255, .8); stroke-width: 4.5; stroke-dasharray: .035 .965; stroke-dashoffset: 1; opacity: 0; }
.sc-trail.is-on .line, .sc-trail.is-on .halo { animation: sc-trail 1.5s cubic-bezier(.5, 0, .2, 1) .35s forwards; }
.sc-trail.is-on .fac .line, .sc-trail.is-on .fac .halo { animation-delay: 1.6s; }
@keyframes sc-trail { to { stroke-dashoffset: 0; } }
.sc-trail.is-on .pulse { animation: sc-pulse 4.5s linear 3.2s infinite; }
.sc-trail.is-on .fac .pulse { animation-delay: 5.45s; }
.sc-trail.is-on .ext .line, .sc-trail.is-on .ext .halo { animation-delay: .1s; }
.sc-trail.is-on .ext .pulse { animation-delay: 2.4s; }
@keyframes sc-pulse { 0% { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } 40% { opacity: 1; } 46% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sc-clip.is-on { opacity: 1; }
.sc-pins { position: absolute; inset: 0; z-index: 3; }
.is-moving .sc-pins, .is-moving .sc-copy, .is-moving .sc-back { visibility: hidden; }

/* ---- a soft falloff so type can sit on the scene; never a box ---- */
.sc-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.sc-veil.left { opacity: 1; background: linear-gradient(90deg, rgba(5, 11, 22, .92) 0, rgba(5, 11, 22, .78) 380px, rgba(5, 11, 22, 0) 690px), linear-gradient(0deg, rgba(5, 11, 22, .55), rgba(5, 11, 22, 0) 110px); }
.sc-veil.left.deep { background: linear-gradient(90deg, rgba(5, 11, 22, .94) 0, rgba(5, 11, 22, .88) 430px, rgba(5, 11, 22, .5) 600px, rgba(5, 11, 22, 0) 770px), linear-gradient(0deg, rgba(5, 11, 22, .6), rgba(5, 11, 22, 0) 110px); }
.sc-veil.left.mid { background: linear-gradient(90deg, rgba(5, 11, 22, .94) 0, rgba(5, 11, 22, .88) 430px, rgba(5, 11, 22, .45) 590px, rgba(5, 11, 22, 0) 680px), linear-gradient(0deg, rgba(5, 11, 22, .6), rgba(5, 11, 22, 0) 110px); }
.sc-veil.foot { opacity: 1; background: linear-gradient(0deg, rgba(5, 11, 22, .72), rgba(5, 11, 22, .4) 54px, rgba(5, 11, 22, 0) 118px); }

/* ---- the marker: dark disc so it reads on any image, heat-coloured ring, white core, a halo that breathes ---- */
.sc-mk { position: absolute; z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; scale: calc(1 / var(--k, 1)); animation: sc-mk-in .75s var(--out) calc(var(--n, 0) * 150ms + 240ms) both; }
.no-in .sc-mk { animation: none; }
@keyframes sc-mk-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.sc-mk .halo { position: absolute; inset: 1px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ramp)); filter: blur(9px); opacity: .5; animation: sc-spin 5s linear infinite, sc-breathe 2.8s ease-in-out calc(var(--n, 0) * -.7s) infinite; transition: transform .45s var(--out); }
@keyframes sc-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.sc-mk .disc { position: absolute; inset: 7px; border-radius: 50%; background: rgba(5, 11, 22, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(5, 11, 22, .35); transition: transform .45s var(--out); }
.sc-mk .ring { position: absolute; inset: 5px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ramp)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); animation: sc-spin 5s linear infinite; transition: transform .45s var(--out); }
.sc-mk .dot { position: absolute; inset: 18px; border-radius: 50%; background: #fff; animation: sc-beat 2.8s ease-in-out calc(var(--n, 0) * -.7s) infinite; }
@keyframes sc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-mk:hover .disc, .sc-mk:focus-visible .disc, .sc-mk:hover .ring, .sc-mk:focus-visible .ring, .sc-mk:hover .halo, .sc-mk:focus-visible .halo { transform: scale(1.24); }
.sc-mk:hover .ring, .sc-mk:focus-visible .ring, .sc-mk:hover .halo, .sc-mk:focus-visible .halo { animation-duration: 1.4s, 2.8s; }
.sc-mk:hover .dot, .sc-mk:focus-visible .dot { animation: none; transform: scale(1.6); transition: transform .35s var(--out); }
.sc-mk:hover .halo, .sc-mk:focus-visible .halo { opacity: 1; animation-name: sc-spin; }
/* the one to go to next calls out; on a section's own screen they all do, taking turns */
.sc-mk.is-lead::after, .sc-mk.is-call::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid #fff; animation: sc-echo 2.8s var(--out) infinite; pointer-events: none; }
.sc-mk.is-call::after { animation-delay: calc(var(--n, 0) * .55s); }
.sc-mk.is-call::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid #ff8a00; animation: sc-echo 2.8s var(--out) calc(var(--n, 0) * .55s + .32s) infinite; pointer-events: none; }
@keyframes sc-echo { from { transform: scale(.9); opacity: .9; } 75%, to { transform: scale(2.15); opacity: 0; } }
.sc-mk.is-hit .ring, .sc-mk.is-hit .disc, .sc-mk.is-hit .halo { transform: scale(1.7); opacity: 0; transition: transform .3s var(--cam), opacity .3s ease; }
.sc-tip { position: absolute; top: 50%; left: calc(100% + 1px); padding: 6px 11px; background: rgba(5, 11, 22, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; pointer-events: none; transform: translateY(-50%); clip-path: inset(0 100% 0 0); transition: clip-path .42s var(--out), background .2s ease, color .2s ease; }
.sc-mk.side-l .sc-tip { left: auto; right: calc(100% + 1px); clip-path: inset(0 0 0 100%); }
.sc-mk:hover .sc-tip, .sc-mk:focus-visible .sc-tip, .sc-mk.is-lead .sc-tip, .sc-mk.is-call .sc-tip { clip-path: inset(0 0 0 0); }
.sc-mk.is-call .sc-tip { transition-delay: calc(var(--n, 0) * 150ms + 620ms), 0s, 0s; font-size: 15px; }
.sc-mk:hover .sc-tip, .sc-mk:focus-visible .sc-tip { background: #fff; color: #0a1018; }
.sc-mk.is-seen .dot { background: #ff8a00; }

/* ---- type, composed to the image it sits on ---- */
.sc-copy { position: absolute; z-index: 5; left: 64px; top: 0; bottom: 64px; width: 540px; display: flex; flex-direction: column; justify-content: center; gap: 16px; pointer-events: none; text-shadow: 0 1px 16px rgba(0, 0, 0, .35); }
.sc-copy > * { pointer-events: auto; }
.sc-copy:empty { display: none; }
.sc-copy.on-floor { justify-content: flex-end; bottom: 78px; left: 56px; width: 480px; gap: 10px; color: var(--ink); text-shadow: none; font-size: 17px; line-height: 1.45; }
#sc-stage .sc-copy h1 { font-size: 58px; line-height: 1.04; font-weight: 700; letter-spacing: -.015em; }
.sc-copy.on-floor.is-close { width: 540px; gap: 18px; }
#sc-stage .sc-copy.is-close h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.01em; }
#sc-stage .sc-copy h2 { font-size: 50px; line-height: 1.06; font-weight: 300; letter-spacing: -.01em; }
#sc-stage .sc-copy h2 b { font-weight: 700; }
.sc-copy p { text-wrap: pretty; }
#sc-stage .sc-copy h2.is-item { font-size: 52px; font-weight: 700; }
#sc-stage .sc-copy h2.is-item.is-long { font-size: 44px; }
.sc-copy .lead { font-size: 21px; line-height: 1.4; font-weight: 400; }
.sc-copy .sub { font-size: 17px; line-height: 1.5; opacity: .86; }
.sc-ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sc-ln > span { display: block; animation: sc-rise 1s var(--out) calc(var(--i) * 80ms + 90ms) both; }
@keyframes sc-rise { from { transform: translateY(112%); } to { transform: none; } }
.sc-fu { animation: sc-fu .85s var(--out) calc(var(--i) * 80ms + 140ms) both; }
@keyframes sc-fu { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.sc-big { position: relative; display: inline-block; isolation: isolate; font-size: 112px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: #ffb347; }
.sc-big .g { display: none; }
.sc-big.is-line { font-size: 36px; line-height: 1.12; letter-spacing: -.015em; white-space: nowrap; }
/* the readings 3D TRASAR watches: a light passes down the list, the way it keeps checking them */
.sc-reads { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 5px 28px; font-size: 15px; font-weight: 500; }
.sc-reads li { position: relative; padding-left: 16px; animation: sc-readt 4.9s linear calc(var(--n) * .7s) infinite; }
.sc-reads li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #00c2ff; animation: sc-readd 4.9s linear calc(var(--n) * .7s) infinite; }
@keyframes sc-readt { 0%, 22%, 100% { opacity: .8; } 6% { opacity: 1; } }
@keyframes sc-readd { 0%, 22%, 100% { opacity: .45; transform: none; box-shadow: none; } 6% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 10px 2px rgba(0, 194, 255, .75); } }
.sc-big.is-line + .sc-bigt { margin-top: 10px; text-wrap: balance; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sc-big { background: linear-gradient(95deg, var(--ramp)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; padding-right: 6px; animation: sc-flow 10s linear infinite; }
  /* a soft copy of the same moving colour sits behind the digits */
  .sc-big .g { display: block; position: absolute; inset: 0; z-index: -1; padding-right: 6px; background: inherit; background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(20px); opacity: .6; animation: sc-flow 10s linear infinite; pointer-events: none; }
}
@keyframes sc-flow { to { background-position: -200% 0; } }
.sc-bigt { font-size: 17px; font-weight: 500; margin-top: 6px; }
#sc-stage .sc-go { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; font-weight: 700; color: inherit; text-align: left; }
.sc-go .arrow { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--science-blue); color: #fff; font-size: 19px; line-height: 1; transition: transform .4s var(--pop); }
.sc-go:hover .arrow { transform: translateX(5px); }
.sc-go span.t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--out); padding-bottom: 2px; }
.sc-go:hover span.t { background-size: 100% 2px; }
#sc-stage .sc-back { position: absolute; z-index: 6; left: 64px; top: 36px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
#sc-stage .sc-back[hidden] { display: none; }
.sc-back::before { content: "\2190"; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--science-blue); color: #fff; font-size: 19px; line-height: 1; text-shadow: none; transition: transform .4s var(--pop); }
.sc-back:hover::before { transform: translateX(-5px); }
.sc-steplab { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.sc-steps { display: flex; gap: 10px; }
.sc-steps.is-four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sc-stage .sc-step.is-txt { min-height: 50px; padding: 9px 32px 9px 12px; justify-content: center; }
.sc-step.is-txt b { font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.sc-step.is-txt + .sc-stept { margin-top: 8px; }
/* two lines reserved, so the column doesn't jump when a shorter caption comes in */
#sc-stage .sc-steps.is-four + .sc-stept { margin-top: 10px; min-height: 3em; }
/* real buttons: raised glass at rest, they lift on hover, press down, and the chosen one runs hot */
#sc-stage .sc-step { position: relative; flex: 1; min-width: 0; min-height: 96px; padding: 12px 12px 11px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border-radius: 12px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42), 0 6px 18px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .35s var(--pop), background .25s ease, box-shadow .25s ease; }
#sc-stage .sc-step:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px #fff, 0 10px 24px rgba(0, 0, 0, .45); }
#sc-stage .sc-step:active { transform: translateY(0) scale(.97); }
.sc-step b { font-size: 32px; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; }
.sc-step .tag { font-size: 13px; line-height: 1.25; font-weight: 500; }
.sc-step .ind { position: absolute; right: 11px; top: 11px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); transition: box-shadow .25s ease; }
#sc-stage .sc-step:hover .ind { box-shadow: inset 0 0 0 2px #fff; }
/* the chosen step runs hot, and the higher the step the more alive it is */
#sc-stage .sc-step[aria-pressed="true"] { background: linear-gradient(110deg, #d9480f, #d6224f 33%, #b5249f 66%, #d9480f) 0 0 / 200% 100%; box-shadow: 0 8px 26px rgba(214, 34, 79, .5), 0 0 0 1.5px rgba(255, 255, 255, .85); animation: sc-flow 16s linear infinite; }
[data-heat="85"] .sc-step[aria-pressed="true"] { animation-duration: 6s; box-shadow: 0 10px 32px rgba(214, 34, 79, .65), 0 0 0 1.5px #fff; }
[data-heat="100"] .sc-step[aria-pressed="true"] { background-image: linear-gradient(110deg, #d9480f, #d6224f 20%, #b5249f 40%, #3b55e6 60%, #b5249f 80%, #d9480f); animation: sc-flow 3s linear infinite, sc-ultra-halo 2.4s linear infinite; }
@keyframes sc-ultra-halo { 0%, 100% { box-shadow: 0 0 26px 3px rgba(255, 138, 0, .95); } 25% { box-shadow: 0 0 30px 4px rgba(255, 77, 109, .95); } 50% { box-shadow: 0 0 34px 5px rgba(238, 79, 214, .95); } 75% { box-shadow: 0 0 30px 4px rgba(63, 107, 255, .95); } }
[data-heat="100"] .sc-step[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, var(--ramp)) 0 0 / 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sc-flow 1.6s linear infinite; pointer-events: none; }
@keyframes sc-ultra-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sc-step[aria-pressed="true"] .ind { background: #fff; box-shadow: none; z-index: 1; }
.sc-step[aria-pressed="true"] .ind::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #c8264f; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sc-steps { isolation: isolate; }

/* the meter: resting at 70, waking at 85, fully alive at 100 */
.sc-meter { --p: 0; position: relative; height: 8px; margin-top: 16px; border-radius: 4px; background: rgba(255, 255, 255, .16); transition: transform .6s var(--out); }
.m-bar, .m-glow { position: absolute; inset: 0; border-radius: 4px; }
.m-bar i, .m-glow i { position: absolute; inset: 0; border-radius: 4px; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0 round 4px); transition: clip-path .9s var(--out), opacity .5s ease; opacity: 0; }
.m-glow { filter: blur(9px); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.m-bar .t70 { background: linear-gradient(90deg, #ffe100, #ff8a00 35%, #ff4d6d 65%, #ee4fd6); }
.m-bar .t85, .m-glow .t85 { background: linear-gradient(90deg, var(--warm)) 0 0 / 200% 100%; animation: sc-flow 4.5s linear infinite; }
.m-bar .t100, .m-glow .t100 { background: linear-gradient(90deg, var(--ramp)) 0 0 / 200% 100%; animation: sc-flow 1.7s linear infinite; }
[data-heat="70"] .t70, [data-heat="85"] .t85, [data-heat="100"] .t100 { opacity: 1; }
[data-heat="85"] .m-glow { opacity: .55; }
[data-heat="100"] .m-glow { opacity: 1; animation: sc-ultra-glow 1.4s ease-in-out infinite; }
[data-heat="100"] .sc-meter { transform: scaleY(1.4); }
/* a highlight running the length of the bar, only at the top step */
.m-shine { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.m-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0)); transform: translateX(-110%); animation: sc-shine 1.5s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes sc-shine { to { transform: translateX(310%); } }
[data-heat="100"] .m-shine { opacity: 1; }
/* sparks lifting off the bar at the top step */
.m-sparks { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
[data-heat="100"] .m-sparks { opacity: 1; }
.m-sparks i { position: absolute; bottom: 2px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; animation: sc-spark var(--t) ease-out var(--d) infinite; }
@keyframes sc-spark { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx), -13px, 0) scale(.3); } }
/* a step without a level: the same button, resting */
#sc-stage .sc-step.is-low { min-height: 84px; }
.sc-stept { font-size: 16px; min-height: 48px; }
.sc-unitcopy { min-height: 150px; }
.sc-unitname { font-size: 22px; line-height: 1.2; font-weight: 700; margin-bottom: 6px; }
.sc-unitname.is-new { animation: sc-fu .5s var(--out) both; }
.sc-stept.is-new { animation: sc-fu .5s var(--out) both; }

/* ---- the item, out of the scene ---- */
.sc-obj { position: absolute; z-index: 4; left: 40%; right: 2%; top: 3%; bottom: 10%; display: grid; place-items: center; pointer-events: none; }
.sc-obj::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255, 138, 0, .24), rgba(238, 79, 214, .13) 48%, rgba(63, 107, 255, .09) 72%, rgba(0, 0, 0, 0)); opacity: 0; transition: opacity 1s ease .25s; }
.sc-obj.is-in::before { opacity: 1; }
.sc-obj > img { position: relative; max-width: 96%; max-height: 100%; object-fit: contain; opacity: 0; transform: translateY(26px) scale(.84); filter: blur(10px); transition: opacity .7s ease, transform 1.1s var(--out), filter .8s ease; }
.sc-obj.is-in > img { opacity: 1; transform: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }

/* tech explode: real layers, cut from their own art. Fully open is the original drawing. */
.sc-stack { position: relative; height: 100%; aspect-ratio: 1090 / 1590; opacity: 0; transform: translateY(-20%) scale(1.14); transition: transform 1.4s var(--cam), opacity .6s ease; }
.sc-obj.is-in .sc-stack { opacity: 1; }
.sc-stack.is-open { transform: none; }
.sc-stack img { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(calc(var(--dy) * 1%)); transition: transform 1.3s var(--cam) calc(var(--o) * 60ms); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.sc-stack.is-open img { transform: none; animation: sc-heat 1.5s ease calc(var(--h) * 150ms + 650ms) both; }
@keyframes sc-heat {
  0%, 100% { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
  40% { filter: drop-shadow(0 0 22px rgba(255, 138, 0, .95)) drop-shadow(0 0 6px rgba(255, 77, 109, .8)); }
}
#sc-stage .sc-toggle { pointer-events: auto; position: absolute; right: 2%; bottom: 2px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 13px; border-radius: 20px; font-size: 14px; font-weight: 500; background: rgba(5, 11, 22, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); transition: background .2s ease, box-shadow .2s ease, transform .3s var(--out); }
#sc-stage .sc-toggle:hover { background: rgba(5, 11, 22, .82); box-shadow: inset 0 0 0 1px #fff; transform: translateY(-2px); }
#sc-stage .sc-toggle:active { transform: scale(.97); }
.sc-toggle svg { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* a rendered turn with its own alpha: the device stays solid and the room sits behind it */
.sc-obj.is-turn::before { display: none; }
/* the lifecycle dashboard: live panels hanging in open space, sharing one slow sway. The chosen one comes forward */
#sc-stage .sc-obj.is-dash { left: 42%; right: 0; top: 0; bottom: 8%; }
.sc-obj.is-dash::before { display: none; }
.sc-dash { position: absolute; inset: 0; perspective: 1500px; container-type: inline-size; opacity: 0; transition: opacity .8s ease .15s; }
.sc-obj.is-in .sc-dash { opacity: 1; }
.d-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-13deg) rotateX(4deg); animation: sc-rig 8s ease-in-out infinite alternate; }
@keyframes sc-rig { from { transform: rotateY(-15deg) rotateX(5deg); } to { transform: rotateY(-6deg) rotateX(2deg); } }
.pn { position: absolute; left: 50%; top: 50%; width: 74cqw; aspect-ratio: 1.46; padding: 2.2cqw 2.6cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 2.1cqw; line-height: 1.3; color: #fff; border-radius: 1.8cqw; cursor: pointer; pointer-events: auto; text-align: left; background: linear-gradient(155deg, #1a2c4a, #080f1c); box-shadow: 0 0 0 1px rgba(140, 200, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .12), 0 3cqw 7cqw rgba(0, 0, 0, .6), 0 0 5cqw rgba(0, 150, 255, .16); transition: transform 1s var(--out), opacity .7s ease, box-shadow .6s ease; will-change: transform; }
.pn[data-pos="0"] { transform: translate3d(-50%, -50%, 90px); opacity: 1; box-shadow: 0 0 0 1px rgba(150, 215, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .16), 0 3cqw 8cqw rgba(0, 0, 0, .7), 0 0 7cqw rgba(0, 170, 255, .34); }
.pn[data-pos="1"] { transform: translate3d(-92%, -100%, -220px); opacity: .62; }
.pn[data-pos="2"] { transform: translate3d(-22%, -92%, -340px); opacity: .5; }
.pn[data-pos="3"] { transform: translate3d(-90%, -12%, -280px); opacity: .55; }
.pn:not(.is-front):hover { opacity: .92; }
.pn > * { pointer-events: none; }
.pn:not(.is-front) * { animation-play-state: paused !important; }
.pn header { display: flex; align-items: center; justify-content: space-between; font-size: 1.12em; font-weight: 700; letter-spacing: -.005em; }
.pn .live { display: inline-flex; align-items: center; gap: .5em; font-size: .72em; font-weight: 500; color: #9fe6ff; }
.pn .live i { width: .62em; height: .62em; border-radius: 50%; background: #00e0ff; animation: sc-live 1.6s ease-in-out infinite; }
@keyframes sc-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 224, 255, .7); } 50% { box-shadow: 0 0 0 .5em rgba(0, 224, 255, 0); } }
.d-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2cqw; }
.d-cell { position: relative; min-height: 0; padding: 1.1cqw 1.3cqw; border-radius: 1cqw; background: rgba(120, 180, 255, .07); display: flex; flex-direction: column; gap: .5cqw; overflow: hidden; }
.d-name { display: flex; justify-content: space-between; align-items: baseline; font-size: .86em; font-weight: 500; }
.d-name em { font-style: normal; font-size: .82em; color: #7fe3a8; }
.d-spark { flex: 1; min-height: 0; overflow: hidden; }
.d-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d-spark path { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.d-run { animation: sc-run var(--t, 7s) linear infinite; }
@keyframes sc-run { to { transform: translateX(-200px); } }
.d-ringcell .d-ring { position: absolute; right: 8%; bottom: 8%; height: 62%; aspect-ratio: 1; transform: rotate(-90deg); }
.d-ring circle { fill: none; stroke: rgba(140, 190, 255, .2); stroke-width: 10; }
.d-ring .v { stroke: url(#sc-dr); stroke-linecap: round; stroke-dasharray: 72 100; animation: sc-ring 5s ease-in-out infinite alternate; }
@keyframes sc-ring { from { stroke-dasharray: 68 100; } to { stroke-dasharray: 76 100; } }
.d-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3%; }
.d-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(0deg, #3f6bff, #00f0ff); transform-origin: 50% 100%; animation: sc-bar 1.8s ease-in-out calc(var(--n) * -.17s) infinite alternate; }
@keyframes sc-bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.d-chart, .d-net { flex: 1; min-height: 0; width: 100%; display: block; overflow: visible; }
.d-chart text, .d-net text { font-size: 14px; fill: rgba(255, 255, 255, .78); font-family: inherit; }
.d-chart .band { fill: rgba(0, 224, 255, .1); }
.d-chart .bandt { font-size: 12px; fill: rgba(150, 230, 255, .8); }
.d-track, .d-line { fill: none; stroke-linecap: round; }
.d-track { stroke: rgba(255, 255, 255, .08); stroke-width: 3; }
.d-line { stroke: url(#sc-dl); stroke-width: 4; }
.d-head { fill: #fff; stroke: rgba(255, 255, 255, .35); stroke-width: 8; }
.d-chip { opacity: 0; transition: opacity .35s ease; }
.d-chip.is-on { opacity: 1; }
.d-chip rect { fill: #ff4d6d; transition: fill .35s ease; }
.d-chip.is-ok rect { fill: #0a8a5e; }
.d-chip text { font-size: 13px; font-weight: 700; fill: #fff; }
.d-axis path { fill: none; stroke: rgba(255, 255, 255, .35); }
.arc { fill: none; stroke: rgba(120, 190, 255, .34); stroke-width: 1.5; }
.flow { fill: none; stroke: #00f0ff; stroke-width: 3; stroke-linecap: butt; stroke-dasharray: .14 1.14; animation: sc-flowd 3.6s linear infinite; }
.flow.g { stroke-width: 9; stroke-opacity: .28; }
.flow.b { animation-delay: -1s; } .flow.c { animation-delay: -2s; } .flow.d { animation-delay: -2.8s; }
@keyframes sc-flowd { from { stroke-dashoffset: .14; } to { stroke-dashoffset: -1; } }
.hub .o { fill: #fff; }
.hub .p { fill: none; stroke: #00f0ff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sc-hub 2.4s var(--out) calc(var(--n) * .5s) infinite; }
@keyframes sc-hub { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.d-plan { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-around; }
.d-plan li { position: relative; display: flex; align-items: center; gap: 1.1em; font-size: 1.02em; font-weight: 500; animation: sc-planl 7s linear calc(var(--n) * .9s) infinite; }
.d-plan li i { flex: none; position: relative; width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(140, 190, 255, .22); animation: sc-plani 7s linear calc(var(--n) * .9s) infinite; }
@keyframes sc-planl { 0%, 100% { opacity: .55; } 5%, 70% { opacity: 1; } 78% { opacity: .55; } }
@keyframes sc-plani { 0%, 100% { background: rgba(140, 190, 255, .22); box-shadow: none; } 5%, 70% { background: #00e0ff; box-shadow: 0 0 .9em rgba(0, 224, 255, .7); } 78% { background: rgba(140, 190, 255, .22); box-shadow: none; } }
/* the installation: seven solid pieces. Apart, each is offset; together, the valves rise to their seams and then each hose slides in along its own line. Paint order does the masking: the valve sits under its tee, the hose collar sits on the valve's open end. Then the whole piece sways as one rigid plane */
.sc-parts { position: absolute; inset: 0 0 6% 0; display: grid; place-items: center; }
.sc-rig { --move: cubic-bezier(.5, 0, .2, 1); --seat: cubic-bezier(.62, 0, .2, 1); position: relative; width: 100%; aspect-ratio: 1672 / 941; perspective: 1900px; opacity: 0; transform: translate(3.25%, -7.3%) scale(.92); transition: opacity .6s ease, transform 1.6s var(--move); }
.sc-rig.is-ready { opacity: 1; }
.sc-rig.is-together { transform: translate(1.18%, -2.7%) scale(1.04); transition: opacity .6s ease, transform 2.2s var(--move); }
.sc-sway { position: absolute; inset: 0; transition: transform 1.6s var(--move); }
.is-together > .sc-sway { transform: rotateY(-6deg) rotateX(1deg); transition: transform 2.2s var(--move); }
.is-set > .sc-sway { animation: sc-sway 16s ease-in-out infinite; }
@keyframes sc-sway { 0%, 100% { transform: rotateY(-6deg) rotateX(1deg); } 50% { transform: rotateY(6deg) rotateX(-1deg); } }
.sc-sway img { position: absolute; max-width: none; height: auto; translate: var(--dx) var(--dy); transform: translate(var(--ax), var(--ay)); transition: transform .7s var(--seat) calc(var(--d) * .1s), translate .9s var(--seat) calc(.6s + var(--d) * .1s); }
.is-together > .sc-sway img { translate: 0 0; transform: none; transition: translate 1.1s var(--seat) calc(var(--d) * .16s), transform .9s var(--seat) calc(1.15s + var(--d) * .16s); }
#sc-stage .sc-toggle.is-2 { right: calc(2% + 112px); }
.sc-obj.has-heat::before { display: block; opacity: var(--heat, .4); transition: opacity .9s ease; animation: none; background: radial-gradient(closest-side, rgba(255, 138, 0, .75), rgba(255, 77, 109, .4) 45%, rgba(238, 79, 214, .16) 70%, rgba(0, 0, 0, 0)); }
.sc-turn { position: relative; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(calc(var(--sx, 0px) + var(--sa, 0px))) scale(calc(var(--z, 1) * var(--zf, 1))); transition: opacity .8s ease .2s; }
.sc-obj.is-in .sc-turn { opacity: 1; }
.sc-obj[data-heat="85"]::before { animation: sc-heatbreath 4s ease-in-out infinite; }
.sc-obj[data-heat="100"]::before { animation: sc-heatbreath 1.6s ease-in-out infinite; }
@keyframes sc-heatbreath { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.06); } }
/* one shot, two coolants. The water layer is only the fluid; it rises through the glass over the glycol, and its colour lights the room behind it */
.sc-obj.has-fluid::before, .sc-obj.has-fluid::after { content: ""; display: block; position: absolute; inset: 0; pointer-events: none; transition: opacity .9s ease; }
.sc-obj.has-fluid::before { opacity: .55; background: radial-gradient(closest-side, rgba(170, 200, 40, .55), rgba(170, 200, 40, .16) 55%, rgba(0, 0, 0, 0)); }
.sc-obj.has-fluid::after { z-index: -1; opacity: 0; background: radial-gradient(closest-side, rgba(120, 170, 200, .55), rgba(120, 170, 200, .16) 55%, rgba(0, 0, 0, 0)); }
.sc-obj.has-fluid[data-fluid="1"]::before { opacity: 0; }
.sc-obj.has-fluid[data-fluid="1"]::after { opacity: .55; }
.sc-obj.has-fluid .sc-turn { position: absolute; inset: 0; }
.sc-turn.sc-fluid { -webkit-mask: linear-gradient(0deg, #000 45%, transparent 53%) 0 0 / 100% 200% no-repeat; mask: linear-gradient(0deg, #000 45%, transparent 53%) 0 0 / 100% 200% no-repeat; transition: opacity .8s ease .2s, -webkit-mask-position 1.3s cubic-bezier(.5, 0, .2, 1), mask-position 1.3s cubic-bezier(.5, 0, .2, 1); }
.sc-obj.has-fluid[data-fluid="1"] .sc-turn.sc-fluid { -webkit-mask-position: 0 100%; mask-position: 0 100%; }

/* the CDU line-up */
.sc-obj.is-line::before { background: radial-gradient(closest-side, rgba(0, 107, 211, .3), rgba(0, 107, 211, .1) 58%, rgba(0, 0, 0, 0)); }
.sc-hero { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.sc-herov { position: absolute; max-width: none; opacity: 0; transition: opacity .35s ease; z-index: 2; }
.sc-herov.is-on { opacity: 1; }
.sc-u { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, .2)); transition: transform 1s var(--cam), filter .5s ease; filter: brightness(.74) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.sc-u img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-u.is-hero { z-index: 3; filter: brightness(1) drop-shadow(0 26px 36px rgba(0, 0, 0, .55)); }
.sc-u.is-peek:not(.is-hero) { filter: brightness(1.06) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); transform: translate(var(--x, 0), calc(var(--y, 0px) - 5px)) scale(calc(var(--s, .2) * 1.08)); transition: transform .35s var(--out), filter .25s ease; }
/* while the turning unit is on, its still steps back */
.sc-obj.is-line:has(.sc-herov.is-on) .sc-u.is-hero img { opacity: 0; }
.sc-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; display: flex; pointer-events: auto; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .16); }
#sc-stage .sc-slot { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8px; min-width: 0; transition: background .25s ease; }
#sc-stage .sc-slot:hover { background: linear-gradient(0deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); }
.sc-slot .nm { font-size: 13px; line-height: 17px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 6px rgba(5, 11, 22, .9); }
.sc-slot .cap { font-size: 12px; line-height: 15px; opacity: .8; white-space: nowrap; text-shadow: 0 1px 6px rgba(5, 11, 22, .9); }
.sc-slot::after { content: ""; position: absolute; left: 14%; right: 14%; top: -2px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ff8a00, #ff4d6d, #ee4fd6, #ff4d6d, #ff8a00) 0 0 / 200% 100%; opacity: 0; transition: opacity .3s ease; }
.sc-slot[aria-pressed="true"]::after { opacity: 1; animation: sc-flow 3.5s linear infinite; box-shadow: 0 0 10px rgba(255, 77, 109, .75); }
.sc-slot[aria-pressed="true"] .cap { opacity: 1; color: #ffb56b; }
#sc-stage .sc-obj.is-line .sc-toggle { top: 0; bottom: auto; }

/* a wide device at its widest angle stays clear of the copy column, which holds its width down to 1180 */
@container sc (max-width: 1350px) { .sc-turn.is-wide { --zf: .9; --sa: 10px; } }
@container sc (max-width: 1290px) { .sc-turn.is-wide { --zf: .85; --sa: 10px; } }
@container sc (max-width: 1240px) { .sc-turn.is-wide { --zf: .8; --sa: 24px; } }
@container sc (max-width: 1180px) { .sc-turn.is-wide { --zf: 1; --sa: 0px; } }

/* ---- the journey along the bottom: sections, or a section's items when you're inside one ---- */
.sc-thread { position: absolute; z-index: 6; left: 28px; right: 28px; bottom: 8px; height: 62px; display: flex; align-items: flex-end; gap: 16px; }
.sc-way { --g: 104px; flex: 1; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.sc-way.is-new { animation: sc-wayin .4s ease both; }
@keyframes sc-wayin { from { opacity: 0; } to { opacity: 1; } }
.sc-thread.is-items .sc-way { --g: 144px; }
.sc-thread ol { display: flex; align-items: flex-end; }
.sc-thread li { position: relative; display: flex; align-items: center; height: 44px; }
.sc-thread li + li { margin-left: calc(var(--g) - 44px); }
/* one rail, first dot to last. The fill is revealed rather than stretched, so it travels without the gradient squeezing */
.sc-rail { position: absolute; left: 50%; bottom: 20.5px; width: calc((var(--n) - 1) * var(--g)); height: 3px; transform: translateX(-50%); border-radius: 2px; background: rgba(255, 255, 255, .62); pointer-events: none; }
.sc-rail i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #ff8a00, #ff4d6d, #ee4fd6, #ff4d6d, #ff8a00) 0 0 / 200% 100%; box-shadow: 0 0 10px rgba(255, 77, 109, .7); animation: sc-flow 3.5s linear infinite; clip-path: inset(-14px calc((1 - var(--p, 0)) * 100%) -14px -2px); transition: clip-path .75s var(--out); }
#sc-stage .sc-thread ol button { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; }
.sc-thread .pip { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(5, 11, 22, .55); transition: transform .35s var(--out), width .3s var(--out) var(--d, 0s), height .3s var(--out) var(--d, 0s), background .25s ease var(--d, 0s); }
.sc-thread li.is-lit .pip, .sc-thread .is-seen .pip { background: #ff8a00; }
/* where you are: a solid orange dot that's plainly alive */
.sc-thread .is-cur .pip { width: 18px; height: 18px; background: #ff8a00; box-shadow: 0 0 16px 2px rgba(255, 138, 0, .85); animation: sc-here 2.2s ease-in-out infinite; }
.sc-thread .is-cur .pip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff8a00; animation: sc-ping 2.2s var(--out) infinite; }
@keyframes sc-here { 0%, 100% { box-shadow: 0 0 12px 1px rgba(255, 138, 0, .7); } 50% { box-shadow: 0 0 22px 5px rgba(255, 138, 0, 1); } }
@keyframes sc-ping { from { transform: scale(1); opacity: .65; } to { transform: scale(2.6); opacity: 0; } }
.sc-thread ol button:hover .pip { transform: scale(1.35); }
.sc-tl { position: absolute; bottom: 100%; left: 50%; margin-bottom: -7px; transform: translateX(-50%); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; color: #fff; opacity: .86; text-shadow: 0 1px 6px rgba(5, 11, 22, .9), 0 0 2px rgba(5, 11, 22, .6); transition: opacity .2s ease; }
.sc-thread ol button:hover .sc-tl, .sc-thread ol button:focus-visible .sc-tl { opacity: 1; }
.sc-thread .is-cur .sc-tl, .sc-thread .is-last .sc-tl { opacity: 1; font-weight: 700; }
/* back in the whole room: the last place you went stays marked */
.sc-thread .is-last .pip { width: 15px; height: 15px; box-shadow: 0 0 12px 2px rgba(255, 138, 0, .75); }
#sc-stage .sc-tx { min-height: 44px; padding: 0 2px; font-size: 14px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 8px rgba(5, 11, 22, .85); }
.sc-tx:hover { text-decoration: underline; text-underline-offset: 4px; }
#sc-stage .sc-home { display: inline-flex; align-items: center; gap: 7px; }
.sc-home svg { flex: none; width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 4px rgba(5, 11, 22, .85)); }
#sc-stage .sc-tx.is-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 2px; padding: 0 14px 0 16px; border-radius: 20px; background: var(--science-blue); font-weight: 700; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 107, 211, .45); transition: transform .3s var(--out), box-shadow .25s ease, background .2s ease; }
#sc-stage .sc-tx.is-cta:hover { text-decoration: none; background: #0a7cec; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 107, 211, .6); }
#sc-stage .sc-tx.is-cta:active { transform: scale(.97); }
.sc-thread.is-close .is-cta { visibility: hidden; }

/* review only: says a piece isn't built yet */
.sc-note { position: absolute; z-index: 7; left: 50%; bottom: 76px; padding: 6px 12px; background: rgba(5, 11, 22, .82); font-size: 14px; white-space: nowrap; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--out); }
.sc-note.is-on { opacity: 1; transform: translate(-50%, 0); }

/* narrower laptops: the same composition, tighter */
@container sc (max-width: 1180px) {
  .sc-copy { left: 48px; width: 410px; gap: 12px; }
  .sc-copy.on-floor { left: 44px; width: 430px; }
  #sc-stage .sc-copy h1 { font-size: 50px; }
  .sc-copy.on-floor.is-close { width: 440px; }
  #sc-stage .sc-copy.is-close h1 { font-size: 34px; }
  #sc-stage .sc-copy.is-close .sc-go { font-size: 16px; }
  #sc-stage .sc-copy h2 { font-size: 44px; }
  #sc-stage .sc-copy h2.is-item { font-size: 42px; }
  #sc-stage .sc-copy h2.is-item.is-long { font-size: 36px; }
  .sc-big.is-line { font-size: 31px; }
  .sc-copy .lead { font-size: 19px; }
  .sc-copy .sub { font-size: 16px; }
  .sc-big { font-size: 88px; }
  #sc-stage .sc-step { padding: 10px 10px 9px; min-height: 92px; }
  .sc-step b { font-size: 27px; }
  #sc-stage .sc-back { left: 48px; }
  .sc-obj { left: 44%; }
  #sc-stage .sc-obj.is-dash { left: 45%; }
  .pn { width: 84cqw; font-size: 2.5cqw; }
  .sc-slot .nm { font-size: 11.5px; }
  .sc-slot .cap { font-size: 11px; }
  .sc-veil.left.deep, .sc-veil.left.mid { background: linear-gradient(90deg, rgba(5, 11, 22, .94) 0, rgba(5, 11, 22, .88) 330px, rgba(5, 11, 22, .4) 470px, rgba(5, 11, 22, 0) 600px), linear-gradient(0deg, rgba(5, 11, 22, .6), rgba(5, 11, 22, 0) 110px); }
  .sc-veil.left { background: linear-gradient(90deg, rgba(5, 11, 22, .92) 0, rgba(5, 11, 22, .78) 300px, rgba(5, 11, 22, 0) 530px), linear-gradient(0deg, rgba(5, 11, 22, .55), rgba(5, 11, 22, 0) 110px); }
}

@media (prefers-reduced-motion: reduce) {
  #sc-stage *, #sc-stage *::before, #sc-stage *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .sc-look { transform: none; }
  .m-sparks, .m-shine, .sc-trail .pulse, .flow { display: none; }
}

/* the Pause control holds everything on the screen */
.is-held, .is-held *, .is-held *::before, .is-held *::after { animation-play-state: paused !important; }