.contact .paper{padding:17px 22px 18px}
.note-grip{min-height:28px;letter-spacing:.06em;margin-bottom:12px}
.note-grip span{font-size:9px}
.desk-note{position:relative;user-select:text;cursor:auto}
.desk-note textarea,.desk-note input{display:block;box-sizing:border-box;width:100%;border:0;border-radius:0;outline-offset:3px;background:transparent;color:var(--ink);font:11px/1.65 'Courier New',monospace;user-select:text;cursor:text;padding:0;box-shadow:none}
.desk-note textarea{height:120px;resize:none;margin-bottom:22px;background:repeating-linear-gradient(transparent 0,transparent 17px,#66551e20 17px,#66551e20 18px);line-height:18px}
.desk-note input{height:25px;border:0;font-size:9px}
.desk-note input:focus-visible,.desk-note textarea:focus-visible{outline:none}
.desk-note ::placeholder{color:#615127;opacity:.78}
.desk-note .note-trap{display:none}
.note-bottom{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:15px;font-size:9px}
.note-send{font:400 9px 'Courier New',monospace;border:0;padding:5px 0;min-height:28px}
.note-send:disabled{opacity:.5;cursor:wait}
.contact #note-status{font:9px/1.4 'Courier New',monospace;margin:6px 0 0}
.contact #note-status:empty{display:none}
.contact:focus-within{z-index:20}
.contact:has(#note-status:not(:empty)){height:calc(var(--h) + 44px)}
@media(max-width:760px){.contact .paper{padding:15px 20px 18px}.note-grip{margin-bottom:10px}.desk-note textarea,.desk-note input{font-size:16px}.desk-note input{height:30px;font-size:9px}.desk-note textarea{height:135px;line-height:20px;background-size:auto;background-image:repeating-linear-gradient(transparent 0,transparent 19px,#66551e20 19px,#66551e20 20px)}.piece.contact{height:360px}.contact:has(#note-status:not(:empty)){height:404px}.note-bottom{margin-top:10px}.note-send{min-height:36px}}

/* Match the note heading throughout the sender and send controls. */
.note-grip,.desk-note input,.note-send{font-family:'Courier New',monospace;font-weight:400;font-size:9px;letter-spacing:.06em;line-height:normal}
.desk-note input::placeholder{color:var(--ink);opacity:1}

.contact{--paper:#ffcc00;touch-action:manipulation}
.note-back{height:100%}
.contact:has(.note-back[hidden]){height:var(--h)}
.contact .note-front{z-index:1}
@media(max-width:760px){.contact:has(.note-back[hidden]){height:360px}}

/* Full-screen letter: preserve the small typography, relocate the two groups only. */
.expanded-note{position:relative;min-height:max(100dvh,460px);padding:0}
.expanded-note .note-grip{position:absolute;left:40px;top:32px;min-height:28px;display:flex;align-items:center;margin:0}
.expanded-note .desk-note{position:absolute;inset:88px 40px 40px;margin:0;display:flex;flex-direction:column;gap:0}
.expanded-note .desk-note textarea{flex:1;min-height:120px;width:min(620px,100%);height:auto;margin:0 0 22px}
.expanded-note .note-sender,.expanded-note .note-bottom{width:min(220px,100%);flex-shrink:0}
.expanded-note #note-status{font:9px/1.4 'Courier New',monospace;color:var(--ink);width:min(320px,100%);margin:6px 0 0}
.expanded-note #note-status:empty{display:none}
@media(max-width:760px){
  .expanded-note .note-grip{left:24px;top:24px}
  .expanded-note .desk-note{inset:76px 24px 32px}
  .expanded-note .note-sender,.expanded-note .note-bottom{width:min(220px,calc(100% - 64px))}
}

/* Align the send action with the right endpoint of the writing lines. */
.expanded-note .note-bottom{width:min(620px,100%)}
@media(max-width:760px){.expanded-note .desk-note{bottom:88px}}