.letter-tool{gap:calc(var(--space-24) * 2);flex-direction:column;width:100%;display:flex}.letter-intro{align-items:flex-start;gap:var(--space-16);flex-direction:column;display:flex}.letter-intro .tag{background:var(--coral-tint)}.letter-tool .letter-workbench{padding:var(--space-16);border-radius:var(--radius-site-card);background:var(--paper);display:block}.letter-editor-layout{justify-content:center;align-items:flex-start;gap:calc(var(--space-16) * 2);flex-wrap:wrap;display:flex}.letter-sheet{aspect-ratio:781/1120;border-radius:var(--radius-site-card);border:4px solid var(--white);min-width:0;max-width:520px;box-shadow:var(--shadow-puffy);flex:320px;position:relative;overflow:hidden}.letter-paper-art{background:var(--letter-base);pointer-events:none;position:absolute;inset:0}.letter-paper-top{position:absolute;top:0;left:0;right:0}.letter-paper-bottom{position:absolute;bottom:0;left:0;right:0}.letter-paper-art svg,.letter-paper-art img{width:100%;height:auto;display:block}.letter-to{align-items:baseline;gap:var(--space-8);font-family:var(--f-hand);font-weight:var(--type-hand-weight);font-size:var(--type-letter-page-size);display:flex;position:absolute;top:20%;left:9%;right:9%}.letter-to input{width:100%;min-width:0;min-height:var(--tap-target);border:0;border-bottom:1.5px dashed var(--brown);color:inherit;font:inherit;background:0 0}.letter-body{resize:none;background:repeating-linear-gradient(transparent 0 calc(var(--type-letter-page-line) - 1px), var(--letter-line) calc(var(--type-letter-page-line) - 1px) var(--type-letter-page-line));width:82%;height:42%;font-family:var(--f-hand);font-weight:var(--type-hand-weight);font-size:var(--type-letter-page-size);line-height:var(--type-letter-page-line);color:inherit;padding:0 var(--space-4);border:0;position:absolute;top:29%;left:9%}.letter-sheet :is(input,textarea):focus-visible{outline-offset:0}.letter-doodle{pointer-events:none;width:24%;position:absolute;bottom:13%;right:10%}.letter-doodle svg,.letter-doodle img{width:100%;height:auto;display:block}.letter-drawing{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.letter-drawing.is-drawing{pointer-events:auto;touch-action:none;cursor:crosshair}.letter-drawing:focus-visible{outline-offset:-4px}.letter-drawing-limit{bottom:var(--space-16);left:var(--space-16);right:var(--space-16);padding:var(--space-8);background:var(--paper);color:var(--ink);position:absolute}.letter-sealed{background:color-mix(in srgb, var(--white) 82%, transparent);place-items:center;display:grid;position:absolute;inset:0}.letter-sealed>div{width:45%}.letter-sealed svg,.letter-sealed img{width:100%;display:block}.letter-controls{align-items:flex-start;gap:var(--space-24);flex-direction:column;flex:300px;min-width:0;max-width:480px;display:flex}.letter-control-group{align-items:flex-start;gap:var(--space-12);border:0;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;display:flex}.letter-control-label{font-family:var(--f-display);font-weight:var(--type-site-heading-weight);font-size:var(--type-site-button-small-size);color:var(--ink);padding-bottom:var(--space-8)}.letter-paper-picker,.letter-tools{align-items:center;gap:var(--space-12);flex-wrap:wrap;display:flex}.letter-paper-pick{aspect-ratio:781/1120;border:2px solid var(--ink-2);border-radius:var(--radius-input);background:var(--paper);cursor:pointer;width:44px;padding:0;position:relative;overflow:hidden}.letter-tool [aria-pressed=true]{outline:3px solid var(--ink);outline-offset:3px}.letter-pen{min-width:var(--tap-target);min-height:var(--tap-target);border:2px solid var(--ink-2);border-radius:var(--radius-pill);background:var(--paper);cursor:pointer;place-items:center;padding:0;display:grid}.letter-pen span{border-radius:var(--radius-pill);background:var(--letter-ink);width:22px;height:22px}.letter-signature{gap:var(--space-8);width:100%;font-family:var(--f-display);flex-direction:column;display:flex}.letter-signature input{width:100%;min-height:var(--tap-target);border:2px solid var(--edge);border-radius:var(--radius-input);background:var(--paper);color:var(--ink);padding:var(--space-8) var(--space-12);font:inherit}.letter-tool [aria-invalid=true]{outline:3px solid var(--coral-ink);outline-offset:2px}.letter-error{color:var(--coral-ink);font-size:var(--type-small-size)}.letter-error:empty,.letter-controls [role=status]:empty{display:none}.letter-tool button:disabled{opacity:.6;cursor:default}.letter-controls>.btn{white-space:normal;max-width:100%}.letter-linkbox{align-items:center;gap:var(--space-8);width:100%;min-width:0;padding:var(--space-8);border:1.5px solid var(--edge);border-radius:var(--radius-pill);background:var(--paper);display:flex}.letter-linkbox input{width:0;min-width:0;min-height:var(--tap-target);color:var(--ink);font-family:var(--f-display);font-size:var(--type-small-size);text-overflow:ellipsis;background:0 0;border:0;flex:1}.letter-paper-section{gap:var(--space-24);flex-direction:column;display:flex}.letter-paper-gallery{gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));display:grid}.letter-paper-cover{aspect-ratio:781/1120;border:2px solid var(--edge);border-radius:var(--radius-input);width:100%;position:relative;overflow:hidden}.letter-paper-gallery .d{margin-top:var(--space-8);font-size:var(--type-small-size)}.letter-faq,.letter-faq dl{gap:var(--space-24);display:grid}.letter-faq dt{font-family:var(--f-display);font-weight:var(--type-site-heading-weight)}.letter-faq dd{margin-top:var(--space-8)}.letter-other-tools{gap:var(--space-16);flex-wrap:wrap;display:flex}.letter-other-tools h2{width:100%}.letter-tool .sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:900px){.letter-tool .letter-workbench{padding:calc(var(--space-22) * 2)}.letter-paper-pick{width:64px}.letter-editor-layout{gap:calc(var(--space-24) * 2)}.letter-faq{gap:calc(var(--space-24) * 2);grid-template-columns:1fr 1fr}}.letter-keyboard-cursor{border:2px solid var(--letter-cursor-ink);outline:2px solid var(--white);border-radius:var(--radius-pill);pointer-events:none;width:14px;height:14px;display:none;position:absolute;transform:translate(-50%,-50%)}.letter-drawing.is-drawing~.letter-keyboard-cursor{display:none}.letter-drawing.is-drawing:focus-visible~.letter-keyboard-cursor{display:block}
