:root { --sky:#fbfcfe; --ink:#50566b; --muted:#9094a3; --lilac:#b9b1d8; --pink:#e8b8c1; --line:#e1dbe9; --wand:url('./assets/cloud/wand.svg') 5 5, auto; font-family:'PingFang SC','Hiragino Sans GB',system-ui,sans-serif; color:var(--ink); background:var(--sky); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body,button,a,canvas { cursor:var(--wand); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
button { border:0; background:none; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.35; }
:focus-visible { outline:2px solid #a49ac5; outline-offset:6px; border-radius:5px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:10px; transform:translateY(-150%); z-index:100; padding:10px; background:white; }
.skip-link:focus { transform:none; }
.sky-header { position:fixed; top:0; left:0; right:0; z-index:20; height:88px; display:flex; justify-content:space-between; align-items:center; padding:0 4.6vw; pointer-events:none; }
.sky-header>* { pointer-events:auto; }
.wordmark { display:flex; gap:9px; align-items:center; font-family:ui-rounded,'Arial Rounded MT Bold',sans-serif; font-size:23px; font-weight:700; letter-spacing:-1px; color:#7d8096; }
.wordmark svg { width:26px; height:26px; }
.wordmark-dot { color:#c0b2d7; }
.resume-link { font-size:11px; color:#8b8b9c; letter-spacing:2px; display:flex; gap:16px; align-items:center; }
.resume-link span { font-size:17px; }
.sky-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:28px; }
.sky-nav button { font-size:11px; padding:9px 0; color:#9b97a6; }
.sky-nav button[aria-current] { color:#655a84; }
.horizon { width:100%; height:100dvh; overflow:hidden; position:relative; outline:none; }
.story-strip { display:flex; height:100%; width:max-content; position:relative; isolation:isolate; }
.story-panel { position:relative; width:100vw; height:100%; flex:none; overflow:hidden; }
.home-panel { isolation:isolate; }
.cloud-aura { position:absolute; width:74%; height:70%; left:-5%; top:14%; background:radial-gradient(ellipse,#f0f4ff55,transparent 67%); pointer-events:none; z-index:-1; }
.cat-world { position:absolute; width:min(73vw, 108svh); aspect-ratio:1; left:-1vw; top:44%; transform:translateY(-50%); mix-blend-mode:multiply; }
#cloud-cat,.cat-fallback { width:100%; height:100%; display:block; touch-action:none; user-select:none; }
.cat-fallback { position:absolute; inset:0; object-fit:contain; }
.intro-copy { position:absolute; z-index:3; top:34%; left:72%; width:25%; }
.hello { font-size:14px; font-weight:400; letter-spacing:3px; margin:0 0 15px; color:#9b9eac; }
.intro-copy h1 { position:relative; width:max-content; font-family:'Yuanti SC','Hiragino Maru Gothic ProN','PingFang SC',sans-serif; font-size:clamp(36px,4.1vw,66px); letter-spacing:4px; font-weight:600; margin:0; color:#686780; text-shadow:0 4px 15px #b8b2d326; }
.name-spark { position:absolute; font-size:25px; color:#c0b6d6; right:-32px; top:-12px; font-weight:300; }
.name-roman { font-family:ui-monospace,SFMono-Regular,monospace; font-size:9px; letter-spacing:3.2px; color:#b0aebd; margin:16px 0 30px; }
.official-intro { font-size:12px; line-height:2; letter-spacing:.2px; margin:0; color:#9696a4; }
.intro-note { display:block; font-size:10px; color:#b5b0c1; margin-top:28px; letter-spacing:.3px; }
.hero-ball { position:absolute; z-index:6; width:90px; height:90px; left:57%; top:73%; transform:translate(-50%,-50%); padding:0; border-radius:50%; }
.hero-ball img { display:block; width:100%; height:100%; filter:saturate(.55) brightness(1.1); transition:transform .35s cubic-bezier(.2,.6,.25,1.2); }
.hero-ball:hover img { transform:rotate(12deg) scale(1.04); }
.hero-ball span { position:absolute; white-space:nowrap; top:100%; left:35%; font-size:10px; font-weight:400; color:#b09ca6; transform:rotate(-5deg); letter-spacing:.5px; }
.hero-ball b { position:absolute; top:-27px; right:55%; font-size:29px; font-weight:300; transform:rotate(-30deg); }
.is-unraveling .hero-ball img { opacity:0; }
.is-unraveling .hero-ball span { opacity:0; }
.paint-dock { position:absolute; z-index:9; bottom:54px; left:5vw; height:48px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid #fff; background:#ffffffc7; border-radius:30px; box-shadow:0 3px 26px #747e9d0b,inset 0 0 0 1px #ededf350; backdrop-filter:blur(15px); }
.paint-dock button { padding:0; height:28px; }
.paint-mode { display:flex; align-items:center; gap:6px; color:#8d839f; font-size:10px; }
.paint-mode[aria-pressed='false'] { color:#b6b3bd; }
.paint-mode svg { width:22px; height:22px; }
.dock-divider { width:1px; height:15px; background:#ece8f0; }
.paint-colors { display:flex; align-items:center; gap:9px; }
.paint-dock .color-chip { width:16px; height:16px; border-radius:50%; background:var(--chip); border:2px solid white; box-shadow:0 0 0 1px #e6e4ed; transition:box-shadow .2s; }
.paint-dock .color-chip.selected { box-shadow:0 0 0 2px white,0 0 0 3px var(--chip); }
.custom-color { position:relative; width:20px; height:24px; display:grid; place-items:center; color:#b4afbf; }
.custom-color input { opacity:0; position:absolute; inset:0; width:100%; height:100%; cursor:var(--wand); }
.custom-color:focus-within { outline:1px solid var(--lilac); border-radius:50%; }
.undo-paint { font-size:21px; color:#a19baa; }
.reset-paint { font-size:10px; color:#aaa3b3; }
.painting-hint { position:absolute; left:5vw; bottom:21px; font-size:9px; letter-spacing:.6px; color:#b6b2bf; margin:0; }
.home-gate { position:absolute; bottom:18px; right:5vw; color:#b4a3b6; font-size:10px; margin:0; }
.story-thread { position:absolute; inset:0; z-index:4; height:100%; overflow:visible; pointer-events:none; fill:none; stroke-linecap:round; }
.thread-soft { stroke:#d8b7c318; stroke-width:8; }
.thread-cord { stroke:#dab4c0; stroke-width:2.5; }
.thread-highlight { stroke:#f3dce4; stroke-width:.75; transform:translateY(-.65px); }
.story-ball { position:absolute; width:36px; height:36px; z-index:7; pointer-events:none; object-fit:contain; filter:saturate(.55) brightness(1.1); opacity:0; }
.story-ball.is-visible { opacity:1; }
.chapter-knot { position:absolute; left:14%; top:84%; width:9px; height:9px; border-radius:50%; background:#d9b7c4; transform:translate(-50%,-50%); z-index:5; box-shadow:inset 0 0 0 2px #f7e6ed; }
.panel-content { position:absolute; top:15%; left:10%; right:10%; bottom:24%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ddd7e6 transparent; }
.chapter-panel .panel-content { display:grid; grid-template-columns:24% 1fr; gap:6%; align-items:start; padding:12px; }
.time-label { display:flex; flex-direction:column; gap:17px; padding-top:13px; }
.time-kicker { font:9px ui-monospace,monospace; letter-spacing:2px; color:#a9a1b4; }
.time-label time,.time-display { font-size:32px; color:#9690aa; font-weight:500; letter-spacing:-1px; line-height:1.35; }
.time-label>span:last-child:not(.time-display) { font-size:11px; line-height:1.8; color:#aaa5b3; }
.entry-card { max-width:680px; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; color:#9d97ab; font-size:10px; }
.category { letter-spacing:1px; }
.small-tag { font-size:9px; padding:5px 9px; background:#f0edf533; border-radius:30px; }
h2 { font-size:clamp(25px,2.6vw,40px); font-weight:500; line-height:1.4; letter-spacing:-1px; margin:0 0 16px; color:#66677c; }
.entry-card>p { font-size:12px; color:#9292a2; line-height:2; max-width:530px; margin:0 0 18px; }
.campus-photo { margin:23px 0 15px; overflow:hidden; border-radius:14px; position:relative; max-width:490px; }
.campus-photo img { width:100%; max-height:215px; display:block; object-fit:cover; filter:saturate(.55); }
.campus-photo span { position:absolute; bottom:12px; left:15px; color:#fff; font:7px ui-monospace,monospace; letter-spacing:1.3px; }
details { border-top:1px solid #ebe7ef; padding-top:14px; margin-top:18px; font-size:11px; color:#9590a2; }
summary { list-style:none; display:flex; justify-content:space-between; gap:18px; cursor:var(--wand); }
summary::-webkit-details-marker { display:none; }
details p { font-size:11px; line-height:2; color:#93909e; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.tags span { font-size:9px; padding:5px 9px; border-radius:5px; color:#9c94ab; background:#f1edf666; }
.card-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:15px; border-top:1px solid #e9e5ee; font-size:11px; }
.card-actions button,.card-actions a { padding:8px 0; color:#8f84a3; }
.card-actions button span { margin-left:18px; }
.date-note { font-size:10px; color:#aaa4b2; }
.data-preview { background:#f0f3f990; padding:17px 20px; border-radius:13px; max-width:500px; margin:23px 0; }
.preview-top { display:flex; justify-content:space-between; font:7px ui-monospace,monospace; color:#a4aec4; letter-spacing:.6px; }
.preview-top>span:first-child { display:flex; gap:4px; }
.preview-top i { width:4px; height:4px; border-radius:50%; background:#cdd5e5; }
.chart-body { display:flex; justify-content:space-between; gap:16px; margin-top:18px; }
.chart-label,.chart-caption { display:block; color:#a6b0c5; font:8px ui-monospace,monospace; margin:6px 0; }
.chart-caption { font-size:6px; }
.chart-body strong { display:block; font-size:22px; font-weight:500; line-height:1.4; color:#8d9bb9; }
.bar-chart { width:45%; display:flex; gap:7px; align-items:flex-end; height:100px; }
.bar-chart i { width:14%; height:var(--bar); background:linear-gradient(#b6c3df,#d8e0ef); border-radius:3px 3px 0 0; }
.flow-preview { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:500px; margin:28px 0; background:#f3f0f788; padding:24px 20px; border-radius:13px; font-size:11px; color:#a197b3; }
.flow-preview b { font-weight:300; color:#c8bfce; }
.transcript-preview { max-width:500px; margin:22px 0; padding:19px 22px; border-radius:13px; background:#f1f3f880; }
.audio-line { display:flex; gap:15px; align-items:center; color:#b4bbcb; font:8px ui-monospace,monospace; }
.waveform { display:flex; align-items:center; justify-content:center; gap:4px; height:28px; flex:1; }
.waveform i { width:2px; background:#c5cddd; border-radius:3px; }
.transcript-line { display:flex; gap:18px; margin-top:17px; font-size:10px; color:#969db0; }
.transcript-line code { color:#b5afc4; }
.transcript-preview small { display:block; margin-top:18px; font-size:8px; text-align:right; color:#b6b4c2; }
.idea-note { position:relative; padding:30px; margin:26px 0; border-radius:13px; background:#f2eff880; color:#aaa0bf; }
.idea-note>span:first-child { font-size:30px; color:#c5bdd8; }
.idea-note p { font-size:17px; line-height:1.8; margin:12px 0; }
.idea-label { font:8px ui-monospace,monospace; letter-spacing:2px; color:#b6afc5; }
.status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#aec9bd; margin-left:12px; vertical-align:middle; }
.personal-panel .panel-content { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:start; padding:12px; }
.eyebrow { font:9px ui-monospace,monospace; letter-spacing:2px; color:#aca4b9; margin-bottom:25px; }
.personal-panel p:not(.eyebrow) { font-size:12px; line-height:2; color:#9893a4; }
.more-items details { margin-top:0; margin-bottom:24px; }
.more-icon { margin-right:16px; color:#beb1cb; }
.contact-panel .panel-content { display:flex; align-items:center; }
.contact-inner { display:grid; width:100%; grid-template-columns:1.5fr 1fr; gap:12%; align-items:center; }
.contact-email { display:inline-block; margin-top:26px; font-size:clamp(13px,1.6vw,21px); color:#9a8eac; border-bottom:1px solid #ddd4e6; padding-bottom:9px; }
.contact-aside { display:flex; flex-direction:column; gap:24px; font-size:12px; color:#a397af; }
.contact-aside>span { font-size:10px; color:#b6afbf; }
.orange { color:#c6a6bc; }
.journey-controls { position:fixed; bottom:27px; right:5vw; z-index:20; display:flex; gap:21px; align-items:center; background:#fbfcfedc; border-radius:24px; padding:5px 8px; }
.journey-controls button { font-size:20px; font-weight:300; width:30px; height:30px; }
.page-label { display:flex; gap:10px; align-items:center; font:9px ui-monospace,monospace; color:#b4acbf; }
.page-label b { font-weight:400; color:#867a99; }
.page-label>span { color:#d1cbd9; }
.wand-sparkles { position:fixed; inset:0; pointer-events:none!important; z-index:90; overflow:hidden; }
.wand-sparkles i { position:absolute; font-style:normal; color:#c1add9; font-size:8px; line-height:1; animation:star-drift .6s ease-out forwards; pointer-events:none; }
@keyframes star-drift { from { opacity:.65; transform:translate(-50%,-50%) scale(.7); } to { opacity:0; transform:translate(-50%,-130%) scale(.15); } }
dialog { border:1px solid #fff; border-radius:20px; background:#fdfdff; color:var(--ink); width:min(680px,calc(100% - 32px)); max-height:85dvh; padding:30px 35px; box-shadow:0 25px 110px #5b5b7c20; cursor:auto; }
dialog::backdrop { background:#b7b8cc44; backdrop-filter:blur(9px); }
.dialog-toolbar { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:2px; color:#a19aad; margin-bottom:20px; }
.dialog-close { font-size:24px; }
dialog h2 { font-size:26px; }
dialog h3 { font-size:14px; font-weight:500; margin-top:24px; }
dialog p,dialog li { font-size:12px; line-height:2; color:#8f8b9b; }
dialog ul { padding-left:20px; }
.dialog-links { display:flex; gap:25px; align-items:center; margin-top:25px; font-size:11px; color:#9685aa; }
@media(min-width:1500px) { .cat-world { left:5vw; width:min(66vw,103svh); } .intro-copy { left:71%; } }
@media(max-height:680px) and (min-width:701px) { .cat-world { width:100svh; left:3vw; top:44%; } .intro-copy { top:28%; left:68%; width:28%; } .paint-dock { bottom:35px; height:41px; } .painting-hint { bottom:13px; } .hero-ball { width:70px; height:70px; left:55%; top:73%; } .intro-note { margin-top:15px; } .name-roman { margin-bottom:20px; } .panel-content { top:17%; bottom:22%; } .campus-photo img { max-height:150px; } }
@media(max-width:700px) {
.sky-header { height:65px; padding:0 23px; }
.wordmark { font-size:21px; }.wordmark svg { width:23px;height:23px; }
.resume-link { font-size:10px; gap:9px; }
.sky-nav { gap:17px; left:54%; }.sky-nav button { font-size:9px; }
.cat-world { width:104vw; left:-2vw; top:31%; }
.intro-copy { top:58%; left:10%; width:80%; }
.hello { font-size:10px; margin-bottom:7px; letter-spacing:2px; }
.intro-copy h1 { font-size:36px; letter-spacing:3px; }.name-spark { font-size:20px; right:-24px; }
.name-roman { font-size:7px; letter-spacing:2.5px; margin:10px 0 12px; }
.official-intro { font-size:10px; line-height:1.8; }.official-intro br { display:none; }
.intro-note { display:none; }
.hero-ball { width:59px; height:59px; left:81%; top:55%; }.hero-ball span { font-size:8px; left:auto; right:12px; top:108%; }.hero-ball b { right:2px; top:-26px; }
.paint-dock { left:50%; transform:translateX(-50%); bottom:57px; gap:9px; height:42px; padding:0 12px; white-space:nowrap; }
.paint-colors { gap:8px; }.paint-mode svg { width:18px; height:18px; }.paint-mode { font-size:9px; }.paint-dock .color-chip { width:15px;height:15px; }
.painting-hint { left:0; right:0; text-align:center; bottom:30px; font-size:8px; letter-spacing:0; }
.home-gate { bottom:9px; left:0; right:0; text-align:center; font-size:8px; }
.panel-content { top:13%; left:7%; right:7%; bottom:22%; }.chapter-panel .panel-content { display:block; padding:8px; }
.time-label { margin-bottom:26px; gap:8px; padding:0; }.time-kicker { font-size:7px; letter-spacing:1.4px; }.time-label time,.time-display { font-size:25px; }.time-label>span:last-child:not(.time-display) { font-size:9px; }
.card-top { margin-bottom:16px; font-size:8px; }.small-tag { font-size:8px; }h2 { font-size:24px; }.entry-card>p { font-size:11px; line-height:1.9; }
.campus-photo img { max-height:165px; }.campus-photo span { font-size:5px; }.card-actions { font-size:10px; }
.bar-chart { height:95px; }.chart-body strong { font-size:21px; }.chart-caption { display:none; }.flow-preview { padding:20px 13px; font-size:10px; gap:8px; }
.personal-panel .panel-content { display:block; }.more-items { margin-top:30px; }.contact-inner { display:block; }.contact-aside { margin-top:38px; gap:18px; font-size:11px; }.contact-email { font-size:14px; }.contact-panel .panel-content { display:block; padding-top:30px; }
.journey-controls { right:7vw; bottom:22px; gap:16px; }.chapter-knot { left:14%; }
dialog { padding:24px; }dialog h2 { font-size:22px; }
}
@media(max-height:620px) and (max-width:700px) { .cat-world { width:91vw; left:0; top:29%; }.intro-copy { top:54%; }.intro-copy h1 { font-size:29px; }.hello { margin-bottom:4px; }.name-roman { margin:7px 0 8px; }.hero-ball { top:49%; }.paint-dock { bottom:38px; }.painting-hint { bottom:14px; }.home-gate { display:none; }.official-intro { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; }.wand-sparkles { display:none; } }
@media print { html,body { height:auto;overflow:visible; }.sky-header,.paint-dock,.hero-ball,.story-thread,.journey-controls,.painting-hint,.home-gate,.wand-sparkles,.story-ball { display:none; }.horizon { height:auto;overflow:visible; }.story-strip { display:block;width:100%; }.story-panel { width:100%;height:auto;overflow:visible;break-inside:avoid; }.home-panel { height:350px; }.cat-world { width:350px; }.intro-copy { left:60%; }.panel-content { position:static; overflow:visible; padding:30px!important; }.chapter-panel .panel-content { grid-template-columns:25% 1fr; }.chapter-knot { display:none; } }

.paint-dock .color-chip { position:relative; }
.paint-dock .color-chip::before { content:""; position:absolute; inset:-4px; border-radius:50%; }

.panel-content { touch-action:pan-y; }
.official-intro { color:#797c8e; }
.painting-hint { color:#9993a3; }

/* The yarn is a continuous vertical path, with the character kept as the opening. */
html { height:auto; overflow-x:clip; overflow-y:visible; scroll-behavior:smooth; scroll-padding-top:95px; }
body { height:auto; overflow:visible; }
.horizon { height:auto; overflow:visible; }
.story-strip { display:block; width:100%; height:auto; }
.story-panel { width:100%; height:auto; overflow:visible; }
.home-panel { height:100svh; min-height:720px; isolation:auto; }
.cat-world { z-index:2; }
.story-thread { z-index:1; }
.sky-header { background:linear-gradient(#fbfcfef2,#fbfcfe00); }
.hero-ball { width:16%; height:auto; aspect-ratio:1; left:40%; top:69%; mix-blend-mode:multiply; }
.hero-ball img,.story-ball { filter:none; mix-blend-mode:multiply; }
.hero-ball img { mask-image:radial-gradient(circle,#000 58%,transparent 71%); }
.hero-ball span { top:120%; left:95%; font-size:10px; color:#a68c9d; }
.hero-ball b { display:none; }
.ball-travelling .hero-ball img,.ball-travelling .hero-ball span { visibility:hidden; }
.ball-travelling .hero-ball { pointer-events:none; }
.story-ball { mask-image:radial-gradient(circle,#000 58%,transparent 71%); }
.paint-mode { cursor:default; }
.paint-dock { bottom:70px; }
.painting-hint { bottom:42px; }
.chapter-panel,.personal-panel,.contact-panel { padding:110px 0; scroll-margin-top:0; }
.panel-content { position:relative; inset:auto; width:74%; margin:0 8% 0 18%; overflow:visible; overscroll-behavior:auto; }
.chapter-panel .panel-content { grid-template-columns:25% 1fr; gap:6%; padding:0; }
.chapter-knot { left:12%; top:139px; }
.time-kicker,.time-label>span:last-child:not(.time-display) { display:none; }
.time-label { padding-top:0; }
.time-label time,.time-display { font-size:clamp(22px,2.3vw,33px); }
.entry-card>p { font-size:14px; line-height:2; color:#828496; }
.card-top { font-size:11px; }
.entry-card { max-width:640px; }
h2 { font-size:clamp(25px,2.4vw,36px); }
.category { color:#9d8eaa; }
.personal-panel .panel-content { grid-template-columns:1fr 1fr; gap:8%; padding:0; }
.personal-panel p:not(.eyebrow),details p { font-size:13px; }
.contact-panel { min-height:550px; padding-bottom:150px; }
.contact-inner { grid-template-columns:1.2fr 1fr; gap:8%; }
.contact-email { font-size:clamp(12px,1.5vw,20px); }
.contact-aside .github-profiles { line-height:2.3; color:#9588a3; overflow-wrap:anywhere; }
@media(max-width:700px) {
  .home-panel { min-height:740px; }
  .cat-world { width:104vw; left:-2vw; top:30%; }
  .intro-copy { top:59%; }
  .hero-ball { width:18%; height:auto; left:40%; top:69%; }
  .hero-ball span { top:118%; left:75%; right:auto; font-size:8px; }
  .paint-dock { bottom:64px; }
  .painting-hint { bottom:36px; font-size:9px; }
  .sky-nav { gap:16px; }
  .sky-nav button { font-size:10px; }
  .chapter-panel,.personal-panel,.contact-panel { padding:70px 0; }
  .panel-content { width:76%; margin:0 7% 0 17%; }
  .chapter-panel .panel-content,.personal-panel .panel-content { display:block; padding:0; }
  .time-label { margin-bottom:22px; }
  .chapter-knot { left:8%; top:85px; width:7px; height:7px; }
  .entry-card>p { font-size:12px; }
  .time-label time,.time-display { font-size:23px; }
  .personal-panel p:not(.eyebrow),details p { font-size:12px; }
  .contact-panel .panel-content { padding-top:0; }
  .contact-inner { display:block; }
  .contact-panel { min-height:540px; padding-bottom:120px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .home-panel { height:350px;min-height:0; }.chapter-panel,.personal-panel,.contact-panel { padding:20px 0;min-height:0; }.panel-content { width:100%;margin:0; }.story-ball { display:none; } }
.home-panel { overflow:clip; }
.hero-ball,.hero-ball img { mix-blend-mode:normal; }
@media(max-width:700px) {
 .home-panel { min-height:620px; }
 .cat-world { top:27%; }
 .intro-copy { top:58%; }
 .hero-ball span { left:100%; }
 .paint-dock { bottom:54px; }
 .painting-hint { bottom:26px; }
}
@media(max-width:700px) { .hero-ball span { top:164%; left:30%; } }
@media(min-width:701px) { .hero-ball span { top:170%; left:90%; } }
@media(max-width:700px) { .hero-ball span { left:-50%; } }

/* Only the yarn fibers rotate. The separate contact shadow stays below the ball. */
.story-ball { mask-image:none; filter:none; mix-blend-mode:normal; isolation:isolate; }
.story-ball-surface { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; mask-image:radial-gradient(circle,#000 56%,transparent 69%); }
.story-ball::before,.hero-ball::before { content:""; position:absolute; width:60%; height:13%; left:20%; top:83%; border-radius:50%; background:#8e829b24; filter:blur(4px); pointer-events:none; }
.hero-ball::before { z-index:-1; }
.ball-travelling .hero-ball::before { visibility:hidden; }

/* Alternating entries leave an open central corridor for the rolling yarn. */
.chapter-panel { padding:60px 0; }
.chapter-panel .panel-content { width:86%; max-width:1160px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr); gap:0; }
.chapter-panel .entry-card { padding:26px; background:#ffffffb3; border:1px solid #edeaf2; border-radius:20px; box-shadow:0 12px 38px #82759406; min-width:0; }
.chapter-panel:nth-of-type(even) .entry-card { grid-column:1; grid-row:1; }
.chapter-panel:nth-of-type(even) .time-label { grid-column:3; grid-row:1; text-align:left; padding:42px 0 0 5px; }
.chapter-panel:nth-of-type(odd) .entry-card { grid-column:3; grid-row:1; }
.chapter-panel:nth-of-type(odd) .time-label { grid-column:1; grid-row:1; text-align:right; padding:42px 5px 0 0; }
.chapter-knot { left:50%; top:119px; }
.chapter-panel .time-label>span:last-child:not(.time-display) { display:block; font-size:11px; color:#a29bac; }
.chapter-panel .time-label { gap:12px; }
.chapter-panel h2 { font-size:clamp(23px,2.3vw,32px); }
.chapter-panel .entry-card>p { font-size:13px; }
.chapter-panel .entry-card { transition:opacity .65s ease,translate .75s cubic-bezier(.2,.7,.2,1); }
.chapter-panel:not(.in-view) .entry-card { opacity:.6; }
.chapter-panel:nth-of-type(even):not(.in-view) .entry-card { translate:-18px 16px; }
.chapter-panel:nth-of-type(odd):not(.in-view) .entry-card { translate:18px 16px; }
.chapter-panel:focus-within .entry-card { opacity:1; translate:0; }
.personal-panel .panel-content { width:86%; max-width:1160px; margin:0 auto; grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr); gap:0; }
.personal-panel .panel-content>div:first-child { grid-column:1; }
.personal-panel .more-items { grid-column:3; }
.personal-panel .chapter-knot,.contact-panel .chapter-knot { top:139px; }
.contact-panel .panel-content { width:86%; max-width:1160px; margin:0 auto; }
.contact-inner { grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr); gap:0; }
.contact-inner>div:first-child { grid-column:1; }
.contact-aside { grid-column:3; }
@media(max-width:700px) {
 .chapter-panel { padding:38px 0; }
 .chapter-panel .panel-content { width:94%; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); }
 .chapter-knot { left:50%; top:76px; width:7px; height:7px; }
 .chapter-panel .entry-card { padding:13px 10px; border-radius:14px; }
 .chapter-panel h2 { font-size:18px; letter-spacing:-.4px; margin-bottom:12px; }
 .chapter-panel .entry-card>p { font-size:11px; line-height:1.9; }
 .chapter-panel .time-label time,.chapter-panel .time-display { font-size:18px; line-height:1.6; letter-spacing:0; }
 .chapter-panel:nth-of-type(even) .time-label { padding:26px 0 0; }
 .chapter-panel:nth-of-type(odd) .time-label { padding:26px 0 0; }
 .chapter-panel .time-label>span:last-child:not(.time-display) { font-size:9px; line-height:1.8; }
 .card-top { flex-wrap:wrap; gap:8px; margin-bottom:14px; }
 .small-tag { padding:0; font-size:8px; }
 .chapter-panel .card-actions { display:block; font-size:10px; }
 .chapter-panel .card-actions a,.chapter-panel .card-actions button { display:block; text-align:left; }
 .card-actions button span { margin-left:3px; }
 .tags { gap:5px; margin:14px 0; }.tags span { font-size:8px; padding:4px 5px; }
 .chapter-panel .data-preview,.chapter-panel .flow-preview,.chapter-panel .transcript-preview,.chapter-panel .idea-note { display:none; }
 .campus-photo { border-radius:8px; margin:16px 0; }.campus-photo span { display:none; }
 .chapter-panel details,.chapter-panel details p { font-size:10px; line-height:1.8; }
 .chapter-panel:not(.in-view) .entry-card { translate:0 12px; }
 .personal-panel .panel-content { width:94%; display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); }
 .personal-panel h2,.contact-panel h2 { font-size:19px; }
 .personal-panel p:not(.eyebrow),.personal-panel details,.personal-panel details p { font-size:11px; }
 .personal-panel .more-items { margin-top:0; }
 .more-icon { margin-right:4px; }
 .personal-panel .eyebrow,.contact-panel .eyebrow { font-size:7px; letter-spacing:1px; line-height:1.9; }
 .contact-panel .panel-content { width:94%; }
 .contact-inner { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); }
 .contact-email { font-size:11px; overflow-wrap:anywhere; }
 .contact-aside { margin-top:0; font-size:11px; }
 .personal-panel .chapter-knot,.contact-panel .chapter-knot { top:100px; }
 .story-ball::before { filter:blur(3px); }
}
@media(prefers-reduced-motion:reduce) { .chapter-panel .entry-card { translate:none!important;opacity:1!important; } }
@media print { .chapter-panel .entry-card { opacity:1!important;translate:none!important; } }
.campus-photo img { height:auto; }
@media(max-width:700px) {
 .chapter-panel:nth-of-type(even):not(.in-view) .entry-card,.chapter-panel:nth-of-type(odd):not(.in-view) .entry-card { translate:0 12px; }
}

/* Broad alternating bends make room for wider experience cards. */
.chapter-panel { padding:80px 0; }
.chapter-panel:nth-of-type(even) .panel-content { grid-template-columns:minmax(0,56fr) minmax(0,44fr); }
.chapter-panel:nth-of-type(odd) .panel-content { grid-template-columns:minmax(0,44fr) minmax(0,56fr); }
.chapter-panel:nth-of-type(even) .time-label { grid-column:2; padding:42px 0 0 35%; }
.chapter-panel:nth-of-type(odd) .entry-card { grid-column:2; }
.chapter-panel:nth-of-type(odd) .time-label { padding:42px 35% 0 0; }
.personal-panel .panel-content { width:74%; margin:0 8% 0 18%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8%; }
.personal-panel .more-items { grid-column:2; }
.personal-panel .chapter-knot,.contact-panel .chapter-knot { left:10%; }
.contact-panel .panel-content { width:74%; margin:0 8% 0 18%; }
.contact-inner { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:8%; }
.contact-aside { grid-column:2; }
@media(max-width:700px) {
 .chapter-panel { padding:65px 0; }
 .chapter-panel:nth-of-type(even) .panel-content { grid-template-columns:minmax(0,62fr) minmax(0,38fr); }
 .chapter-panel:nth-of-type(odd) .panel-content { grid-template-columns:minmax(0,38fr) minmax(0,62fr); }
 .chapter-panel:nth-of-type(even) .time-label { padding:42px 0 0 35%; }
 .chapter-panel:nth-of-type(odd) .time-label { padding:42px 35% 0 0; }
 .chapter-panel .time-label time,.chapter-panel .time-display { font-size:15px; overflow-wrap:anywhere; }
 .chapter-panel .time-label>span:last-child:not(.time-display) { font-size:9px; }
 .personal-panel .panel-content,.contact-panel .panel-content { width:76%; margin:0 7% 0 17%; display:block; }
 .personal-panel .chapter-knot,.contact-panel .chapter-knot { left:8%; }
 .personal-panel .more-items { margin-top:30px; }
 .personal-panel h2,.contact-panel h2 { font-size:24px; }
 .personal-panel p:not(.eyebrow),.personal-panel details,.personal-panel details p { font-size:12px; }
 .contact-inner { display:block; }
 .contact-aside { margin-top:32px; }
 .contact-email { font-size:14px; }
}
@media(max-width:700px) {
 .chapter-panel:nth-of-type(even) .time-label { padding-left:50%; }
 .chapter-panel:nth-of-type(odd) .time-label { padding-right:50%; }
 .chapter-panel .time-label>span:last-child:not(.time-display) { display:none; }
}

/* Dates sit inside the open half-arcs, leaving the yarn itself clear. */
.chapter-panel:nth-of-type(even) .time-label { align-self:center; padding:0 40% 0 8%; }
.chapter-panel:nth-of-type(odd) .time-label { align-self:center; padding:0 8% 0 40%; }
.chapter-panel .time-label { margin:0; }
.chapter-panel .time-display,.chapter-panel .time-label time { font-size:clamp(20px,2.1vw,28px); }
@media(max-width:700px) {
 .chapter-panel { padding:80px 0; }
 .chapter-panel:nth-of-type(even) .time-label { padding:0 40% 0 14%; }
 .chapter-panel:nth-of-type(odd) .time-label { padding:0 14% 0 40%; }
 .chapter-panel .time-display,.chapter-panel .time-label time { font-size:14px; }
}
.story-ball { overflow:clip; }