/* Decorative pitch ring; analysis state changes color and speed, not the beat timing. */
.intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; padding: 30px 0 32px; }
.intro-copy { position: relative; z-index: 1; }
.intro-eyebrow { display: block; margin-bottom: 16px; color: #a8b79e; font: 10px var(--mono); letter-spacing: 2.4px; }
.intro h1 { font-size: 42px; line-height: 1.24; margin-bottom: 17px; }
.intro em { font-size: 1.25em; }
.intro p { font-size: 13px; line-height: 1.9; }
.banner-art { position: relative; min-width: 0; }
.banner-visual { display: block; width: 100%; height: 280px; overflow: visible; }
.banner-grid { fill: none; stroke: #c6f68a; stroke-width: .6; opacity: .15; }
.banner-grid path { stroke-dasharray: 2 6; }
.banner-bar { stroke: #c6f68a; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: banner-bar-breathe 3.6s ease-in-out infinite; animation-delay: var(--delay); opacity: .48; }
.banner-orbit { transform-origin: 235px 140px; animation: banner-orbit-turn 24s linear infinite; }
.banner-orbit-trail { fill: none; stroke: #c6f68a; stroke-width: 1; stroke-dasharray: 34 588; opacity: .6; }
.banner-orbit-outer { animation-duration: 38s; animation-direction: reverse; opacity: .65; }
.banner-wave { fill: none; stroke: url(#banner-wave-color); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; transform-origin: 235px 140px; animation: banner-wave-breathe 5s ease-in-out infinite; }
.banner-wave-echo { stroke-width: 4; opacity: .12; animation-direction: reverse; }
.banner-pitch-labels { fill: #88967e; font: 9px var(--mono); text-anchor: middle; }
.banner-motion { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 auto; padding: 7px 9px; border: 1px solid #303a30; border-radius: 5px; color: #a0ab9b; background: transparent; font-size: 10px; }
.banner-motion:hover { border-color: #7c9665; color: var(--accent); }
.motion-symbol { width: 9px; font: 10px var(--mono); text-align: center; }
.banner-motion:disabled { opacity: .6; cursor: default; }
.banner-art[data-paused="true"] * { animation-play-state: paused; }
@keyframes banner-bar-breathe { 0%, 100% { transform: scaleY(.6); opacity: .3; } 50% { transform: scaleY(1.25); opacity: .75; } }
@keyframes banner-orbit-turn { to { transform: rotate(360deg); } }
@keyframes banner-wave-breathe { 0%, 100% { transform: scaleY(.65); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 1000px) { .intro { grid-template-columns: 1.15fr 1fr; gap: 8px; } .intro h1 { font-size: 38px; } .banner-visual { height: 255px; } }
@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; gap: 8px; padding: 30px 0 26px; }
  .intro h1, .intro:lang(en) h1, .intro:lang(ja) h1 { font-size: clamp(25px, 7.4vw, 36px); }
  .intro-eyebrow { margin-bottom: 15px; font-size: 9px; }
  .intro p { font-size: 12px; }
  .banner-art { margin-top: -4px; }
  .banner-visual { height: 140px; }
  .banner-motion { position: absolute; bottom: 1px; right: 0; margin: 0; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .banner-art * { animation: none !important; } }

/* Read/decode, model downloads and inference share the UI busy lifecycle. */
.banner-art[data-analyzing="true"] { --accent: #ffad61; }
.banner-art[data-analyzing="true"] .banner-grid,
.banner-art[data-analyzing="true"] .banner-bar,
.banner-art[data-analyzing="true"] .banner-orbit-trail { stroke: var(--accent); }
.banner-art[data-analyzing="true"] .banner-orbit circle:not(.banner-orbit-trail),
.banner-art[data-analyzing="true"] .banner-pitch-labels { fill: var(--accent); }
.banner-art[data-analyzing="true"] #banner-wave-color stop,
.banner-art[data-analyzing="true"] #banner-halo stop { stop-color: var(--accent); }
.banner-art[data-analyzing="true"] .banner-bar { animation-duration: .9s; }
.banner-art[data-analyzing="true"] .banner-orbit { animation-duration: 6s; }
.banner-art[data-analyzing="true"] .banner-orbit-outer { animation-duration: 9.5s; }
.banner-art[data-analyzing="true"] .banner-wave { animation-duration: 1.25s; }