/* Letter from Santa tool. Page chrome restyled 2026-11 to match style.css; letter designs live in letter.js. Letter fonts are self-hosted so the canvas can always use them (and they work offline). */
@font-face{font-family:"LF Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LF Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LF Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LF Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

.lf{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:18px 0 10px}
@media (min-width:900px){.lf{grid-template-columns:minmax(0,410px) minmax(0,1fr);gap:44px;align-items:start}}
.lf-form{background:var(--white);border:1px solid var(--kraft-l);border-radius:6px;padding:20px 20px 16px;position:relative}
.lf-field{margin:0 0 16px}
.lf-field>label,.lf-legend{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.lf-opt{font-weight:400;color:var(--muted);font-size:.9rem}
.lf input[type=text],.lf select{width:100%;font:inherit;font-size:1rem;padding:10px 12px;color:var(--ink);background:#fff;
  border:1px solid #a8a29e;border-radius:4px}
.lf input[type=text]:focus,.lf select:focus{border-color:var(--ink);outline:2px solid rgba(180,68,43,.35);outline-offset:1px}
.lf input[aria-invalid=true]{border-color:var(--maple)}
.lf-err{color:var(--maple-d);font-size:.92rem;margin:4px 0 0;min-height:0}
.lf-hint{font-size:.85rem;color:var(--muted);margin:3px 0 0}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset.lf-field{border:0;padding:0;min-width:0}
.lf-styles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lf-styles label{display:flex;gap:8px;align-items:center;cursor:pointer;border:1px solid #d6d3d1;border-radius:4px;padding:7px 8px;background:#fff;font-size:.92rem;line-height:1.25}
.lf-styles input{position:absolute;opacity:0;width:1px;height:1px}
.lf-styles label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lf-styles label:has(input:focus-visible){outline:2px solid var(--maple);outline-offset:2px}
.sw{flex:none;width:30px;height:38px;border:1px solid rgba(0,0,0,.25);position:relative}
.sw-parchment{background:#f2e3c4;box-shadow:inset 0 0 0 3px #22432f}
.sw-parchment::after{content:"";position:absolute;left:7px;right:7px;top:8px;height:3px;background:#a8432c}
.sw-kraft{background:#b8895a}.sw-kraft::after{content:"";position:absolute;inset:5px;background:#f8f0df}
.sw-kraft::before{content:"";position:absolute;right:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#93311e;z-index:1}
.sw-snowy{background:#fbf7ee;box-shadow:inset 0 0 0 3px #2f5d45}.sw-snowy::after{content:"*";position:absolute;left:0;right:0;top:4px;text-align:center;color:#a8432c;font-weight:700}
.sw-airmail{background:repeating-linear-gradient(135deg,#a8432c 0 5px,#f6efe0 5px 9px,#2f5d45 9px 14px,#f6efe0 14px 18px)}
.sw-airmail::after{content:"";position:absolute;inset:5px;background:#f6efe0}
.lf-check{display:flex;gap:9px;align-items:flex-start;font-size:.98rem}
.lf-check input{width:18px;height:18px;margin-top:4px;accent-color:var(--ink)}
.lf-link{background:none;border:0;padding:0;font:inherit;font-size:.98rem;color:var(--maple-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lf-link:hover{color:var(--ink)}
.lf-preview{position:relative}
.lf-preview canvas{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:1080/1350;background:#f6f5f3;border:1px solid var(--kraft-l);border-radius:4px}
.lf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.lf-actions .btn{cursor:pointer;margin:0}
.lf-paper{display:flex;gap:14px;font-size:.95rem;margin:8px 0 0;flex-wrap:wrap}
.lf-paper label{display:flex;gap:6px;align-items:center}
.lf-status{min-height:1.6em;font-size:.92rem;color:var(--ink);font-weight:500;margin:8px 0 0}
.lf-privacy{font-size:.9rem;font-weight:500;color:var(--muted);margin:14px 0 0}
.lf-sharepage{font-size:.95rem;margin-top:10px}
.lf-sharepage a,.lf-sharepage button{margin-right:12px;white-space:nowrap}
@media (max-width:420px){.lf-row,.lf-styles{grid-template-columns:1fr}}