.letter{position:fixed;inset:0;z-index:50;background:#102f4a;color:#ece8d6;display:grid;align-items:center;padding:7vw;transition:opacity .8s,transform .8s;overflow:auto}.letter[hidden]{display:none}.letter.leaving{opacity:0;transform:translateY(-3%);pointer-events:none}.letter>div{position:relative;z-index:2;max-width:750px}.letter .letter-line{color:#c0cbd0;font-size:14px;margin-bottom:32px}.letter h1{font-size:clamp(38px,5.5vw,78px);line-height:1.25;margin:0 0 30px}.letter p{color:#d1d7d5;font-size:clamp(13px,1.2vw,18px);line-height:2.1}.letter button{border:1px solid #d8ddcc70;background:transparent;color:#eee8d7;padding:15px 24px;margin-top:30px}.thread-mark{position:absolute;inset:10% 6% 10% 66%;border:1px solid #a3b8c440;transform:rotate(7deg);background:linear-gradient(90deg,#fff0,#829db318,#fff0);box-shadow:18px 22px 50px #001a}.thread-mark:after{content:'';position:absolute;inset:16px;border:1px dashed #d9e0d33d}.letter button:hover{background:#e6ead8;color:#173a51}:root{--ink:#173951;--paper:#efebe0}#world{background:#e8e5db}.narrative p{color:#43586c}#action{color:#244c67;border-color:#244c67}#invitation{color:#234763;background:#efebe0eb}.top-controls button{color:inherit}@media(max-width:700px){.thread-mark{inset:12% 4% 12% 55%;opacity:.4}.letter{padding:8vw}.letter h1{font-size:38px}.letter p{font-size:13px}.letter .letter-line{font-size:12px;margin-bottom:25px}}