:root{--ink:#51377e;--muted:#71618c;--paper:#ded8f5;--brush:'STXingkai','Xingkai SC','Kaiti SC','STKaiti','KaiTi','Chalkboard SE',cursive;--hand:'Bradley Hand','Chalkboard SE','Kaiti SC',cursive}
body{font-family:'Avenir Next','PingFang SC',sans-serif;background:#d8caed}button{font-family:var(--hand)}
header{position:fixed;inset:0 0 auto;height:56px;margin:0;border:0;padding:0 3%;pointer-events:none;z-index:8}header nav{pointer-events:auto;gap:18px}header nav button{font-size:14px}#language{border:0;background:none;padding:8px 0;font-family:var(--hand)}
body>main{height:100dvh}.world-section{height:100dvh;--stage-width:100vw;padding:0;position:relative;display:block}.map-wrap{position:absolute!important;inset:0!important;width:100%;height:100%;aspect-ratio:auto;outline:0;box-shadow:none;background:#d8caed;container-type:size}.intro{position:absolute;z-index:6;bottom:15px;right:25px;width:auto;height:30px;gap:12px}.intro h1{display:none}.world-footer{position:absolute;z-index:5;bottom:12px;left:3%;width:auto;right:240px;height:26px;min-height:0;color:#fff;padding:0;font-size:11px}.world-footer #progress,.world-footer #reset{display:none}#pixel-back,#pixel-pause{background:none;border:0;color:#fff;padding:4px;font-family:var(--hand);font-size:13px}.pixel-controls{display:none}
.stage-copy,.portal-labels{position:absolute;left:50%;top:50%;width:min(100cqw,155.5556cqh);height:min(100cqh,64.2857cqw);transform:translate(-50%,-50%);pointer-events:none;container-type:inline-size}.home-title{position:absolute;left:5%;top:9%;width:69%}.stage-copy h1{font-family:var(--brush);font-size:clamp(40px,9.7cqw,160px);font-weight:900;letter-spacing:-.065em!important;line-height:1.08!important;color:#fff;margin:0;text-shadow:5px 7px 0 #7858ac46;transform:rotate(-3deg);transform-origin:left center}.signature{font:700 clamp(36px,6.4cqw,108px)/1.15 var(--hand);letter-spacing:-.065em;margin:20px 0 6px;color:#563686}.tags{font-family:var(--hand);font-size:clamp(13px,2cqw,30px);letter-spacing:.12em;margin:10px 0}.cave-title{display:none;position:absolute;left:6%;top:13%}.cave-title h1{font-size:clamp(70px,14cqw,200px)}.cave-title p{font-family:var(--hand);font-size:clamp(13px,1.6cqw,23px);color:#fff}.portal-labels button{position:absolute;right:7%;font:clamp(13px,2.4cqw,34px)/1 var(--hand);pointer-events:auto;padding:4px 0;transition:transform .2s}.portal-labels button:hover{transform:translateX(-5px);color:#7e55a7}[data-scene=failure] .home-title,[data-scene=failure] .portal-labels{display:none}[data-scene=failure] .cave-title{display:block}
#pixel-cloud{border:0;border-radius:32px;clip-path:none;background:#fffaff;box-shadow:0 8px 0 #6b4d8b35;font-family:var(--hand)}#pixel-cloud:after{content:'';position:absolute;bottom:-13px;left:45%;border:14px solid transparent;border-top-color:#fffaff;border-bottom:0}#pixel-cloud button{border:0;border-radius:12px}#pixel-cloud p{font-family:inherit;font-size:20px}
dialog#reader{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;box-shadow:none;background:#ded9f7 url('assets/pixel-meadow.png') center bottom/cover fixed no-repeat;color:var(--ink);scroll-behavior:smooth}dialog::backdrop{background:#ded9f7}.reader-bar{border:0;background:#ded9f7e8;backdrop-filter:blur(10px);padding:14px 4%;height:64px;letter-spacing:0;gap:16px}#reader-kicker{display:flex;align-items:center;gap:24px;flex:1}#reader-kicker>button{font-size:14px;white-space:nowrap}#reader-kicker nav{margin:auto;gap:24px}#reader-kicker nav button{font-size:15px}#reader-kicker [aria-current=page]{text-decoration:underline;text-underline-offset:8px}#close{font-size:18px}.reader-bar nav button:hover{color:#8c5cbc}#reader-content{max-width:1400px;margin:auto;padding:16px 6% 90px;min-height:calc(100dvh - 64px)}.page-heading{position:relative;padding:32px 0 20px}#reader-content .page-heading h2{font:900 clamp(70px,10vw,160px)/1.05 var(--brush);letter-spacing:-.06em;color:#fff;text-shadow:5px 6px 0 #8360b945;transform:rotate(-3deg);margin:10px 0 25px}.page-subtitle{font:22px var(--hand);margin:0 0 14px}.ditto-stamp{position:absolute;top:-10px;left:48%;width:54px;height:54px;background:url('assets/pixel-ditto.png') left top/200% 200% no-repeat;image-rendering:pixelated}.hi-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:8%;align-items:start}.hi-name .signature{font-size:clamp(60px,8vw,110px);margin:0 0 22px}.hi-name>p:not(.signature){font:20px var(--hand)}.ditto-portrait{width:85%;aspect-ratio:1;background:url('assets/pixel-ditto.png') left top/200% 200% no-repeat;image-rendering:pixelated;opacity:.2;transform:rotate(-8deg);margin-top:-15px}.hi-notes section{margin:0 0 30px}#reader-content h3{font:700 30px var(--hand);margin:0 0 14px}#reader-content p{line-height:1.9}.hi-notes p,.experience-notes p{font-size:16px;max-width:580px}.contact{display:flex;justify-content:center;gap:30px;margin-top:45px;font-family:var(--hand)}.sprite-credit{text-align:center;font-size:11px;opacity:.6}.experience-notes{max-width:850px;margin:20px auto}.experience-notes details{padding:16px 0}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 26px;margin:15px 0 50px}.project-tile{min-width:0;padding:0 0 20px;border:0}.project-tile:nth-child(3n+2){transform:translateY(12px)}.project-tile h3{font-size:24px!important}.project-tile p{font-size:14px;line-height:1.85!important}.project-tile .meta{font-size:10px;letter-spacing:.04em;opacity:.7}.project-image,.project-illustration{display:block;width:100%;height:190px;object-fit:cover;border-radius:18px 28px 12px 22px;margin:0 0 20px}.project-illustration{position:relative;display:grid;place-items:center;background:#c1c5ee;overflow:hidden}.project-illustration span{font:100px Georgia;color:#fff9;z-index:1}.project-illustration:before,.project-illustration:after{content:'';position:absolute;inset:25%;border:2px solid #fff7;transform:rotate(-20deg)}.project-illustration:after{transform:rotate(35deg);inset:18%}.art-1{background:#b6c9eb}.art-2{background:#cbbce6}.art-3{background:#b3cbdc}.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.games-grid .project-image,.games-grid .project-illustration{height:250px}.page-section{margin:20px 0 55px}.course-section{margin:70px 0 30px}.course-section>h3{font-size:40px!important}.course-section details{padding:18px 0;border-bottom:1px solid #9b89bc40}summary{cursor:pointer;font-family:var(--hand);font-size:21px}summary span{float:right;font-size:14px;opacity:.5}.course-list span{border:0;background:#ffffff45;border-radius:9px;padding:8px 12px}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:35px 0 45px}.collection-item{text-align:center}.collection-item:nth-child(even){padding-top:28px}.collection-art{height:230px;display:grid;place-items:center;font:100px var(--hand);color:#fff;background:#b5b4dc;border-radius:8px 22px 14px 5px;transform:rotate(-5deg);box-shadow:8px 9px 0 #9180b72a;margin:0 15px 32px}.collection-item:nth-child(2) .collection-art{background:#bdd3ec;transform:rotate(5deg)}.collection-item:nth-child(3) .collection-art{border-radius:50%;background:#a49dce}.collection-item:nth-child(4) .collection-art{background:#c8b8db;transform:rotate(4deg)}.collection-item p{font-size:13px;opacity:.65}.collection-item h3{font-size:27px!important}.records{grid-template-columns:repeat(3,1fr)}.records .collection-art{height:155px;font-size:65px}.empty-note{text-align:center;opacity:.7;font-size:14px}.index-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:30px 0}.index-grid button{font:44px var(--hand);text-align:left;padding:30px;background:#ffffff25;border-radius:22px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px dashed #674896;outline-offset:5px}
@media(max-width:700px){header{height:42px}header nav{gap:12px}header nav button{font-size:12px}.world-footer{display:none}.intro{bottom:15px;right:20px}.pixel-controls{display:flex;bottom:65px;opacity:.8}.pixel-controls button{border:0;border-radius:10px;box-shadow:none}.reader-bar{padding:10px 3%;height:auto;min-height:60px}#reader-kicker{gap:8px;flex-wrap:wrap}#reader-kicker nav{order:3;width:100%;justify-content:space-between;gap:5px}#reader-kicker nav button{font-size:13px;padding:4px}#reader-kicker>button{font-size:12px}#reader-content{padding:15px 6% 60px}.hi-layout{grid-template-columns:1fr}.ditto-portrait{display:none}.hi-name{margin-bottom:24px}.project-grid,.games-grid{grid-template-columns:1fr}.project-tile:nth-child(3n+2){transform:none}.collection-grid{grid-template-columns:1fr 1fr}.collection-art{height:180px}.contact{flex-wrap:wrap;gap:15px}.page-subtitle{font-size:17px}.index-grid{gap:15px}.index-grid button{font-size:27px;padding:20px}.stage-copy h1{font-size:9.7cqw}.signature{font-size:6.4cqw}.tags{font-size:2cqw}}
.intro{top:auto;left:auto}.home-title{top:8%}dialog#reader{background-image:linear-gradient(#ded9f748,#ded9f7c4),url('assets/pixel-meadow.png')}.project-tile{background:#ece6ff20;border-radius:18px}.project-tile p:not(.meta),.project-tile h3{padding:0 8px}.page-heading .ditto-stamp{top:-6px}.hi-notes section{position:relative;padding-left:20px}.hi-notes section:before{content:'✧';position:absolute;left:-12px;top:0;color:#a3bce7;font-size:25px}
/* Transparent lettering PNGs preserve the design without iOS CSS masking. */
html[lang=zh-CN] .titles-ready .home-title{width:62%;left:3%;top:5%}
html[lang=zh-CN] .titles-ready .home-title h1{position:relative;height:31cqw;font-size:0;color:transparent;text-shadow:none;transform:none}
html[lang=zh-CN] .titles-ready .home-title h1:after,html[lang=zh-CN] .titles-ready .cave-title h1:after,html[lang=zh-CN] .titles-ready dialog:not([data-page=archive]) .page-heading h2:after{content:'';position:absolute;inset:0;background:transparent;background-image:var(--lettering-main-white);background-repeat:no-repeat;background-size:300% 320%;background-position:0% 17.05%;filter:drop-shadow(5px 7px 0 #7457a54a)}
html[lang=zh-CN] .titles-ready .home-title .signature{margin:0 0 6px 4%;font-size:6cqw}html[lang=zh-CN] .titles-ready .home-title .tags{margin-left:4%}
html[lang=zh-CN] .titles-ready dialog:not([data-page=archive]) .page-heading h2{position:relative;font-size:0;color:transparent;text-shadow:none;transform:none;width:min(540px,75vw);height:auto;aspect-ratio:512/260;margin:0 0 12px -3%}
html[lang=zh-CN] .titles-ready dialog:not([data-page=archive]) .page-heading h2:after{background-size:300% 393.85%;background-position:50% 80.5%}
html[lang=zh-CN] .titles-ready dialog[data-page=hi] .page-heading h2:after{background-position:50% 20%;background-size:300% 365.71%}
html[lang=zh-CN] .titles-ready dialog[data-page=make] .page-heading h2:after{background-position:100% 20%;background-size:300% 365.71%}
html[lang=zh-CN] .titles-ready dialog[data-page=play] .page-heading h2:after{background-position:0% 80.5%}
html[lang=zh-CN] .titles-ready .cave-title h1{position:relative;font-size:0;color:transparent;text-shadow:none;width:48cqw;height:24cqw;transform:none}
html[lang=zh-CN] .titles-ready .cave-title h1:after{background-size:300% 393.85%;background-position:100% 80.5%}
html[lang=zh-CN] .titles-ready dialog:not([data-page=archive]) #reader-content .page-heading h2{font-size:0!important;color:transparent!important;text-shadow:none!important;transform:none!important;width:min(480px,75vw);margin-top:-8px}
html[lang=zh-CN] .titles-ready .portal-labels button{width:10cqw;height:4.4cqw;font-size:0;color:transparent}
html[lang=zh-CN] .titles-ready .portal-labels button:after{content:'';position:absolute;inset:0;background:transparent;background-image:var(--lettering-main-ink);background-repeat:no-repeat;background-size:300% 365.71%;background-position:50% 20%}
html[lang=zh-CN] .titles-ready .portal-labels button:nth-child(2):after{background-position:100% 20%}
html[lang=zh-CN] .titles-ready .portal-labels button:nth-child(3):after{background-size:300% 393.85%;background-position:0% 80.5%}
html[lang=zh-CN] .titles-ready .portal-labels button:nth-child(4):after{background-size:300% 393.85%;background-position:50% 80.5%}
@media(prefers-reduced-motion:reduce){dialog#reader{scroll-behavior:auto}*{transition:none!important}}
/* The renamed portal now uses the same brush-lettering treatment as its siblings. */
html[lang=zh-CN] .titles-ready .portal-labels button[data-open=watch]:after,html[lang=zh-CN] .titles-ready dialog[data-page=watch] .page-heading h2:after{background-image:var(--lettering-love-white)}
/* Keep the longer self-study story readable within the fixed game viewport. */
#pixel-cloud{z-index:10;max-height:72dvh;display:flex;flex-direction:column}#pixel-cloud[hidden]{display:none}#pixel-cloud p{font-size:17px;line-height:1.85;text-align:left;max-height:42dvh;overflow:auto;overscroll-behavior:contain}#pixel-cloud button{align-self:center;flex-shrink:0}
html[lang=zh-CN] .titles-ready.custom-home-title .home-title h1{font-size:8cqw;color:white;height:auto;white-space:pre-line;text-shadow:5px 7px #7457a54a}html[lang=zh-CN] .titles-ready.custom-home-title .home-title h1:after,html[lang=zh-CN] .titles-ready.custom-cave-title .cave-title h1:after{display:none}html[lang=zh-CN] .titles-ready.custom-cave-title .cave-title h1{font-size:10cqw;color:white;height:auto;white-space:pre-line}.home-title h1,.cave-title h1{white-space:pre-line}

html[lang=zh-CN] .titles-ready .portal-labels button[data-open=watch]:after{background-image:var(--lettering-love-ink)}