.reader-hero { padding:24px 0 40px; border-bottom:1px solid #94927555; margin-bottom:35px; }.reader-kicker { font:11px/1.8 var(--font-sans); letter-spacing:.12em; color:var(--color-blue); }.reader-hero h1 { font-family:var(--font-impact); font-weight:700; font-size:clamp(65px,8vw,155px); line-height:1.15; margin:30px 0 16px; letter-spacing:-.04em; }.reader-hero h2 { font:400 clamp(25px,3vw,48px) var(--font-serif); color:var(--color-blue); }.reader-hero>small { display:block; letter-spacing:.25em; margin:18px 0 35px; font-size:11px; }.reader-hero>p { font:15px/2 var(--font-sans); }.reader-hero dl { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px; }.reader-hero dl>div { border-top:1px solid #94927555; padding-top:15px; }.reader-hero dt { font-size:10px;color:#76816b;margin-bottom:8px; }.reader-hero dd { font-size:14px;line-height:1.7; }
.page-explanation { padding:24px 0 32px;border-bottom:1px solid #94927555; }.page-explanation>span { font:10px var(--font-sans);letter-spacing:.13em;color:#91734b; }.page-explanation h4 { font:400 25px/1.5 var(--font-serif);margin:12px 0; }.page-explanation p { font:14px/1.9 var(--font-sans);color:#586c61; }
.reader-side { overflow:hidden; }.reader-navigation { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.reader-timeline.page-directory { display:flex;align-items:stretch;gap:0;padding:14px 8px;writing-mode:horizontal-tb;min-height:0; }.page-directory h3,.chapter-timeline h3 { font:400 17px var(--font-serif);margin:0 0 15px; }.page-directory-list { overflow:auto;scrollbar-width:thin; }.page-directory-list button { display:block;width:100%;border:0;background:transparent;color:#5b7066;padding:9px 4px;text-align:left;font:11px/1.6 var(--font-sans);cursor:pointer; }.page-directory-list button[aria-current] { color:var(--color-blue);background:#35829a15; }.page-directory [hidden] { display:none!important; }
.chapter-timeline { padding:14px 10px 20px 18px; }.chapter-timeline button { position:relative;margin-left:6px;padding:12px 2px 18px 17px;border:0;border-left:1px solid #94927588;gap:5px;font-size:11px;width:calc(100% - 6px); }.chapter-timeline button::before { content:'';position:absolute;left:-5px;top:18px;width:9px;height:9px;border-radius:50%;background:#aab5a3; }.chapter-timeline button[aria-current] { background:transparent;color:var(--color-blue); }.chapter-timeline button[aria-current]::before { background:var(--color-blue);box-shadow:0 0 0 5px #35829a22; }.chapter-timeline button>span:first-child { display:none; }
.chapter-motion { position:relative;flex:0 0 190px;overflow:hidden;padding:22px 16px;display:flex;gap:12px;background:#214b58;color:#fff9e9;isolation:isolate; }.motion-number { color:#a9c9bf;font:700 32px var(--font-impact);z-index:1; }.motion-copy { z-index:1; }.motion-copy h3 { font:400 21px var(--font-serif);margin:3px 0 10px; }.motion-copy small { font-size:9px;letter-spacing:.12em;color:#bfd1bc; }.motion-copy p { font:12px/1.8 var(--font-sans);margin-top:12px;max-width:260px; }.motion-ring { position:absolute;left:-35%;top:15%;width:105%;aspect-ratio:1;border:1px solid #86b2b344;border-radius:50%;animation:reader-orbit 15s linear infinite; }.motion-ring::after { content:'';position:absolute;right:14%;top:10%;width:8px;height:8px;background:#b9caa7;border-radius:50%; }.motion-lines { position:absolute;inset:10% 32%;background:repeating-linear-gradient(115deg,transparent 0 12px,#75a6ac22 12px 16px);transform:skew(-10deg);animation:reader-lines 7s ease-in-out infinite alternate; }.motion-glyph { position:absolute;right:-2%;bottom:-20%;font:700 180px var(--font-impact);color:#ffffff07; }
.reader-side .identity-lab { flex:0 0 auto;padding:10px 14px; }.identity-lab>span { font-size:9px; }.identity-mark { margin:8px 0;padding:8px; }.identity-mark img { height:65px; }.identity-lab small { font-size:9px;margin-top:8px; }.identity-colors [data-color] { width:22px;height:22px; }
@keyframes reader-orbit { to{transform:rotate(360deg)} }@keyframes reader-lines { to{translate:20px -10px;opacity:.4} }
@media(max-width:760px){.reader-hero h1{font-size:19vw;}.reader-hero dl{gap:14px;}.reader-hero>p{font-size:14px;}.reader-navigation{display:flex;}.chapter-timeline{flex:1;min-width:0;display:flex;padding:8px;}.chapter-timeline button{border:1px solid #94927544;margin:0;padding:8px;width:auto;}.chapter-timeline button::before{display:none;}.reader-timeline.page-directory{display:none;}.chapter-motion{flex-basis:auto;min-height:120px;padding:14px;}.motion-number{font-size:28px;}.motion-copy h3{font-size:18px;margin:0 0 6px;}.motion-copy p{font-size:11px;line-height:1.6;margin-top:6px;max-width:none;}.reader-side .identity-lab{display:none;}.reader-hero{padding-top:10px;}.page-explanation{padding-block:20px;}.page-explanation h4{font-size:23px;}}
@media(max-height:780px) and (min-width:761px){.chapter-motion{flex-basis:160px;padding:14px;}.motion-copy p{font-size:11px;}.identity-mark img{height:50px;}.reader-side .identity-lab>small{display:none;}}
@media(prefers-reduced-motion:reduce){.motion-ring,.motion-lines{animation:none;}}
/* Hide scrollbars without disabling wheel, touch or keyboard reading. */
.case-reader, .case-reader *, .long-reader, .long-reader * { scrollbar-width: none !important; -ms-overflow-style: none; }
.case-reader::-webkit-scrollbar, .case-reader *::-webkit-scrollbar, .long-reader::-webkit-scrollbar, .long-reader *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.preview-scroll, .page-directory-list, .chapter-timeline { overflow-anchor: none; }
/* Match the navigation's JQ Song titles and Dream Han supporting text. */
.case-reader, .long-reader { font-family: var(--font-sans); font-weight: 400; }
.case-reader :is(h1,h2,h3,h4), .case-reader .reader-hero h1,
.case-reader .reader-hero h2, .case-reader .page-explanation h4,
.case-reader .motion-copy h3, .case-reader .page-directory h3,
.case-reader .chapter-timeline h3 { font-family: var(--font-serif); font-weight: 400; }
.case-reader :is(p,small,span,button,a,dt,dd,label),
.long-reader :is(p,small,span,button,a,label),
.case-reader .motion-number { font-family: var(--font-sans); font-weight: 400; }
/* W6 uses its actual font file, rather than synthetic browser bold. */
.case-reader, .long-reader { --font-sans: 'Dream Han W6', 'Microsoft YaHei', sans-serif; }
.case-reader .reader-bar span { font-size:11px; }
.case-reader .reader-label { font-size:13px; }
.case-reader .open-long { font-size:15px; }
.case-reader .preview-scroll button span { font-size:12px; }
.case-reader .reader-chapter header>span { font-size:12px; }
.case-reader .reader-chapter p, .case-reader .page-explanation p { font-size:15px; }
.case-reader .reader-chapter figcaption { font-size:12px; }
.case-reader .reader-kicker { font-size:12px; }
.case-reader .reader-hero>small { font-size:12px; }
.case-reader .reader-hero>p { font-size:16px; }
.case-reader .reader-hero dt { font-size:11px; }
.case-reader .reader-hero dd { font-size:15px; }
.case-reader .page-explanation>span { font-size:11px; }
.case-reader .page-directory-list button, .case-reader .chapter-timeline button { font-size:12px; }
.case-reader .chapter-timeline small { font-size:11px; }
.case-reader .motion-copy small { font-size:10px; }
.case-reader .motion-copy p { font-size:13px; }
.case-reader .identity-lab>span, .case-reader .identity-lab small { font-size:10px; }
.long-reader header { font-size:14px; }
@media(max-width:760px) {
 .case-reader .reader-bar span { font-size:9px; }
 .case-reader .reader-label { font-size:11px; }
 .case-reader .open-long, .case-reader .chapter-timeline button { font-size:13px; }
 .case-reader .reader-chapter figcaption { font-size:11px; }
 .case-reader .reader-hero>p { font-size:15px; }
 .case-reader .motion-copy p { font-size:12px; }
 .long-reader header { font-size:12px; }
}
@media(max-height:780px) and (min-width:761px) { .case-reader .motion-copy p { font-size:12px; } }

/* Keep the color experiment visible without embedded artwork. */
.identity-mark { min-height:81px; }
@media(max-height:780px) and (min-width:761px){.identity-mark{min-height:66px;}}