/* finesse · register=brand+product · bright approved Yuechang · existing type and imagery
 * Phase 4: four readable chapters / native scroll / GSAP chapter choreography / WAAPI state changes.
 * No decorative backgrounds, fixed-height clipping, scroll hijacking or permanent hidden content. */
:root {
  --site-header-h: 82px;
  --chapter-space: clamp(40px, 5.5vw, 80px);
  --chapter-line: #e4e0d9;
  --motion-short: 160ms;
  --motion-panel: 1000ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-padding-top: calc(var(--site-header-h) + 20px); scrollbar-gutter: stable; }
.site-header { isolation: isolate; }
.site-reading-progress {
  position: absolute; z-index: 2; inset: auto 0 -1px;
  height: 2px; background: var(--red); pointer-events: none;
  transform: scaleX(0); transform-origin: left;
}
body.is-space .site-reading-progress { display: none; }
.desktop-nav a { position: relative; transition: color var(--motion-short); }
.desktop-nav a::after {
  content: ''; position: absolute; inset: auto 0 3px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--motion-ease);
}
.desktop-nav a[aria-current="location"] { color: var(--red); }
.desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
.menu-toggle span { transition: transform 200ms var(--motion-ease); }
.menu-toggle[aria-expanded="true"] span { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span + span { transform: translateY(-4px) rotate(-45deg); }

/* One strong boundary per chapter; the content itself determines the final height. */
#main .yc-chapter {
  position: relative; min-width: 0; padding-block: var(--chapter-space);
  border-top: 1px solid var(--chapter-line); scroll-margin-top: 0;
}
#main .yc-chapter-voice { border-top: 0; padding-block: 0; }
#main .chapter-label { margin: 0 0 15px; color: var(--yc-muted); font: 400 13px/1.6 var(--body); }
#main .chapter-caption { color: inherit; font: inherit; }
#main #teaching .chapter-label { margin-bottom: 18px; }
#main .section-heading h2,
#main .ts-heading h2 {
  margin-top: 0; min-width: 0;
  font: 700 clamp(28px, 3vw, 42px)/1.35 var(--title);
  letter-spacing: -.025em; overflow-wrap: anywhere;
}
#main .section-heading { margin-bottom: 0; align-items: end; gap: 40px; }
#main .section-heading > p { max-width: 340px; line-height: 1.8; }
#main .hero h1 { overflow-wrap: anywhere; }
#main #voice-start, #main #learning, #main #teaching, #main #tools,
#main .module-intro, #main .learning-panel { scroll-margin-top: 0; }

/* Equal, stable product stages remain the learning reference. */
#main .learning-tabs { gap: 12px; margin-top: 28px; }
#main .learning-tabs .home-tile { min-height: 120px; padding: 18px 20px; border-radius: 14px; }
#main .learning-tabs .tile-no { font-size: 15px; margin-bottom: 6px; line-height: 1.3; }
#main .learning-tabs .module-name { font-size: 25px; margin-top: 0; }
#main .learning-tabs .module-tagline { font-size: 11px; }
#main .learning-tabs .home-tile::after { bottom: -9px; height: 2px; }
#main :is(.learning-tabs, .ts-steps).has-moving-indicator { position: relative; }
#main .has-moving-indicator :is(.home-tile, [role="tab"])::after { display: none; }
#main .yc-tab-indicator {
  position: absolute; z-index: 2; left: 0; top: 0; width: 1px; height: 3px; border-radius: 3px;
  transform-origin: left center;
  background: var(--red); pointer-events: none;
}
#main .learning-tabs .yc-tab-indicator { background: var(--ink, #1c1813); }
#main .learning-tabs .yc-tab-indicator { transition: opacity 240ms ease; }
#main .learning-tabs:is([data-motion-state="waiting"], [data-motion-state="entering"]) .yc-tab-indicator { opacity: 0; }
#main .ts-steps:is([data-motion-state="waiting"], [data-motion-state="entering"]) .yc-tab-indicator { opacity: 0; }
#main .learning-panel { margin-top: 32px; }
#main #teaching .ts-heading { margin-bottom: 24px; }
#main #teaching .ts-heading { display: block; }
#main #teaching .ts-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding: 0; text-align: left; }
#main #teaching .ts-portrait-grid { display: flex; flex-wrap: nowrap; gap: 0; }
#main #teaching .ts-portrait { width: 44px; height: 44px; flex: none; border: 3px solid var(--yc-bg); box-sizing: border-box; }
#main #teaching .ts-portrait + .ts-portrait { margin-left: -8px; }
#main #teaching .ts-portrait-note { margin: 0; font-size: 10px; }
#main #teaching .ts-step-no { font-size: 15px; }
#main #teaching .ts-step-title { font-size: 16px; }
#main #teaching .ts-stage { border-radius: 16px; }
#main .yc-chapter-tools .ut-section { border-top: 0; padding-top: 0; padding-bottom: 0; }
#main .yc-chapter-tools .closing { display: flex; justify-content: center; align-items: center; border-top: 0; padding-top: 36px; padding-bottom: 0; }
#main .yc-chapter-tools .closing > .solid-button { margin: 0; }
#main .yc-chapter-tools .ut-tool-grid { margin-top: 40px; }
#main .ut-tool-card { min-height: 140px; }

