/* Local preview: the character and every prop share one scroll position. */
.chapter-relay{position:absolute;inset:0 auto auto 0;width:100%;height:0;z-index:12;pointer-events:none;visibility:hidden;--relay-width:144px}
.chapter-relay.is-visible{visibility:visible}
.chapter-relay .relay-world,.chapter-relay .relay-front{position:absolute;inset:0 auto auto 0;overflow:visible;max-width:none;pointer-events:none}
.relay-world{z-index:0}.relay-front{z-index:2}
.relay-world path,.relay-front path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.relay-character{position:absolute;left:0;top:0;width:var(--relay-width);aspect-ratio:1;z-index:1;will-change:transform;transform-origin:center}
.relay-sprite,.relay-poster{position:absolute;inset:0;width:100%;height:100%}
.relay-sprite{background-repeat:no-repeat;opacity:0}
.relay-poster{object-fit:contain}
.chapter-relay.is-ready .relay-sprite{opacity:1}
.chapter-relay.is-ready .relay-poster{visibility:hidden}
.relay-ribbon-under{stroke:#f1d889;stroke-width:7;opacity:.43}
.relay-ribbon{stroke:#bb9e56;stroke-width:1.3;opacity:.72;stroke-dasharray:3 1}
.relay-track-under{stroke:#b1c8dd;stroke-width:13;opacity:.38}
.relay-track{stroke:#d8b765;stroke-width:4;opacity:.87}
.relay-track-light{stroke:#fff9dc;stroke-width:1.2;stroke-dasharray:10 5;opacity:.9}
.relay-ring-back{stroke:#dbbc65;stroke-width:3.5;opacity:.65}
.relay-ring-front{stroke:#e5c878;stroke-width:5}
.relay-world .relay-page-shadow{fill:#294962;stroke:none;transform:translateY(5px)}
.relay-world .relay-page-fold{fill:url(#relay-paper);stroke:#c9b995;stroke-width:1}
.relay-lip{stroke:#bba16b;stroke-width:2.4}
.relay-grip-mark{stroke:#fff0b6;stroke-width:3}
.relay-dock{stroke:#d2b369;stroke-width:3.5}
.relay-idea{position:absolute;inset:0 auto auto 0;width:30px;height:30px;z-index:3;--star-docked:0;filter:drop-shadow(0 2px 2px #c19c3c26)}
.relay-idea svg{width:100%;height:100%;overflow:visible}
.relay-star-halo{fill:#fff5cf;stroke:#e8cc7f;stroke-width:7;opacity:calc(.35 + var(--star-docked)*.2)}
.relay-star-core{fill:#f2cd6e;stroke:#b59446;stroke-width:1.1;stroke-linejoin:round}
.relay-star-shine{fill:none;stroke:#fff6d3;stroke-width:2;stroke-linecap:round}
.relay-preview-tools{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:14px;padding:10px 15px;border:1px solid #bfccd3;background:#fffaf0f2;border-radius:24px;box-shadow:0 4px 18px #263d500b;font:12px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:#426175}
.relay-preview-tools[hidden]{display:none}
.relay-preview-tools button{background:transparent;padding:0}
.relay-preview-tools a{font-size:11px;color:#788a96;text-decoration:underline;text-underline-offset:3px}
.relay-enabled .about-letter{padding-top:150px;padding-bottom:330px;padding-left:max(124px,10vw);min-height:1060px}
.relay-enabled .practice{padding-top:220px}
.chapter-relay.is-static .relay-ribbon-under,.chapter-relay.is-static .relay-ribbon,.chapter-relay.is-static .relay-track-under,.chapter-relay.is-static .relay-track,.chapter-relay.is-static .relay-track-light,.chapter-relay.is-static .relay-page-shadow,.chapter-relay.is-static .relay-page-fold,.chapter-relay.is-static .relay-lip{display:none}
@media(max-width:1100px) and (min-width:851px){
  .relay-enabled .about-letter .about-content{gap:40px;grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr)}
  .relay-enabled .about-letter .letter-left h2{font-size:clamp(58px,7vw,80px)}
}
@media(max-width:850px){
  .chapter-relay{--relay-width:112px}
  .relay-enabled .about-letter{padding:154px 26px 300px 108px;min-height:0;background-size:auto 600px;background-position:left top}
  .relay-enabled .about-letter .letter-left h2{font-size:clamp(48px,8vw,64px);white-space:nowrap}
  .relay-enabled .about-letter .letter-lead{font-size:24px}
  .relay-enabled .about-letter .letter-eyebrow{font-size:9px;letter-spacing:.13em}
  .relay-enabled .about-letter .letter-right{padding-top:27px}
  .relay-enabled .about-letter .letter-links{gap:16px}
  .relay-enabled .practice{padding-top:220px}
  .relay-preview-tools{right:10px;bottom:10px;padding:8px 12px;gap:11px;font-size:11px}
  .relay-preview-tools a{font-size:10px}
  .relay-idea{filter:none}
}
@media(max-width:370px){
  .chapter-relay{--relay-width:96px}
  .relay-enabled .about-letter{padding-left:93px;padding-right:20px}
  .relay-enabled .about-letter .letter-lead{font-size:21px}
  .relay-preview-tools{gap:8px;max-width:calc(100% - 20px)}
}
@media(prefers-reduced-motion:reduce){.relay-character{will-change:auto}}