:root{--paper:#ece8df;--ink:#171716;--muted:#77736d;--red:#7b2420;--line:#24211c2e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#242321;color:var(--ink);font-family:"Songti SC","Noto Serif SC","STSong",serif}button{font:inherit;color:inherit}.h5{position:relative;width:min(100vw,480px);height:100svh;min-height:640px;margin:auto;overflow:hidden;background:var(--paper);box-shadow:0 0 50px #0008}.page{position:absolute;inset:0;overflow:hidden;padding:max(27px,env(safe-area-inset-top)) 7.5% max(22px,env(safe-area-inset-bottom));background-color:var(--paper);background-image:radial-gradient(#24211c14 .7px,transparent .8px);background-size:5px 5px;opacity:0;visibility:hidden;transform:translateY(2.5%);transition:.8s cubic-bezier(.2,.75,.2,1)}.page.is-active{opacity:1;visibility:visible;transform:none}.page:after{content:"";position:absolute;inset:2.5% 4%;border:solid #302d2829;border-width:1px 0;pointer-events:none}.court-lines{position:absolute;inset:0;opacity:.11;background:linear-gradient(32deg,transparent 37%,#222 37.2%,transparent 37.5%),linear-gradient(90deg,transparent 78%,#222 78.2%,transparent 78.5%)}.sound{position:absolute;right:6%;top:max(28px,env(safe-area-inset-top));z-index:50;border:0;border-bottom:1px solid;background:transparent;font:10px Georgia;letter-spacing:.15em;padding:6px}.progress{position:absolute;left:0;right:0;top:0;height:2px;z-index:60}.progress i{display:block;height:100%;width:20%;background:var(--red);transition:.6s}.publisher,.edge-label{position:absolute;font:8px Georgia;letter-spacing:.19em;color:#555}.publisher{left:7.5%;top:9%}.archive-head{position:relative;display:flex;justify-content:space-between;font:9px/1.5 Georgia;letter-spacing:.2em;border-bottom:1px solid var(--line);padding-bottom:10px;padding-right:13%}.seal{position:absolute;right:10%;top:12%;width:39px;height:39px;border:2px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font:700 10px Georgia;transform:rotate(-9deg)}
.cover-copy{text-align:center;margin-top:15vh;position:relative;z-index:2}.cover h1{font-size:clamp(2.7rem,11.5vw,4.1rem);line-height:1.05;margin:0;white-space:nowrap}.english,.season{font:10px Georgia;letter-spacing:.23em}.rule{display:block;width:38px;border-top:1px solid;margin:20px auto}.lead{font-size:1rem;line-height:1.85;letter-spacing:.06em}.archive-photo{position:absolute;left:17%;right:7%;bottom:13%;height:29%;padding:8px;background:#d9d2c5;transform:rotate(2deg);box-shadow:0 10px 25px #2d271f22}.archive-photo img,.photo-slot img,.voice-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.9);opacity:.75}.folder{position:absolute;left:0;right:0;bottom:0;height:16%;background:#dfd9ce;clip-path:polygon(0 16%,38% 16%,43% 0,62% 0,66% 16%,100% 16%,100% 100%,0 100%);z-index:2}.folder span{position:absolute;left:8%;top:42%;font:8px/1.8 Georgia;letter-spacing:.18em}.open-archive{position:absolute;z-index:3;bottom:4.5%;left:50%;transform:translateX(-50%);border:0;background:transparent;letter-spacing:.2em;padding:14px;white-space:nowrap}.open-archive b,.nav.next{animation:nudge 1.8s infinite}@keyframes nudge{50%{transform:translateY(5px)}}.reveal{opacity:0;animation:appear 1s forwards}.r1{animation-delay:.25s}.r2{animation-delay:.8s}.r3{animation-delay:1.25s}.r4{animation-delay:1.8s}.r5{animation-delay:2.4s}.reveal-photo{opacity:0;filter:brightness(1.6);animation:develop 2.4s 1s forwards}@keyframes appear{to{opacity:1}}@keyframes develop{to{opacity:1;filter:none}}
.directory-head{position:relative;z-index:3}.directory-head h2,.remember h2{font-size:2.65rem;margin:15px 0 4px}.directory-head p,.remember header p{font:10px Georgia;letter-spacing:.22em}.records{position:relative;z-index:3;width:43%;margin-top:7vh}.record{height:6.25vh;min-height:36px;display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);text-align:left;transition:.4s}.record .num{font:clamp(1.6rem,7vw,2.2rem) Georgia}.record .name{font-size:.95rem;white-space:nowrap}.record.selected{height:7.6vh;color:var(--ink);border-left:4px solid var(--red);padding-left:8px}.record.selected .num{font-size:2.8rem}.record.selected .name{font-size:1.55rem;font-weight:700}.record.dim{opacity:.45}.file-card{position:absolute;z-index:5;width:54%;right:-52%;top:15%;bottom:8%;background:#e3ddd2;border:1px solid #817b72;box-shadow:-12px 12px 28px #211b1429;padding:10px;transition:right .65s cubic-bezier(.2,.8,.2,1)}.file-card.open{right:2.5%}.photo-slot{height:43%;padding:6px;border:1px solid #514d48}.file-content{padding:7%}.file-content>span,.kicker{font:11px Georgia;letter-spacing:.18em}.file-content h3{font-size:2.5rem;margin:8px 0;border-bottom:1px solid;padding-bottom:8px}.file-content p{font-size:.86rem;line-height:1.75}.file-content button{border:0;background:transparent;padding:10px 0;text-align:left}.file-content b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#171716;color:#fff;font-size:9px}.file-content .enter{display:block;border-top:1px solid;width:100%;margin-top:4px}.page-no{position:absolute;bottom:3%;font:9px Georgia;letter-spacing:.2em}.nav{position:absolute;z-index:20;border:0;background:transparent;padding:12px;font-size:1.2rem}.nav.prev{left:3%;top:47%}.nav.next{right:3%;bottom:3%}
.voice-page{padding:6.5%}.voice-page .sub{font:10px Georgia;letter-spacing:.2em;margin:5px 0}.voice-page h2{font-size:3.7rem;margin:9px 0}.voice-portrait{position:absolute;top:8%;right:5%;width:48%;height:36%;padding:8px;background:#d9d2c5;margin:0;transform:rotate(1deg);overflow:hidden}.voice-portrait img{animation:kenburns 12s ease-in-out infinite alternate}@keyframes kenburns{to{transform:scale(1.04)}}.voice-player{width:48%;margin-top:5vh}.voice-player button{border:0;background:transparent;font:11px Georgia;letter-spacing:.15em;padding:0}.voice-player button b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#161615;color:#fff;margin-right:7px}.wave{height:36px;margin:12px 0;background:repeating-linear-gradient(90deg,#777 0 2px,transparent 2px 7px);mask:linear-gradient(0deg,transparent 10%,#000 35% 65%,transparent 90%);opacity:.6}.wave.playing{background:repeating-linear-gradient(90deg,var(--red) 0 2px,transparent 2px 7px);animation:wave .7s infinite alternate}@keyframes wave{to{transform:scaleY(.45)}}.times{display:flex;align-items:center;gap:8px;font:10px Georgia;letter-spacing:.15em}.times i{flex:1;border-top:1px solid}.voice-page blockquote{margin:5vh 0 0;border-left:4px solid var(--red);padding:13px 16px;color:#777;font-size:.9rem}.story{margin-top:3vh}.story h3{font-size:1.55rem;margin:0 0 8px}.story p{font-size:.82rem;line-height:1.7;margin:0;width:92%}.photo-stack{position:relative;height:22vh;margin-top:3vh}.photo-stack div{position:absolute;width:40%;height:85%;border:8px solid #d4cec2;border-bottom-width:25px;background:linear-gradient(135deg,#4c4a47,#b5b0a8);box-shadow:0 6px 12px #0002;font:7px Georgia;display:flex;align-items:flex-end;padding:4px}.photo-stack div:nth-child(1){left:4%;transform:rotate(-5deg)}.photo-stack div:nth-child(2){left:30%;top:-5%;transform:rotate(1deg)}.photo-stack div:nth-child(3){right:2%;transform:rotate(5deg)}.profile-links{display:flex;justify-content:space-between;border-top:1px solid;padding-top:12px;font-size:.75rem}.profile-links a{color:inherit;text-decoration:none}.edge-label{right:1.5%;bottom:20%;writing-mode:vertical-rl}
.remember header{position:relative;z-index:3}.memory-wall{position:relative;height:56vh;margin-top:1vh}.ph,.memo{position:absolute;margin:0;border:7px solid #d6d0c4;box-shadow:0 7px 14px #0002;background:linear-gradient(145deg,#3f3e3b,#a6a199)}.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(30deg,transparent 48%,#18181866 49% 51%,transparent 52%)}.ph.a{width:45%;height:26%;left:2%;top:6%;transform:rotate(-4deg)}.ph.b{width:55%;height:24%;right:0;top:12%;transform:rotate(3deg)}.ph.c{width:43%;height:29%;left:4%;top:36%;transform:rotate(2deg)}.ph.d{width:37%;height:32%;left:34%;top:31%;transform:rotate(-2deg)}.ph.e{width:40%;height:25%;right:0;top:45%;transform:rotate(5deg)}.ph.f{width:47%;height:24%;left:25%;top:64%;transform:rotate(-1deg)}.memo{z-index:4;background:#e1dbd0;padding:9px 11px;font-size:.75rem;border-width:1px}.m1{right:5%;top:1%}.m2{left:0;top:31%}.m3{right:2%;top:68%}.memory-close{position:absolute;bottom:7%;left:27%;right:8%;text-align:center}.memory-close h3{font-size:2.2rem;line-height:1.1;margin:0 0 12px}.memory-close p{font-size:.8rem;line-height:1.7}.archive-credit{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);font:7px Georgia;letter-spacing:.17em;white-space:nowrap}
.closed-envelope{position:relative;width:60%;height:17vh;margin:7vh auto 0;background:#d3ccbf;border:1px solid #756f66;box-shadow:0 9px 17px #0002;padding:9% 6%;font:7px/1.8 Georgia;letter-spacing:.18em}.closed-envelope:before,.closed-envelope:after{content:"";position:absolute;width:11px;height:11px;border:2px solid #675e52;border-radius:50%;left:50%;transform:translateX(-50%)}.closed-envelope:before{top:30%}.closed-envelope:after{top:56%}.closed-envelope span{position:absolute;top:-17%;height:18%;width:30%;background:#88847d;border:5px solid #d7d1c6}.closed-envelope span:nth-child(1){left:5%;transform:rotate(-4deg)}.closed-envelope span:nth-child(2){left:35%;transform:rotate(2deg)}.closed-envelope span:nth-child(3){right:4%;transform:rotate(5deg)}.close-copy{text-align:center}.close-copy h2{font-size:2.7rem;margin:3vh 0 2px;white-space:nowrap}.close-copy h3{font-size:1.1rem;margin:0}.close-copy p{font-size:.9rem;line-height:1.65}.close-copy .pause{font-size:1.25rem;font-weight:700}.close-copy small{font:9px Georgia;letter-spacing:.2em}.closed-stamp{display:grid;place-items:center;width:76px;height:76px;border:4px double var(--red);border-radius:50%;margin:-10px 10% 0 auto;color:var(--red);font:700 13px Georgia;letter-spacing:.08em;transform:rotate(-10deg)}.close-copy h4{font-size:1.6rem;margin:0}.closing footer{position:absolute;left:8%;right:8%;bottom:3.5%;text-align:center}.closing footer img{display:block;width:24%;max-width:112px;max-height:28px;object-fit:contain;margin:0 auto 8px;filter:brightness(0)}.closing footer p{font:7px Georgia;letter-spacing:.16em}.closing footer div{display:flex;justify-content:center;gap:28px;margin-top:13px}.closing footer button{border:0;border-bottom:1px solid;background:transparent;padding:5px 2px;font-size:.75rem}.toast{position:absolute;left:50%;bottom:6%;z-index:100;transform:translate(-50%,16px);background:#171716;color:#eee;padding:10px 14px;font-size:.72rem;opacity:0;transition:.3s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:720px){.cover-copy{margin-top:10vh}.records{margin-top:3vh}.voice-player{margin-top:2vh}.voice-page blockquote{margin-top:2vh}.photo-stack{height:18vh}.closed-envelope{margin-top:3vh}.close-copy h2{margin-top:2vh}.close-copy p{margin:.6em 0}.closing footer{bottom:2%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html,body{font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif}
.visual-page{padding:0;background:#efede7}.visual-page:after{display:none}.full-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.visual-hotspot{position:absolute;z-index:8;border:0;background:transparent}.play-hotspot{left:6.6%;top:31.2%;width:36%;height:8%;font-size:0}.play-hotspot span{position:absolute;left:2%;top:15%;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#111;font:700 13px Arial}.article-hotspot{left:28%;bottom:7.7%;width:45%;height:5%}.back-hotspot{left:2%;bottom:1.2%;width:45%;height:5%}.next-hotspot{right:2%;bottom:1.2%;width:45%;height:5%}.visual-page .wave{position:absolute;z-index:7;left:8%;top:36.8%;width:34%;height:28px;margin:0;background:transparent}.visual-page .wave.playing{background:repeating-linear-gradient(90deg,#7b2420 0 2px,transparent 2px 7px);opacity:.72;animation:wave .55s infinite alternate}
.visual-closing{padding:0;background:#efede7}.visual-closing:after{display:none}.closing-reference{position:absolute;left:0;width:100%;background-image:url('assets/archive-closing-reference.png');background-repeat:no-repeat;background-size:100% auto}.closing-top{top:0;height:46%;background-position:center top;-webkit-mask-image:linear-gradient(#000 0 88%,transparent 100%);mask-image:linear-gradient(#000 0 88%,transparent 100%)}.open-ending{position:absolute;z-index:3;top:47%;left:11%;right:11%;text-align:center}.open-ending:before{content:"";display:block;width:42px;border-top:1px solid #181716;margin:0 auto 4vh}.open-ending p{font-size:1.08rem;line-height:1.9;letter-spacing:.09em;margin:0 0 4.4vh;font-weight:600}.open-ending span{font:10px "Roboto Slab",Georgia,serif;letter-spacing:.28em}.open-ending h3{font-size:2rem;letter-spacing:.18em;margin:4vh 0 0}.visual-closing footer{z-index:4;bottom:4.2%}.visual-closing footer img{width:20%;max-width:92px;max-height:24px;margin-bottom:9px}.visual-closing footer p{font:7px "Roboto Slab",Georgia,serif;letter-spacing:.17em}.visual-closing .nav.prev{top:auto;bottom:2.5%;left:2%}@media(max-width:380px){.open-ending p{font-size:.96rem}.open-ending h3{font-size:1.7rem}.play-hotspot span{width:42px;height:42px}}
.visual-closing .closing-top{height:38%}.visual-closing .open-ending{top:41%}
.profile-head{position:relative;z-index:3}.profile-head span,.profile-head small{display:block;font:10px Georgia;letter-spacing:.2em}.profile-head h2{font-size:3.2rem;margin:.4rem 0}.profile-portrait{position:absolute;right:5%;top:8%;width:47%;height:31%;padding:7px;background:#d7d0c3;box-shadow:0 10px 24px #0003;transform:rotate(1.5deg)}.profile-portrait img{width:100%;height:100%;object-fit:cover;filter:sepia(.24) grayscale(.25);animation:kenburns 14s ease-in-out infinite alternate}.real-player{width:45%;margin-top:4vh}.real-player button{border:0;background:transparent;font:10px Georgia;letter-spacing:.15em;padding:0;text-align:left}.real-player button:first-letter{display:inline-block}.real-player .wave{height:28px;margin:12px 0}.real-player time{font:10px Georgia}.his-story{margin-top:5vh;border-top:1px solid var(--line);padding-top:15px}.his-story h3{font-size:1.5rem;margin:0 0 8px}.his-story p{font-size:.82rem;line-height:1.8;margin:0;max-width:92%}.real-stack{height:22vh;position:relative;margin-top:2vh}.real-stack figure{position:absolute;margin:0;width:42%;height:90%;padding:6px 6px 20px;background:#d8d1c5;box-shadow:0 7px 13px #0003}.real-stack figure:nth-child(1){left:2%;transform:rotate(-4deg)}.real-stack figure:nth-child(2){left:30%;top:-5%;transform:rotate(1deg)}.real-stack figure:nth-child(3){right:2%;transform:rotate(5deg)}.real-stack img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) grayscale(.35)}.real-stack small{position:absolute;bottom:5px;left:7px;font:7px Georgia;letter-spacing:.13em}.real-stack>p{text-align:center;color:#777;font-size:.78rem;padding-top:4vh}.profile-nav{position:absolute;left:7%;right:7%;bottom:3%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.profile-nav button{border:0;background:transparent;font-size:.75rem}