/* The entrance controller owns these transforms until the beat has finished.
 * CSS hover/press transitions resume afterwards, so they never lag behind GSAP. */
#main :is(.learning-tabs, .ts-steps, .ut-tool-grid, .hero-choices):is([data-motion-state="waiting"], [data-motion-state="entering"]) > :is(button, a) { transition: none; }
#main [data-motion-state="entering"] { transition: none; }
/* The surface opens first; avoid a second simultaneous animation inside it. */
.ut-panel { animation: none; }

/* One interaction vocabulary. Hover is optional; press and focus are always usable. */
#main :is(.solid-button, .secondary-button, .first-test-cta, .ut-tool-card, .home-tile, .ts-home-entry, .ts-primary, .tfp-primary) {
  transition: transform var(--motion-short) var(--motion-ease), background-color var(--motion-short), border-color var(--motion-short), color var(--motion-short);
}
#main :is(.solid-button, .secondary-button, .first-test-cta):active { transform: scale(.975); }
#main :is(.ut-tool-card, .home-tile, .ts-home-entry):active { transform: scale(.985); }
#main :is(.solid-button, .secondary-button, .inline-link) .icon { transition: transform 220ms var(--motion-ease); }
#main .ut-card-arrow { transition: transform 220ms var(--motion-ease); }
#main :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  #main :is(.solid-button, .secondary-button, .inline-link):hover .icon { transform: translateX(3px); }
  #main .learning-tabs .home-tile:hover { transform: translateY(-3px); }
  #main .ut-tool-card:hover { transform: translateY(-4px); border-color: var(--red); }
  #main .ut-tool-card:hover .ut-card-arrow { transform: translate(2px, -2px); }
}

