@font-face { font-family:"Graphik LCG"; src:url("/station/assets/fonts/Graphik-Light-Web.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Graphik LCG"; src:url("/station/assets/fonts/Graphik-Regular-Web.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
:root { color-scheme: light; font-family: 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif; background: #fff; color: #292929; }
:root { --focus-card-scale:1.15; --inactive-route-share:55%; --inactive-pill-share:65%; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; background: #fff; }
body { min-height: 100svh; overflow: hidden; }
button { font: inherit; }
.map-page { position: relative; height: 100svh; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: #fff; }
.scheme-switcher { position:fixed; z-index:40; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px; max-width:calc(100vw - 20px); padding:5px; border:1px solid #e4e9e5; border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 4px 16px rgba(24,38,29,.11); overflow:auto; scrollbar-width:none; }
.scheme-switcher::-webkit-scrollbar { display:none; }
.scheme-switcher button { flex:0 0 auto; max-width:56vw; padding:9px 13px; border:0; border-radius:7px; background:transparent; color:#526159; font:600 13px/1.1 'Graphik LCG',Arial,sans-serif; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer; }
.scheme-switcher button[aria-selected="true"] { background:#29483d; color:#fff; }
.studio-preview-banner { position:fixed; z-index:45; top:max(12px,env(safe-area-inset-top)); left:12px; padding:7px 10px; border:1px solid #dce5de; border-radius:8px; background:rgba(255,255,255,.94); color:#506258; box-shadow:0 3px 12px rgba(24,38,29,.09); font:600 11px/1.1 'Graphik LCG',Arial,sans-serif; pointer-events:none; }
.map-stage { position: relative; width: min(calc(100vw - 24px), calc((100svh - 24px) * var(--map-aspect, .5994))); aspect-ratio: var(--map-aspect, .5994); }
.station-geometry-booting .map-stage > .metro-map { visibility:hidden; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.map-loading-mark { position: relative; display: block; width: 42px; height: 42px; opacity: .48; }
.map-loading-ghost, .map-loading-petal { position: absolute; inset: 0; display: block; background: #596a61; -webkit-mask: center / contain no-repeat url('/station/assets/petal-mark.webp'); mask: center / contain no-repeat url('/station/assets/petal-mark.webp'); }
.map-loading-ghost { opacity: .12; }
@keyframes map-petal-grow { 0%,5% { opacity: 0; transform: scale(.08); } 18%,72% { opacity: 1; transform: scale(1); } 88%,100% { opacity: 0; transform: scale(.08); } }
.map-loading-petal { opacity: 0; transform: scale(.08); transform-origin: 50% 50%; animation: map-petal-grow 1.8s cubic-bezier(.2,0,0,1) infinite; }
.map-loading-petal:nth-of-type(2) { clip-path: polygon(50% 50%,20.6% 9.5%,79.4% 9.5%); animation-delay: 0s; }
.map-loading-petal:nth-of-type(3) { clip-path: polygon(50% 50%,79.4% 9.5%,97.6% 65.5%); animation-delay: .12s; }
.map-loading-petal:nth-of-type(4) { clip-path: polygon(50% 50%,97.6% 65.5%,50% 100%); animation-delay: .24s; }
.map-loading-petal:nth-of-type(5) { clip-path: polygon(50% 50%,50% 100%,2.4% 65.5%); animation-delay: .36s; }
.map-loading-petal:nth-of-type(6) { clip-path: polygon(50% 50%,2.4% 65.5%,20.6% 9.5%); animation-delay: .48s; }
@media (prefers-reduced-motion: reduce) { .map-loading-petal { animation: none; opacity: 1; transform: none; } }

/* Paint the route geometry first; reveal stations and route pills after the map is fitted. */
html.station-map-booting .metro-map .journey-station,
html.station-map-booting .metro-map .journey-startpoint,
html.station-map-booting .metro-map .journey-endpoint,
html.station-map-booting .metro-map .interchanges circle,
html.station-map-booting #route-intersection-connectors circle,
html.station-map-booting .metro-map .problem-pill rect,
html.station-map-booting .metro-map .problem-pill text,
html.station-map-booting .runtime-pill-layer .problem-pill rect,
html.station-map-booting .runtime-pill-layer .problem-pill text { opacity: 0; }
html.station-map-ready .metro-map .journey-station,
html.station-map-ready .metro-map .journey-startpoint,
html.station-map-ready .metro-map .journey-endpoint,
html.station-map-ready .metro-map .interchanges circle,
html.station-map-ready #route-intersection-connectors circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: station-stop-pop .38s cubic-bezier(.18,.82,.24,1.2) var(--station-pop-delay,0ms) both;
}
html.station-map-ready .runtime-pill-layer .problem-pill.is-boot-reveal rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: station-pill-pop .44s cubic-bezier(.18,.82,.24,1.2) var(--pill-reveal-delay,0ms) both,
    start-pill-pulse 2.5s ease-in-out var(--start-pulse-delay,0s) infinite;
}
html.station-map-ready .runtime-pill-layer .problem-pill.is-boot-reveal text {
  animation: station-pill-text-in .16s ease-out calc(var(--pill-reveal-delay,0ms) + 90ms) both;
}
@keyframes station-stop-pop { 0% { opacity:0; transform:scale(.25); } 68% { opacity:1; transform:scale(1.16); } 100% { opacity:1; transform:scale(1); } }
@keyframes station-pill-pop { 0% { opacity:0; transform:scale(.48); } 72% { opacity:1; transform:scale(1.12); } 100% { opacity:1; transform:scale(1); } }
@keyframes station-pill-text-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  html.station-map-ready .metro-map .journey-station,
  html.station-map-ready .metro-map .journey-startpoint,
  html.station-map-ready .metro-map .journey-endpoint,
  html.station-map-ready .metro-map .interchanges circle,
  html.station-map-ready #route-intersection-connectors circle,
  html.station-map-ready .runtime-pill-layer .problem-pill.is-boot-reveal rect { animation:none; opacity:1; transform:none; }
  html.station-map-ready .runtime-pill-layer .problem-pill.is-boot-reveal text { animation:none; opacity:1; }
}
.metro-map { display: block; width: 100%; height: 100%; overflow: visible; background: #fff; }
.journey { fill: none; stroke: var(--line-color); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.journey-endpoint { fill: var(--line-color); stroke: #fff; stroke-width: 2.5; r: 8px; pointer-events: none; }
.stations { pointer-events: none; }
.stations .journey-station { fill: #fff; stroke: var(--line-color); stroke-width: 3.5; r: var(--station-radius, 8px); }
.route.is-active .journey { stroke-width: 7; }
.problem-pill { cursor: pointer; outline: none; transform-box: view-box; filter: drop-shadow(0 2px 2px rgba(20,29,20,.12)); }
.problem-pill rect { fill: var(--line-color); stroke: #fff; stroke-width: 1.5; transition: fill .4s ease, stroke-width .16s, filter .16s; }
.problem-pill text { fill: #fff; font: 700 18px 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif; letter-spacing: .025em; pointer-events: none; }
.problem-pill:hover rect, .problem-pill:focus-visible rect { stroke: #fff; stroke-width: 3; filter: brightness(1.08); }
.route.is-active .problem-pill rect { stroke: #fff; stroke-width: 2; }
.interchanges { pointer-events: none; }
.interchanges circle { fill: #fff; stroke: #4c514e; stroke-width: 2.5; r: 8px; }
.route-intersection-connector { pointer-events: none; }
.map-notes { pointer-events: none; fill: #181818; font: 12px/1.2 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif; }
.map-notes text { font-size: 12px; }
.stop-note { pointer-events:none; }
.stop-note.is-floating { transform-box:view-box; transform-origin:0 0; animation:stop-note-float var(--note-float-duration,5.2s) ease-in-out var(--note-float-phase,0s) infinite alternate; }
@keyframes stop-note-float {
  from { translate:var(--note-float-from-x,0px) var(--note-float-from-y,0px); rotate:var(--note-float-from-angle,0deg); }
  to { translate:var(--note-float-to-x,0px) var(--note-float-to-y,0px); rotate:var(--note-float-to-angle,0deg); }
}
.stop-note.is-pending { visibility:hidden; }
.stop-note.is-waiting { visibility:hidden; }
.stop-note-content rect { transform-box:fill-box; transform-origin:center; animation:stop-note-grow .9s cubic-bezier(.2,.72,.2,1) both; }
.stop-note-content text { animation:stop-note-text-reveal .7s ease-out .18s both; }
.stop-note.is-pending .stop-note-content rect,
.stop-note.is-pending .stop-note-content text,
.stop-note.is-waiting .stop-note-content rect,
.stop-note.is-waiting .stop-note-content text { animation-play-state:paused; }
@keyframes stop-note-text-reveal { from { opacity:0; } to { opacity:1; } }
.stop-note rect { fill:#fff; stroke:var(--line-color,#777); stroke-width:1; filter:drop-shadow(0 2px 4px rgba(32,38,33,.16)); vector-effect:non-scaling-stroke; }
.stop-note text { fill:#111; font:400 18px/1.2 "Graphik LCG",Arial,sans-serif; }
.product-card { position: fixed; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(176px, calc(100vw - 20px)); padding: 10px 10px 8px; border: 1px solid #e6e8e4; border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 6px 22px rgba(32,38,33,.12); animation: card-in .22s ease-out both; }
.product-stop-chip { display: block; max-width: 100%; padding: 5px 7px; border: 1px solid var(--line-color, #777); border-radius: 6px; background: #fbfcfb; color: #292e2a; font: 600 10px/1.2 Arial, sans-serif; box-shadow: 0 2px 5px rgba(24,32,26,.08); }
.product-stop-chip.is-arriving { opacity: 0; }
.scene-stop-stack { position: fixed; z-index: 30; inset: 0; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
.scene-stop-stack .collecting-stop-note { transition: opacity .14s ease-out; }
.product-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.product-action { flex: 1; padding: 7px 5px; border: 1px solid #d7dfd7; border-radius: 5px; background: #edf3ee; color: #263d30; font: 700 10px Arial,sans-serif; text-align: center; text-decoration: none; }
.product-action[href]:hover { border-color: #557562; background: #dce9de; }
.product-action.is-disabled { opacity: .45; cursor: default; }
.card-close { position: absolute; z-index: 2; right: 4px; top: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #60645f; font-size: 18px; line-height: 1; cursor: pointer; }
.card-close:hover { background: #eef0eb; }
.product-art { position: relative; isolation: isolate; width: 142px; height: 204px; margin: 0 auto; }
.card-image { position: absolute; z-index: 0; inset: 0; border: 1px solid rgba(228,232,226,.85); border-radius: 5px; background: linear-gradient(145deg,#f5f7f4,#fff 62%,#eef1ed); box-shadow: inset 0 1px 5px rgba(22,32,24,.07); }
.product-component-orbit, .product-component-orbit-front { position: absolute; inset: -62px; pointer-events: none; }
.product-component-orbit { z-index: 1; }
.product-component-orbit-front { z-index: 3; }
.product-image { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; filter: drop-shadow(0 8px 5px rgba(24,31,26,.2)); animation: product-ping-pong var(--product-animation-duration, 4.4s) ease-in-out infinite alternate; }
.product-image[data-animation-type="sway"] { animation-timing-function: cubic-bezier(.42,0,.58,1); }
.product-image[data-animation-type="breath"] { animation-timing-function: ease-in-out; }
.product-image[data-animation-type="turn"] { animation-timing-function: cubic-bezier(.35,0,.65,1); }
.product-component { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(30,35,31,.18)); }
.card-problem { display: none; margin: 7px 0 3px; color: var(--card-color, #666); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card-name { margin: 5px 0 0; font-size: 11px; text-align: center; line-height: 1.2; font-weight: 600; }
.card-file { display:none; margin: 6px 0 0; color: #979b95; font-size: 9px; }
.map-error { max-width: 320px; margin: 0 auto; padding: 20px; color: #8b443c; font: 13px/1.6 Arial,sans-serif; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes product-ping-pong {
  from { transform: translate3d(var(--product-start-x, 0px), var(--product-start-y, 0px), 0) rotate(var(--product-start-rotation, 0deg)) scale(var(--product-start-scale, 1.16)); }
  to { transform: translate3d(var(--product-end-x, 0px), var(--product-end-y, -5px), 0) rotate(var(--product-end-rotation, 0deg)) scale(var(--product-end-scale, 1.16)); }
}
@keyframes stop-note-grow { from { opacity:0; transform:scale(.12); } to { opacity:1; transform:scale(1); } }
@media (orientation:portrait) {
  .map-page { height: 100svh; min-height: 0; width: 100%; align-items: flex-start; padding: 0; }
  .map-stage { width: min(calc(100vw - 16px), calc((100svh - 24px) * var(--map-aspect, .5994))); min-width: 0; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion:reduce) { .stop-note.is-floating { animation:none; translate:0 0; rotate:0deg; } }
[hidden] { display: none !important; }

.is-telegram-mini-app .map-page { height:var(--station-app-height,100svh); padding:calc(8px + var(--station-safe-top,0px)) calc(8px + var(--station-safe-right,0px)) calc(8px + var(--station-safe-bottom,0px)) calc(8px + var(--station-safe-left,0px)); }


.metro-map.has-runtime-pills .route .problem-pill { opacity: 0 !important; pointer-events: none !important; }
.runtime-pill-layer { position:fixed; z-index:30; inset:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; }
.runtime-pill-layer .problem-pill { pointer-events: all; }
.runtime-pill-layer.has-focus { z-index:28; }
.runtime-pill-layer.is-active-layer { z-index:32; }
.runtime-stop-note-layer { position:fixed; z-index:30; inset:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; }
.runtime-stop-note-layer .stop-note { pointer-events:visiblePainted; }

.map-stage.is-responsive-map { width:100%; height:100%; aspect-ratio:auto; }
.metro-map .journey, .metro-map .journey-station { transition:stroke .4s ease; }
.metro-map .journey-startpoint, .metro-map .journey-endpoint,
.route-intersection-connector path { transition:fill .4s ease; }
.metro-map.has-focused-journey .route:not(.is-active) .journey,
.metro-map.has-focused-journey .route:not(.is-active) .journey-station { stroke:color-mix(in srgb, var(--line-color) var(--inactive-route-share), white); }
.metro-map.has-focused-journey .route:not(.is-active) .journey-endpoint { fill:color-mix(in srgb, var(--line-color) var(--inactive-route-share), white); }
.route-intersection-connector path.is-muted { fill:color-mix(in srgb, var(--sector-color) var(--inactive-route-share), white); }
#route-intersection-connectors { pointer-events:none; }
#active-route-foreground { pointer-events:none; }
.metro-map.has-focused-journey .route.is-active .journey-station,
.metro-map.has-focused-journey .route.is-active .journey-startpoint,
.metro-map.has-focused-journey .route.is-active .journey-endpoint { visibility:hidden; }
.active-route-foreground-path { stroke:var(--line-color) !important; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.runtime-pill-layer .problem-pill.is-muted { filter:none; }
.runtime-pill-layer .problem-pill.is-muted rect { fill:color-mix(in srgb, var(--line-color) var(--inactive-pill-share), white); }
.problem-pill rect, .problem-pill:hover rect, .problem-pill:focus-visible rect { stroke:none !important; }
.product-card { z-index:31; }
.product-card.is-measuring { visibility:hidden; }
.product-image[data-animation-type="sway"] { animation-name:product-sway; }
.product-image[data-animation-type="breath"] { animation-name:product-breath; }
.product-image[data-animation-type="turn"] { animation-name:product-turn; }
@keyframes product-sway {
  from { transform:translate3d(var(--product-start-x,0px),var(--product-start-y,0px),0) rotate(var(--product-sway-start,-8deg)) scale(var(--product-start-scale,1.16)); }
  to { transform:translate3d(var(--product-end-x,0px),var(--product-end-y,0px),0) rotate(var(--product-sway-end,8deg)) scale(var(--product-end-scale,1.16)); }
}
@keyframes product-breath {
  from { transform:translate3d(var(--product-start-x,0px),var(--product-start-y,0px),0) rotate(var(--product-start-rotation,0deg)) scale(calc(var(--product-start-scale,1.16) * .92)); }
  to { transform:translate3d(var(--product-end-x,0px),var(--product-end-y,0px),0) rotate(var(--product-end-rotation,0deg)) scale(calc(var(--product-end-scale,1.16) * 1.08)); }
}
@keyframes product-turn {
  from { transform:perspective(600px) translate3d(var(--product-start-x,0px),var(--product-start-y,0px),0) rotate(var(--product-start-rotation,0deg)) rotateY(-32deg) scale(var(--product-start-scale,1.16)); }
  to { transform:perspective(600px) translate3d(var(--product-end-x,0px),var(--product-end-y,0px),0) rotate(var(--product-end-rotation,0deg)) rotateY(32deg) scale(var(--product-end-scale,1.16)); }
}
.product-card { transform:translate(-50%,-50%) scale(var(--card-display-scale,1)); }
@keyframes card-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 8px)) scale(calc(var(--card-display-scale,1) * .98)); }
  to { opacity:1; transform:translate(-50%,-50%) scale(var(--card-display-scale,1)); }
}

.scene-product-card { transition: left .3s ease, top .3s ease, transform .3s ease; isolation: isolate; }
.runtime-stop-note-layer .stop-note { transition: none; }


/* Transforms are driven by one spring loop, with no competing CSS transitions. */
.scene-product-card { left:0; top:0; animation:none; transition:opacity .2s; will-change:auto; }
.scene-product-card.is-deck-card .card-close { display:none; }
.scene-product-card.is-deck-card .product-component,
.scene-product-card.is-deck-card .product-component-orbit,
.scene-product-card.is-deck-card .product-component-orbit-front { visibility:hidden; }
.scene-product-card.is-deck-card .product-image,
.scene-product-card.is-deck-card .card-border-light { animation-play-state:paused; }
.scene-product-card.is-deck-expanded .product-component,
.scene-product-card.is-deck-expanded .product-component-orbiter,
.scene-product-card.is-deck-expanded .product-component-orbit,
.scene-product-card.is-deck-expanded .product-component-orbit-front { display:none !important; }
.scene-deck-toggle { position:fixed; z-index:50; left:0; top:0; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.scene-deck-toggle:focus-visible { outline:2px solid #6b8c75; outline-offset:5px; border-radius:18px; }
.scene-deck-dialog { inset:0; margin:0; width:100%; max-width:none; height:100%; max-height:none; padding:90px 24px 50px; border:0; background:transparent; overflow:auto; overscroll-behavior:contain; }
.scene-deck-dialog::backdrop { background:rgba(255,255,255,.72); backdrop-filter:blur(2px); }
.scene-deck-close { position:fixed; z-index:2; top:max(14px,env(safe-area-inset-top)); right:14px; border:1px solid #dbe3d9; border-radius:20px; background:#fff; padding:9px 13px; color:#344b3c; font:600 12px Arial,sans-serif; cursor:pointer; }
.scene-deck-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:52px 40px; max-width:980px; min-height:100%; margin:0 auto; padding:22px 8px; }
.scene-product-card.is-deck-expanded { position:relative; top:auto; left:auto; flex:0 0 auto; transform:none; cursor:pointer; }
.scene-product-card.is-deck-expanded .card-close { width:30px; height:30px; right:-9px; top:-9px; font-size:23px; box-shadow:0 2px 10px #20302520; }
@media (max-width:540px) {
  .scene-deck-dialog { padding:95px 12px 40px; }
  .scene-deck-grid { column-gap:32px; row-gap:50px; padding:25px 4px; }
}

/* Static border mask; only its light texture rotates on the compositor. */
.card-border-shimmer { position:absolute; pointer-events:none; inset:-1px; padding:2px; border-radius:inherit; overflow:hidden; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; }
.card-border-light { position:absolute; left:50%; top:50%; width:300%; aspect-ratio:1; background:conic-gradient(#e8ece7 0deg 272deg,color-mix(in srgb,var(--card-route-color) 30%,#e8ece7) 296deg,var(--card-route-color) 325deg,#e8ece7 354deg 360deg); animation:card-border-spin 5.5s linear infinite; animation-delay:var(--border-phase,0s); }
@keyframes card-border-spin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.product-image { animation-delay:var(--product-animation-delay,0s); }
.product-component { filter:none; }
.scene-product-card:not(.is-current-product) .card-border-light,
.scene-product-card.is-image-loading .card-border-light { animation-play-state:paused; }
.scene-product-card.is-motion-paused .product-image,
.scene-product-card.is-motion-paused .card-border-light { animation-play-state:paused; }
.scene-product-card.is-deck-expanded { transform:translate(var(--scatter-x,0px),var(--scatter-y,0px)) rotate(var(--scatter-angle,0deg)); }
.scene-product-card.is-deck-expanded { animation:deck-card-drift var(--deck-drift-duration,6s) ease-in-out var(--deck-drift-phase,0s) infinite alternate; }
@keyframes deck-card-drift {
  from { translate:var(--deck-drift-from-x,0px) var(--deck-drift-from-y,0px); rotate:var(--deck-drift-from-angle,0deg); }
  to { translate:var(--deck-drift-to-x,0px) var(--deck-drift-to-y,0px); rotate:var(--deck-drift-to-angle,0deg); }
}
.scene-deck-grid { gap:76px 62px; padding:40px 28px; }
@media (max-width:540px) {
  .scene-deck-grid { gap:64px 36px; padding:34px 10px; }
  .scene-product-card.is-deck-expanded { transform:translate(clamp(-9px,var(--scatter-x,0px),9px),var(--scatter-y,0px)) rotate(var(--scatter-angle,0deg)); }
}

@media (prefers-reduced-motion:reduce) {
  .product-image { animation:none; transform:translate(var(--product-start-x,0px),var(--product-start-y,0px)) rotate(var(--product-start-rotation,0deg)) scale(var(--product-start-scale,1.16)); }
  .card-border-light { animation:none; transform:translate(-50%,-50%); }
}

/* Border light remains above the card background and below the entire artwork. */
.card-border-shimmer { z-index:0; }
.product-art { z-index:3; }
.card-name { position:relative; z-index:1; }
.card-close { z-index:5; }
.station-has-interaction .product-action { border:1px solid #111; border-radius:0; background:#fff; color:#111; font-family:"Graphik LCG",Arial,sans-serif; font-weight:300; text-transform:uppercase; letter-spacing:.015em; }
.product-action[href]:hover { border-color:#111; background:#f5f5f5; color:#000; }
.product-action:focus-visible { outline:2px solid #111; outline-offset:3px; }
@media (min-width:900px) and (min-height:600px) {
  .station-has-interaction .card-name { text-wrap:balance; font-family:"Graphik LCG",Arial,sans-serif; font-size:14px; line-height:1.4; font-weight:400; color:#111; }
}

.runtime-pill-layer.is-passed-layer { z-index:20; }
.runtime-active-path-layer { position:fixed; z-index:21; inset:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; }

/* Archived cards live on a separate shelf; titles return in the expanded view. */
.scene-product-card.is-archived:not(.is-deck-expanded) .card-name { display:none; }
.scene-product-card.is-archived:not(.is-deck-expanded) .product-image { animation:none; transform:scale(1.06); }
.card-details { display:block; position:relative; z-index:1; margin-top:10px; }
.scene-product-card.is-archived:not(.is-deck-expanded) .card-details { display:none; }
.scene-product-card.is-deck-expanded .card-details { border:0; background:transparent; padding:4px 2px; text-decoration:underline; text-underline-offset:3px; }
.scene-product-card.is-deck-expanded .card-details:hover { border:0; background:transparent; color:#000; }
.scene-product-card.is-deck-expanded .card-name { overflow-wrap:anywhere; word-break:normal; }
.scene-product-card.is-deck-expanded { margin:var(--deck-overlap-y-half,0px) var(--deck-overlap-x-half,0px); }
.runtime-pill-layer.has-focus { z-index:31; }


@media (max-width:760px), (max-aspect-ratio:5 / 4) {
  .product-card { width: min(132px, calc(100vw - 20px)); padding: 8px; }
  .product-art { width: 112px; height: 136px; }
  .product-component-orbit, .product-component-orbit-front { inset: -54px; }
  .product-component { width: 42px; height: 42px; }
}

.journey-startpoint { fill:var(--line-color); stroke:#fff; stroke-width:2.5; r:8px; pointer-events:none; }
.metro-map.has-focused-journey .route:not(.is-active) .journey-startpoint { fill:color-mix(in srgb,var(--line-color) var(--inactive-route-share),white); }
.scene-product-card.is-archive-ribbon { animation:archive-ribbon-drift var(--ribbon-duration,6s) ease-in-out infinite alternate; animation-delay:var(--ribbon-phase,0ms); }
@keyframes archive-ribbon-drift { from { translate:var(--ribbon-from-x,-2px) var(--ribbon-from-y,-3px); rotate:var(--ribbon-from-angle,-1deg); } to { translate:var(--ribbon-to-x,2px) var(--ribbon-to-y,3px); rotate:var(--ribbon-to-angle,1deg); } }
@media (prefers-reduced-motion:reduce) { .scene-product-card.is-archive-ribbon { animation:none; } }
@media (prefers-reduced-motion:reduce) { .scene-product-card.is-deck-expanded { animation:none; translate:0 0; rotate:0deg; } }

/* Soft, independently phased movement hints that route labels are clickable. */
.problem-pill:not(.is-muted) rect {
  transform-box:fill-box;
  transform-origin:center;
  animation:start-pill-pulse 2.5s ease-in-out var(--start-pulse-delay,0s) infinite;
}
.metro-map.has-runtime-pills .route .problem-pill rect { animation:none; }
.runtime-pill-layer .problem-pill { filter:none; }
@keyframes start-pill-pulse {
  0%,100% { transform:scale(1); }
  48% { transform:scale(1.105,1.16); }
}
@media (prefers-reduced-motion:reduce) { .problem-pill:not(.is-muted) rect { animation:none; } }

/* Keep first reveal at its final, measured destination. */
.scene-product-card.is-image-loading .product-image { opacity:0; }
.scene-product-card .product-image { transition:opacity .2s ease-out; }
.scene-product-card.is-current-product { width:min(calc(176px * var(--focus-card-scale,1.15)),calc(100vw - 24px)); padding:calc(10px * var(--focus-card-scale,1.15)); }
.scene-product-card.is-current-product .product-art { width:calc(142px * var(--focus-card-scale,1.15)); height:calc(204px * var(--focus-card-scale,1.15)); }
.product-component-orbiter { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.product-component-orbiter .product-component { position:absolute; left:0; top:0; transform-origin:center; animation:component-rock var(--rock-duration,3s) ease-in-out var(--rock-phase,0s) infinite alternate; }
html.is-scene-offscreen * { animation-play-state:paused !important; }
@keyframes component-rock { from { transform:rotate(var(--rock-from-angle,-3deg)) scale(.97); } to { transform:rotate(var(--rock-to-angle,3deg)) scale(1.03); } }
.scene-product-card.is-motion-paused .product-component { animation-play-state:paused; }
@media (max-width:760px), (max-aspect-ratio:5 / 4) {
  .scene-product-card.is-current-product { width:min(clamp(180px,calc(120px * var(--focus-card-scale,1.15)),240px),calc(100vw - 24px)); padding:12px; }
  .scene-product-card.is-current-product .product-art { width:calc(100% - 4px); height:clamp(170px,calc(108px * var(--focus-card-scale,1.15)),220px); }
}
.station-has-interaction .scene-product-card.is-current-product .card-name { font:400 14px/1.3 "Graphik LCG",Arial,sans-serif; text-wrap:balance; }
.scene-product-card.is-current-product .card-details { font-size:13px; line-height:1.25; padding:8px 4px; }
@media (prefers-reduced-motion:reduce) { .product-component-orbiter .product-component { animation:none; } }

/* Expanded archive cards share the available viewport and preserve their proportions. */
.scene-deck-grid { display:grid; width:min(100%,980px); grid-template-columns:repeat(var(--deck-columns,auto-fit),minmax(0,1fr)); justify-items:center; align-content:center; gap:calc(var(--deck-row-gap,52px) * var(--deck-fit-scale,1)) calc(var(--deck-column-gap,40px) * var(--deck-fit-scale,1)); }
.scene-product-card.is-deck-expanded { width:calc(var(--deck-base-width,176px) * var(--deck-fit-scale,1)); padding:calc(10px * var(--deck-fit-scale,1)); }
.scene-product-card.is-deck-expanded .product-art { width:calc(var(--deck-base-art-width,142px) * var(--deck-fit-scale,1)); height:calc(var(--deck-base-art-height,204px) * var(--deck-fit-scale,1)); }
.scene-product-card.is-deck-expanded .card-name { font-size:clamp(9px,calc(11px * var(--deck-fit-scale,1)),14px); }
.scene-product-card.is-deck-expanded .card-details { margin-top:calc(10px * var(--deck-fit-scale,1)); }
.scene-product-card.is-deck-expanded .product-action { padding:calc(7px * var(--deck-fit-scale,1)) calc(5px * var(--deck-fit-scale,1)); font-size:clamp(9px,calc(10px * var(--deck-fit-scale,1)),12px); }
.scene-product-card.is-deck-expanded .card-close { width:calc(30px * var(--deck-fit-scale,1)); height:calc(30px * var(--deck-fit-scale,1)); font-size:calc(23px * var(--deck-fit-scale,1)); }
@media (max-width:760px), (max-aspect-ratio:5 / 4) {
  .scene-deck-grid { --deck-base-width:132px; --deck-base-art-width:112px; --deck-base-art-height:136px; --deck-column-gap:32px; --deck-row-gap:50px; }
}