.v4-visual-stage, .director-landing-ghost { --v4-cream: #faf1d5; --v4-gold: #f3cc73; --v4-leaf: #94d0b3; --v4-dark: #173e35; }
.v4-visual-stage { width: 100%; min-width: 0; margin: 0 auto; display: grid; align-content: center; }
.v4-visual-canvas { width: 100%; height: auto; max-height: 52dvh; display: block; overflow: visible; filter: drop-shadow(0 10px 15px #061d192d); }
.v4-visual-canvas text { font-family: inherit; letter-spacing: .005em; }
.v4-visual-text { fill: var(--v4-cream); font-size: 17px; font-weight: 750; }
.v4-visual-small { font-size: 14px; }
.v4-visual-tiny { font-size: 11px; font-weight: 600; }
.v4-visual-medium { font-size: 20px; }
.v4-visual-gold { fill: var(--v4-gold); }
.v4-visual-day { font-size: 35px; fill: var(--v4-gold); }
.v4-visual-caption { color: #ecedd6; font-size: clamp(12px, 1.15vw, 16px); line-height: 1.6; text-align: center; margin: 9px 0 0; max-width: 52ch; justify-self: center; text-wrap: pretty; }
.v4-visual-floor { fill: #071b183b; }
.v4-visual-floor-line { stroke: #b9d5b755; stroke-width: 1.5; }
.v4-visual-ink { fill: none !important; stroke: var(--v4-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v4-visual-flow { fill: none; stroke: #dfd8ab80; stroke-width: 3; stroke-linecap: round; }
.v4-visual-paper > path:first-child { fill: var(--v4-cream); stroke: #fff8dc; stroke-width: 2; }
.v4-visual-paper { filter: drop-shadow(0 5px 0 #051c1830); }
.v4-visual-envelope, .v4-visual-offer-inbox { fill: #fbefd0; stroke: #b9c59e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v4-visual-envelope path, .v4-visual-offer-inbox path { fill: none; stroke: #567964; }
.v4-visual-person { fill: #efd1aa; stroke: #efd1aa; stroke-width: 2; transform-origin: 0 20px; }
.v4-visual-person > path:not(.v4-visual-ink) { fill: #a6d0b4; stroke: #a6d0b4; }
.v4-visual-person > .v4-visual-ink { stroke: #a6d0b4; stroke-width: 8; }
.v4-visual-robot { fill: #c4e1d7; stroke: var(--v4-leaf); stroke-width: 3; }
.v4-visual-robot > circle:not(:first-of-type) { fill: #184f48; stroke: none; }
.v4-visual-robot > .v4-visual-ink { stroke: #426e60; }
.v4-visual-working, .v4-visual-ai-working { transform-box: fill-box; transform-origin: center bottom; }
.v4-visual-job-name { font-size: 15px; fill: #fcf4de; }
.v4-visual-board { fill: #173b33e0; stroke: #badac086; stroke-width: 1.3; }
.v4-visual-track { fill: #b9d9c32e; }
.v4-visual-prior { fill: #8fbaa373; }
.v4-visual-progress { fill: #edcb72; transform-origin: 0 6px; }
.v4-visual-percent { font-size: 14px; font-weight: 900; fill: #ffe3a1; font-variant-numeric: tabular-nums; }
.v4-visual-review-mark { fill: none; stroke: #aee4bf; stroke-width: 3; stroke-linecap: round; }
.v4-visual-desk { fill: #b2c2a1; stroke: #d1d9b8; stroke-width: 2; stroke-linejoin: round; }
.v4-visual-tool { fill: #edca71; stroke: #fff0b7; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.v4-visual-check circle { fill: #d7bd71; stroke: #fff1b9; stroke-width: 3; }
.v4-visual-check path { fill: none; stroke: #235142; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.v4-visual-inbox { fill: #779d8a; stroke: #bddcc1; stroke-width: 3; stroke-linejoin: round; }
.v4-visual-receivable rect { fill: #385749; stroke: #dddaa4; stroke-width: 1.5; }
.v4-visual-wallet { fill: #c4aa69; stroke: #fae4a2; stroke-width: 3; stroke-linejoin: round; }
.v4-visual-wallet-fold { fill: #8c6e41; }
.v4-visual-wallet-clasp { fill: #c4aa69; }
.v4-visual-wallet > circle { fill: #ffebae; stroke: none; }
.v4-visual-amount, .v4-visual-debt-amount { font-size: 27px; font-weight: 900; fill: #ffe7a3; font-variant-numeric: tabular-nums; }
.v4-visual-windfall { font-size: 40px; fill: #ffe397; font-weight: 950; }
.v4-visual-coin circle { fill: #f4cc65; stroke: #ffecac; stroke-width: 2; }
.v4-visual-coin path { fill: none; stroke: #755725; stroke-width: 1.5; stroke-linecap: round; }
.v4-visual-cost-target rect { fill: #f7e8c612; stroke: #d1cbaa79; stroke-width: 1; }
.v4-visual-cost-target .v4-visual-small { font-size: 13px; }
.v4-visual-cost-amount { font-size: 14px; fill: #ffd5bb; font-variant-numeric: tabular-nums; }
.v4-visual-night-ai .v4-visual-robot { opacity: .5; }
.v4-visual-night-ai.is-active .v4-visual-robot { opacity: 1; }
.v4-visual-night-ai .v4-visual-small { font-size: 12px; }
.v4-visual-night-ai .v4-visual-tiny { fill: #c4d9cf; font-size: 10px; }
.v4-visual-moon { fill: #eddbad; }
.v4-visual-moon-cut { fill: #293e45; }
.v4-visual-sun { fill: #f3ce73; }
.v4-visual-horizon { fill: none; stroke: #ffe4a7; stroke-width: 2; }
.v4-visual-city { fill: #204837; stroke: #c5c28c; stroke-width: 2; stroke-linejoin: round; }
.v4-visual-window { fill: #f5d994; stroke: none; }
.v4-visual-platform { fill: #50745c; stroke: #a8c499; stroke-width: 2; }
.v4-visual-platform path:last-child { fill: #284c3e; }
.v4-visual-room-grid { fill: none; stroke: #aec8a93c; stroke-width: 1; }
.v4-visual-arrival-art { transform-box: fill-box; transform-origin: center bottom; filter: drop-shadow(0 7px 4px #001a1844); }
.v4-visual-investment-tag rect { fill: #27493bf0; stroke: #f3d88d; stroke-width: 1.5; }
.v4-visual-investment-tag text { fill: #fce4a8; }
.v4-visual-exit-arrow { fill: none; stroke: #e1d0a3; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.v4-visual-step { fill: #74a68c; stroke: #c7e0b7; stroke-width: 2; transform-box: fill-box; transform-origin: center bottom; }
.v4-visual-growth-line { fill: none; stroke: #f7d782; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.v4-visual-level { fill: #ffe6a2; font-size: 28px; }
.v4-visual-debt-book { fill: #779888; stroke: #dcdfb7; stroke-width: 3; }
.v4-visual-debt-book .v4-visual-text { fill: #133a2e; stroke: none; }
.v4-visual-debt-ribbon { fill: #e2a977; stroke: #ffd9a4; stroke-width: 1.5; }
.v4-visual-monitor { fill: #315344; stroke: #c8d9ae; stroke-width: 5; }
.v4-visual-monitor-stand { fill: #a4b79c; }
.v4-visual-broken-screen { fill: none; stroke: #edb28c; stroke-width: 5; stroke-linejoin: round; }
.v4-visual-wrench { fill: #d2daca; stroke: #fff1c2; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.v4-visual-warning { fill: #a97f4c; stroke: #ffe2a0; stroke-width: 4; stroke-linejoin: round; }
.v4-visual-warning-mark { fill: none; stroke: #fff0c7; stroke-width: 9; stroke-linecap: round; }
.v4-visual-broken-route { fill: none; stroke: #edac85; stroke-width: 4; stroke-linecap: round; }
.v4-visual-stopped-desk { fill: #668979; stroke: #becba9; stroke-width: 3; }
.v4-visual-achievement-city { stroke: #cde0b6; stroke-width: 3; stroke-linejoin: round; }
.v4-visual-company-main { fill: #6c9e81; transform-box: fill-box; transform-origin: center bottom; }
.v4-visual-company-wing { fill: #416f59; transform-box: fill-box; transform-origin: center bottom; }
.v4-visual-company-window { fill: #f8d88b; stroke: #f6e6b6; stroke-width: 1; }
.v4-visual-company-door { fill: #284b3c; }
.v4-visual-company-sign { fill: #244f3d; stroke-width: 1.5; }
.v4-visual-achievement-city .v4-visual-tiny { stroke: none; fill: #f3e5b9; font-size: 9px; }
.v4-visual-achievement-city.is-quiet .v4-visual-company-window { fill: #b2bca5; }
.v4-visual-award-ring { fill: none; stroke: #eed084; stroke-width: 5; stroke-linecap: round; }
.v4-visual-spark { fill: none; stroke: #ffe398; stroke-width: 3; stroke-linecap: round; }
/* Before Anime loads, each delayed object already has its true starting state.
   Only elements with their own opacity tween are hidden; expense coin children
   inherit the animated token group's visibility and remain visible themselves. */
.v4-visual-spark,
.v4-visual-income-coin,
.v4-visual-finance-coins > .v4-visual-coin,
.v4-visual-cost-token,
.v4-visual-work-sheet,
.v4-visual-ai-output,
.v4-visual-outbound,
.v4-visual-job,
.v4-visual-review-mark,
.v4-visual-assemble,
.v4-visual-order-paper,
.v4-visual-order-check,
.v4-visual-stamp,
.v4-visual-receivable,
.v4-visual-moon,
.v4-visual-moon-cut,
.v4-visual-night-ai,
.v4-visual-night-envelope,
.v4-visual-night-output,
.v4-visual-new-offer,
.v4-visual-offer-inbox,
.v4-visual-day,
.v4-visual-windfall,
.v4-visual-lesson,
.v4-visual-level,
.v4-visual-repaid-seal,
.v4-visual-debt-ribbon,
.v4-visual-screen-fixed,
.v4-visual-warning,
.v4-visual-company-main,
.v4-visual-company-wing,
.v4-visual-company-window,
.v4-visual-company-sign-block,
.v4-visual-caption,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-build-left,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-build-right,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-build-top,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-arrival-art,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-arrival-check,
.v4-visual-stage[data-v4-visual='arrival'] .v4-visual-investment-tag { opacity: 0; }
.v4-visual-cost-target { opacity: .28; }
.v4-visual-step { transform: scaleY(0); }
.v4-visual-sun { transform: translateY(70px); opacity: .2; }
@media (max-width: 760px) {
  .v4-visual-canvas { max-height: 34dvh; min-height: 145px; }
  .v4-visual-caption { margin-top: 2px; padding-inline: 7px; font-size: 11px; line-height: 1.4; }
}
@media (max-width: 360px) {
  .v4-visual-canvas { max-height: 29dvh; min-height: 138px; }
  .v4-visual-caption { font-size: 10px; }
}
@media (max-height: 450px) and (min-width: 500px) {
  .v4-visual-canvas { max-height: 56dvh; min-height: 135px; }
  .v4-visual-caption { font-size: 10px; line-height: 1.3; }
}