#letter-story{box-sizing:border-box;width:min(900px,calc(100% - 24px));max-height:92dvh;padding:24px;border:1px solid #9d7f9d;border-radius:18px;color:#f5e9ef;background:linear-gradient(140deg,#282036,#111222);font:17px/1.9 system-ui;text-align:left}#letter-story::backdrop{background:#070613d9}#letter-story button,.letter-entry button,.letter-hub button{font:inherit;min-height:46px;cursor:pointer}#letter-story button{padding:10px 18px;border:1px solid #967e99;border-radius:9px;background:#35283e;color:#ffebc2;margin:8px 8px 8px 0}#letter-story button:hover:not(:disabled){background:#4c3553}#letter-story button:disabled{opacity:.5;cursor:default}#letter-story button:focus-visible,.letter-hub button:focus-visible{outline:3px solid #ffd6a3;outline-offset:3px}.letter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.letter-toolbar span,.letter-hub>span,.letter-entry span{font-size:12px;letter-spacing:.13em;color:#e7c895}.letter-hero{min-height:240px;display:flex;align-items:end;border-radius:12px;overflow:hidden;background:linear-gradient(0deg,#111321 0%,#11132166 80%),url('../assets/entrances-v1/star-room.png') center 35%/cover}.letter-hero>div{padding:22px}.letter-hero h2{font:32px/1.4 'Yu Mincho',serif;color:#ffe6bf;margin:8px 0}.letter-hero p{margin:0}.letter-steps{display:flex;justify-content:space-between;gap:5px;list-style:none;padding:15px 0;border-bottom:1px solid #756079;color:#b2a4b9;font-size:14px}.letter-steps .active{color:#ffdda4;border-bottom:2px solid;padding-bottom:6px}.letter-dialogue{border-left:3px solid #c892ba;padding:12px 18px;background:#ffffff05}.letter-clue{border:1px solid #695875;border-radius:12px;padding:16px;margin:12px 0}.letter-clue h3{margin:0;color:#edcb95}.letter-foot,#letter-status{font-size:14px;color:#dbc5df}.letter-recipe{display:flex;gap:20px;justify-content:center}.letter-recipe figure{margin:0;text-align:center}.letter-recipe img{width:120px;height:120px;object-fit:contain}.letter-complete{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;padding:20px;background:radial-gradient(ellipse at 20% 50%,#80613c66,transparent 70%);border:1px solid #c5a26f;border-radius:12px}.letter-complete img{width:100%;height:290px;object-fit:contain}.letter-complete h3{font-size:26px;color:#ffe1a9}.letter-entry{display:flex;gap:18px;align-items:center;padding:22px;margin:24px 0;background:linear-gradient(115deg,#302333,#151a2b);border:1px solid #a28569;border-radius:14px}.letter-entry>img{width:100px;height:130px;object-fit:contain}.letter-entry h3{font-size:23px;margin:6px 0}.letter-entry p{line-height:1.8}.letter-hub{background:linear-gradient(120deg,#302333,#141b29);border:1px solid #c29d68!important;border-radius:12px;padding:20px!important;margin:20px 0}.letter-hub h3{font-size:24px;color:#ffdda4}.letter-hub p{line-height:1.8}#letter-shelf-item{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#1c182b;border:1px solid #8b7493;border-radius:10px;padding:16px;color:#ffe3b0}#letter-shelf-item img{width:65px;height:100px;object-fit:contain}#letter-shelf-item small{font-size:13px;color:#cfbfda}#letter-body details{padding:16px;border:1px solid #695875;border-radius:12px}#letter-body summary{cursor:pointer;color:#ffe1a9}
@media(max-width:600px){#letter-story{padding:14px;font-size:16px}.letter-hero{min-height:200px}.letter-hero h2{font-size:27px}.letter-hero>div{padding:15px}.letter-toolbar span{font-size:10px}.letter-complete{grid-template-columns:1fr;padding:15px;gap:0}.letter-complete img{height:210px}.letter-complete h3{margin:8px 0}.letter-entry{padding:15px;gap:12px;align-items:start}.letter-entry>img{width:56px;height:90px}.letter-entry h3{font-size:20px}#letter-shelf-item{flex-wrap:wrap}.letter-steps{font-size:13px}.letter-recipe img{width:100px;height:100px}}