:root { --paper:#f7f3e9; --ink:#302c2b; --dim:#746a62; --red:#b83942; --blue:#37617d; --rule:#dcd3c5; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; background:#242526; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:var(--ink); }
h1,h2,.handnote,.chapter-copy>p:last-child { font-family:"Noto Serif SC","Source Han Serif SC","SimSun",serif; }
a { color:inherit; }
#viewport { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage { position:relative; width:1280px; height:720px; flex:none; transform-origin:center; overflow:hidden; }
.slide { position:absolute; inset:0; overflow:hidden; background:var(--paper); visibility:hidden; opacity:0; transition:opacity .28s ease; }
.slide.active { visibility:visible; opacity:1; }
h2 { font-size:46px; line-height:1.3; font-weight:800; letter-spacing:.015em; }
h3 { font-size:26px; font-weight:700; }
.red { color:var(--red); }.blue { color:var(--blue); }
.eyebrow { font-size:14px; letter-spacing:.17em; font-weight:600; color:var(--dim); }
.page-content { position:absolute; left:76px; top:65px; width:780px; }
.page-content h2 { margin-top:24px; }
.lede { color:var(--dim); font-size:21px; margin-top:16px; }
.handnote { color:var(--red); font-size:25px; line-height:1.6; }
.active .enter { animation:appear .48s ease both; }
.active .delay-1 { animation-delay:.10s; }.active .delay-2 { animation-delay:.19s; }.active .delay-3 { animation-delay:.28s; }
@keyframes appear { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.cg { position:absolute; width:100%; height:100%; object-fit:cover; }
/* Cover typography sits in the sky, without a full-image tint. */
.cover-cg { width:1390px; height:782px; max-width:none; left:0; top:-18px; object-position:center; }
.cover-copy { position:absolute; left:70px; top:96px; color:#fff9ed; width:435px; text-shadow:0 2px 5px #20253b45; }
.cover-copy .eyebrow { color:#f7ecdb; font-size:20px; letter-spacing:.16em; }
.cover-copy h1 { font-size:104px; line-height:1.25; margin-top:15px; letter-spacing:.10em; }
.english-title { font-size:16px; letter-spacing:.27em; margin-top:8px; }
.cover-line { margin-top:32px; font-size:26px; line-height:1.8; }
.cover-sign { position:absolute; left:70px; bottom:77px; background:#fff8e8; padding:17px 24px; border-left:4px solid var(--red); }
.cover-sign strong { display:block; font-size:23px; color:var(--red); }.cover-sign span { display:block; font-size:16px; margin-top:9px; }
.cover-year { position:absolute; right:38px; top:32px; color:#fff4dc; font-size:15px; letter-spacing:.12em; }
/* Fixed anchors keep the character stable as expressions crossfade. */
.actor { position:absolute; width:350px; height:665px; pointer-events:none; }
.actor img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; opacity:0; transition:opacity .18s linear; }
.actor img:first-child { opacity:1; }
.actor-line { position:absolute; bottom:59px; right:62px; font-size:18px; color:var(--blue); }
.menu-actor,.duties-actor { right:26px; bottom:82px; height:580px; width:338px; }
.menu-list { list-style:none; margin-top:42px; width:727px; }
.menu-list li { display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--rule); padding:25px 0; }
.menu-list li:first-child { padding-top:7px; }
.menu-list li>span { font-family:Georgia,serif; font-size:46px; color:var(--red); width:66px; }
.menu-list li:nth-child(2)>span { color:var(--blue); }.menu-list li:nth-child(3)>span { color:#9a773f; }
.menu-list p { font-size:19px; color:var(--dim); margin-top:10px; }
.duties .page-content { width:740px; }.duty-list { margin-top:32px; width:700px; }
.duty-list>div { display:flex; gap:25px; padding:19px 0; border-bottom:1px solid var(--rule); }
.duty-no { font-family:Georgia,serif; font-size:22px; color:var(--red); padding-top:5px; }
.duty-list p { font-size:19px; color:var(--dim); margin-top:8px; }.duties .handnote { margin-top:29px; }
/* Chapter cards use composition splits instead of shadow gradients. */
.chapter-art { position:absolute; right:0; top:0; width:710px; height:720px; object-fit:cover; object-position:77% center; }
.chapter-copy { position:absolute; left:72px; top:206px; width:478px; }
.chapter-copy h2 { font-size:62px; line-height:1.4; margin-top:25px; }
.chapter-copy>p:last-child { font-size:23px; line-height:1.7; margin-top:26px; max-width:430px; }
.future-art { position:absolute; right:0; top:0; width:700px; height:720px; object-fit:cover; object-position:53% center; }
.chapter-future .chapter-copy { top:205px; }.chapter-future h2 { font-size:54px; }
/* The screenshot, not technical badges, is the main content. */
.project-heading { position:absolute; left:65px; top:49px; right:55px; }
.project-heading h2 { margin-top:13px; font-size:43px; }.project-heading>p:last-child { margin-top:13px; font-size:21px; color:var(--dim); }
.browser-shot { position:absolute; border:1px solid #d4cabc; background:white; border-radius:5px; overflow:hidden; box-shadow:5px 7px 0 #e8e0d2; }
.browser-bar { height:32px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#eee9df; border-bottom:1px solid #ded8cd; }
.browser-bar i { width:6px; height:6px; background:#bcae9d; border-radius:50%; }.browser-bar span { margin-left:10px; color:#70665e; font-size:12px; letter-spacing:.04em; }
.website-shot { left:65px; top:218px; width:734px; height:440px; }.website-shot>img { display:block; width:100%; height:407px; object-fit:cover; object-position:top; }
.project-aside { position:absolute; left:846px; top:232px; right:58px; }
.aside-title { font-size:24px; font-weight:700; line-height:1.5; margin-bottom:28px; }
.feature { margin-bottom:26px; }.feature b { font-size:23px; font-weight:700; }.feature p { font-size:19px; line-height:1.65; color:var(--dim); margin-top:6px; }
.small-note { color:var(--dim); font-size:15px; line-height:1.7; }.website .small-note { margin-top:28px; }
.karuta-shot { left:65px; top:215px; width:734px; height:438px; }.karuta-crop { width:100%; height:405px; overflow:hidden; position:relative; background:#f5f6f8; }.karuta-crop img { display:block; width:100%; height:100%; object-fit:contain; }
.karuta .project-aside { top:225px; }.karuta .feature { margin-bottom:22px; }.karuta .handnote { margin-top:18px; }
.panel-shot { position:absolute; left:65px; top:208px; width:672px; height:456px; overflow:hidden; border:1px solid #d4cabc; border-radius:5px; background:#fff; box-shadow:5px 7px 0 #e8e0d2; }
.panel-shot img { width:100%; height:100%; object-fit:contain; }.bangumi .project-aside { left:785px; top:236px; right:53px; }
.key-row { display:flex; align-items:center; gap:9px; font-size:19px; margin-bottom:21px; }
kbd { min-width:37px; padding:6px 9px; text-align:center; background:#fffdf7; border:1px solid #d8cdbf; border-bottom-width:3px; border-radius:4px; color:var(--red); font:20px Georgia,serif; }
.bangumi .feature { margin-top:35px; }.project-link { display:block; width:fit-content; font-size:19px; color:var(--blue); text-decoration:none; margin-top:28px; }.project-link:hover { text-decoration:underline; }.project-link span { display:block; font-size:14px; margin-top:8px; }
.touhou-shot { position:absolute; left:65px; top:222px; width:306px; height:420px; }.touhou-shot img { display:block; width:100%; height:100%; object-fit:contain; object-position:top; }
.touhou-copy { position:absolute; left:421px; top:225px; width:452px; }.touhou-copy .aside-title { margin-bottom:18px; }.body-copy { font-size:21px; color:var(--dim); line-height:1.7; }
.benchmark { display:flex; align-items:baseline; gap:20px; margin-top:21px; }.benchmark strong { font-family:Georgia,serif; color:var(--red); font-size:49px; white-space:nowrap; }.benchmark strong span { font-family:"Microsoft YaHei",sans-serif; font-size:22px; }.benchmark p { font-size:18px; }
.benchmark-note { color:var(--dim); font-size:15px; line-height:1.65; margin-top:7px; }.touhou-copy .small-note { margin-top:22px; font-size:14px; }.touhou-actor { right:-6px; bottom:25px; width:337px; height:490px; }
.ideas .page-content { top:96px; width:785px; }.ideas h2 { font-size:57px; line-height:1.5; }.idea-lines { margin-top:36px; color:var(--dim); font-size:23px; line-height:2.1; }.invitation { margin-top:30px; font-size:26px; font-weight:700; }.idea-tags { margin-top:24px; font-size:17px; color:var(--dim); letter-spacing:.06em; }.ideas-actor { right:24px; bottom:34px; height:658px; width:340px; }
/* The piano CG has its own region, free of tint and text. */
.galgame-art { position:absolute; left:650px; top:0; width:630px; height:720px; object-fit:cover; object-position:60% center; }.galgame-copy { position:absolute; left:63px; top:51px; width:555px; }
.preview-label { display:inline-block; color:var(--red); border:1px solid var(--red); padding:6px 10px; margin-right:15px; letter-spacing:.10em; }
.galgame h2 { font-size:44px; line-height:1.45; margin-top:24px; }.galgame-goal { font-size:26px; line-height:1.65; margin-top:28px; }.galgame-goal strong { font-weight:700; }.galgame-invite { font-size:21px; line-height:1.8; color:var(--dim); margin-top:24px; }
.jury { margin-top:29px; padding-top:19px; border-top:1px solid var(--rule); }.jury>p { font-size:15px; color:var(--dim); margin-bottom:15px; letter-spacing:.12em; }.jury>div { display:flex; gap:30px; }.jury b { font-size:22px; }.jury small { display:block; margin-top:7px; font-size:13px; color:var(--dim); white-space:nowrap; }.teaser-note { margin-top:25px; font-size:16px; color:var(--red); }
.ending-art { position:absolute; right:0; top:0; width:815px; height:720px; object-fit:cover; object-position:51% center; }.ending-caption { position:absolute; left:49px; top:188px; width:379px; }.ending-caption .eyebrow { font-size:13px; letter-spacing:.10em; }.ending-caption h2 { font-size:57px; line-height:1.65; margin-top:30px; max-width:360px; }.ending-caption>p:last-child { margin-top:26px; font-size:23px; line-height:1.8; }.ending-caption>p:last-child span { display:block; margin-top:16px; font-size:17px; color:var(--dim); }
.ending .ending-caption { top:111px; }
.ending .ending-caption h2 { margin-top:27px; line-height:1.5; }
.ending .ending-caption>p:last-child { margin-top:23px; }
.ending-qrs { position:absolute; left:49px; top:468px; display:flex; gap:24px; }
.qr-card { display:flex; width:160px; flex-direction:column; align-items:center; gap:10px; color:#624735; text-decoration:none; }
.qr-card img { display:block; width:160px; height:160px; }
.qr-card span { font-size:16px; line-height:1.5; letter-spacing:.10em; }
.qr-card:focus-visible { outline:2px solid #624735; outline-offset:4px; }
#hud { position:absolute; inset:auto 0 0; height:32px; z-index:10; pointer-events:none; color:#716558; }#hint { position:absolute; left:24px; bottom:13px; font-size:11px; }#pageno { position:absolute; right:24px; bottom:10px; padding:3px 7px; background:#f7f3e9ed; border-radius:2px; font:12px Consolas,monospace; letter-spacing:.12em; }#progress { position:absolute; left:0; right:0; bottom:0; height:3px; }#hudbar { height:100%; background:var(--red); transition:width .25s ease; }
#stage[data-page="1"] #hint { color:#392e2a; background:#fff8e8e6; padding:3px 6px; bottom:10px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* September revision: user-selected artwork and two-step website demo. */
.cover-sign { max-width:450px; }
.cover-sign span { font-size:14px; line-height:1.8; }
.duties .page-content { width:690px; }
.duty-list { width:650px; }
.duties-art { position:absolute; right:38px; bottom:65px; width:430px; height:570px; object-fit:contain; }
.chapter-art,.future-art,.galgame-art { object-fit:contain; object-position:center; }
.website-toggle { display:block; width:100%; height:407px; border:0; padding:0; background:#f0e8db; cursor:pointer; }
.website-toggle img { display:block; width:100%; height:100%; object-fit:contain; }
.website-toggle img[hidden] { display:none; }
.website-toggle:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
.bangumi-story { font-size:30px; font-weight:700; line-height:1.9; }
.bangumi-story .red { font-size:43px; }
.touhou .project-heading { top:43px; }
.touhou-shot { left:55px; top:182px; width:310px; height:454px; }
.touhou-extra { position:absolute; left:400px; top:182px; width:505px; height:232px; }
.touhou-extra img { width:100%; height:100%; object-fit:contain; }
.touhou-copy { left:400px; top:440px; width:510px; font-size:21px; line-height:1.8; }
.touhou-copy footer { margin-top:16px; font-size:16px; color:var(--dim); text-align:right; }
.touhou-actor { right:-14px; width:325px; height:490px; bottom:35px; }
.ideas .page-content { top:205px; }