*{box-sizing:border-box} :root{color-scheme:light;--paper:#f6f3e9;--ink:#2f473a;--muted:#89917c;--line:#dfe1d2;--green:#49644d}
html{min-width:300px;background:var(--paper)}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:radial-gradient(ellipse at 82% 40%,#e9ecdc 0,transparent 49%),var(--paper)}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #77916a;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button{transition:background .2s,transform .2s}button:not(:disabled):active{transform:translateY(1px)}
.site-header{max-width:1160px;margin:0 auto;padding:37px 54px 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:18px;letter-spacing:3px}.brand-leaf{height:23px;width:16px;border-radius:16px 0 16px 0;background:#758963;transform:rotate(-25deg)}.brand-en{font-size:9px;color:#909780;letter-spacing:2.4px;margin-left:9px}.header-note{font-size:11px;letter-spacing:2px;color:#959b87}
.layout{max-width:1060px;margin:8px auto 0;display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,420px);gap:72px;padding:0 52px 20px;align-items:center}.intro{padding-top:10px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:3px;color:#879377}.eyebrow>span{width:19px;height:1px;background:#8fa07a}h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",SimSun,serif;font-size:clamp(34px,4.2vw,51px);line-height:1.65;font-weight:500;letter-spacing:3px;margin:23px 0 22px;white-space:nowrap}.soft-word{position:relative;color:#6c8059}.soft-word:after{content:"";position:absolute;left:1px;right:3px;bottom:0;height:8px;background:#d8dfc5;z-index:-1;transform:rotate(-2deg)}.intro-copy{font-size:13px;line-height:2.6;letter-spacing:1.5px;color:#88937b}.intro-rule{width:37px;height:1px;background:#bdc5ac;margin:29px 0 20px}.small-invitation{font-size:11px;letter-spacing:2px;color:#8d977f}
.scene-wrap{position:relative;isolation:isolate}canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:18px;box-shadow:0 20px 40px #626a3e22,0 2px 5px #55472b22;touch-action:manipulation}.weather{position:absolute;z-index:1;top:27px;left:25px;border-radius:30px;padding:7px 11px;display:flex;gap:7px;align-items:center;background:#faf9e8d6;color:#657552;font-size:10px;letter-spacing:1px;pointer-events:none}.weather>span:first-child{width:4px;height:4px;border-radius:50%;background:#8ea270}.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;background:#d9dfbd;font-size:13px;color:#567252}.loader-leaf{display:inline-block;background:#7c966e;width:15px;height:21px;border-radius:16px 0 16px 0;animation:sway 2s ease-in-out infinite}.loader.error{cursor:pointer}.loader[hidden]{display:none}
.chapter{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:#919b82;font-size:9px;letter-spacing:2px}.chapter i{width:4px;height:4px;background:#cdd0bc;border-radius:50%;transition:background .5s}.chapter i.active{background:#718961}.chapter b{width:27px;height:1px;background:#d8dcc9;margin:0 5px}.story-line{margin:15px 0 17px;text-align:center;min-height:23px;color:#75866c;letter-spacing:.6px;font-size:12px;line-height:1.8}.actions{display:flex;gap:8px}.gift-button,.night-button{min-height:45px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;font-size:12px;white-space:nowrap}.gift-button{flex:1.25;background:#49644d;color:#fffced;box-shadow:0 4px 8px #49644d14}.gift-button:hover{background:#3c5741}.night-button{flex:1;background:#e8ebdc;color:#657555}.night-button:hover{background:#dfe5d0}.button-icon{font-family:Georgia,serif;font-size:22px;line-height:1}.sound-button{flex:0 0 41px;border:1px solid #d7deca;border-radius:11px;font-size:24px;color:#7c8b6c}.sound-button[aria-pressed=true]{background:#e0e9d2}.interaction-hint{font-size:9px;letter-spacing:1.5px;color:#a2aa92;text-align:center;margin:14px 0 0}
.letter{margin-top:38px;border-top:1px solid #dce0cd;padding-top:24px}.letter-label{font-size:9px;color:#919c82;letter-spacing:3px}.letter-note{font-family:"Songti SC","STSong",SimSun,serif;font-size:18px;line-height:1.9;color:#657554;margin:11px 0 5px;overflow-wrap:anywhere;max-width:320px}.edit-link{padding:4px 0;font-size:10px;color:#8f9a80;letter-spacing:1px}.edit-link>span{display:inline-block;margin-left:7px}.edit-link:hover{color:#486349}.share-button{border:1px solid #c5ceb6;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:320px;border-radius:10px;padding:15px 17px;margin-top:22px;font-size:11px;letter-spacing:1.5px;color:#6d7e5e}.share-button:hover{background:#e8eddb}.share-button>span:last-child{font-size:19px}.share-status{min-height:18px;font-size:10px;color:#899776;line-height:1.7;max-width:320px;margin:10px 0 0}
.site-footer{max-width:1055px;margin:11px auto 0;padding:23px 52px 27px;display:flex;justify-content:space-between;border-top:1px solid #e1e3d5;color:#a3ab96;font-size:9px;letter-spacing:2px}.site-footer>span:last-child{font-size:8px;letter-spacing:2px}
dialog{border:1px solid #e1e3d5;background:#faf8ef;border-radius:20px;padding:30px;width:calc(100vw - 40px);max-width:420px;color:var(--ink);box-shadow:0 20px 90px #172c2440}dialog::backdrop{background:#263d3155;backdrop-filter:blur(4px)}dialog h2{font-family:"Songti SC",SimSun,serif;font-weight:500;font-size:25px;margin:19px 0 12px}.dialog-desc{font-size:12px;color:#8b967f;line-height:1.8}textarea{display:block;resize:vertical;width:100%;min-height:110px;border:1px solid transparent;background:#efeee1;border-radius:10px;padding:15px;font:15px/1.9 inherit;color:#54694f;margin-top:21px;font-family:inherit}textarea:focus{outline:1px solid #849775}.dialog-count{font-size:10px;text-align:right;color:#929c83;margin-top:9px}.dialog-actions{display:flex;gap:12px;margin-top:22px}.dialog-actions button{flex:1;padding:13px;border-radius:9px;font-size:12px;background:#e8ebdc}.dialog-actions button[type=submit]{background:#49644d;color:#fffced}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes sway{50%{transform:rotate(16deg)}}
@media(min-width:1250px){.layout{gap:112px;max-width:1110px}.site-header{max-width:1210px}.experience{max-width:420px}.intro{padding-top:14px}}
@media(max-width:760px){body{background:var(--paper)}.site-header{padding:23px 23px 16px}.brand{font-size:14px;gap:9px}.brand-leaf{width:12px;height:18px}.brand-en{font-size:8px;letter-spacing:2px;margin-left:3px}.header-note{display:none}.layout{display:flex;flex-direction:column;gap:0;margin:0;padding:0 23px 20px;max-width:480px;align-items:stretch}.intro{display:contents}.intro>.eyebrow{order:0;margin:13px 0 0;font-size:9px;letter-spacing:2.5px}.intro h1{order:1;font-size:25px;letter-spacing:1.6px;line-height:1.5;margin:8px 0 19px;white-space:normal}.intro h1 br{display:none}.intro h1 .soft-word:after{height:5px}.intro-copy,.intro-rule,.small-invitation{display:none}.experience{order:2}.weather{top:24px;left:23px;font-size:9px}canvas{border-radius:13px}.chapter{margin-top:15px;font-size:9px;gap:6px}.chapter b{width:23px}.story-line{font-size:11px;margin:14px 0 16px;min-height:21px}.actions{gap:7px}.gift-button,.night-button{font-size:11px;min-height:44px;gap:5px}.sound-button{flex-basis:39px}.interaction-hint{font-size:8px;margin-top:13px;letter-spacing:1px}.letter{order:3;margin-top:26px;text-align:center;padding:22px 12px 13px}.letter-note{font-size:17px;max-width:none;margin:10px 0 8px}.edit-link{font-size:10px}.letter-label{font-size:9px}.share-button{order:4;max-width:none;margin-top:7px;padding:14px 15px;font-size:11px}.share-status{order:5;max-width:none;text-align:center;min-height:0;margin:8px 0 0}.site-footer{border-top:none;margin:0;padding:0 18px calc(25px + env(safe-area-inset-bottom));justify-content:center;font-size:8px;letter-spacing:1px}.site-footer>span:last-child{display:none}}
@media(max-width:350px){.site-header{padding-left:16px;padding-right:16px}.layout{padding-left:16px;padding-right:16px}.intro h1{font-size:22px}.brand-en{font-size:7px}.story-line{font-size:10px}.gift-button,.night-button{font-size:10px}.sound-button{flex-basis:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}