/* Original drawn scenes for Ziplap. All colours follow the chosen app theme. */
.orbit-art,
.orbit-scene {
  --orbit-theme: dark;
  --oa-ink: #ece9e0;
  --oa-muted: #858780;
  --oa-paper: #1b1d1b;
  --oa-panel: #252724;
  --oa-line: #484b43;
  --oa-soft: #34372f;
  --oa-warm: #c6b58d;
  --oa-rouge: #986c62;
  --oa-graph: #b1c4a2;
}
[data-theme="light"] .orbit-art,
[data-theme="light"] .orbit-scene {
  --orbit-theme: light;
  --oa-ink: #272a24;
  --oa-muted: #868a7d;
  --oa-paper: #fcfbf7;
  --oa-panel: #eeede5;
  --oa-line: #d3d5c9;
  --oa-soft: #e2e5d9;
  --oa-warm: #ab956b;
  --oa-rouge: #b67c6c;
  --oa-graph: #7f946c;
}
.orbit-art {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  contain: layout;
  background: var(--orbit-surface, var(--bg, #171819));
}
/* Only the artwork owns drag gestures; the surrounding screen still scrolls. */
.orbit-art--interactive {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border-radius: 12px;
}
.orbit-art--interactive.is-dragging { cursor: grabbing; }
.orbit-art--interactive:focus-visible { outline: 2px solid var(--oa-muted); outline-offset: -3px; }
.orbit-art__canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; background: inherit; }
.orbit-hero__caption { align-items: center; font-size: 9px; letter-spacing: .8px; text-transform: uppercase; }
.orbit-hero__caption > :last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.orbit-scene { width: 100%; max-width: 380px; margin: 0 auto; overflow: hidden; }
.orbit-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
/* The tour's frame gets shorter on small phones. Let the SVG's viewBox fit
   that frame rather than cropping the top and bottom of the scene. */
.tour-art > .orbit-scene { height: 100%; min-height: 0; }
.tour-art > .orbit-scene > svg { width: 100%; height: 100%; }
.orbit-scene svg text { font-family: inherit; fill: var(--oa-ink); }
.orbit-scene svg path,
.orbit-scene svg circle,
.orbit-scene svg rect { stroke-linecap: round; stroke-linejoin: round; }
.orbit-scene__surface { fill: var(--oa-paper); stroke: var(--oa-line); stroke-width: 1.3; }
.orbit-scene__ink { stroke: var(--oa-ink); stroke-width: 1.4; fill: none; }
.orbit-scene__muted { stroke: var(--oa-muted); }
.orbit-scene__ground { fill: none; stroke: var(--oa-line); stroke-width: 1; }
.orbit-scene__grid { fill: none; stroke: var(--oa-line); stroke-width: .75; }
.orbit-scene__label { font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.orbit-scene__micro { font-size: 6px; font-weight: 650; letter-spacing: .9px; }
.orbit-scene__number { font-size: 19px; font-weight: 650; letter-spacing: -.5px; }
.orbit-scene__big-number { font-size: 26px; font-weight: 650; letter-spacing: -1px; }
.orbit-scene__bubble { fill: var(--oa-panel); }
.orbit-scene__bubble-alt { fill: var(--oa-soft); }
.orbit-scene__connection { stroke: var(--oa-muted); stroke-width: 1; stroke-dasharray: 2 5; fill: none; animation: oa-flow 4s linear infinite; }
.orbit-scene__chip { fill: var(--oa-soft); stroke: var(--oa-warm); stroke-width: 1.6; }
.orbit-scene__chip-core { fill: var(--oa-paper); stroke: var(--oa-warm); stroke-width: 1; }
.orbit-scene__chip-mark { fill: none; stroke: var(--oa-ink); stroke-width: 1.8; }
.orbit-scene__portrait-bg { fill: var(--oa-panel); stroke: var(--oa-line); stroke-width: 1; }
.orbit-scene__bar-track { fill: var(--oa-panel); }
.orbit-scene__bar { fill: var(--oa-graph); }
.orbit-scene__duel { fill: none; stroke: var(--oa-warm); stroke-width: 2.3; }
.orbit-scene__match-orbit { fill: none; stroke: var(--oa-line); stroke-width: 1; stroke-dasharray: 4 8; transform-origin: 180px 92px; animation: oa-orbit 35s linear infinite; }
.orbit-scene__wheel-rim { fill: var(--oa-paper); stroke: var(--oa-warm); stroke-width: 1.7; }
.orbit-scene__pocket { fill: var(--oa-rouge); stroke: var(--oa-paper); stroke-width: .7; }
.orbit-scene__pocket--dark { fill: #343731; }
.orbit-scene__wheel-inner { fill: var(--oa-soft); stroke: var(--oa-warm); stroke-width: 1.5; }
.orbit-scene__wheel-track { fill: var(--oa-paper); stroke: var(--oa-line); stroke-width: 1; }
.orbit-scene__spokes { fill: none; stroke: var(--oa-warm); stroke-width: 3; }
.orbit-scene__hub { fill: var(--oa-warm); stroke: var(--oa-paper); stroke-width: 2; }
.orbit-scene__ball { fill: #f9f7ef; stroke: #514f40; stroke-width: .5; }
.orbit-scene__pointer { fill: var(--oa-warm); stroke: var(--oa-paper); stroke-width: 1; }
.orbit-scene__wheel { transform-origin: 0 0; animation: oa-orbit 24s linear infinite; }
.orbit-scene__awning { fill: var(--oa-soft); stroke: var(--oa-ink); stroke-width: 1.4; }
.orbit-scene__awning-stripe { stroke: var(--oa-paper); stroke-width: 10; fill: none; }
.orbit-scene__window { fill: var(--oa-panel); stroke: var(--oa-ink); stroke-width: 1.3; }
.orbit-scene__growth { fill: none; stroke: var(--oa-graph); stroke-width: 2.5; stroke-dasharray: 137; animation: oa-growth 5s ease-in-out infinite; }
.orbit-scene__growth-dot { fill: var(--oa-graph); }
.orbit-scene__theme-light { fill: #f4f3ed; stroke: #d4d6cb; stroke-width: .6; }
.orbit-scene__theme-dark { fill: #252722; stroke: #505448; stroke-width: .6; }
.orbit-scene__sun { fill: none; stroke: #454b3e; stroke-width: 1.2; }
.orbit-scene__moon { fill: none; stroke: #e0e5d8; stroke-width: 1.2; }
.orbit-scene svg .orbit-scene__theme-light-label { fill: #3c4136; font-size: 9px; font-weight: 550; }
.orbit-scene svg .orbit-scene__theme-dark-label { fill: #e0e5d8; font-size: 9px; font-weight: 550; }
.orbit-scene__cursor-shape { fill: var(--oa-ink); stroke: var(--oa-paper); stroke-width: 1.5; }
.orbit-scene__tap { fill: none; stroke: var(--oa-warm); stroke-width: 1; transform-origin: 245px 151px; animation: oa-tap 5s ease-out infinite; }
.orbit-scene__cursor { animation: oa-cursor 5s ease-in-out infinite; }
.orbit-scene__float-a { animation: oa-float 6s ease-in-out infinite; }
.orbit-scene__float-b { animation: oa-float 6s -3s ease-in-out infinite; }
.orbit-scene__float-chip { animation: oa-chip 5s ease-in-out infinite; }
.orbit-scene__transfer { animation: oa-transfer 6s ease-in-out infinite; }
.orbit-scene__power { transform-origin: 47px 131px; animation: oa-power 6s ease-in-out infinite; }
.orbit-scene__power-alt { transform-origin: 227px 131px; animation: oa-power 6s -3s ease-in-out infinite; }
@keyframes oa-flow { to { stroke-dashoffset: -28; } }
@keyframes oa-orbit { to { transform: rotate(360deg); } }
@keyframes oa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes oa-chip { 0%,20%,100% { transform: translateY(0); } 45%,70% { transform: translateY(-5px); } }
@keyframes oa-transfer { 0%,100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } }
@keyframes oa-power { 0%,100% { transform: scaleX(.82); } 50% { transform: scaleX(1); } }
@keyframes oa-growth { 0%,12% { stroke-dashoffset: 137; } 58%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -137; } }
@keyframes oa-cursor { 0%,16%,100% { transform: translate(0,0); } 42%,68% { transform: translate(-98px,0); } }
@keyframes oa-tap { 0%,32%,64%,100% { transform: scale(.5); opacity: 0; } 38%,70% { transform: scale(.5); opacity: .6; } 52%,84% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .orbit-scene *, .orbit-scene *::before, .orbit-scene *::after { animation: none !important; transition: none !important; }
  .orbit-scene__tap { opacity: 0; }
  .orbit-scene__growth { stroke-dasharray: none; }
}