:root{font-family:'Yu Gothic',Meiryo,sans-serif;color:#684331;background:#fff8ed;line-height:1.8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 8%,#f4c5ab,transparent 50%),#fff8ed}a{color:inherit}header,footer{max-width:1200px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;gap:20px;font-size:12px}header a{text-decoration:none;font-weight:700}main{max-width:1200px;margin:auto;padding:0 28px}.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center;padding:28px 0 65px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#a15742}.brand{max-width:200px;margin:20px 0 18px;text-align:center}.brand svg{width:100%;display:block}.brand>span{font-size:10px;letter-spacing:3px;font-weight:800}h1{font-size:clamp(32px,3.6vw,48px);line-height:1.45;letter-spacing:1px;margin:0 0 20px}p{font-size:14px;margin:14px 0}h2{font-size:30px;line-height:1.6;margin:12px 0 20px}h3{font-size:21px;line-height:1.6;margin:12px 0}.hero-copy>small{display:block;font-size:10px;margin-top:20px}.title-menu{max-width:340px;margin-top:26px}.window{position:relative;min-height:560px;border:7px solid #fff1da;border-radius:16px;background:#edc7a1 url('./assets/workshop-start-v1.webp') center/cover;box-shadow:0 0 0 1px #bc8467,0 6px #c98b6a,0 24px 40px #98583822;overflow:hidden}.window:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#e9bf9477);pointer-events:none}.open{position:absolute;top:20px;left:18px;rotate:-5deg;padding:6px 16px;background:#a74d41;color:#fff1d6;border:2px solid #fbd4ad;border-radius:4px;font-size:24px;letter-spacing:3px;z-index:2;box-shadow:2px 3px #64392844}.open small{display:block;font-size:8px;letter-spacing:1px}.hero-kotono{position:absolute;width:210px;left:27%;bottom:85px;filter:drop-shadow(0 6px 3px #683b3022);animation:breathe 5s ease-in-out infinite}.hero-kotono svg{width:100%;display:block}.letter{position:absolute;right:18px;bottom:22px;background:repeating-linear-gradient(#fff9e9 0 27px,#ebdcc4 28px 29px);border:1px solid #c99c77;border-left:4px solid #b45643;padding:15px 22px;rotate:-3deg;z-index:2;box-shadow:0 4px 6px #60392b33}.letter small{font-size:10px}.letter p{font-size:14px;font-weight:700;margin:7px 0}.letter>span{display:block;text-align:right;font-size:9px;color:#a25a40}.invitation{text-align:center;padding:65px 0;border-top:1px solid #d8b99b}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;margin-top:35px}.features article{background:#fffdf5;border:1px solid #ddbea1;border-radius:8px 8px 20px 8px;padding:24px;box-shadow:0 5px #d1aa8226}.number{font-size:10px;letter-spacing:2px;color:#a35c46}.features p{font-size:13px}.mini-ledger{height:150px;padding:8px 0}.mini-ledger span{display:flex;justify-content:space-between;padding:8px;border-bottom:1px dashed #d6bea4;font-size:12px}.mini-ledger span:last-child{color:#a44839}.gift{display:block;width:100%;height:150px;object-fit:contain}.studio{display:block;width:100%;height:150px;object-fit:cover;border-radius:6px}.character{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:40px;border:1px solid #d49a7b;border-radius:20px;background:#f7d5bd;overflow:hidden;padding:35px 50px;margin:20px 0 65px}.portrait{height:380px;background:url('./assets/characters/game-v1/owner.png') 3% 100%/300% auto no-repeat;mix-blend-mode:multiply}.text-link{display:inline-block;margin-top:15px;text-underline-offset:6px;font-weight:700;font-size:14px}.pace{text-align:center;padding:20px 0 65px}.tags{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:25px}.tags span{background:#f6e7ce;border:1px solid #d9be94;border-radius:30px;padding:6px 16px;font-size:12px}.faq{max-width:760px;margin:0 auto;padding:35px 0 60px}.faq details{border-bottom:1px solid #d9bea3;padding:18px 0}.faq summary{cursor:pointer;font-size:14px;font-weight:700;min-height:28px}.faq details p{font-size:13px;line-height:2}.closing{padding:45px 20px 55px;background:#f6d0b7;border:1px solid #cf9978;border-radius:20px;text-align:center;margin-bottom:35px;box-shadow:inset 0 0 0 6px #ffe2cb}.closing .title-menu{margin:22px auto}.closing p{font-size:11px}footer{border-top:1px solid #dfc5ac;font-size:10px}footer nav{display:flex;gap:18px}.mobile{display:none}a:focus-visible,summary:focus-visible{outline:2px solid #754331;outline-offset:5px}@keyframes breathe{50%{transform:translateY(-3px) rotate(1deg)}}@media(max-width:760px){header,footer{padding:18px}main{padding:0 18px}.hero{display:flex;flex-direction:column;gap:28px;padding-top:12px}.hero-copy{width:100%}.brand{width:140px;margin:16px 0}h1{font-size:33px}.hero-copy>p{font-size:13px}.title-menu{max-width:none}.window{width:100%;min-height:360px}.hero-kotono{width:150px;left:24%;bottom:70px}.letter{right:10px;bottom:14px;padding:10px 13px}.letter p{font-size:12px}.features{grid-template-columns:1fr}.features article{padding:24px}.invitation{padding:40px 0}h2{font-size:24px}.mobile{display:block}.character{padding:20px;gap:12px;grid-template-columns:1fr;margin-bottom:35px}.portrait{height:300px;width:240px;max-width:100%;margin:auto;background-size:300% auto}.character h2{font-size:23px}.pace{padding-bottom:30px}.closing{padding:30px 20px}footer{flex-direction:column;gap:6px}.hero-copy>small{font-size:9px}}@media(prefers-reduced-motion:reduce){.hero-kotono{animation:none}}
.portrait{width:240px;max-width:100%;height:380px;margin:auto;background-size:782px 587px;background-position:-70px -177px}
@media(max-width:760px){.portrait{height:380px;background-size:782px 587px;background-position:-70px -177px}}
.portrait{width:210px}
/* Motion belongs to the office and paper, not to the reading text. */
.hero-kotono{animation:none;will-change:translate}.hero-kotono svg{transform-origin:center}
.letter{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,rotate .2s}
.letter:hover{box-shadow:0 7px 12px #60392b44;rotate:-1deg}.letter:focus-visible{outline:2px solid #754331;outline-offset:5px}
.order-arriving .letter{animation:order-delivery .65s cubic-bezier(.2,.8,.3,1) both}
.scene-speech{position:absolute;left:27%;bottom:370px;z-index:3;background:#fff8e8;border:1px solid #cc9777;border-radius:14px 14px 14px 2px;padding:8px 15px;box-shadow:0 3px #8e56352b;font-size:13px;opacity:0;translate:0 7px;transition:opacity .2s,translate .2s;pointer-events:none}
.scene-speech.visible{opacity:1;translate:0 0}
.try-answer{position:relative;font-size:12px}.try-answer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:8px;color:#a44839;border-bottom:1px dashed #d6bea4;min-height:40px}.try-answer summary::-webkit-details-marker{display:none}.try-answer summary b{font-size:11px;background:#f7e3bd;border-radius:4px;padding:2px 7px}.try-answer[open] summary b{opacity:.55}.try-answer p{margin:0;padding:2px 8px;display:flex;align-items:center;justify-content:space-between;min-height:40px;border-bottom:1px dashed #d6bea4;animation:paper-unfold .3s ease-out}.try-answer strong{color:#a44839;font-size:22px}.try-answer small{font-size:11px}
.arrived{animation:paper-enter .65s cubic-bezier(.2,.8,.3,1) both}.features article:nth-child(2).arrived{animation-delay:.1s}.features article:nth-child(3).arrived{animation-delay:.2s}
@media(hover:hover){.features article{transition:translate .2s,box-shadow .2s}.features article:hover{translate:0 -4px;box-shadow:0 8px 18px #a9714920}.features article:hover .gift{transform:rotate(-4deg) translateY(-3px)}.gift{transition:transform .3s}}
@keyframes order-delivery{0%{transform:translate(20px,25px) rotate(5deg);opacity:.25}70%{transform:translate(0,-4px) rotate(-1deg)}100%{transform:none;opacity:1}}
@keyframes paper-enter{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
@keyframes paper-unfold{from{transform:rotateX(-35deg);opacity:.5}to{transform:none;opacity:1}}
@media(max-width:760px){.scene-speech{bottom:275px;left:28%;font-size:11px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){.order-arriving .letter,.arrived,.try-answer p{animation:none}.scene-speech,.letter,.features article,.gift{transition:none}.features article:hover,.features article:hover .gift{translate:none;transform:none}}
.encounter{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;max-width:850px;margin:0 auto 60px;padding:25px 30px;border-block:1px dashed #cfac87}.yuzu-peek svg{width:100%;display:block}.yuzu-peek>span{display:block;text-align:center;font-size:12px;color:#a3553f;font-weight:700}.encounter h2{font-size:27px}.yuzu-line{background:#fff3da;border-left:3px solid #d29c45;padding:10px 14px;border-radius:0 10px 10px 0;font-weight:700}.encounter p{font-size:13px}@media(max-width:760px){.encounter{grid-template-columns:1fr;padding:25px 5px;gap:8px;margin-bottom:30px}.yuzu-peek{width:140px;margin:auto}.encounter h2{font-size:23px}}
.yuzu-peek{width:210px;margin:auto}.yuzu-portrait{width:210px;height:370px;background:url('./assets/characters/game-v1/yui.png') -65px -185px/782px 587px no-repeat;mix-blend-mode:multiply}
@media(max-width:760px){.yuzu-peek{width:210px}}

/* Keep the opened estimate in flow and give navigation comfortable touch targets. */
.mini-ledger{height:auto;min-height:150px}
header a{display:inline-flex;align-items:center;min-height:44px}
.faq summary{min-height:44px;display:flex;align-items:center;padding:4px 0}
.try-answer[open]{padding-bottom:10px}