:root{--color-bg: #c2ceca;--color-book-page-primary: #f5f3ec;--color-book-page-white: #f5f5f0;--color-book-page-dark: #1d3733;--color-text-main: #1d3733;--color-text-bright: #c2ceca;--color-text-accent: #4c8159;--ghibli-blue: #10709b;--ghibli-red: #b0313c;--ghibli-pink: #c89f9e;--font-main: "Inter", sans-serif;--font-serif: "Playfair Display", "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;--font-title: "Playfair Display", sans-serif;--book-width: min(90vw, 123.25vh , 1200px);--book-height: min(85vh, calc(90vw / 1.45), 827px)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text-main);font-family:var(--font-main);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.book-container{width:var(--book-width);height:var(--book-height);perspective:2500px;position:relative;transition:transform .8s ease;margin:0 auto}.book-container.book-closed{transform:translate(-25%)}.book-container.book-open{transform:translate(0)}.book{width:100%;height:100%;position:absolute;transform-style:preserve-3d;border-radius:6px}.book:after{content:"";position:absolute;top:0;right:0;width:100%;height:100%;border-radius:6px;transition:width .8s ease;z-index:-1;pointer-events:none}.book-container.book-closed .book:after{width:50%}.sheet{position:absolute;top:0;right:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.2s cubic-bezier(.645,.045,.355,1);will-change:transform}.sheet.flipped{transform:rotateY(-180deg)}.page{position:absolute;width:100%;height:100%;top:0;left:0;backface-visibility:hidden;background-color:var(--color-book-page);display:flex;flex-direction:column;overflow:hidden;background-image:none}.page.front{transform:rotateY(0);border-radius:2px 6px 6px 2px;box-shadow:none}.page.back{transform:rotateY(180deg);border-radius:6px 2px 2px 6px;box-shadow:none}.sheet:first-child .page.front{background:var(--bg-cover-gradient);box-shadow:none}.sheet:last-child .page.back{background:var(--bg-cover-gradient);box-shadow:inset -20px 0 30px -10px #00000014,inset -1px 0 3px #ffffff4d}.flip-zone{position:absolute;top:0;width:30%;height:100%;cursor:pointer;z-index:100}.flip-zone.right{right:0}.flip-zone.left{left:0}.flip-zone:hover{background:linear-gradient(90deg,transparent,rgba(0,0,0,.03))}.page.back .flip-zone.left:hover{background:linear-gradient(-90deg,transparent,rgba(0,0,0,.03))}.blank-page{width:100%;height:100%;background:var(--color-book-page)}.mobile-book-container{width:94vw;max-width:500px;position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto}.mobile-page{width:100%;position:relative;overflow:hidden;border-radius:6px;background:var(--color-book-page);box-shadow:0 4px 24px #0000001f;aspect-ratio:.725}.mobile-page-inner{width:600px;height:827px;transform-origin:top left;position:absolute;top:0;left:0}.mobile-page.slide-left .mobile-page-inner{animation:mobileSlideOutLeft .35s ease forwards}.mobile-page.slide-right .mobile-page-inner{animation:mobileSlideOutRight .35s ease forwards}@keyframes mobileSlideOutLeft{0%{opacity:1;transform:scale(var(--mobile-scale)) translate(0)}to{opacity:0;transform:scale(var(--mobile-scale)) translate(-10%)}}@keyframes mobileSlideOutRight{0%{opacity:1;transform:scale(var(--mobile-scale)) translate(0)}to{opacity:0;transform:scale(var(--mobile-scale)) translate(10%)}}.mobile-touch-zone{position:absolute;top:0;width:50%;height:100%;z-index:100;cursor:pointer}.mobile-touch-zone.left{left:0}.mobile-touch-zone.right{right:0}.mobile-page-dots{display:flex;justify-content:center;gap:5px;padding:10px 0 4px}.mobile-page-dots .dot{width:5px;height:5px;border-radius:50%;background:#00000026;transition:all .3s ease}.mobile-page-dots .dot.active{background:var(--color-text-main);transform:scale(1.4)}@media (max-width: 768px){.book-container{display:none!important}body{align-items:center;overflow:hidden}}@media (min-width: 769px){.mobile-book-container{display:none!important}}.page-content{width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;color:var(--color-text-main)}.page-primary{background-color:var(--color-book-page-primary)}.page-white{background-color:var(--color-book-page-white)}.page-dark{background-color:var(--color-book-page-dark);color:var(--color-text-bright)}.giant-number{position:absolute;top:-30px;left:-30px;font-family:var(--font-main);font-weight:900;font-size:200px;line-height:1;color:#1a1b1a0d;transform:rotate(-90deg);transform-origin:30% center;pointer-events:none;z-index:1}.giant-number.dark{color:#1a1b1a14}.giant-number.outline{color:transparent;-webkit-text-stroke:2px rgba(26,27,26,.1)}.vertical-jp{position:absolute;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-serif);font-size:.9rem;letter-spacing:.6em;color:var(--color-text-main);opacity:.7;z-index:2}.vertical-jp.top-left,.vertical-jp.left-edge{top:30px;left:30px}.vertical-jp.right-edge{top:30px;right:30px}.vertical-jp.small{font-size:.75rem;opacity:.5}.thin-divider{width:100%;height:1px;background-color:currentColor;opacity:.3;margin:20px 0}.thin-divider.center{width:50px;margin:20px auto}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.25em}.bold{font-weight:700}.italic{font-style:italic}.bright{color:var(--color-text-bright)}.mt-8{margin-top:2rem}.text-justify{text-align:justify}.vertical-jp.bright{color:var(--color-text-bright);opacity:.4}.letter-block{padding:15% 20%}.editorial-title{font-family:var(--font-title);font-weight:300;font-size:3rem;line-height:1.1;letter-spacing:-.01em;margin-bottom:15px;white-space:pre-wrap}.editorial-subtitle{font-family:var(--font-main);font-weight:400;font-size:.8rem;color:var(--color-text-accent)}.editorial-heading{font-family:var(--font-main);font-weight:600;font-size:1rem;letter-spacing:.2em;text-transform:uppercase}.editorial-caption{font-family:var(--font-serif);font-style:italic;font-size:1rem;color:var(--color-text-accent);line-height:1.6}.editorial-body{font-family:var(--font-serif);font-weight:400;font-size:.95rem;line-height:2.2}.editorial-body.drop-cap:first-letter{float:left;font-size:3.5rem;line-height:.8;padding-right:8px;padding-top:4px;font-family:var(--font-title);color:var(--color-text-main)}.editorial-body.lg{font-size:1.8rem;line-height:1.5;text-align:center}.editorial-text-block{display:flex;flex-direction:column;justify-content:center;padding:12%;height:100%;position:relative;z-index:5}.editorial-text-block.align-center{align-items:center;text-align:center}.cover-grid{display:flex;flex-direction:column;height:100%;padding:10% 12%;position:relative}.ghibli-title{font-family:var(--font-main);font-weight:800;font-size:1rem;letter-spacing:.4em;margin-bottom:5px;opacity:.8}.cover-title-area{margin-top:15%}.cover-index{margin-top:auto;margin-bottom:5%}.index-title{font-family:var(--font-serif);font-style:italic;font-size:1.2rem;margin-bottom:15px}.index-list{list-style:none;font-family:var(--font-main);font-size:.75rem;letter-spacing:.1em;line-height:2.2}.index-list li span{font-weight:700;margin-right:15px}.memory-editorial{display:flex;flex-direction:column}.memory-editorial.left .memory-text{height:35%;justify-content:flex-end;padding-bottom:20px}.memory-images-multi{height:65%;position:relative;padding:0 10% 10%}.overlapping-top{position:absolute;top:0;right:15%;width:55%;height:70%;z-index:2;box-shadow:-5px 5px 15px #0000001a}.overlapping-bottom{position:absolute;bottom:15%;left:10%;width:50%;height:60%;z-index:1}.img-wrapper{overflow:hidden;border:1px solid rgba(26,27,26,.1);background-color:var(--color-book-page-white);padding:4px}.mem-img{width:100%;height:100%;object-fit:cover;filter:sepia(30%) contrast(90%) brightness(105%) saturate(80%);transition:all .6s cubic-bezier(.25,1,.5,1)}.img-wrapper:hover .mem-img{filter:sepia(0%) contrast(100%) brightness(100%) saturate(100%);transform:scale(1.02)}.memory-editorial.right .memory-images-right{height:60%;padding:10% 15% 0;display:flex;align-items:flex-end;justify-content:center}.img-wrapper-large{width:90%;height:90%}.memory-editorial.right .memory-text-right{height:40%;justify-content:flex-start;padding-top:30px}.message-content{padding:12% 15%;height:100%;display:flex;align-items:center;position:relative;z-index:5}.quote-morph-area{position:relative;width:100%;min-height:200px;display:flex;align-items:center;justify-content:center}.quote-morph-stage{position:relative;width:100%}.quote-morph-stage.morphing{filter:url(#goo)}.editorial-heading{margin:0;width:100%;font-family:Playfair Display,serif;font-size:2.2rem;font-weight:500;line-height:1.4;color:#2d3436}.active-quote-static{position:relative;opacity:1;filter:none;z-index:5}.morph-layer{position:absolute;top:0;left:0;width:100%;margin:0;pointer-events:none}.invisible-placeholder{visibility:hidden;pointer-events:none}@keyframes morph-in{0%{opacity:0;filter:blur(30px) scale(.95);transform:translateY(10px)}to{opacity:1;filter:blur(0) scale(1);transform:translateY(0)}}@keyframes morph-out{0%{opacity:1;filter:blur(0) scale(1);transform:translateY(0)}to{opacity:0;filter:blur(30px) scale(1.05);transform:translateY(-10px)}}.enter-layer{animation:morph-in 1.8s forwards cubic-bezier(.4,0,.2,1)}.exit-layer{animation:morph-out 1.8s forwards cubic-bezier(.4,0,.2,1)}.morph-svg-hidden{position:absolute;width:0;height:0;pointer-events:none}.scatter-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.scatter-photo{position:absolute;background:#fff;padding:5px 5px 24px;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;transition:transform .4s ease,box-shadow .3s ease;max-width:45%;pointer-events:auto}.scatter-photo:hover{transform:rotate(0) scale(1.1)!important;box-shadow:0 12px 40px #0003;z-index:20}.scatter-photo img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain}.scatter-caption{display:block;text-align:center;font-family:Playfair Display,serif;font-size:.8rem;font-style:italic;color:#666;margin-top:4px;letter-spacing:.02em}.stamps-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.decoration-stamp{position:absolute;width:180px;height:auto;opacity:.5;filter:grayscale(.1) sepia(.1);mix-blend-mode:multiply;transition:opacity .4s ease}.memory-page:hover .decoration-stamp{opacity:.7}.replay-btn{background:none;border:1px solid var(--color-editorial-accent);color:var(--color-editorial-accent);padding:8px 24px;border-radius:20px;cursor:pointer;font-family:inherit;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;transition:all .3s ease}.replay-btn:hover{background:var(--color-editorial-accent);color:#fff}.letter-page{padding:60px;position:relative}.letter-header{display:flex;justify-content:space-between;align-items:flex-start;width:100%;border-bottom:1px solid rgba(245,243,236,.2);padding-bottom:30px;margin-bottom:20px;z-index:10;position:relative}.to-from-area{font-family:var(--font-serif);color:var(--color-text-bright);font-size:1.1rem;padding-top:10px}.to-line,.from-line{margin-bottom:8px}.to-line span,.from-line span{font-style:italic;font-weight:500;display:inline-block;margin-left:5px;border-bottom:1px solid rgba(245,243,236,.3)}.stamp-area{transform:rotate(5deg);transition:transform .4s ease}.stamp-area:hover{transform:rotate(2deg)}.stamp-img{width:110px;height:auto;display:block;object-fit:contain;filter:grayscale(.1) sepia(.1)}.letter-page .letter-block{height:auto;padding-top:20px;justify-content:flex-start}.text-right{text-align:right}.giant-number.dark{color:#1a1b1a0a}.letter-body-block{padding:40px 12%;display:flex;flex-direction:column;justify-content:flex-start;height:100%;overflow-y:auto}.editorial-signature{margin-top:30px;align-self:flex-end;min-width:120px}.signature-name{font-family:var(--font-serif);font-size:1.5rem;margin-top:5px}.letter-salutation{font-family:var(--font-serif);font-size:1.4rem;font-weight:700;margin-bottom:15px;color:var(--color-text-main)}.letter-header.inverse{border-bottom:1px solid rgba(0,0,0,.1);padding:30px 40px;margin-bottom:0;position:relative}.to-from-area.dark{color:var(--color-text-main)}.postmark-area{position:absolute;right:60px;top:15px;color:#1d3733d9;pointer-events:none;z-index:5}.postmark-svg{mix-blend-mode:multiply}.letter-page-spread .letter-body-block{padding-top:30px}.quote-intro{margin-bottom:25px}.quote-intro .editorial-caption{font-size:1.05rem;line-height:1.5;color:var(--color-text-main);opacity:.8}.quote-intro .thin-divider{width:60px;margin:12px 0;opacity:.2}.spotify-wrapper{width:90%;max-width:500px;z-index:10;position:relative;box-shadow:0 15px 45px #0000001a;border-radius:12px}.spotify-embed{display:block}.intro-blank{display:flex;align-items:center;justify-content:center}.intro-foreword{display:flex;align-items:center;justify-content:center;padding:60px 40px}.intro-content{text-align:center;width:100%;max-width:380px}.intro-title{font-family:var(--font-main);font-size:.75rem;letter-spacing:.4em;font-weight:500;margin:15px 0;opacity:.7;color:var(--color-text-main)}.intro-line-decor{height:1px;width:100%;background-color:var(--color-text-main);opacity:.15}.intro-body{margin-top:50px;display:flex;flex-direction:column;align-items:center;gap:12px}.intro-underline-text{font-family:var(--font-serif);font-size:1.35rem;font-style:italic;font-weight:400;color:var(--color-text-main);line-height:1.6;text-align:center}.vertical-jp.faded{opacity:.08}