main:has(.letters-page:not(.letters-missing)){padding-top:1rem;padding-bottom:0}.letters-page:not(.letters-missing){max-width:100rem;padding:0;height:calc(100dvh - 1rem);min-height:30rem}@media(min-width:821px)and (min-height:561px){.letters-page:not(.letters-missing){container-type:inline-size}}.letters-layout{height:100%;display:flex}.letters-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.letters-back{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;min-height:44px;font-weight:600}.letters-back .ico{width:17px;height:17px;stroke-width:2}.letters-head{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:0 0 .75rem;border-bottom:1px solid var(--border)}.letters-head .letters-back{justify-content:center;width:44px;flex:none;align-self:center;border-radius:var(--r-full)}.letters-head .reader-avatar{width:44px;height:44px}.letters-head .reader-avatar .reader-face{font-size:var(--type-body)}.letters-title{flex:1 1 10rem;min-width:0}.letters-title h1{margin:0;font-size:var(--type-card);overflow-wrap:anywhere}.letters-title p{margin:0;overflow-wrap:anywhere}.letters-compare{flex:0 1 auto;text-align:center}.letters-convos,.letters-about{display:none}@container (min-width:52rem){.letters-convos:not([hidden]){display:flex;flex-direction:column;gap:.5rem;flex:0 0 15rem;min-width:0;overflow-y:auto;padding:0 .75rem 1rem 0;margin-right:1rem;border-right:1px solid var(--border)}.letters-layout:has(>.letters-convos:not([hidden])) .letters-head .letters-back{display:none}}@container (min-width:68rem){.letters-about{display:flex;flex-direction:column;align-items:center;gap:1rem;flex:0 0 16rem;min-width:0;overflow-y:auto;padding:.5rem 0 1rem 1rem;margin-left:1rem;border-left:1px solid var(--border)}.letters-layout:has(>.letters-about) .letters-head>.reader-avatar,.letters-layout:has(>.letters-about) .letters-head>.letters-compare{display:none}}.letters-convos h2{margin:0;padding:.25rem .5rem 0;font-size:var(--type-card)}.letters-convo-list{padding:0}.letters-convo-list .friends-float-row{flex-wrap:nowrap}.letters-convo-list a[aria-current=page],.letters-convo-list a[aria-current=page]:hover{background:var(--nav-selected);color:var(--nav-selected-text)}.letters-about-name{display:grid;margin:0;text-align:center;overflow-wrap:anywhere}.letters-about-bio{margin:0;text-align:center;overflow-wrap:anywhere}.letters-about section{align-self:stretch}.letters-about h2{margin:0 0 .5rem;font-size:var(--type-body);color:var(--muted)}.letters-about ul{list-style:none;margin:0;padding:0}.letters-about-books{display:flex;flex-direction:column;gap:.75rem}.letters-about-books li{display:flex;align-items:center;gap:.75rem}.letters-about-books li>div{display:flex;flex-direction:column;gap:.25rem;min-width:0;overflow-wrap:anywhere}.letters-about-books progress{width:100%;height:.5rem;accent-color:var(--accent)}.letters-about-favourites{display:flex;gap:.5rem}.discover-cover.letters-about-cover{flex:none;width:3.5rem}.discover-cover.letters-about-cover>span{padding:.25rem;overflow:hidden}.letters-thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:1rem .5rem}.letters-thread:focus-visible{outline-offset:-3px}.letters-older{display:flex;width:fit-content;margin:0 auto 1rem}.letters-thread>.letters-empty{flex:1;display:grid;place-items:center;margin:0;max-width:none}.letters-list{list-style:none;width:100%;max-width:48rem;margin:auto auto 0;padding:0;display:flex;flex-direction:column;gap:.25rem}.letters-day,.letters-new{display:flex;align-items:center;gap:.75rem;margin-block:.75rem .25rem;font-size:var(--type-body);font-weight:600}.letters-day{color:var(--muted)}.letters-day::before,.letters-day::after{content:"";flex:1;height:1px;background:var(--border)}.letters-new{color:var(--accent)}.letters-new::before{content:"";flex:1;height:2px;background:var(--accent-line)}.letter{display:flex;align-items:flex-end;gap:.5rem;max-width:min(40rem,85%)}.letter-theirs{align-self:flex-start}.letter-mine{align-self:flex-end}.letters-list>.letter-first:not(:first-child){margin-top:.75rem}.reader-avatar.letter-avatar{width:2rem;height:2rem}.letter-avatar .reader-face{font-size:var(--type-body)}.letter:not(.letter-last)>.letter-avatar{visibility:hidden}.letter-has-reacts>.letter-avatar{margin-bottom:1.25rem}.letter-stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;min-width:0}.letter-mine .letter-stack{align-items:flex-end}.letter-meta{margin:0 .75rem;font-size:var(--type-body);color:var(--muted)}.letter-meta strong{color:var(--text)}.letter-line{position:relative;display:flex;align-items:center;gap:.25rem;min-width:0;max-width:100%}.letter-mine .letter-line{flex-direction:row-reverse}.letter-sheet{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem;border-radius:1.125rem;background:var(--surface-2);color:var(--text)}.letter-theirs .letter-sheet{border-bottom-left-radius:.375rem}.letter-theirs:not(.letter-first) .letter-sheet{border-top-left-radius:.375rem}.letter-mine .letter-sheet{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:.375rem}.letter-mine:not(.letter-first) .letter-sheet{border-top-right-radius:.375rem}.letter-has-reacts .letter-sheet{padding-bottom:1rem}.letter.letter-removed .letter-sheet{background:transparent;color:var(--muted);border:1px dashed var(--border-strong)}.letter-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.letter-tombstone{margin:0;color:var(--muted)}.letter-book{display:flex;align-items:center;gap:.75rem}.discover-cover.letter-cover{width:56px;height:84px;flex:none;border-radius:5px;color:var(--accent-line);background:var(--accent-soft);border:1px solid var(--border)}.letter-book-info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.letter-book-info strong{line-height:1.35;overflow-wrap:anywhere}.letter-book-meta{font-size:var(--type-body);color:var(--muted)}.letter-mine .letter-book-meta{color:inherit}.letter-book-info .btn{align-self:flex-start;margin-top:.25rem}.letters-page .btn.done[aria-disabled=true],.letters-page .btn.done[aria-disabled=true]:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);cursor:default}.letter-reacts{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.125rem;margin:-.75rem .75rem 0;padding:.125rem .25rem;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--text);line-height:1}.letter-react-theirs,.letters-page button.letter-react-mine{display:inline-flex;align-items:center;min-height:0;min-width:0;padding:.125rem .25rem;border-radius:var(--r-full)}.letters-page button.letter-react-mine{position:relative;border:0;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line);font:inherit;cursor:pointer}.letters-page button.letter-react-mine::after{content:"";position:absolute;inset:-.5rem}.chip.letter-chip{display:inline-flex;align-items:center;min-height:44px;padding:.25rem .75rem;border-radius:999px;font-size:var(--type-body);background:transparent;color:var(--muted);border:1px solid var(--border);font-weight:400;cursor:default}.letter-face{display:inline-flex;align-items:center}.letter-face .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.letter-haha{width:2.2em;font-size:.625rem;line-height:1.1;font-weight:600;text-align:center;transform:rotate(-12deg)}.letter-emoji{font-size:1.125rem;line-height:1}.letter-actions{position:absolute;z-index:2;bottom:calc(100% - .75rem);left:.5rem;width:max-content;display:flex;align-items:center;gap:.125rem;padding:.125rem;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-strong);opacity:0;pointer-events:none}.letter-mine .letter-actions{left:auto;right:.5rem}.letter-actions .btn.small{border-radius:var(--r-full)}.letter:hover .letter-actions,.letter:focus-within .letter-actions,.letter-actions:has([aria-expanded=true]){opacity:1;pointer-events:auto}.letters-page .letter-react{width:44px;padding:0;justify-content:center;border-radius:var(--r-full)}.letters-page .letter-react .ico{width:20px;height:20px;stroke-width:2;stroke-linecap:round}.menu.letter-menu{top:calc(100% + .25rem);bottom:auto;left:0;right:auto;z-index:5;width:max-content;gap:0;padding:.25rem;border-color:var(--border-strong);animation:none}.letter-mine .menu.letter-menu{left:auto;right:0}.menu.letter-menu.letter-menu-up{top:auto;bottom:calc(100% + .25rem)}.letter-tapbacks,.letter-emoji-grid{display:grid;grid-template-columns:repeat(6,44px);gap:2px}.letter-emoji-grid{margin-top:.25rem;padding-top:.25rem;border-top:1px solid var(--border)}.letters-page .letter-emoji-item{display:grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:1.375rem;line-height:1;cursor:pointer}.letters-page .letter-emoji-item:hover,.letters-page .letter-emoji-item:focus-visible{background:var(--accent-soft)}.letters-page .letter-emoji-item[aria-checked=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent)}.letter-tapback .ico{width:20px;height:20px}@media(pointer:coarse){.letter-line,.letter-mine .letter-line{flex-direction:column;align-items:flex-start}.letter-mine .letter-line{align-items:flex-end}.letter-actions,.letter-mine .letter-actions{position:static;z-index:auto;opacity:1;pointer-events:auto;max-height:0;overflow:hidden;padding:0;border:0;background:none}.letter:focus-within .letter-actions,.letter-actions:has([aria-expanded=true]){max-height:none;overflow:visible}.letter:focus-within .letter-actions{margin-top:.25rem}.menu.letter-menu,.letter-mine .menu.letter-menu,.menu.letter-menu.letter-menu-up{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:60;width:auto;padding:.75rem 1rem calc(1rem + env(safe-area-inset-bottom));border-radius:var(--r) var(--r) 0 0;border-width:1px 0 0}.letter-tapbacks,.letter-emoji-grid{grid-template-columns:repeat(6,minmax(44px,1fr))}.letters-page .letter-emoji-item{width:auto}}.letters-page .notice{animation:none}.letters-error{margin:.5rem 0}.letters-foot{flex:none;padding:.5rem 0 1rem}.letters-composer{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:48rem;margin:0 auto}.letters-compose-row{display:flex;align-items:flex-end;gap:.25rem;padding:.25rem;border:1px solid var(--border-strong);border-radius:1.625rem;background:var(--surface)}.letters-compose-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.letters-compose-row>.btn{flex:none;width:44px;padding:0;justify-content:center;border-radius:var(--r-full)}.letters-compose-row .ico{width:20px;height:20px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.letters-page .letters-draft,.letters-page .letters-draft:focus{flex:1;width:auto;min-height:44px;max-height:12rem;padding:.5rem .25rem;border:0;border-radius:0;background:transparent;box-shadow:none;resize:none;field-sizing:content}.letters-page .letters-draft:focus-visible{outline-offset:2px}.letters-send-error{margin:0}.letters-attached{display:flex;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem .75rem;border-radius:6px;background:var(--tidepool)}.letters-attached>.ico{color:var(--accent)}.letters-attached-text{flex:1;min-width:0;overflow-wrap:anywhere}.letters-count{margin:0 1rem;font-size:var(--type-body);color:var(--muted);font-variant-numeric:tabular-nums}.letters-count:empty{display:none}.letters-readonly{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:12px;background:var(--surface);border:1px solid var(--border-strong)}.letters-readonly p{margin:0;color:var(--muted)}.letters-page .btn:active,.letters-page .chip:active,.letters-attach .btn:active{transform:none}.letters-badge{padding:.05rem .5rem;border-radius:999px;background:var(--on-accent);color:var(--accent);font-size:var(--type-body)}.letters-attach h2{margin:0 0 .5rem;font-size:var(--type-section)}.letters-attach>p{margin:0}.letters-attach .feature-field input{width:100%}.letters-pick{display:flex;flex-direction:column;gap:.25rem;max-height:300px;overflow-y:auto;padding:.5rem;margin:0 -.5rem}.letters-pick-item{display:flex;align-items:center;gap:.75rem;width:100%;min-height:56px;padding:.5rem .75rem;font:inherit;text-align:left;color:var(--text);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer}.letters-pick-item:hover{background:var(--surface-2)}.letters-pick-item[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent-line)}.letters-pick-item>.ico{color:var(--accent);stroke-width:2.2}.letters-pick-text{flex:1;min-width:0;display:flex;flex-direction:column}.letters-pick-text strong{line-height:1.35}.letters-pick-text .muted{font-size:var(--type-body)}.letters-pick-status{margin:0;padding:.5rem .25rem;color:var(--muted)}.letters-pick-status:empty{display:none}@keyframes letter-arrive{from{transform:translateY(5px)}}.letter-in{animation:letter-arrive 320ms var(--ease-out)}@media(prefers-reduced-motion:reduce){.letter-in{animation:none}}:root[data-motion=reduced] .letter-in,:root[data-reading-motion=reduced] .letter-in{animation:none}@media(max-width:820px),(max-height:560px){.letters-page:not(.letters-missing){height:auto;min-height:0}.letters-layout{height:auto}.letters-thread{flex:none;overflow:visible;padding-inline:0}.letters-foot{position:sticky;bottom:0;z-index:6;padding-bottom:0}html:has(.letters-page:not(.letters-missing)){scroll-padding-block-end:calc(var(--letters-foot-height, 6rem) + 1rem)}}@media(max-height:560px){.letters-foot{position:static}html:has(.letters-page:not(.letters-missing)){scroll-padding-block-end:3rem}}@media(max-width:820px){main:has(.letters-page:not(.letters-missing)){padding-top:0}.letters-head{padding-top:.25rem}.letters-head .letters-compare{padding:.25rem .5rem}.letter{max-width:92%}.letters-foot{margin-inline:-1rem}.letters-composer,.letters-readonly{padding:.5rem 1rem .75rem;background:var(--bg);border-radius:0;border:0;border-top:1px solid var(--border)}}