.letters-page{max-width:660px;color:var(--text);margin:0 auto;padding:26px 8px 36px}.letter-section-title,.letter-reader-toolbar,.letter-paper-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.app-shell-letters,.app-shell-letters .main-column{background:var(--surface)}.app-shell-letters{overflow-x:clip}.letters-detail .app-back-button{margin-bottom:16px}.letters-home>.app-back-button{flex:none;align-self:flex-start;margin-bottom:20px}.letter-icon-button{width:40px;height:40px;color:var(--text);background:0 0;border:0;border-radius:12px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.letter-icon-button:hover{background:var(--surface2)}.letters-heading{margin-bottom:24px}.letters-heading h1{margin:0 0 4px;font-size:clamp(27px,4vw,34px);font-weight:750;line-height:1.4}.letters-heading p{color:var(--muted);margin:0;font-size:15px}.letter-pick-card{background:0 0;padding:0}.letter-home-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.letter-home-actions .letter-secondary{margin-top:0}.letter-home-actions .letter-pick-note{grid-column:1/-1}.letter-pick-intro{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.letter-pick-intro h2{margin:0 0 10px;font-size:clamp(22px,3.5vw,28px);line-height:1.4}.letter-pick-intro p{color:var(--muted);margin:0;font-size:15px}.letter-envelope{background:#fffaf0;border:1px solid #eddcba;border-radius:9px;flex:none;justify-content:center;align-items:center;width:112px;height:78px;display:inline-flex;position:relative;overflow:visible;transform:rotate(12deg);box-shadow:0 6px 10px #275e7010}.letter-envelope:before,.letter-envelope:after{content:"";background:#e8d7b8;width:63%;height:2px;position:absolute;bottom:26px}.letter-envelope:before{left:-1px;transform:rotate(-34deg)}.letter-envelope:after{right:-1px;transform:rotate(34deg)}.letter-envelope-flap{clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 1px #e8d7b8);background:#fffdfa;width:84%;height:54%;position:absolute;top:0;left:8%}.letter-envelope>svg{color:#f8c541;z-index:1;width:30px;height:30px;position:relative}.letter-envelope>i{background:#f8c541;border-radius:3px;width:4px;height:15px;position:absolute;top:-21px;right:15px;transform:rotate(12deg)}.letter-envelope>i:last-child{top:-6px;right:-9px;transform:rotate(48deg)}.letter-envelope.small{width:64px;height:46px;transform:rotate(8deg)}.letter-envelope.small:before,.letter-envelope.small:after{bottom:14px}.letter-envelope.small>svg{width:21px;height:21px}.letter-envelope.small>i{display:none}.letter-topics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px;display:grid}.letter-topics button{color:var(--text);background:0 0;border:0;border-radius:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:112px;padding:4px 0;font-size:14px;font-weight:650;display:flex}.letter-topic-art{aspect-ratio:1;flex:none;width:min(88px,100%);display:block}.letter-topic-art img{object-fit:contain;width:100%;height:100%;transition:transform .18s;display:block}.letter-topic-label{white-space:nowrap;border-bottom:2px solid #0000;padding-bottom:3px;line-height:1.4}.letter-topics button.selected{color:#148e99}.letter-topics button.selected .letter-topic-label{border-bottom-color:currentColor}.letter-topics button:hover:not(:disabled) .letter-topic-art img,.letter-topics button.selected .letter-topic-art img{transform:translateY(-3px)}.letter-topics button:focus-visible{outline-offset:3px;border-radius:8px;outline:2px solid #238f9c}@media (prefers-reduced-motion:reduce){.letter-topic-art img{transition:none}}.letter-primary,.letter-secondary{text-align:center;border-radius:15px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 16px;font-size:16px;font-weight:650;text-decoration:none;display:flex}.letter-primary{color:#193747;background:#ffda5c;border:1px solid #f2c64b}.letter-primary:hover{background:#ffd044}.letter-secondary{border:1px solid var(--violet);background:var(--surface);color:var(--violet);margin-top:12px}.letter-secondary:hover{background:var(--surface3)}.letter-pick-note{text-align:center;color:var(--muted);margin-top:12px;font-size:11px;display:block}.letter-mailboxes{margin-top:26px}.letter-section-title{margin-bottom:10px}.letter-section-title h2{margin:0;font-size:20px}.letter-mailbox-group{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}.letter-mailbox-row{align-items:center;gap:13px;min-height:88px;padding:17px;display:flex}.letter-mailbox-row+.letter-mailbox-row{border-top:1px solid var(--line)}.letter-mailbox-row:hover{background:var(--surface2)}.letter-mailbox-row>span:nth-child(2){flex:1;min-width:0}.letter-mailbox-row strong,.letter-mailbox-row small{display:block}.letter-mailbox-row strong{font-size:16px}.letter-mailbox-row small{color:var(--muted);margin-top:3px;font-size:12px}.letter-mailbox-icon{background:var(--surface3);width:48px;height:48px;color:var(--violet);border-radius:50%;flex:none;place-items:center;display:grid}.letter-mailbox-icon.received{color:#178c95;background:#fff5d5}.letter-mailbox-count{text-align:center;min-width:22px;color:var(--muted);font-size:12px}.letter-feedback{border:1px solid var(--line);background:var(--surface2);border-radius:13px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;padding:14px;font-size:13px;display:flex}.letter-feedback.error{color:#bc435d;background:#fff3f5;border-color:#f2bdc7}.letter-feedback button{white-space:nowrap;color:inherit;background:0 0;border:0;align-items:center;gap:5px;padding:5px;display:inline-flex}.letter-paper{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:25px;box-shadow:0 8px 25px #29566809}.letter-paper-top{color:var(--muted);min-height:46px;margin-bottom:30px;font-size:13px}.letter-paper textarea{resize:vertical;width:100%;min-height:200px;color:var(--text);outline-offset:5px;background:0 0;border:0;padding:0;font-size:18px;line-height:1.85}.letter-paper textarea::placeholder{color:var(--soft)}.letter-counter{text-align:right;color:var(--soft);margin-top:5px;font-size:11px;display:block}.letter-compose-note{text-align:center;color:var(--muted);margin:17px 0;font-size:12px;line-height:1.8}.letter-reader-toolbar{margin-bottom:16px}.letter-topic-tag{background:var(--surface3);color:var(--violet);border-radius:20px;padding:5px 13px;font-size:12px;display:inline-block}.letter-topic-tag.crush{color:#bb4a62;background:#ffe3e7}.letter-topic-tag.secret{color:#7365a5;background:#ece8ff}.letter-topic-tag.fun{color:#987218;background:#fff1c9}.letter-reader-status{color:var(--muted);font-size:12px}.letter-body{white-space:pre-wrap;overflow-wrap:anywhere;min-height:140px;margin:0 0 35px;font-size:21px;line-height:1.9}.letter-paper>small{color:var(--muted);font-size:11px}.letter-lease{color:var(--muted);justify-content:center;align-items:center;gap:7px;margin:18px 0;font-size:12px;display:flex}.letter-reply{border:1px solid var(--line);background:var(--surface);border-radius:17px;margin-top:17px;padding:18px}.letter-reply label{margin-bottom:11px;font-size:14px;font-weight:600;display:block}.letter-reply textarea{border:1px solid var(--line);background:var(--surface);width:100%;color:var(--text);resize:vertical;border-radius:12px;padding:12px;font-size:15px}.letter-reply .letter-primary{margin-top:13px}.letter-pass{color:var(--muted);background:0 0;border:0;margin:12px auto 0;padding:12px 25px;display:block}.letter-report-toggle{color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;gap:6px;margin:20px auto;font-size:12px;display:flex}.letter-report-form{border:1px solid var(--line);border-radius:14px;padding:16px}.letter-report-form label{margin-bottom:8px;font-size:13px;display:block}.letter-report-form select{background:var(--surface);width:100%;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px}.letter-chat-actions{margin-top:20px}.letter-box-list{flex-direction:column;gap:13px;display:flex}.letter-list-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:18px}.letter-list-card:hover{border-color:var(--violet)}.letter-list-card>p{-webkit-line-clamp:3;overflow-wrap:anywhere;white-space:pre-wrap;-webkit-box-orient:vertical;margin:13px 0;font-size:15px;display:-webkit-box;overflow:hidden}.letter-list-card>div{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.letter-list-card>div small{text-align:right;flex:1;font-size:11px}.dm-letter-origin{color:var(--violet)}@media (max-width:760px){.letters-page{padding:20px 18px 28px}.app-shell-letters .main-column{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}.letters-home{height:calc(100svh - 68px - env(safe-area-inset-bottom,0px));flex-direction:column;min-height:min-content;padding:16px 18px 20px;display:flex}.letters-home>.app-back-button{margin-bottom:0}.letters-home .letter-pick-card{flex-direction:column;flex:1;justify-content:space-evenly;gap:clamp(12px,2svh,24px);margin:16px 0 24px;display:flex}.letters-home .letter-pick-intro{margin-bottom:0}.letters-home .letter-pick-note{margin-top:0}.letters-heading{margin-bottom:19px}.letters-heading p{font-size:13px}.letter-pick-card{padding:0}.letter-pick-intro{gap:6px;margin-bottom:14px}.letter-pick-intro h2{margin-bottom:6px;font-size:22px;line-height:1.3}.letter-pick-intro p{font-size:13px}.letter-envelope{width:87px;height:64px;margin-right:6px}.letter-envelope:before,.letter-envelope:after{bottom:22px}.letter-topics{gap:9px;margin-bottom:17px}.letters-home .letter-topics{gap:8px;margin-bottom:0}.letters-home .letter-topics button{min-height:clamp(88px,11svh,118px);padding:0;font-size:14px}.letter-topic-art{width:min(72px,100%)}.letter-home-actions .letter-primary,.letter-home-actions .letter-secondary{gap:7px;min-height:clamp(48px,5.8svh,68px);padding:10px 8px;font-size:14px}.letters-home .letter-mailboxes{flex:none;margin-top:0}.letters-home .letter-section-title h2{font-size:18px}.letters-home .letter-mailbox-row{min-height:clamp(66px,9.2svh,112px);padding:11px 13px}.letter-topics button{gap:4px;min-height:98px;padding:3px 0;font-size:13px}.letter-mailbox-row{gap:11px;padding:15px 13px}.letter-mailbox-row strong{font-size:15px}.letter-mailbox-row small{font-size:11px}.letter-mailbox-icon{width:43px;height:43px}.letter-paper{padding:22px 20px}.letter-body{font-size:19px}}@media (max-width:760px) and (min-height:901px){.letters-home .letter-home-actions{grid-template-columns:1fr;gap:12px}.letters-home .letter-pick-intro h2{font-size:clamp(22px,2.5svh,27px)}.letters-home .letter-envelope{width:clamp(87px,10svh,112px);height:clamp(64px,7.5svh,84px)}.letters-home .letter-topic-art{width:min(88px,100%)}}@media (max-width:760px) and (max-height:800px){.letters-home{padding:12px 16px}.letters-home .letter-pick-intro h2{margin-bottom:0;font-size:19px;line-height:1.3}.letters-home .letter-pick-intro p,.letters-home .letter-pick-note,.letters-home .letter-mailbox-row small{display:none}.letters-home .letter-envelope{width:67px;height:49px}.letters-home .letter-topics{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.letters-home .letter-topics button{gap:3px;min-height:clamp(64px,9svh,80px);padding:0;font-size:12px}.letters-home .letter-topic-art{width:min(clamp(42px,7svh,54px),100%)}.letters-home .letter-mailboxes{margin-top:0}.letters-home .letter-section-title{margin-bottom:8px}.letters-home .letter-section-title h2{font-size:16px}.letters-home .letter-mailbox-row{min-height:clamp(48px,8svh,64px);padding:6px 12px}.letters-home .letter-mailbox-icon{width:34px;height:34px}.letters-home .letter-mailbox-icon svg{width:20px;height:20px}}@media (max-width:760px) and (min-height:701px) and (max-height:800px){.letters-home .letter-pick-intro p,.letters-home .letter-pick-note,.letters-home .letter-mailbox-row small{display:block}.letters-home .letter-pick-intro h2{margin-bottom:6px}}@media (max-width:360px){.letters-page{padding-inline:13px}.letter-envelope{width:65px;height:48px}.letter-pick-intro h2{font-size:21px}.letter-mailbox-row small{font-size:10px}}.letter-topic-filter-head{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font-size:14px;display:flex}.letter-topic-filter-head button{border:1px solid var(--line);background:var(--surface);color:#148e99;min-height:36px;font:inherit;cursor:pointer;border-radius:18px;padding:6px 12px}.letter-topic-filter-head button[aria-pressed=true]{background:#e0f6f0;border-color:#65c4b4}.letter-topic-filter-head button:focus-visible{outline-offset:2px;outline:2px solid #20a7b0}.letters-page .letter-topics button,.letters-page .letter-secondary,.letters-page .letter-pass,.letters-page .letter-report-toggle,.letters-page .letter-reply label,.letters-page .letter-report-form label,.letters-page .letter-compose-note,.letters-page .letter-feedback{font-size:max(14px, calc(12px * var(--ui-size-body,1)));line-height:1.7}.letters-page .letter-primary{font-size:max(16px, calc(14px * var(--ui-size-navigation,1)))}.letters-page .letter-mailbox-row strong{font-size:max(16px, calc(14px * var(--ui-size-body,1)))}.letters-page .letter-mailbox-count,.letters-page .letter-counter,.letters-page .letter-paper>small,.letters-page .letter-topic-tag,.letters-page .letter-reader-status,.letters-page .letter-lease,.letters-page .letter-list-card>div,.letters-page .letter-list-card>div small{font-size:max(12px, calc(10px * var(--ui-size-body,1)));line-height:1.6}.letters-page .letter-list-card>p{font-size:max(16px, calc(14px * var(--ui-size-body,1)))}.letters-page .letter-paper-top{font-size:max(14px, calc(12px * var(--ui-size-body,1)))}.letters-page .letter-reply textarea,.letters-page .letter-report-form select{font-size:max(16px, calc(14px * var(--ui-size-body,1)))}
