/* Original illustrations and typography inspired by cinematic opening titles. */
.magpie-profile{--ink:#131311;--paper:#eee9dc;--red:#c91e36;--quiet:#bab7ae;--stage-left:var(--ink);--stage-text:var(--paper);background:var(--ink);color:var(--paper);font-family:'Microsoft YaHei','PingFang SC',system-ui,sans-serif;transition:background .3s,color .3s}
html.light .magpie-profile{--stage-left:var(--paper);--stage-text:var(--ink)}
.magpie-profile .site-header,html.light .magpie-profile .site-header{position:relative;background:var(--stage-left);color:var(--stage-text);backdrop-filter:none;border-bottom:1px solid color-mix(in srgb,var(--stage-text) 22%,transparent)}
.magpie-profile .nav-shell{height:78px;width:calc(100% - 112px);max-width:1440px;gap:24px}
.magpie-profile .brand{font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:normal;letter-spacing:-.05em;background:none;color:inherit}.brand-dot{color:var(--red)}
.nav-edition{font-size:9px;letter-spacing:.25em;margin-right:auto;margin-left:36px}
.magpie-profile .nav-links{gap:15px}.magpie-profile .nav-links>a{color:inherit;padding:8px 3px;font-size:12px}.magpie-profile .nav-links>a:hover{color:var(--red)}.magpie-profile .theme-btn{color:inherit;border-radius:0}
.magpie-profile :is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:6px}.magpie-profile .skip-link{background:var(--red);border-radius:0}
.title-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;min-height:650px;background:var(--stage-left);color:var(--stage-text);overflow:hidden}
.title-stage:after{content:'';position:absolute;z-index:3;inset:0;opacity:.06;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.profile-intro{position:relative;z-index:2;padding:55px 9.1% 48px 12.5%;align-self:center}
.profile-eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.24em}.tiny-rule{display:block;width:28px;height:2px;background:var(--red)}.eyebrow-number{font-size:9px;letter-spacing:.08em;opacity:.5;margin-left:auto}
.profile-intro h1{font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:clamp(76px,8.7vw,138px);line-height:1.16;letter-spacing:-.065em;white-space:nowrap;margin:27px 0 21px}.name-letter{display:inline-block}.title-period{color:var(--red);margin-left:3px}
.profile-lead{font-family:'Noto Serif SC','Songti SC','SimSun',serif;font-size:clamp(23px,2.25vw,34px);line-height:1.7;letter-spacing:.08em}
.profile-copy{max-width:400px;margin-top:22px;font-size:12px;line-height:2.2;color:color-mix(in srgb,var(--stage-text) 72%,transparent);text-wrap:pretty}
.profile-signature{display:flex;align-items:center;gap:13px;margin-top:26px}.profile-signature img{width:42px;height:42px;object-fit:cover;object-position:center 35%;border-radius:50%;border:1px solid color-mix(in srgb,var(--stage-text) 35%,transparent)}.profile-signature span{display:block;font-size:11px;letter-spacing:.05em}.profile-signature small{display:block;font-size:7px;letter-spacing:.15em;opacity:.48;margin-top:5px}
.profile-entry{display:flex;align-items:center;justify-content:space-between;width:196px;padding:12px 0 10px;margin-top:28px;border-bottom:1px solid var(--red);font-size:12px;letter-spacing:.04em;position:relative;overflow:hidden;isolation:isolate}.profile-entry svg{width:28px;height:16px;stroke:currentColor;stroke-width:1.3;fill:none;transition:transform .2s}.profile-entry:hover svg{transform:translateX(4px)}
.title-art{position:relative;min-width:0;background:var(--red);overflow:hidden;align-self:stretch}.art-index{position:absolute;z-index:2;left:36px;right:36px;top:32px;display:flex;justify-content:space-between;gap:16px;color:var(--paper);font-size:8px;letter-spacing:.19em}.story-art{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.ink{fill:var(--ink)}.paper{fill:var(--paper)}.scarlet{fill:var(--red)}.step-lines{fill:none;stroke:var(--ink)}
.art-scene{transform-origin:50% 55%;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1),visibility .45s;transform:translateY(24px) scale(1.035)}
[data-chapter=study] .art-study,[data-chapter=life] .art-life,[data-chapter=create] .art-create{opacity:1;visibility:visible;transform:none}
.art-caption{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:16px 36px;background:var(--ink);display:flex;align-items:center;gap:16px;color:var(--paper);font-size:10px;letter-spacing:.12em}.art-caption-rule{flex:1;height:1px;background:var(--paper);opacity:.4}#artNumber{font-family:Georgia,serif;font-size:30px;letter-spacing:-.04em}
.flying-page,.bird-one,.bird-two{transform-box:fill-box;transform-origin:center;animation:paper-drift 7s ease-in-out infinite alternate}.page-two{animation-delay:-3s;animation-duration:9s}.page-three{animation-delay:-5s}.bird-one{animation:bird-drift 8s ease-in-out infinite alternate}.bird-two{animation:bird-drift 6s ease-in-out -3s infinite alternate}
.book,.controller,.creation-window{transform-box:fill-box;transform-origin:center;animation:object-drift 10s ease-in-out infinite alternate}.creation-window{animation-delay:-5s}.js .name-letter{animation:letter-arrive .8s cubic-bezier(.16,1,.3,1) both}.js .name-letter:nth-child(2){animation-delay:.1s}.js .name-letter:nth-child(3){animation-delay:.16s}.js .name-letter:nth-child(4){animation-delay:.04s}.js .name-letter:nth-child(5){animation-delay:.22s}
@keyframes letter-arrive{0%{opacity:0;transform:translateY(-24px) rotate(-8deg)}55%{opacity:1;transform:translateY(3px) rotate(2deg)}100%{transform:none}}
@keyframes paper-drift{to{translate:10px -16px;rotate:9deg}}@keyframes bird-drift{to{translate:-16px -12px;rotate:-6deg}}@keyframes object-drift{to{translate:0 -7px;rotate:1deg}}
.story-chapters{position:relative;background:var(--paper);color:var(--ink);padding:25px 6.25% 30px}.chapter-instruction{font-size:9px;letter-spacing:.15em;color:#625c55;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.chapter-instruction>span{font-size:18px;line-height:1}
.chapter-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.chapter-button{position:relative;display:flex;align-items:flex-start;text-align:left;gap:18px;border:0;border-top:1px solid #9e988b;background:none;color:inherit;padding:18px 0 4px;cursor:pointer;min-width:0}.chapter-button:before{content:'';position:absolute;inset:-1px 0 auto;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}.chapter-button[aria-pressed=true]:before,.chapter-button:hover:before{transform:scaleX(1)}
.chapter-number{font-family:Georgia,serif;font-size:33px;line-height:1;color:#827a6e;letter-spacing:-.06em}.chapter-button[aria-pressed=true] .chapter-number{color:var(--red)}.chapter-text{flex:1;min-width:0}.chapter-label{display:flex;align-items:center;gap:15px;font-family:'SimSun',serif;font-size:20px;line-height:1.4}.chapter-label>span{font:8px/1.4 system-ui,sans-serif;letter-spacing:.15em;color:#696156}.chapter-description{display:block;font-size:10px;line-height:1.8;color:#696156;margin-top:9px}.chapter-arrow{font-size:20px;color:#827a6e;transition:transform .2s}.chapter-button:hover .chapter-arrow{transform:translate(2px,-2px);color:var(--red)}
.magpie-profile .profile-footer{width:100%;max-width:none;margin:0;border:0;padding:24px 6.25%;color:var(--quiet);background:var(--ink);font-size:9px;text-shadow:none;display:flex;justify-content:space-between;gap:20px}.profile-footer a:hover{color:var(--paper)}.profile-footer a span{padding-left:12px}
.profile-controls{position:absolute;top:87px;right:34px;z-index:10;display:none;gap:8px;align-items:center;font-size:10px;color:var(--paper)}.js .profile-controls{display:flex}.profile-controls button{padding:5px;background:none;border:0;cursor:pointer;color:inherit;font-size:9px}.profile-controls>span{opacity:.45}.profile-controls button:hover{text-decoration:underline;text-underline-offset:4px}
.motion-paused .story-art *{animation-play-state:paused!important}.motion-paused .name-letter{animation:none!important;opacity:1;transform:none}
.magpie-profile .page-transition{background:var(--red);backdrop-filter:none}.page-leaving .page-transition{backdrop-filter:none}
.magpie-profile.scene-only .site-header,.magpie-profile.scene-only .profile-intro,.magpie-profile.scene-only .story-chapters,.magpie-profile.scene-only .profile-footer{display:none}.magpie-profile.scene-only .title-stage{display:block;min-height:100svh}.magpie-profile.scene-only .title-art{width:100%;height:100svh;background:linear-gradient(90deg,var(--ink) 50%,var(--red) 50%)}.scene-only .story-art{width:min(100%,1000px);left:50%;translate:-50% 0}.scene-only .profile-controls{position:fixed;top:18px;right:22px}.scene-only .art-index{top:50px}.scene-only .art-caption{bottom:30px}
@media(min-width:1600px){.title-stage{min-height:740px}.profile-intro{padding-block:70px}.profile-copy{font-size:14px}.story-chapters{padding-block:30px 40px}.chapter-description{font-size:12px}}
@media(max-width:1100px){.magpie-profile .nav-shell{width:calc(100% - 64px)}.nav-edition{margin-left:14px}.profile-intro{padding:48px 9% 42px}.title-stage{min-height:620px}.chapter-buttons{gap:24px}.chapter-button{gap:12px}.chapter-label{gap:10px}.chapter-label>span{font-size:7px}.chapter-number{font-size:28px}.profile-copy{font-size:11px}.art-index,.art-caption{left:24px;right:24px}.art-index span:last-child{display:none}}
@media(max-width:800px){.magpie-profile .nav-shell{height:68px;width:calc(100% - 40px)}.nav-edition{display:none}.magpie-profile .menu-toggle{display:block;color:inherit}.magpie-profile .nav-links{background:var(--ink);color:var(--paper);backdrop-filter:none;border-color:#eee9dc33}.magpie-profile .nav-links>a{color:var(--paper);font-size:14px;padding:10px 12px}.title-stage{min-height:570px;grid-template-columns:53% 47%}.profile-intro{padding:40px 9%}.profile-intro h1{font-size:76px;margin-top:24px}.profile-lead{font-size:23px}.profile-copy{font-size:11px;margin-top:18px}.profile-signature{margin-top:22px}.profile-signature small{font-size:6px}.profile-entry{width:100%;max-width:196px}.profile-controls{top:75px;right:15px}.art-index{top:40px}.art-caption{font-size:8px;gap:9px;left:16px;right:16px}.chapter-buttons{gap:20px}.chapter-label{display:block;font-size:19px}.chapter-label>span{display:block;margin-top:4px}.chapter-description{font-size:10px}.chapter-arrow{display:none}}
@media(max-width:600px){.title-stage{display:flex;flex-direction:column}.profile-intro{padding:44px 26px 36px}.profile-intro h1{font-size:94px;margin:17px 0 16px}.profile-eyebrow{font-size:9px;max-width:370px}.profile-lead{font-size:26px;line-height:1.65}.profile-copy{font-size:12px;max-width:390px;margin-top:16px}.profile-signature{margin-top:20px}.profile-signature small{font-size:7px}.profile-entry{margin-top:22px;width:196px}.title-art{height:430px;flex:none}.story-art{width:100%;height:100%}.art-index{top:22px;left:24px;right:24px;font-size:7px}.art-index span:last-child{display:block}.art-caption{left:24px;right:24px;bottom:17px;font-size:9px}.profile-controls{top:70px;right:17px;color:var(--stage-text);font-size:8px}.profile-controls button{font-size:8px}.story-chapters{padding:23px 26px 26px}.chapter-buttons{grid-template-columns:1fr;gap:8px}.chapter-button{padding:18px 0 14px;gap:20px}.chapter-number{font-size:30px;width:32px}.chapter-label{display:flex;gap:15px;font-size:20px}.chapter-label>span{margin:0;font-size:8px}.chapter-description{font-size:11px;margin-top:5px}.chapter-arrow{display:block}.magpie-profile .profile-footer{padding:23px 26px;flex-direction:column;gap:9px;font-size:9px}.scene-only .title-art{height:100svh}.scene-only .story-art{width:100%;left:0;translate:0}.scene-only .profile-controls{color:var(--paper)}.magpie-profile.scene-only .title-art{background:var(--red)}}
@media(max-width:360px){.profile-intro{padding-inline:22px}.profile-intro h1{font-size:82px}.profile-lead{font-size:23px}.profile-copy{font-size:11px}.title-art{height:380px}.chapter-description{font-size:10px}.story-chapters{padding-inline:22px}.chapter-label>span{font-size:7px}}
.title-art .art-caption{left:0;right:0;bottom:0}.scene-only .art-caption{padding-inline:36px}
@media(max-width:1100px){.art-caption{padding-inline:24px}}
@media(max-width:800px){.art-caption{padding-inline:16px}}
@media(max-width:600px){.art-caption{padding:11px 24px}}
@media(prefers-reduced-motion:reduce){.art-scene{transition:none}.magpie-profile .page-transition{display:none}}