*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #fafafa;--paper: #ffffff;--paper-border: #e4e4e4;--text: #1a1a1a;--muted: #bababa;--button-bg: #1a1a1a;--button-text: #ffffff;--canvas-border: #c0bdb8}body{background-color:var(--bg);color:var(--text);font-family:Work Sans,sans-serif;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:3rem 1rem 2rem;overscroll-behavior:none;scrollbar-width:none;-ms-overflow-style:none}body::-webkit-scrollbar{display:none}.dot-grid{width:100%;height:calc(var(--vh, 1vh) * 100);position:fixed;left:0;top:0;background:linear-gradient(90deg,#fafafa 21px,#fafafa00 1%) center,linear-gradient(#fafafa 21px,#fffafa00 1%) center,#a5a5a5!important;background-size:22px 22px!important;z-index:-1}main{width:100%;max-width:420px;flex:1;display:flex;flex-direction:column;align-items:center;gap:2rem}.letter-wrapper{width:100%;position:relative;isolation:isolate}.letter-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;box-shadow:0 6px 16px #00000014,0 16px 40px #0000000f;clip-path:polygon(-40px 0,calc(100% - 2rem) 0,calc(100% + 40px) calc(2rem + 40px),calc(100% + 40px) calc(100% + 60px),-40px calc(100% + 60px))}.paper{position:relative;background-color:var(--paper);border:1px solid var(--paper-border);border-radius:0;padding:1rem 1.5rem 2.5rem;display:flex;flex-direction:column;gap:1.5rem}.paper-fold{position:absolute;top:-1px;right:-1px;width:calc(2rem + 1px);height:calc(2rem + 1px);background:linear-gradient(225deg,rgb(250,250,250) 50%,var(--paper-border) 50%)}h1{font-family:EB Garamond,sans-serif;font-size:2rem;font-weight:400;letter-spacing:.01em;color:var(--text)}textarea{width:100%;min-height:calc(2.2em * 6);background:transparent;border:none;border-bottom:1px solid var(--paper-border);color:var(--text);font-family:Work Sans,sans-serif;font-size:1rem;line-height:2.2;padding:0;resize:none;overflow:hidden;outline:none;caret-color:var(--text);background-image:repeating-linear-gradient(transparent,transparent calc(2.2em - 1px),var(--paper-border) calc(2.2em - 1px),var(--paper-border) 2.2em)}textarea::placeholder{color:var(--muted)}.drawing-section{display:flex;flex-direction:column;gap:.5rem}.drawing-header{display:flex;align-items:center;justify-content:flex-end}.drawing-label{font-size:.85rem;color:var(--muted)}#clear-btn{font-family:Work Sans,sans-serif;font-size:.8rem;background:var(--bg);border:solid 1px var(--canvas-border);background-color:#fafafa;color:#555;padding:.2rem .6rem;cursor:pointer;border-radius:0}#clear-btn:hover{opacity:.85}#clear-btn:disabled{opacity:.3;cursor:not-allowed}#canvas-container{position:relative;border:1px dashed var(--paper-border);border-radius:0;overflow:hidden;cursor:crosshair;touch-action:none}#canvas-container canvas{display:block}#canvas-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--muted);pointer-events:none}#signature{width:100%;background:transparent;border:none;border-bottom:1px solid var(--paper-border);color:var(--text);font-family:EB Garamond,serif;font-style:italic;font-size:1.1rem;padding:.25rem 0;outline:none;caret-color:var(--text)}#signature::placeholder{color:var(--muted);font-style:italic}#send-btn img{width:1.1em;height:1.1em;vertical-align:middle}#send-btn{font-size:1.1rem;color:var(--button-text);border:none;cursor:pointer;letter-spacing:.03em;transition:opacity .15s;display:flex;align-items:center;gap:.5rem;background-color:#171717;border-radius:14px;box-shadow:0 0 10px #ffffff91 inset;padding:14px 22px 12px;transition:all .2s ease-in-out}#send-btn:hover{opacity:.9}#send-btn:disabled{opacity:.6;cursor:not-allowed}#thanks-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;flex:1;justify-content:center}.view-letters-btn{font-family:Work Sans,sans-serif;font-size:1.1rem;color:var(--button-text);text-decoration:none;background-color:#171717;border-radius:14px;box-shadow:0 0 10px #ffffff91 inset;padding:14px 22px 12px;letter-spacing:.03em;transition:opacity .15s;display:inline-flex;align-items:center}.view-letters-btn:hover{opacity:.9}footer{font-size:.85rem;color:var(--muted);letter-spacing:.05em;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-top:60px}.footer-logos{display:flex;align-items:center;gap:1.5rem}.footer-logos a{display:flex;align-items:center}footer p{font-size:15px;color:#929292;margin-bottom:0}footer a{text-decoration:none}.footer-logos img{display:block;height:36px;max-width:180px;width:auto;object-fit:contain;object-position:center;opacity:.85;transition:opacity .15s}@media(hover:hover){.footer-logos a:hover img{opacity:.6}footer a:hover{opacity:.6}}.footer-divider{width:1px;height:36px;background-color:#000}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000026;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:99}.overlay.visible{opacity:1}.toast{display:none;position:fixed;top:4rem;left:50%;transform:translate(-50%) translateY(calc(-4rem - 100%));color:var(--button-text);font-size:1.2rem;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;white-space:nowrap;z-index:100;padding:12px 22px 14px;border-radius:14px;background-color:#171717;box-shadow:0 0 10px #ffffff91 inset}.toast.fading{opacity:0;transform:translate(-50%) translateY(0);transition:opacity .3s ease}.toast.success{background-color:#2a312e;box-shadow:0 0 10px #76e3ab inset;color:#76e3ab}.toast.error{background-color:#3a2d2d;box-shadow:0 0 10px #f77 inset;color:#f77}.toast.visible{transform:translate(-50%) translateY(0)}