#letter-story{width:min(1200px,calc(100% - 20px));padding:14px;background:#100e1b;max-height:96dvh}
#letter-story .letter-hero{min-height:0;background:none}.letter-hero>div{padding:0 6px}.letter-hero h2{font-size:22px;margin:3px 0}.letter-hero span,.letter-hero p{display:none}.letter-steps{margin:0;padding:8px 0;font-size:13px}
.ls-scene{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #b59a62;border-radius:12px;background:#151522;isolation:isolate}
.ls-background{width:100%;height:100%;object-fit:cover;display:block}
.ls-title{position:absolute;left:3%;top:4%;color:#fff1c9;text-shadow:0 2px 8px #000;background:linear-gradient(90deg,#171122da,transparent);padding:12px 35px 12px 12px;pointer-events:none}
.ls-title span{font-size:10px;letter-spacing:.2em}.ls-title h3{font:32px/1.3 'Yu Mincho',serif;margin:5px 0}.ls-title p{font-size:13px;margin:0}
.ls-controls{position:absolute;right:2%;top:1%;z-index:5}.ls-visual{position:absolute;inset:0;pointer-events:none}.ls-visual button{pointer-events:auto}
#letter-story .ls-controls button{font-size:12px;background:#100e1bdd;padding:4px 12px;min-height:40px}
#letter-story .ls-hotspot{position:absolute;transform:translate(-50%,-50%);margin:0;padding:7px 15px;border:1px solid #ffe1a0;border-radius:30px;background:#191426dc;color:#fff0ce;box-shadow:0 0 16px #ffd98377;animation:ls-pulse 2s ease-in-out infinite}
#letter-story .ls-hotspot[data-done=true]{border-color:#b3dbd9;box-shadow:none;animation:none}
.ls-count{position:absolute;bottom:3%;left:3%;color:#ffe1ad;background:#100e1bcf;padding:5px 15px;border-radius:30px;font-size:14px}
.ls-dialogue{border:1px solid #76627d;border-radius:12px;background:linear-gradient(130deg,#2c2033,#131522);padding:18px 22px;margin-top:10px}.ls-speaker{color:#f2c791;font-size:13px;letter-spacing:.12em}.ls-dialogue>p{font-size:17px;line-height:1.85;margin:7px 0}.ls-actions{display:flex;flex-wrap:wrap;gap:8px}
#letter-story .ls-actions button{margin:4px 0;flex:0 1 auto}#letter-story .ls-primary{background:linear-gradient(110deg,#d8be83,#b79466);color:#241724;border-color:#ffe7b6;font-weight:600}#letter-story .ls-primary:hover:not(:disabled){background:#f1d69e}
.ls-dust{position:absolute;inset:0;pointer-events:none}.ls-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff2b9;box-shadow:0 0 8px 2px #ebc566;animation:ls-drift 4s ease-in-out infinite}
#letter-story .ls-envelope{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-4deg);width:36%;height:30%;font-size:75px;background:#edddbc;color:#593e38;border:2px solid #bc976b;box-shadow:0 10px 70px #070510;white-space:pre-line;margin:0;transition:transform .4s}
#letter-story .ls-envelope.opened{font:24px/2 'Yu Mincho',serif;transform:translate(-50%,-50%);height:44%;background:#fff0d0}
.ls-light-target{position:absolute;left:58%;top:18%;width:29%;height:53%;border:1px dashed #d8f1ff9c;border-radius:50%;background:radial-gradient(ellipse,#d3f8ff55,transparent 70%);box-shadow:0 0 40px #b5ddff44;color:#e0f7ff;text-align:center;font-size:13px}
#letter-story .ls-paper{position:absolute;left:35%;top:57%;width:32%;height:41%;transform:translate(-50%,-50%) rotate(-5deg);background:#f5e8c9;color:#513d3e;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:8px;margin:0;touch-action:none;cursor:grab;box-shadow:0 10px 55px #000b;transition:box-shadow .4s}
.ls-paper span,.ls-paper strong{font:18px/1.7 'Yu Mincho',serif}.ls-paper-to{align-self:flex-start}.ls-hidden-words{opacity:0;transition:opacity 1.2s;color:#5d4776}.in-light .ls-hidden-words{opacity:1}#letter-story .ls-paper.in-light{box-shadow:0 0 65px #dfecffbb}
.ls-owner-halo{position:absolute;left:78%;top:25%;width:20%;height:48%;border-radius:50%;box-shadow:0 0 80px #a0bce65c inset;animation:ls-pulse 2s infinite}
.ls-thought{position:absolute;bottom:8%;left:15%;width:70%;padding:22px;box-sizing:border-box;background:#171222eb;color:#fbe8cf;border:1px solid #a990aa;border-radius:15px;text-align:center}
.ls-craft-table{position:absolute;left:18%;top:25%;width:64%;height:66%;background:radial-gradient(ellipse,#2b173eee,#171028d9 60%,transparent 72%);border-radius:50%}
#letter-story .ls-craft-target{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:30%;height:47%;margin:0;border:2px solid #d8c286;border-radius:50%;background:radial-gradient(#ad87dc33,#100d23bb);box-shadow:0 0 35px #d6b66855;font-size:16px}
.ls-slots{display:flex;justify-content:center}.ls-slots img{width:40%;height:100px;object-fit:contain}
#letter-story .ls-material{position:absolute;top:53%;transform:translate(-50%,-50%);width:20%;margin:0;display:flex;flex-direction:column;align-items:center;padding:12px;background:#151322d9;touch-action:none;z-index:2}
.ls-material.paper{left:20%}.ls-material.sand{left:80%}.ls-material img{width:100%;height:130px;object-fit:contain}.ls-material span{font-size:13px}.ls-material[aria-pressed=true]{outline:3px solid #ffe4a0}.ls-material.placed{opacity:.25!important;pointer-events:none}.ls-recipe-caption{font-size:13px!important;color:#d8c6ae}
#letter-story .ls-reward{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:25%;height:65%;border:none;background:radial-gradient(#ffdf8555,transparent 68%);padding:0;margin:0;filter:drop-shadow(0 0 25px #e9c77788)}
.ls-reward img{width:100%;height:100%;object-fit:contain}.ls-crafted .ls-reward{animation:ls-arrive 1s ease-out}
.ls-reward-name{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);padding:8px 24px;background:#171323e8;border:1px solid #d7b37c;color:#ffe6b2;white-space:nowrap}
.ls-scene[data-mode=displayed] .ls-reward{left:13%;top:34%;width:13%;height:28%}.ls-scene[data-mode=displayed] .ls-reward-name{left:16%;bottom:39%;font-size:13px}
.ls-archive{padding:10px 18px;background:#1d1827;border-radius:10px;margin-top:12px}
@keyframes ls-pulse{50%{filter:brightness(1.22);box-shadow:0 0 25px #eac98688}}
@keyframes ls-drift{50%{transform:translateY(-12px);opacity:.35}}
@keyframes ls-arrive{from{opacity:0;filter:brightness(4) blur(5px);scale:.6}to{opacity:1;filter:brightness(1);scale:1}}
@media(max-width:600px){
#letter-story{padding:8px;font-size:16px}.letter-toolbar span{font-size:9px}.letter-hero h2{font-size:19px}.letter-foot{font-size:11px}
.ls-title{padding:4px 8px;top:2%}.ls-title span{display:none}.ls-title h3{font-size:18px}.ls-title p{font-size:10px}
#letter-story .ls-hotspot{font-size:12px;padding:3px 9px;min-height:44px}.ls-count{font-size:10px;padding:2px 7px}.ls-controls{top:0}#letter-story .ls-controls button{min-height:32px;font-size:10px;padding:0 8px}
.ls-dialogue{padding:13px}.ls-dialogue>p{font-size:16px}.ls-actions button{font-size:14px!important}
#letter-story .ls-paper{width:44%;height:58%;padding:8px;gap:2px}.ls-paper span,.ls-paper strong{font-size:11px;line-height:1.5}
#letter-story .ls-envelope{font-size:45px;width:44%;height:42%}#letter-story .ls-envelope.opened{font-size:14px;height:56%}
.ls-thought{font-size:12px;padding:10px;bottom:5%}
#letter-story .ls-material{width:24%;padding:4px}.ls-material img{height:62px}.ls-material span{font-size:10px}
#letter-story .ls-craft-target{font-size:11px;padding:5px;width:31%;height:51%}.ls-slots img{height:45px}
.ls-reward-name{font-size:12px;padding:4px 10px}.ls-scene[data-mode=displayed] .ls-reward-name{font-size:10px;left:23%;bottom:28%}
}
@media(prefers-reduced-motion:reduce){#letter-story *,#letter-story *::before{animation:none!important;transition:none!important}}
#letter-story .ls-hotspot{white-space:nowrap;width:max-content;max-width:none}
#letter-story .letter-toolbar{position:sticky;top:-14px;z-index:10;background:#100e1bf5}
@media(max-width:600px){#letter-story .letter-toolbar{top:-8px}}