/* Program titles stay readable while the supporting artwork tells the story. */
.program-motion-tools { display: flex; justify-content: flex-end; margin: -16px 0 20px; }
.program-motion-tools button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: 13px/1.4 var(--sans); cursor: pointer; }
.program-motion-tools button:hover { background: #e8e7dc; }
.program-motion-tools button span { display: inline-block; font-size: 20px; margin-right: 7px; vertical-align: -1px; }
.program-motion-tools [hidden] { display: none; }
.program-visual { --program-accent: #9d6348; display: flex; flex-direction: column; margin: 0 0 26px; min-height: 362px; padding: 22px 20px 18px; border: 1px solid #d8d6c8; border-radius: 9px; overflow: hidden; color: var(--ink); background: radial-gradient(ellipse at 100% 100%, #d7ddca70, transparent 65%), #ece8db; }
.program-dscr { --program-accent: #355d4d; background: radial-gradient(ellipse at 100% 100%, #c8d7c270, transparent 65%), #e4e9de; border-color: #ccd5c5; }
.program-statements { --program-accent: #995e44; background: radial-gradient(ellipse at 100% 100%, #dcbda650, transparent 65%), #eee2d5; border-color: #ddcfc0; }
.program-visual-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #526153; }
.program-visual-meta > span:first-child { font: 21px/1 var(--serif); }
.program-visual-meta > span:last-child { font: 9px/1.4 var(--sans); letter-spacing: 1.1px; text-align: right; }
.program-visual-title { height: 116px; display: flex; flex-direction: column; justify-content: center; margin: 10px 0 4px; }
.program-visual-title strong { display: block; color: var(--program-accent); font: 64px/1.02 var(--serif); letter-spacing: -2.8px; }
.program-visual-title > span { display: block; font: 24px/1.2 var(--serif); letter-spacing: -.5px; margin-top: 6px; }
.program-statement-title strong { font-size: clamp(32px, 2.55vw, 40px); letter-spacing: -1px; line-height: 1.16; }
.program-statement-title > span { font-size: 26px; max-width: 290px; }
.program-visual svg { display: block; width: 100%; height: auto; margin-top: auto; overflow: visible; color: var(--program-accent); }
.program-visual svg text { font: 14px var(--sans); letter-spacing: .35px; fill: #47584a; }
.program-visual .program-visual-caption { padding-top: 13px; margin-top: 4px; border-top: 1px solid #54644b26; color: #4c5b4e; font: 12px/1.5 var(--sans); }
.program-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.program-soft { opacity: .22; }
.program-orbit { fill: #f9f7ee99; stroke: #87957a35; }
.program-bar { fill: #54765d; transform-box: fill-box; transform-origin: bottom; }
.program-bar-two { fill: #42634d; }
.program-bar-three { fill: #284b3d; }
.program-payment-trail { fill: none; stroke: var(--program-accent); stroke-width: 1.5; stroke-linejoin: round; }
.program-payment-dot, .program-income-dot { fill: var(--program-accent); }
.program-building { fill: #f7f8ef9c; }
.program-flow-track { opacity: .45; }
.program-ring-track { fill: #f7f8ef; stroke: #c7d0bf; stroke-width: 5; }
.program-coverage-ring { fill: none; stroke: #527a5e; stroke-width: 5; stroke-dasharray: .78 1; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 272px 83px; }
.program-visual svg .program-ratio-label { font-size: 14px; letter-spacing: 1px; }
.program-visual svg .program-debt-label { font-size: 12px; letter-spacing: 0; }
.program-ratio-rule { stroke: #5c7052; stroke-width: 1; opacity: .6; }
.program-page > rect { fill: #faf7ed; stroke: #b39b83; stroke-width: 1.3; }
.program-page-back > rect { fill: #e2d1ba; }
.program-statement-line { fill: none; stroke: #a76b4d; stroke-width: 2.5; stroke-linecap: round; }
.program-window > rect { fill: #f8f2e9; stroke: #bfa78d; stroke-width: 1; }
.program-window-24 > rect { fill: #ead5bf; }
.program-visual svg .program-window text { fill: #80533c; font: 27px var(--serif); }
.program-visual svg .program-or-label { font-size: 14px; letter-spacing: 1.5px; }
.program-statement-stack { transition: opacity .3s ease, filter .3s ease; }
.program-statements[data-window="12"] .program-stack-12,
.program-statements[data-window="24"] .program-stack-24 { filter: drop-shadow(0 5px 5px #59473124); }
.program-statements[data-window="12"] .program-stack-12 .program-page-front > rect,
.program-statements[data-window="24"] .program-stack-24 .program-page-front > rect { stroke: #995e44; stroke-width: 2; }
.program-statements[data-window="12"] .program-stack-24,
.program-statements[data-window="24"] .program-stack-12 { opacity: .68; }
.program-stack-front { fill: #faf7ed; stroke: #b39b83; stroke-width: 1.3; }
.program-stack-back { fill: #e2d1ba; stroke: #b39b83; stroke-width: 1.1; }
.program-visual svg .program-stack-label { fill: #80533c; font: 13px var(--sans); letter-spacing: .5px; }
.program-stack-row { fill: none; stroke: #a76b4d; stroke-width: 2.2; stroke-linecap: round; }
.program-stack-muted { fill: none; stroke: #9c9a85; stroke-width: 1; stroke-linecap: round; opacity: .55; }
.is-playing .program-draw { animation: program-draw 4.6s ease both; }
.is-playing .program-bar { animation: program-rise 4.6s cubic-bezier(.2,.7,.2,1) both; }
.is-playing .program-bar-two { animation-name: program-rise-second; }
.is-playing .program-bar-three { animation-name: program-rise-third; }
.is-playing .program-payment-dot { animation: program-arrive 4.6s ease both; }
.is-playing .program-income-dot { animation: program-flow 4.6s ease both; }
.is-playing .program-coverage-ring { animation: program-coverage 4.6s ease both; }
.is-playing .program-page-back { animation: program-page-back 4.6s ease both; }
.is-playing .program-page-front { animation: program-page-front 4.6s ease both; }
.is-playing .program-statement-line { animation: program-rows 4.6s ease both; }
.is-playing .program-row-two { animation-name: program-rows-second; }
.is-playing .program-row-three { animation-name: program-rows-third; }
.is-playing .program-window-12 > rect { animation: program-window-first 4.6s ease both; }
.is-playing .program-window-24 > rect { animation: program-window-second 4.6s ease both; }
.is-playing .program-stack-12 { animation: program-stack-appear .75s cubic-bezier(.2,.7,.2,1); }
.is-playing .program-stack-24 { animation: program-stack-appear 1.2s .35s cubic-bezier(.2,.7,.2,1); }
.is-playing .program-stack-row-2 { animation: program-rows .9s .2s ease both; }
.is-playing .program-stack-row-3 { animation: program-rows-second 1s .32s ease both; }
.is-playing .program-stack-row-4 { animation: program-rows-third 1.1s .44s ease both; }
.is-playing .program-stack-row-5 { animation: program-rows-third 1.2s .56s ease both; }
.is-playing .program-stack-row-6 { animation: program-rows-third 1.3s .68s ease both; }
@keyframes program-draw { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .2; } 52%,100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; } }
@keyframes program-rise { 0%,8% { transform: scaleY(.08); opacity: .3; } 35%,100% { transform: scaleY(1); opacity: 1; } }
@keyframes program-rise-second { 0%,17% { transform: scaleY(.08); opacity: .3; } 48%,100% { transform: scaleY(1); opacity: 1; } }
@keyframes program-rise-third { 0%,26% { transform: scaleY(.08); opacity: .3; } 61%,100% { transform: scaleY(1); opacity: 1; } }
@keyframes program-arrive { 0%,36% { opacity: 0; } 58%,100% { opacity: 1; } }
@keyframes program-flow { 0%,22% { transform: translateX(0); opacity: 0; } 28% { opacity: 1; } 56%,100% { transform: translateX(33px); opacity: 0; } }
@keyframes program-coverage { 0%,32% { stroke-dasharray: 0 1; } 75%,100% { stroke-dasharray: .78 1; } }
@keyframes program-page-back { 0% { transform: translate(-12px,10px) rotate(-3deg); opacity: .3; } 38%,100% { transform: none; opacity: 1; } }
@keyframes program-page-front { 0%,8% { transform: translate(16px,7px); opacity: .5; } 42%,100% { transform: none; opacity: 1; } }
@keyframes program-rows { 0%,25% { stroke-dasharray: 1; stroke-dashoffset: 1; } 48%,100% { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes program-rows-second { 0%,35% { stroke-dasharray: 1; stroke-dashoffset: 1; } 58%,100% { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes program-rows-third { 0%,45% { stroke-dasharray: 1; stroke-dashoffset: 1; } 68%,100% { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes program-window-first { 0%,15%,70%,100% { fill: #f8f2e9; } 25%,55% { fill: #dfbea0; } }
@keyframes program-window-second { 0%,55% { fill: #f8f2e9; } 75%,100% { fill: #ead5bf; } }
@keyframes program-stack-appear { from { opacity: .25; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .program-visual { padding: 24px; min-height: 380px; }
  .program-visual svg { max-height: 190px; }
  .program-visual-title { height: 117px; }
  .program-visual-title strong { font-size: 70px; }
  .program-visual-title > span { font-size: 27px; }
  .program-statement-title strong { font-size: clamp(30px, 8vw, 36px); }
  .program-statement-title > span { font-size: 26px; max-width: none; }
  .program-visual-meta > span:last-child { font-size: 10px; }
  .program-visual .program-visual-caption { font-size: 14px; }
}
@media (max-width: 390px) {
  .program-visual { padding: 20px; min-height: 360px; }
  .program-statement-title strong { font-size: 30px; }
  .program-visual-title > span { font-size: 24px; }
  .program-visual-meta > span:last-child { font-size: 9px; letter-spacing: .7px; }
}
@media (prefers-reduced-motion: reduce) {
  .program-motion-tools { display: none; }
  .program-visual * { animation: none !important; }
  .program-statement-stack { transition: none; }
}