html[data-story]{color-scheme:light;color:#354d43;background:#e8ede8;font-family:"Avenir Next","PingFang SC",sans-serif}
[data-story] *{box-sizing:border-box;letter-spacing:0}
[data-story] :is(body,main){margin:0;width:100%;height:100%}
[data-story], [data-story] body{height:100%;overflow:hidden}
[data-story] :is(button,input,textarea){font:inherit}
[data-story] button{cursor:pointer;touch-action:manipulation}
[data-story] [hidden]{display:none!important}
[data-story] :is(button,a,textarea,input):focus-visible{outline:2px solid #a75d7e;outline-offset:4px}
[data-story] :is(h1,h2,h3){font-family:"Songti SC",Georgia,serif;font-weight:400}
.story-shell{position:relative;isolation:isolate}
.story-scene{position:absolute;inset:0;overflow:hidden;background:#d3ddd1}
.story-art{position:absolute;touch-action:pan-y;user-select:none}
.story-picture{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.story-object{position:absolute;z-index:2;background:none;border:0;padding:0;transition:background .25s}
.story-object:hover,.story-object:focus-visible{background:#fff8eb28;outline:none;box-shadow:inset 0 0 0 2px #fffef5b8}
.story-heading{position:absolute;top:28px;left:32px;max-width:calc(100% - 64px);padding:17px 21px;background:#f8fbf2ec;border-left:2px solid #a2788a;pointer-events:none}
.story-kicker{font-size:10px;color:#866272;margin:0 0 8px}
.story-heading h1{font-size:30px;line-height:1.3;margin:0;color:#354d43}
.story-line{font:14px/1.8 "Songti SC",serif;color:#5c7061;margin:9px 0 0}
.story-nav{position:absolute;z-index:5;bottom:40px;left:50%;transform:translateX(-50%);display:flex;max-width:calc(100% - 32px);border:1px solid #dce1d5;border-radius:5px;background:#fcfcf4f2;overflow:hidden;box-shadow:0 4px 18px #293b3314}
.story-nav button{min-height:44px;min-width:72px;padding:9px 19px;border:0;border-right:1px solid #dce1d5;background:transparent;white-space:nowrap;font-size:13px;color:#485e4f}
.story-nav button:last-child{border-right:0}
.story-nav button:hover,.story-nav button[aria-current="page"]{background:#e8ece2;color:#854e68}
.story-caption{position:absolute;z-index:4;left:50%;bottom:10px;max-width:calc(100% - 30px);transform:translateX(-50%);margin:0;padding:4px 10px;background:#f8fbf3e8;white-space:nowrap;font-size:10px;color:#5d7162}
.story-tooltip{position:absolute;z-index:6;pointer-events:none;padding:7px 11px;background:#fafcf5f5;border:1px solid #d8ddd2;border-radius:3px;font-size:13px;color:#425c4d;box-shadow:0 4px 12px #354c3720}
.story-preview{position:absolute;top:14px;right:14px;padding:6px 9px;background:#fcfcf7;color:#97657c;font-size:11px}
.story-panel{position:absolute;z-index:20;inset:0 auto 0 0;width:min(450px,48%);padding:33px 34px 38px;overflow:auto;overscroll-behavior:contain;background:#fcfcf5f7;border-right:1px solid #dae1d5;box-shadow:14px 0 45px #253c3120;animation:unfold .3s ease-out}
.story-panel h2{font-size:28px;line-height:1.4;margin:5px 0 18px;padding-right:36px;color:#3e5747}
.story-panel .panel-kicker{margin:0 0 10px;color:#94677c;font-size:10px}
.story-panel .panel-body{font-size:13px;line-height:1.85;color:#657265}
.story-panel .panel-body>p{margin:0 0 20px}
.story-close{position:sticky;float:right;top:0;z-index:5;width:36px;height:36px;display:grid;place-items:center;padding:8px;border:1px solid #d9e0d4;border-radius:4px;background:#fafcf7;color:#5b7260}
.story-close svg{width:18px;height:18px}
.story-panel :is(input,textarea){max-width:100%;color:#3d5042}
.paper-field{width:100%;min-height:220px;resize:vertical;padding:20px 16px;border:1px solid #d4ded1;border-radius:3px;background:repeating-linear-gradient(transparent 0 31px,#cddacb59 31px 32px) #fffefb;background-origin:content-box;font:16px/32px "Songti SC",serif!important}
.paper-field::placeholder{color:#929d8b}
.field-meta{display:flex;justify-content:space-between;gap:12px;margin:8px 0 23px;font-size:11px;color:#7c8977}
.action-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.primary-action,.secondary-action{min-height:42px;padding:10px 16px;border:1px solid #556f5d;border-radius:4px;font-size:13px;color:#fff;background:#556f5d}
.secondary-action{color:#6c715f;background:transparent;border-color:#c8d2c2}
.primary-action:hover{background:#3d5848}.secondary-action:hover{background:#eaf0e6}
.primary-action:disabled{opacity:.5;cursor:default}
.check-line{display:flex;align-items:center;gap:8px;margin:15px 0 23px;font-size:12px}.check-line input{accent-color:#768669;width:17px;height:17px}
.letter-list{display:grid;gap:13px}
.letter-card{display:block;width:100%;padding:19px 17px;text-align:left;border:1px solid #d9ded3;border-left:3px solid #c293a5;border-radius:3px;background:#fffef8;color:#425644;overflow-wrap:anywhere;box-shadow:0 3px 8px #3a513307}
.letter-card small{display:block;color:#8b857a;font-size:10px;margin-bottom:7px}.letter-card span{font:16px/1.8 "Songti SC",serif;white-space:pre-wrap}
.letter-card:hover{border-color:#ba8d9f;background:#f9f7f1}
.search-field{width:100%;min-height:42px;padding:10px 13px;margin-bottom:20px;border:1px solid #cfd9c8;border-radius:4px;background:#fffefa;font-size:14px}
.garden-letter{font:18px/2.1 "Songti SC",serif;white-space:pre-wrap;overflow-wrap:anywhere;border-block:1px solid #d4ded0;padding:25px 0;margin:20px 0}
.story-empty{padding:25px 0;border-block:1px solid #d6dfd0;font:16px/1.9 "Songti SC",serif;color:#75836d}
.reflection-fields{border-block:1px solid #d4dfd2;padding:14px 0;margin:0 0 22px}
.reflection-fields summary{cursor:pointer;color:#8d6a80;min-height:30px}
.reflection-fields label{display:block;font-size:12px;margin:18px 0 8px}
.reflection-fields .paper-field{min-height:110px}
.story-carry{display:inline-block;text-decoration:none;margin-top:24px}
.story-note{font-size:11px!important;line-height:1.8;color:#88917f}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.status-cell{padding:14px 0;border-bottom:1px solid #d6dfcf}.status-cell strong{display:block;font:27px/1.6 Georgia,serif;color:#6e8062}.status-cell span{font-size:12px;color:#8b907b}
.story-notice{position:absolute;z-index:40;left:50%;bottom:105px;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;padding:12px 19px;border:1px solid #ccd8c9;background:#fbfcf6f5;color:#536c55;font-size:13px;line-height:1.6;box-shadow:0 5px 24px #344a2e1c;pointer-events:none}
.story-delivery{position:absolute;z-index:30;left:0;top:0;width:120px;height:80px;background:#fffbed;border:1px solid #cbbdaf;box-shadow:0 9px 20px #22362940;pointer-events:none;transform-origin:center}
.story-delivery.letter::before{content:"";position:absolute;inset:0 0 20%;background:#e9e3d4;clip-path:polygon(0 0,100% 0,50% 72%)}
.story-delivery.letter i{position:absolute;left:45%;top:40%;width:17px;height:17px;border-radius:50%;background:#b87991}
.story-delivery.page{background:repeating-linear-gradient(transparent 0 12px,#ccd7c059 12px 13px) #f5f4e7}
.story-ripple{position:absolute;z-index:3;width:60px;height:23px;margin:-12px -30px;border:1px solid #fbffffb0;border-radius:50%;animation:pond-ripple 1.1s ease-out both;pointer-events:none}
.story-panel .preset-analysis{display:grid;gap:18px;margin-top:25px}.analysis-slip{border-top:1px solid #d8e0d2;padding-top:14px}.analysis-slip b{display:block;font-size:12px;font-weight:400;color:#987489;margin-bottom:7px}.analysis-slip span{font-size:13px;color:#63745f}
.story-panel-open :is(.story-heading,.story-nav,.story-caption,.story-tooltip){visibility:hidden}
@keyframes unfold{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pond-ripple{from{transform:scale(.5);opacity:.85}to{transform:scale(4.5);opacity:0}}
@media(max-width:760px){
 .story-heading{left:18px;top:18px;padding:12px 16px;max-width:calc(100% - 36px)}
 .story-heading h1{font-size:25px}.story-kicker{font-size:9px;margin-bottom:5px}.story-line{font-size:12px;margin-top:5px}
 .story-nav{bottom:max(38px,env(safe-area-inset-bottom));max-width:calc(100% - 24px);width:max-content}
 .story-nav button{padding:10px 12px;min-width:56px;font-size:12px}
 .story-caption{font-size:9px;bottom:9px;max-width:calc(100% - 20px);white-space:normal;text-align:center}
 .story-panel{inset:auto 0 0;width:100%;max-height:78%;padding:22px 23px 28px;border-right:0;border-top:1px solid #cfd8c9;box-shadow:0 -12px 36px #253c3133}
 .story-panel h2{font-size:25px;margin-bottom:15px}.paper-field{min-height:175px;font-size:16px!important}
 .story-panel .panel-body{font-size:13px}.story-preview{top:auto;right:12px;bottom:95px;font-size:10px}
 .story-notice{bottom:110px;font-size:12px}.story-panel-open .story-notice{bottom:18px}
}
@media(max-height:500px) and (min-width:761px){.story-heading{top:15px;padding:12px 16px}.story-heading h1{font-size:24px}.story-line{display:none}.story-panel{padding:23px 28px}.paper-field{min-height:140px}}
@media(max-width:380px){.story-heading{padding:9px 13px}.story-heading h1{font-size:23px}.story-line{font-size:11px}}
@media(prefers-reduced-motion:reduce){[data-story] *,[data-story] *::before,[data-story] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
