/* Homepage refinement; other public pages keep their own composition. */
#publicView { --muted: #526d8e; }
#works { --muted: #607b9f; }
#publicView section[id] { scroll-margin-top: 94px; }
.public-nav { gap: clamp(10px,1.4vw,22px); }
.reference-art { display: block; width: 100%; height: 100%; }
.reference-atmosphere { position: absolute; z-index: 2; inset: 21% -6% 35% 43%; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.reference-atmosphere span, .hero-cloud { background: radial-gradient(ellipse at 22% 62%,rgba(255,255,255,.78),rgba(255,255,255,.34) 20%,transparent 45%),radial-gradient(ellipse at 56% 48%,rgba(255,255,255,.8),rgba(255,255,255,.3) 28%,transparent 54%),radial-gradient(ellipse at 80% 68%,rgba(255,255,255,.68),transparent 52%); filter: blur(9px); animation: cloudPass 12s ease-in-out -3s infinite alternate; animation-play-state: paused; }
.reference-atmosphere span { position: absolute; left: -10%; bottom: 4%; width: 80%; height: 58%; }
.reference-atmosphere span + span { left: 20%; bottom: 28%; width: 65%; height: 48%; opacity: .6; animation-duration: 17s; animation-delay: -9s; animation-direction: alternate-reverse; }
@keyframes cloudPass { from { transform: translate3d(-90px,10px,0); } to { transform: translate3d(70px,-6px,0); } }
.hero-poster { background-image: url("assets/home-refinement/hero-mobile.webp"); animation: none; }
.cloud-a { width: 100%; height: 140px; left: -20%; bottom: 16%; }
.cloud-b { width: 85%; height: 110px; right: -18%; top: auto; bottom: 36%; opacity: .65; animation-duration: 17s; animation-delay: -9s; animation-direction: alternate-reverse; }
.scene-running .reference-atmosphere span, .scene-running .hero-cloud { animation-play-state: running; }
.atlas-label { transition: background .16s,color .16s,box-shadow .16s; }
.atlas-node:hover .atlas-label, .atlas-node:focus-visible .atlas-label { background: var(--cobalt); box-shadow: 0 8px 18px rgba(18,63,145,.18); }
.atlas-node:hover .atlas-label strong, .atlas-node:hover .atlas-label small, .atlas-node:focus-visible .atlas-label strong, .atlas-node:focus-visible .atlas-label small { color: white; }
.atlas-node:active { transform: translate(-50%,-50%) scale(.98); }
.atlas-status { display: block; margin: 5px auto 0; color: #526d8e; font-size: 10px; line-height: 1.2; }
.atlas-node.is-pending { margin-top: 8px; }
.atlas-route circle { transition: fill .16s,stroke .16s; }
.atlas:has(.atlas-node:nth-child(1):is(:hover,:focus-visible)) circle:nth-of-type(1),
.atlas:has(.atlas-node:nth-child(2):is(:hover,:focus-visible)) circle:nth-of-type(2),
.atlas:has(.atlas-node:nth-child(3):is(:hover,:focus-visible)) circle:nth-of-type(3),
.atlas:has(.atlas-node:nth-child(4):is(:hover,:focus-visible)) circle:nth-of-type(4),
.atlas:has(.atlas-node:nth-child(5):is(:hover,:focus-visible)) circle:nth-of-type(5),
.atlas:has(.atlas-node:nth-child(6):is(:hover,:focus-visible)) circle:nth-of-type(6),
.atlas:has(.atlas-node:nth-child(7):is(:hover,:focus-visible)) circle:nth-of-type(7),
.atlas:has(.atlas-node:nth-child(8):is(:hover,:focus-visible)) circle:nth-of-type(8) { fill: #123f91; stroke: #9fcbff; }
.proof { padding: 80px 0; }
.proof-inner { grid-template-columns: minmax(300px,390px) minmax(0,1fr); gap: clamp(50px,7vw,100px); }
.proof-image { aspect-ratio: 4 / 4.5; border-radius: 16px; box-shadow: 0 20px 45px rgba(52,98,145,.12); }
.teacher-name { margin-bottom: 20px; }
.teacher-evidence { gap: 24px; }
.learning { padding: 88px 0; }
.learning-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.learning-title h2 { max-width: 760px; font-size: clamp(32px,3.3vw,44px); line-height: 1.25; white-space: normal; text-wrap: balance; }
.learning-title .text-route { flex-shrink: 0; padding-bottom: 5px; }
.learning-flow { margin-top: 40px; }
.learning-flow article { min-height: 186px; }
.flow-mark { margin-bottom: 22px; }
.community-preview { padding: 48px 0; background: #eef6fc; }
.community-stage { display: block; }
.community-copy { display: grid; grid-template-columns: 1fr 1.1fr auto; align-items: center; gap: 32px; }
.community-copy h2 { font-size: 30px; line-height: 1.25; }
.community-copy p { font-size: 14px; margin: 0; }
.human-actions { margin: 0; flex-direction: column; gap: 8px; }
.human-actions > * { min-height: 40px; font-size: 12px; }
.world-news { padding: 80px 0; }
.world-news h2 { font-size: clamp(34px,3.4vw,46px); line-height: 1.2; }
.world-news-story img { object-position: center 40%; }
.audience, .faq { padding: 76px 0; }
.audience h2, .faq h2 { font-size: clamp(32px,3.4vw,46px); line-height: 1.25; }
.audience-grid, .faq-list { margin-top: 36px; }
@media (max-width:1023px) {
  .learning-title { display: block; }.learning-title .text-route { display: inline-block; margin-top: 18px; }
  .community-copy { grid-template-columns: 1fr 1.2fr; }.human-actions { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width:820px) {
  .site-header { gap: 12px; }
  .header-actions { gap: 8px; }
  .header-actions .primary-button { display: inline-flex; padding-inline: 12px; font-size: 12px; }
}
@media (max-width:380px) {
  .site-header { gap: 8px; }
  .site-header .brand { font-size: 20px; }
  .header-actions { gap: 4px; }
  .header-actions .primary-button { padding-inline: 8px; font-size: 11px; }
  .header-actions .text-button { padding-inline: 2px; font-size: 11px; }
}
@media (max-width:700px) {
  .proof-inner { grid-template-columns: 1fr; gap: 30px; }.proof-image { max-width: 420px; aspect-ratio: 4 / 3; }
  .proof { padding: 56px 0; }.learning { padding: 64px 0; }.learning-title h2 { font-size: 32px; }
  .learning-flow { margin-top: 28px; }.learning-flow article { min-height: 0; }.flow-mark { margin-bottom: 14px; }
  .community-copy { display: block; }.community-copy h2 { font-size: 28px; }.community-copy h2 br { display: none; }.community-copy p { margin-top: 16px; }.human-actions { margin-top: 20px; }
  .map-mobile-guide { grid-template-columns: 44px minmax(0,1fr) 44px; }.map-mobile-guide > button { width: 44px; height: 44px; }.map-progress > span { font-size: 11px; }
  .world-news, .audience, .faq { padding: 58px 0; }.world-news-layout { gap: 26px; }.world-news h2, .audience h2, .faq h2 { font-size: 32px; }
}
/* Keep the landscape scene clear in tablet and split-window compositions. */
@media (min-width:621px) and (max-width:1023px) {
  .hero { min-height: 0; height: clamp(560px,80vw,700px); }
  .hero-poster { background-image: url("assets/home-refinement/hero-mid-clouds-20260915.webp"); background-position: 60% center; }
  .hero-wash { background: linear-gradient(90deg,rgba(255,255,255,.18),transparent 45%); }
  .hero-content { padding-top: clamp(118px,15vw,150px); }
  .hero h1 { max-width: none; font-size: clamp(44px,6.6vw,64px); line-height: 1.15; }
  .hero-copy { margin-top: 20px; font-size: clamp(17px,2.3vw,22px); }
  .hero-actions { margin-top: 26px; }
  .hero .theme-player-mobile { display: inline-flex; }
  .hero .cloud-a { opacity: .25; }
  .hero .cloud-b { opacity: .18; }
  .hero .airship-brand { display: none; }
}
@media (max-width:620px) and (orientation:portrait) {
  .hero { min-height: 0; height: calc(140vw + 50px); aspect-ratio: auto; background: #dceeff; }
  .hero-poster { top: 50px; height: calc(100% - 50px); background-image: url("assets/home-refinement/hero-portrait-soft-20260908.webp"); background-size: 100% auto; background-position: center top; }
  .hero-wash { background: linear-gradient(180deg,rgba(255,255,255,.25),transparent 38%); }
  .hero-content { position: static; padding-top: 84px; }
  .hero h1 { max-width: none; font-size: clamp(34px,10vw,48px); line-height: 1.15; text-wrap: nowrap; }
  .hero-copy { max-width: none; margin-top: 12px; font-size: clamp(15px,4vw,18px); letter-spacing: .04em; }
  .hero-actions { position: absolute; z-index: 2; bottom: 28px; left: 20px; flex-direction: row; align-items: center; max-width: none; gap: 10px; margin-top: 0; }
  .hero-button { min-width: 0; min-height: 46px; padding-inline: 12px; gap: 10px; font-size: 13px; }
  .hero .theme-player-mobile { min-height: 46px; padding: 6px 10px 6px 6px; gap: 7px; }
  .hero .cloud-a { bottom: 0; opacity: .25; }
  .hero .cloud-b { bottom: 15%; opacity: .2; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .reference-atmosphere span, .hero-cloud { animation: none; }
  .atlas-node:hover { transform: translate(-50%,-50%); }
}