#about-count{display:inline-block;transform-origin:center;will-change:transform}
#about{--message-reveal:0}
#about-keyword{transform:translateY(calc((1 - var(--message-reveal))*clamp(30px,7vh,64px))) scale(calc(1 - var(--message-reveal)*.60));will-change:transform;transform-origin:center}
.about-copy{opacity:var(--message-reveal);transform:translateY(calc((1 - var(--message-reveal))*8px))}
.about-copy{position:relative;max-width:640px;min-height:110px;margin:12px auto 0;padding:0 12px;color:#757575;font-weight:400;isolation:isolate}
.about-copy:before{content:"";position:absolute;inset:-20px -35px;background:radial-gradient(ellipse,#fff 8%,#fffffff5 44%,#fff0 75%);z-index:-1;pointer-events:none}
.about-copy p{padding:0;margin:0;font-weight:400}
.about-kicker{font-size:.8125rem;letter-spacing:.12em;line-height:1.9;min-height:25px}
.about-copy .about-body{margin-top:10px;font-size:.8125rem;letter-spacing:.045em;line-height:1.95;min-height:52px;white-space:pre-line}
.is-typing:after{content:"";display:inline-block;width:1px;height:.9em;margin-left:4px;background:#7f9399;vertical-align:-.03em;animation:about-caret 1.1s steps(1) infinite}
@keyframes about-caret{0%,60%{opacity:.8}61%,100%{opacity:0}}
#about .about-trace{margin-top:12px}
#about[data-chapter="4"] #about-keyword{display:block;width:min(640px,90%);margin:0 auto;font-size:clamp(.875rem,1.3vw,1.125rem);letter-spacing:.07em;line-height:2.15;color:#757575;font-weight:400;white-space:normal;min-height:98px;padding:22px 10px;transform:none}
#about[data-chapter="4"] .about-copy{display:none}
#about[data-chapter="4"] .about-center{top:47%}
#about[data-chapter="4"] .about-trace{margin-top:28px;opacity:.35}
#about[data-paused="true"] .is-typing:after{animation:none;opacity:.5}
@media(max-width:550px){.about-copy{max-width:100%;padding:0 10px;margin-top:8px;min-height:145px}.about-kicker{font-size:.75rem;letter-spacing:.075em}.about-copy .about-body{font-size:.75rem;letter-spacing:.018em;line-height:1.95;margin-top:10px}.about-center{top:44%}.about-index{top:23%}#about[data-chapter="4"] #about-keyword{font-size:.875rem;width:94%;max-width:310px;padding:24px 12px}.about-copy:before{inset:-10px -6px}.about-trace{margin-top:8px}}
@media(max-height:650px) and (max-width:550px){.about-index{top:19%}.about-center{top:43%}#about-keyword{font-size:48px;padding:14px 4px}#about[data-chapter="3"] #about-keyword{font-size:38px}.about-copy{min-height:120px}.about-copy .about-body{line-height:1.75}.about-copy:before{inset:-6px}.about-trace{margin-top:0;height:18px}}
@media(max-height:500px) and (min-width:551px){#about-keyword{font-size:56px;padding:6px}#about[data-chapter="3"] #about-keyword{font-size:48px}.about-copy{margin-top:4px;min-height:79px}.about-kicker{font-size:.75rem;min-height:20px}.about-copy .about-body{font-size:.75rem;line-height:1.6;margin-top:4px;min-height:38px}#about .about-trace{margin-top:0;height:12px}.about-index{top:23%}.about-center{top:46%}}
@media(prefers-reduced-motion:reduce){.is-typing:after{display:none}#about-count{transform:none!important}}

/* The message board is distinct from the quiet outer field frame. */
#about-message-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#about .about-copy{padding:22px 28px;min-height:154px;border-radius:12px}
#about .about-copy:before{display:none}
#about[data-chapter="4"] #about-keyword{border-radius:12px}
@media(max-width:550px){#about .about-copy{max-width:calc(100% - 28px);padding:18px 16px;min-height:174px}#about[data-chapter="4"] #about-keyword{max-width:calc(100% - 28px)}}
@media(max-height:650px) and (max-width:550px){#about .about-copy{padding:18px 16px;min-height:158px}}
@media(max-height:500px) and (min-width:551px){#about .about-copy{padding:12px 24px;min-height:112px}}

/* Only the moving field behind the glass is diffused; text and the separate
   double-frame canvas stay sharp. The filter itself is never animated. */
#about .about-copy,#about[data-chapter="4"] #about-keyword{
  background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(241,244,246,.42) 56%,rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(6px) saturate(.65);
  backdrop-filter:blur(6px) saturate(.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),inset 0 -1px 0 rgba(122,137,147,.045),0 8px 26px -20px rgba(59,76,90,.12);
}
#about[data-chapter="4"] #about-keyword:before{display:none}
@media(max-width:550px){#about .about-copy,#about[data-chapter="4"] #about-keyword{-webkit-backdrop-filter:blur(4px) saturate(.65);backdrop-filter:blur(4px) saturate(.65)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#about .about-copy,#about[data-chapter="4"] #about-keyword{background:rgba(247,248,249,.94)}}
@media(prefers-reduced-transparency:reduce){#about .about-copy,#about[data-chapter="4"] #about-keyword{-webkit-backdrop-filter:none;backdrop-filter:none;background:#f9fafb}}