/* Both public explanations and real tool previews use the same dialog lifecycle. */
.public-dialog[open] { animation: yc-dialog-enter 520ms var(--motion-ease) both; }
.public-dialog::backdrop { animation: yc-backdrop-enter 200ms ease both; }
.ut-dialog[open] { animation: yc-dialog-enter 520ms var(--motion-ease) both; }
.ut-dialog::backdrop { animation: yc-backdrop-enter 200ms ease both; }
.public-dialog, .ut-dialog { max-width: none; overscroll-behavior: contain; }
@keyframes yc-dialog-enter { from { opacity: 0; transform: translateY(32px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes yc-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1024px) {
  #main .yc-chapter { min-block-size: calc(100svh - var(--site-header-h)); padding-block: 32px; }
  #main .yc-chapter-voice { padding-block: 0; }
  #main .self-learning > .section-heading { display: block; }
  #main .self-learning > .section-heading > p { display: none; }
  #main .section-heading h2 br { display: none; }
  #main .learning-tabs { margin-top: 24px; }
  #main .learning-tabs .home-tile { min-height: 100px; padding: 14px 18px; }
  #main .learning-tabs .tile-no { font-size: 14px; margin-bottom: 3px; }
  #main .learning-tabs .module-name { font-size: 24px; }
  #main .learning-panel { margin-top: 24px; }
  #main .module-intro { margin-bottom: 18px; }
  #main .module-intro .eyebrow,
  #main .module-intro > div > p:not(.eyebrow),
  #main .module-loop { display: none; }
  #main .module-intro h3 { font-size: 23px; }
  #main .learning-responsibilities { gap: 8px; }
  #main .module-caption { margin-top: 8px; }
  #main #teaching .ts-heading { margin-bottom: 20px; }
  #main #teaching .ts-heading h2 { font-size: clamp(30px, 2.6vw, 38px); }
  #main #teaching .ts-steps { margin-bottom: 20px; }
  #main #teaching .ts-steps button { padding-block: 14px 16px; }
  #main #teaching .ts-stage,
  #main #teaching .ts-panel,
  #main #teaching .ts-find,
  #main #teaching .tfp-workspace,
  #main #teaching .tfr-workspace,
  #main #teaching .tfr-path-state { min-height: 460px; }
  #main #teaching .ts-home { padding: 24px; }
  #main #teaching .ts-identity { margin-bottom: 16px; }
  #main #teaching .ts-home-body { grid-template-columns: minmax(0,1.2fr) minmax(300px,1fr); gap: 24px; }
  #main #teaching .ts-home-links { padding-top: 30px; }
  #main .yc-chapter-voice { display: flex; flex-direction: column; }
  #main .yc-chapter-voice .hero { flex: 1; padding-block: 36px; gap: clamp(48px, 6vw, 90px); align-items: end; }
  #main .yc-chapter-voice .hero-copy { padding-block: 0; }
  #main .first-test-hero { min-height: clamp(440px, calc(100svh - 300px), 620px); }
  #main .voice-bridge { padding-block: 16px 28px; }
  #main .voice-bridge .value-row { gap: 40px; }
  #main .yc-chapter-tools { display: flex; flex-direction: column; justify-content: flex-start; min-block-size: 0; padding-block: 48px; gap: 0; }
  #main .yc-chapter-tools .ut-tool-grid { margin-top: 28px; }
  #main .yc-chapter-tools .closing { padding-top: 36px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  :root { --chapter-space: 40px; }
  #main .yc-chapter-voice .hero { padding-block: 28px; }
  #main .hero h1 { font-size: clamp(52px, 4.8vw, 70px); }
  #main .hero-desc { margin-top: 18px; }
  #main .hero-path { margin-top: 20px; }
  #main .voice-bridge { padding-bottom: 24px; }
  #main .learning-tabs .home-tile { min-height: 100px; padding: 14px 18px; }
}
@media (min-width: 681px) and (max-width: 1023px) {
  :root { --chapter-space: 48px; }
  #main .yc-chapter { min-block-size: 0; }
  #main .section-heading { display: block; }
  #main .section-heading > p { margin: 18px 0 0; max-width: none; }
  #main .hero { gap: 28px; padding-block: 44px; }
  #main .learning-tabs .home-tile { padding: 16px; min-height: 112px; }
  #main .learning-tabs .module-name { font-size: 21px; }
  #main .learning-tabs .module-tagline { font-size: 10px; }
  #main #teaching .ts-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main #teaching .ts-heading { gap: 20px; }
  #main #teaching .ts-people { padding: 0; }
}
@media (max-width: 680px) {
  :root { --chapter-space: 36px; --site-header-h: 65px; }
  html { scroll-padding-top: calc(var(--site-header-h) + 16px); }
  .header-inner { height: 65px; width: calc(100% - 40px); gap: 10px; }
  .desktop-nav, .teacher-entry { display: none; }
  .menu-toggle { display: block; }
  .header-actions { gap: 4px; }
  .header-actions .enter-link { min-height: 44px; font-size: 12px; padding: 9px 12px; }
  .brand img { height: 35px; }
  #main .yc-chapter { min-block-size: 0; }
  #main .wrap { width: calc(100% - 40px); }
  #main .chapter-label { font-size: 12px; margin-bottom: 10px; }
  #main .section-heading h2, #main .ts-heading h2 { font-size: clamp(24px, 6.8vw, 32px); line-height: 1.42; margin-top: 0; }
  #main .section-heading > p { display: none; }
  #main .hero { padding-block: 28px 30px; gap: 28px; }
  #main .hero .chapter-label { margin-bottom: 13px; }
  #main .first-test-hero { margin-top: 0; }
  #main .voice-bridge { padding-bottom: 28px; }
  #main .learning-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  #main .learning-tabs .home-tile { min-height: 118px; padding: 16px; }
  #main .learning-tabs .tile-no { font-size: 14px; margin-bottom: 4px; }
  #main .learning-tabs .module-name { font-size: clamp(20px, 5.7vw, 24px); }
  #main .learning-tabs .module-tagline { font-size: 10px; }
  #main .learning-tabs .home-tile::after { bottom: 6px; }
  #main .learning-panel { margin-top: 20px; }
  #main #teaching .ts-heading { display: block; margin-bottom: 22px; }
  #main #teaching .chapter-label { font-size: 11px; margin-bottom: 14px; }
  #main #teaching .ts-people { margin-top: 16px; }
  #main #teaching .ts-portrait { width: 36px; height: 36px; border-width: 2px; }
  #main #teaching .ts-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; }
  #main #teaching .ts-steps button { padding: 14px 12px; gap: 5px; grid-template-columns: 20px minmax(0, 1fr); min-height: 56px; border-radius: 9px; background: #796c5507; }
  #main #teaching .ts-step-no { font-size: 12px; }
  #main #teaching .ts-step-title { font-size: 13px; }
  #main #teaching .ts-step-note { display: none; }
  #main #teaching .ts-stage, #main #teaching .ts-panel { min-height: 0; }
  #main #teaching .tfr-path-state { min-height: 280px; }
  #main #teaching .tfr-notice-body { padding: 28px 0; }
  #main .yc-chapter-tools .ut-tool-grid { margin-top: 24px; gap: 10px; }
  #main .ut-tool-card { min-height: 120px; padding: 18px 14px; flex-direction: column; align-items: flex-start; gap: 12px; }
  #main .ut-card-copy { padding: 0; }
  #main .ut-card-copy strong { font-size: 15px; }
  #main .ut-card-copy small { font-size: 11px; }
  #main .yc-chapter-tools .closing { padding-top: 40px; }
  #main .closing h2 { font-size: 26px; line-height: 1.45; overflow-wrap: anywhere; }
  .public-dialog, .ut-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); margin: auto auto 0; border-radius: 18px 18px 0 0; }
  .public-dialog { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .public-dialog[open], .ut-dialog[open] { animation: yc-sheet-enter 620ms var(--motion-ease) both; }
  .ut-dialog-surface { max-height: calc(100dvh - 14px); }
  .ut-dialog-header { padding: 9px 12px; }
  .ut-dialog-body { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .ut-panel input, .public-dialog input { font-size: 16px; }
  @keyframes yc-sheet-enter { from { opacity: .3; transform: translateY(100%); } to { opacity: 1; transform: none; } }
}
@media (min-width: 601px) and (max-width: 680px) {
  #main .practice-stage { display: block; }
  #main .song-context { min-height: 0; display: flex; gap: 16px; align-items: center; padding: 18px; }
  #main .song-context::after { display: none; }
  #main .song-cover { width: 76px; height: 76px; border-radius: 8px; flex: none; }
  #main .song-info { position: static; }
  #main .song-info h2 { font-size: 27px; }
}
@media (max-width: 360px) {
  #main .wrap, .header-inner { width: calc(100% - 32px); }
  #main #teaching .ts-step-title { font-size: 12px; }
  #main #teaching .ts-steps button { padding-inline: 9px; }
  #main .learning-tabs .home-tile { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-reading-progress { display: none; }
  #main .yc-chapter *, .public-dialog, .ut-dialog { scroll-behavior: auto !important; }
  #main .yc-chapter .first-test-photo, #main .yc-chapter .hero-copy { transform: none !important; opacity: 1 !important; }
  .public-dialog[open], .public-dialog::backdrop, .ut-dialog[open], .ut-dialog::backdrop { animation: none; }
}