@charset "UTF-8";
:root{color-scheme:dark;--paper:#ebe0c7;--ink:#352b23;--muted:#c4b8a3;--red:#8c3e30;font-family:"PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#302b25;color:#f4ebd9;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #edc77e;outline-offset:5px}button:disabled{cursor:default}button[hidden],a[hidden],[hidden]{display:none!important}.landscape{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(29,28,24,.98),rgba(38,32,25,.91) 50%,rgba(40,32,24,.84)),url('img/gate-2004.webp') center/cover}.grain{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.045;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");animation:grain 1.6s steps(2) infinite}@keyframes grain{50%{background-position:37px -29px}}.topbar{max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 4.5%;border-bottom:1px solid #ffffff19;font-size:13px;letter-spacing:2px}.edition{color:#e3d6be}.topbar nav{display:flex;gap:10px}.topbar button{border:0;background:none;color:var(--muted);padding:8px 12px;font-size:12px;letter-spacing:1px}.topbar button:hover{color:#fff}.topbar button[aria-pressed=true]{color:#f1c780}.device-note{display:flex;gap:12px;align-items:flex-start;max-width:1460px;margin:20px auto 0;padding:0 4.5%;color:var(--muted);font-size:12px;line-height:1.7}.device-icon{font-size:22px;line-height:1.3}.device-note p{margin:0}.device-note strong{color:#e2d3b7;font-weight:500;margin-right:14px}.mobile-only{display:none}.opening{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:1.02fr 1fr;gap:45px;padding:50px 6% 68px;align-items:center}.eyebrow{font-size:11px;letter-spacing:3px;color:#d0b991;display:flex;align-items:center;gap:10px}.eyebrow>span{width:23px;height:1px;background:#c1a87d}h1{font-family:"Songti SC","STSong","SimSun",serif;font-size:clamp(58px,6.8vw,100px);font-weight:500;letter-spacing:.08em;line-height:1.2;margin:21px 0 24px;text-shadow:0 2px 10px #0004;white-space:nowrap}.tagline{font-family:"Songti SC","SimSun",serif;font-size:clamp(22px,2.35vw,34px);line-height:1.6;color:#e2cba4;margin:0 0 24px}.premise{font-size:14px;line-height:2.1;color:#d8cdbc;margin:0 0 17px}.inventory{border-left:1px solid #9b8261;padding-left:17px;color:#b7aa96;font-size:13px;line-height:1.9;margin:0}.start-area{margin-top:32px;max-width:390px;scroll-margin-top:30px}.save-caption{font-size:12px;color:#c8bca7;margin:0 0 11px}.start-button{display:flex;align-items:center;justify-content:space-between;background:var(--paper);color:var(--ink);padding:18px 24px;box-shadow:0 5px 25px #0003;transition:transform .2s,background .2s;position:relative;border-left:5px solid #ae6447}.start-button:hover{transform:translateY(-3px);background:#f6ead0}.start-button b{display:block;font-family:"Songti SC","SimSun",serif;font-size:24px;letter-spacing:3px}.start-button small{display:block;margin-top:6px;font-size:11px;letter-spacing:2px;color:#79664d}.arrow{font-size:32px;font-weight:300}.secondary-menu{display:flex;flex-wrap:wrap;gap:20px;margin-top:19px;font-size:12px;color:#c8bba5}.secondary-menu button{color:inherit;border:0;background:none;padding:0;font-size:12px}.secondary-menu a:hover,.secondary-menu button:hover{text-decoration:underline;color:#fff}.paper-scene{position:relative;min-height:650px}.old-photo{position:absolute;top:5px;right:-12px;width:86%;padding:11px 11px 8px;background:#d5cbb5;transform:rotate(6deg);margin:0;box-shadow:0 9px 20px #0006}.old-photo img{width:100%;height:235px;object-fit:cover;display:block;filter:sepia(.15) saturate(.65)}figcaption{display:flex;justify-content:space-between;font-family:"Songti SC",serif;color:#645440;font-size:12px;padding:10px 2px 3px}.envelope{position:absolute;inset:210px 0 18px 5%;background:linear-gradient(145deg,transparent 49.7%,#89715366 50%,transparent 50.5%),#ad9270;transform:rotate(-6deg);box-shadow:0 9px 30px #0007;padding:20px;color:#654c32}.envelope span{border:1px solid #795344;display:inline-block;padding:8px;writing-mode:vertical-rl;letter-spacing:6px}.envelope b{position:absolute;bottom:25px;right:20px;font-size:12px;font-weight:400}.letter{position:relative;margin:170px 9% 0 -3%;padding:35px 34px 27px;background:radial-gradient(ellipse at 99% 88%,#b18a422b,transparent 40%),linear-gradient(92deg,#dccbaa33,transparent 47%,#88653913 50%,transparent 53%),#e8dcc3;color:var(--ink);box-shadow:0 7px 17px #0004;transform:rotate(-2deg);scroll-margin-top:35px}.tape{position:absolute;top:-16px;left:38%;height:32px;width:110px;background:#cdb887b0;transform:rotate(4deg);box-shadow:inset 0 0 10px #e8d9ba77;clip-path:polygon(0 4%,98% 0,100% 92%,1% 100%,3% 85%,0 60%,2% 38%)}.letter-label{font-size:11px;letter-spacing:3px;color:#8a7558;margin:0 0 20px}.letter h2{font-family:"Songti SC","STSong","SimSun",serif;font-weight:500;font-size:30px;line-height:1.55;letter-spacing:2px;margin:0 0 18px}.letter-body{font-family:"Songti SC","STSong","SimSun",serif;font-size:16px;line-height:2}.letter-body p{margin:0 0 14px}.letter-end{border-top:1px solid #a58a5b55;padding-top:16px;margin:20px 0 0;color:#76543c;font-family:"Kaiti SC","STKaiti",serif;font-size:17px;text-align:right}.fold{position:absolute;inset:50% 0 auto;height:2px;box-shadow:0 1px #ffffff55;background:#a68c6117;pointer-events:none}.negative-strip{position:absolute;bottom:-10px;right:-20px;width:46%;height:95px;display:flex;align-items:center;padding:12px;background:#362720;border-block:7px dashed #bc9b57a6;transform:rotate(10deg);box-shadow:0 4px 10px #0007;gap:8px}.negative-strip span{font-size:9px;color:#e4b980;writing-mode:vertical-rl;letter-spacing:3px}.negative-strip img{width:78%;height:66px;object-fit:cover;opacity:.7}footer{border-top:1px solid #ffffff1a;display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1460px;margin:auto;padding:22px 4.5%;font-size:11px;color:#b6a88f}footer p{margin:0}i{font-style:normal;opacity:.5;margin:0 8px}.status{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#ede1c9;color:#372c20;box-shadow:0 5px 15px #0004;font-size:12px;max-width:90vw;z-index:25}.status:empty{display:none}.storage-warning{color:#ffcc91;font-size:12px;line-height:1.8}.skip{position:fixed;top:-80px;background:#fff;color:#000;padding:15px;z-index:40}.skip:focus{top:5px}dialog{color-scheme:light;background:#eee2c9;color:#362e25;border:1px solid #b19c7e;padding:32px;max-width:460px;width:calc(100% - 32px);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#100d0ad9}dialog .eyebrow{color:#816649}dialog h2{font-family:"Songti SC",serif}dialog p{font-size:14px;line-height:1.8}.dialog-actions{display:grid;gap:10px;margin-top:22px}.dialog-actions button{padding:12px;border:1px solid #9c886b;background:transparent;color:#403326}.dialog-actions .danger{background:#753e31;color:white;border-color:#753e31}#restart-error{color:#8d3227}.no-script{background:#fff0cc;color:#442e1f;padding:20px}.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1500px){.opening{padding-top:60px;padding-bottom:80px}.paper-scene{min-height:670px}.letter{margin-top:180px}}
@media(max-width:1000px){.opening{gap:25px;padding:38px 5% 55px}.paper-scene{min-height:610px}.letter{padding:30px 25px;margin-left:0;margin-right:3%}.letter h2{font-size:26px}.old-photo{right:0;width:90%}.negative-strip{right:0}.device-note{padding:0 5%}h1{font-size:65px;letter-spacing:.04em}footer{flex-wrap:wrap}}
@media(max-width:720px){.topbar{padding:16px 5%;letter-spacing:0}.topbar nav{gap:0}.topbar button{padding:8px;font-size:11px}.edition{font-size:12px}.device-note{margin-top:18px}.device-note strong{display:block}.device-note p>span:not(.mobile-only){display:none}.device-note .mobile-only{display:block;margin-top:4px}.opening{display:flex;flex-direction:column;align-items:stretch;padding:36px 7% 45px;gap:38px}.invitation{max-width:520px;width:100%;margin:auto}h1{font-size:clamp(50px,12vw,76px);margin:20px 0}.tagline{font-size:25px}.premise{font-size:13px}.inventory{font-size:12px}.start-area{max-width:100%;margin-top:24px}.paper-scene{width:100%;max-width:470px;margin:0 auto;min-height:650px}.old-photo{width:88%;right:5%;top:10px;transform:rotate(4deg)}.old-photo img{height:205px}.letter{margin:170px 5% 0 0;padding:32px 25px}.letter h2{font-size:28px}.envelope{inset:200px 0 10px 5%;transform:rotate(-3deg)}.negative-strip{bottom:-10px;right:0;width:48%}footer{padding:20px 7%;display:grid;gap:12px}.wide-only{display:none}.grain{opacity:.03}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:721px) and (max-height:850px){.topbar{padding-top:12px;padding-bottom:12px}.device-note{margin-top:13px}.opening{padding-top:23px;padding-bottom:25px;align-items:start}.paper-scene{min-height:525px}h1{font-size:clamp(58px,6vw,82px);margin:15px 0}.tagline{font-size:26px;margin-bottom:15px}.premise{margin-bottom:12px}.inventory{font-size:12px}.start-area{margin-top:20px}.start-button{padding:14px 22px}.secondary-menu{margin-top:14px}.old-photo img{height:180px}.letter{margin-top:133px;padding:26px 30px 22px}.letter-label{margin-bottom:12px}.letter h2{font-size:26px;margin-bottom:12px}.letter-body{font-size:15px;line-height:1.8}.letter-end{margin-top:12px;padding-top:12px}.envelope{top:160px}.negative-strip{bottom:0;height:75px}.negative-strip img{height:48px}footer{padding-top:16px;padding-bottom:16px}}
.negative-strip{bottom:-25px;width:37%;height:64px;transform:rotate(8deg)}.negative-strip img{height:40px}
.letter{isolation:isolate;background:#e8dcc3;clip-path:polygon(.8% .4%,99.2% 0,100% 98.7%,98.8% 100%,.2% 99.5%,0 1.3%)}.letter::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('img/letter-paper-v1.webp') center/100% 100% no-repeat;opacity:.9}.letter::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 100% 88%,rgba(129,85,35,.1),transparent 38%),linear-gradient(92deg,rgba(122,92,53,.04),transparent 47%,rgba(94,65,33,.035) 50%,transparent 53%);mix-blend-mode:multiply}.letter>*{position:relative;z-index:1}.letter .tape{position:absolute;z-index:2}.letter .fold{position:absolute;z-index:2}