@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/CormorantGaramond.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
:root{--ink:#6180a4;--deep:#3f638b;--line:#93a9c3;--paper:#f6f5f2;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'Segoe UI',Arial,sans-serif;--mono:Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);font-family:var(--serif);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,input:focus-visible{outline:2px solid #527dad;outline-offset:5px}[hidden]{display:none!important}
.environment{position:fixed;inset:-1%;z-index:-3;background:var(--paper) url('/assets/gate-room.png') center/cover no-repeat;animation:room-breeze 30s ease-in-out infinite alternate;pointer-events:none}
.shadow-drift{position:fixed;inset:-2%;z-index:-2;background:url('/assets/gate-room.png') center/cover no-repeat;clip-path:inset(0 86% 24% 0);mix-blend-mode:multiply;opacity:.14;animation:leaf-shadow 22s ease-in-out infinite alternate;pointer-events:none}
.water-light{position:fixed;bottom:-8%;left:-8%;width:42vw;height:32vh;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 30deg at 45% 60%,transparent 0deg 27deg,#f9fdffbb 28deg 30deg,transparent 31deg 58deg);mask-image:radial-gradient(ellipse,#0009,transparent 68%);filter:blur(8px);opacity:.3;animation:water-reflection 18s ease-in-out infinite alternate}
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.petal{position:absolute;object-fit:contain;opacity:.58;filter:drop-shadow(0 7px 8px #7f9db718)}.petal-one{width:72px;height:72px;right:7%;bottom:11%;filter:blur(1.5px);animation:petal-float 23s ease-in-out infinite}.petal-two{width:31px;height:31px;left:18%;bottom:22%;opacity:.32;animation:petal-float 29s ease-in-out -11s infinite}.petal-three{width:90px;height:90px;right:-2%;bottom:22%;filter:blur(5px);opacity:.25;animation:petal-float 31s ease-in-out -17s infinite}
.corner-poem{position:absolute;right:3.1%;top:5.6%;font:11px/1.9 var(--serif);letter-spacing:3px;pointer-events:none;z-index:1}.corner-poem p{margin:0 0 16px;font-size:13px;letter-spacing:4px}.corner-poem span{font-size:9px;letter-spacing:2.5px;line-height:1.8}.corner-poem i{display:block;width:1px;height:37px;background:#819ab9;margin-top:12px}.side-poem{position:absolute;left:2.6%;top:54%;writing-mode:vertical-rl;font:12px/1.8 var(--serif);letter-spacing:7px;pointer-events:none;opacity:.75}
.entrance{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:4%;width:78%;max-width:1450px;margin-left:16.5%;padding:20.7vh 0 15.5vh;align-items:start}
.introduction{min-width:0;animation:gentle-arrival 900ms both}.wordmark{font-size:clamp(14px,1.3vw,23px);letter-spacing:.25em;margin:0;white-space:nowrap;line-height:1.5}.wordmark span{font-size:.85em;margin:0 .25em}.small-rule{display:block;width:36px;height:1px;background:#91a8c6;margin:45px 0 20px}h1{font-family:var(--serif);font-weight:300;line-height:1.03;letter-spacing:-.025em;font-size:clamp(48px,6.4vw,116px);margin:0;color:#6785a8;white-space:nowrap}.japanese{margin:38px 0 0;font-family:var(--sans);font-size:clamp(12px,1.1vw,18px);letter-spacing:.23em;line-height:1.8}.whisper{font-size:clamp(10px,.8vw,14px);line-height:1.8;letter-spacing:.26em;margin:37px 0 0}
.letter{position:relative;margin-top:5.4vh;min-width:0;width:100%;aspect-ratio:1.312;min-height:360px;border:1px solid #819ab8;border-radius:3px;background:linear-gradient(145deg,#f8f7f4dd,#f0efeced);box-shadow:0 1px 4px #4a648306;transform-origin:90% 40%;animation:letter-arrival 1000ms 180ms both;perspective:1000px}
.letter::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;background-image:url('/assets/gate-paper.svg');background-repeat:repeat;mix-blend-mode:multiply}
.letter-content{position:relative;padding:19.5% 12.4% 0;z-index:2}.letter-content>label{display:block;font-size:clamp(15px,1.3vw,22px);letter-spacing:.22em;margin-bottom:28px;line-height:1.4}.password-wrap{position:relative;display:flex;align-items:center;width:100%;height:60px;border:1px solid #8ba1bc;border-radius:7px;background:#f7f7f552;transition:box-shadow .22s,border-color .22s}.password-wrap:focus-within{border-color:#5278a8;box-shadow:0 0 0 3px #8faed51a}.password-wrap input{width:100%;height:100%;padding:0 58px 0 28px;border:0;outline:none;background:none;color:#506f96;font-family:var(--sans);font-size:20px;letter-spacing:2px;min-width:0;border-radius:inherit}.password-wrap input[type=password]{font-size:25px;letter-spacing:4px}.password-wrap input::placeholder{color:#6782a5;opacity:1}.eye-button{position:absolute;right:14px;top:0;height:100%;width:38px;display:grid;place-items:center;border:0;background:none;color:#617fa4;border-radius:3px;padding:7px}.eye-button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5}.eye-slash{display:none}.showing-password .eye-slash{display:block}.enter-button{display:flex;justify-content:center;align-items:center;gap:19px;margin-top:29px;width:100%;height:60px;border:1px solid #6c88ab;border-radius:7px;background:linear-gradient(115deg,#6481a6,#6382a5);color:#fbfcff;font-size:clamp(16px,1.35vw,22px);letter-spacing:.035em;box-shadow:0 3px 8px #6382a510;transition:background .25s,box-shadow .25s,transform .25s}.enter-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .25s}.enter-button:hover:not(:disabled){background:#5a7aa1;box-shadow:0 4px 14px #486a9620}.enter-button:hover:not(:disabled) svg{transform:translateX(5px)}.enter-button:active:not(:disabled){transform:translateY(1px)}.enter-button:disabled{opacity:.8}.access-message{font:12px/1.6 var(--sans);letter-spacing:.03em;color:#9b6671;min-height:39px;margin:12px 0 0}.access-message.success{color:#567994}.noscript{font:12px/1.6 var(--sans);color:#8a5063}
.letter-fold{position:absolute;right:-1px;top:-1px;width:110px;height:80px;z-index:3;filter:drop-shadow(-5px 6px 4px #45506526);transform-origin:right top;pointer-events:none;transition:transform .8s cubic-bezier(.2,.6,.2,1)}.letter-fold span{display:block;width:100%;height:100%;clip-path:polygon(0 0,100% 100%,100% 0);background:linear-gradient(140deg,#d7d8d8,#fafaf9 52%,#fff)}
.letter-seal{position:absolute;right:-16px;top:36px;width:75px;height:75px;border-radius:50%;background:linear-gradient(135deg,#b5c7df,#8da9cd);box-shadow:0 3px 7px #4b65932b,inset 0 0 0 1px #91aacb;z-index:4;display:grid;place-items:center;animation:seal-breath 7s ease-in-out infinite;pointer-events:none}.letter-seal svg{width:67px;height:67px;fill:none;stroke:#f7fbff;stroke-width:.6}.letter-seal svg circle{opacity:.8}.letter-signature{position:absolute;right:7%;bottom:7.5%;font-size:9px;line-height:1.8;letter-spacing:2.5px;text-align:right;margin:0;color:#7e97b7}
.entrance-footer{position:relative;z-index:1;text-align:center;margin:0 0 6.5vh;color:#7891af;animation:gentle-arrival 1300ms 300ms both}.entrance-footer>span{width:33px;height:1px;background:#8ea4c0;display:block;margin:0 auto 27px}.entrance-footer p{font-size:12px;letter-spacing:4px;margin:0 0 14px}.entrance-footer i{font-size:10px;font-style:normal;padding:0 5px}.entrance-footer small{font-size:9px;letter-spacing:2.5px}
.checking .letter-seal{animation:checking-seal 2s ease-in-out infinite}.rejected .password-wrap{animation:key-mismatch 360ms ease-in-out;border-color:#b9959e}.opening .letter-seal{animation:seal-open 750ms ease-in-out forwards}.opening .letter-fold{transform:rotateX(-145deg) rotateY(12deg)}.opening .letter-content,.opening .letter-signature{opacity:0;transform:translateY(-8px);transition:opacity .45s .15s,transform .55s .15s}.opening .letter{animation:letter-open 1100ms 180ms forwards}.opening .introduction,.opening .corner-poem,.opening .entrance-footer,.opening .side-poem{opacity:0;transform:translateY(-6px);transition:opacity .75s .25s,transform .75s .25s}.opening::after{content:'';position:fixed;inset:0;background:#f3f8ff;z-index:10;pointer-events:none;animation:room-reveal 1.2s forwards}.opening .petals{opacity:0;transition:opacity 1s}.opening .environment{animation:none}
@keyframes gentle-arrival{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes letter-arrival{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}@keyframes room-breeze{from{transform:scale(1.005) translateX(0)}to{transform:scale(1.02) translateX(.15%)}}@keyframes leaf-shadow{from{transform:translate(-2px,-2px) rotate(-.2deg);opacity:.08}to{transform:translate(8px,6px) rotate(.3deg);opacity:.19}}@keyframes water-reflection{from{transform:rotate(-4deg) scale(1);opacity:.16}to{transform:rotate(5deg) scale(1.08);opacity:.34}}@keyframes petal-float{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(-30px,-23px) rotate(14deg)}}@keyframes seal-breath{0%,100%{box-shadow:0 3px 7px #4b659326,inset 0 0 0 1px #91aacb}50%{box-shadow:0 3px 13px #759bd544,inset 0 0 0 1px #bdd3ee}}@keyframes checking-seal{50%{transform:rotate(7deg);opacity:.75}}@keyframes key-mismatch{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes seal-open{to{transform:translate(14px,-12px) rotate(90deg) scale(.86);opacity:0}}@keyframes letter-open{0%{opacity:1;transform:rotateY(0) scale(1)}65%{opacity:.5;transform:rotateY(-12deg) scale(1.035)}100%{opacity:0;transform:rotateY(-20deg) scale(1.05)}}@keyframes room-reveal{0%,35%{opacity:0}100%{opacity:1}}
@media(min-width:1700px){.letter-content>label{margin-bottom:34px}.password-wrap,.enter-button{height:70px}.letter-seal{width:87px;height:87px;top:42px;right:-18px}.letter-seal svg{width:78px;height:78px}.letter-fold{width:130px;height:95px}.small-rule{margin-top:60px;margin-bottom:30px}.letter{min-height:480px}.entrance{padding-bottom:15vh}.entrance-footer{margin-bottom:5vh}}
@media(max-width:1100px){.entrance{width:80%;margin-left:15%;gap:4%;grid-template-columns:1fr 1.08fr;padding-top:21vh}.wordmark{font-size:13px;letter-spacing:3px}.small-rule{margin-top:34px;margin-bottom:24px}h1{font-size:6vw}.letter{min-height:350px}.letter-content{padding-top:22%}.letter-content>label{font-size:16px;margin-bottom:22px}.password-wrap,.enter-button{height:49px}.password-wrap input[type=password]{font-size:21px}.enter-button{margin-top:22px;font-size:16px}.letter-seal{width:60px;height:60px;right:-12px;top:25px}.letter-seal svg{width:54px;height:54px}.letter-fold{width:86px;height:65px}.japanese{margin-top:26px;font-size:11px}.whisper{margin-top:27px;font-size:10px}.corner-poem{font-size:9px;right:3%;top:4%}.corner-poem p{font-size:10px}.corner-poem span{font-size:8px}.letter-signature{font-size:7px;letter-spacing:1.5px}.entrance-footer{margin-top:3vh}.entrance-footer p{font-size:10px}.access-message{font-size:10px}}
@media(max-width:760px){body{min-height:100svh}.environment{background-position:28% center;opacity:.67}.shadow-drift{display:none}.entrance{width:auto;margin:0 9%;display:flex;flex-direction:column;gap:32px;padding:70px 0 45px}.introduction{width:100%}.wordmark{font-size:12px;letter-spacing:2.5px}.small-rule{width:27px;margin:28px 0 19px}h1{font-size:clamp(44px,9vw,68px);line-height:1.05;letter-spacing:-1px}.japanese{font-size:11px;margin-top:23px;letter-spacing:2px}.whisper{font-size:9px;margin-top:18px;letter-spacing:2px}.letter{width:100%;max-width:500px;min-height:360px;aspect-ratio:auto;margin:8px auto 0}.letter-content{padding:75px 10% 0}.letter-content>label{font-size:17px;letter-spacing:3px;margin-bottom:23px}.password-wrap,.enter-button{height:52px}.enter-button{font-size:18px;margin-top:24px}.letter-seal{top:24px;right:-13px}.letter-signature{font-size:8px;right:8%;bottom:7%}.entrance-footer{margin:0 0 35px}.entrance-footer>span{margin-bottom:22px}.entrance-footer p{font-size:10px;letter-spacing:2.5px}.entrance-footer small{font-size:8px}.corner-poem,.side-poem{display:none}.petal-one{width:50px;height:50px;right:0%;bottom:16%}.petal-two{left:2%;bottom:32%}.petal-three{right:-7%;bottom:45%}.water-light{width:70vw;height:25vh}.access-message{font-size:11px}.opening .letter{transform-origin:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.opening .letter,.opening .introduction,.opening .corner-poem,.opening .entrance-footer{opacity:0}.opening::after{opacity:1}}