:root{color-scheme:light;font-family:system-ui,sans-serif;color:#392d35;background:#fff8f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{max-width:1000px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}header a{color:inherit;text-decoration:none;font-size:20px;letter-spacing:-1px}main{max-width:620px;margin:24px auto;padding:0 22px}footer{padding:40px 24px;text-align:center;font-size:13px;line-height:1.8;color:#786873}h1{font:clamp(32px,8vw,48px)/1.1 Georgia,serif;letter-spacing:-1px;margin:12px 0 20px}h2{font:28px/1.2 Georgia,serif}p{line-height:1.65}button,.button{display:inline-block;background:#9f2855;color:white;border:0;border-radius:12px;padding:15px 22px;font:600 16px system-ui;cursor:pointer;text-decoration:none;text-align:center;min-height:48px}button:hover,.button:hover{filter:brightness(.94)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #357bd4;outline-offset:4px}.quiet{background:transparent;color:#653e50;border:1px solid #dfcbd2;font-size:13px;padding:10px 14px}section{margin:26px 0}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.actions>*{flex:1}label{display:block;font-size:14px;font-weight:600;margin:20px 0 8px}input,select,textarea{width:100%;border:1px solid #cab5bd;border-radius:10px;padding:14px;font:16px system-ui;background:white;color:#392d35}input[type=color]{height:50px;padding:5px}textarea{min-height:90px;resize:vertical}.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase}.letter{--paper:#fff0f5;--end:#ffe0ea;--ink:#291e25;background:linear-gradient(135deg,var(--paper),var(--end));color:var(--ink);padding:36px 26px;border:1px solid currentColor;border-radius:26px;text-align:center;overflow-wrap:anywhere;box-shadow:0 12px 40px #4a223311;animation:arrive .65s ease both}.letter h2{font-size:32px;margin:14px 0}.letter .mast{font:28px/1.2 Georgia,serif;white-space:pre-line;border-bottom:1px solid currentColor;padding-bottom:22px;margin-bottom:22px}.letter .motif{font-size:44px;display:block;margin:12px}.letter .details{text-align:left;padding:18px;border:1px solid currentColor;border-radius:8px;line-height:1.8;white-space:pre-line}.letter img{max-width:100%;max-height:350px;object-fit:contain;margin:14px auto;border-radius:10px;display:block}.letter[data-layout=gothic]{border-radius:190px 190px 12px 12px;padding-top:80px;background:radial-gradient(ellipse at top,var(--end),var(--paper))}.letter[data-layout=ticket]{border-radius:0;border:4px double currentColor}.letter[data-layout=ticket] .mast{font-family:monospace;font-weight:bold;font-size:32px;border-bottom:3px dashed currentColor}.letter[data-layout=game]{border:5px solid currentColor;border-radius:0;font-family:monospace;box-shadow:9px 9px 0 #392d3533}.letter[data-layout=game] .mast{font-family:monospace;border:2px solid currentColor;padding:20px;font-size:25px}.letter[data-layout=journal]{text-align:left;border-radius:0 65px 0 0;border-left:12px solid currentColor}.letter[data-layout=journal] .mast{font-style:italic;font-size:36px}.letter[data-layout=poster]{text-align:left;border-radius:0;padding:42px}.letter[data-layout=poster] .mast{font:300 62px/1 sans-serif;letter-spacing:-4px}.letter[data-layout=space] .motif{border:1px solid currentColor;border-radius:50%;width:130px;margin:12px auto;transform:rotate(-18deg)}.letter[data-layout=postcard]{border-radius:3px;border:7px double currentColor}.letter[data-layout=pop] .mast{font:900 38px/1 sans-serif;transform:rotate(-3deg);padding:20px;border:3px solid currentColor}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.success{font-size:64px;text-align:center;animation:heart .7s ease both}.notice{border-left:3px solid #ad365c;padding:10px 16px;background:#fff0f5}.error{color:#a01832}.light *{animation:none!important;transition:none!important;box-shadow:none!important}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes heart{0%{transform:scale(.3)}65%{transform:scale(1.15)}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:420px){header{padding:16px}.letter{padding:28px 20px}.actions{flex-direction:column}.palette{grid-template-columns:1fr}.letter[data-layout=gothic]{padding-top:70px}}

@font-face{font-family:DancingScript;src:url('./fonts/DancingScript.ttf')}@font-face{font-family:Lora;src:url('./fonts/Lora.ttf')}@font-face{font-family:DMSerif;src:url('./fonts/DMSerifDisplay-Regular.ttf')}@font-face{font-family:DMSans;src:url('./fonts/DMSans.ttf')}
.letter{position:relative;isolation:isolate;overflow:hidden}.letter-body{position:relative;z-index:1}.letter .mast,.letter h2,.letter h3{font-family:inherit}.letter .motif{color:var(--accent)}.stickers{font-size:26px}.pattern-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:60px;font:22px system-ui;z-index:0}.pattern-layer[data-grid]{display:block;background:repeating-linear-gradient(0deg,transparent 0 43px,currentColor 43px 44px)}.pattern-layer[data-grid=Cuadrícula]{background-image:repeating-linear-gradient(0deg,transparent 0 43px,currentColor 43px 44px),repeating-linear-gradient(90deg,transparent 0 43px,currentColor 43px 44px)}
.letter[data-layout=neon]{border-radius:24px;box-shadow:inset 0 0 18px var(--accent),0 0 15px var(--accent)}.letter[data-layout=neon] .mast{border:2px solid var(--accent);border-radius:24px;padding:24px 10px;color:var(--accent);text-shadow:0 0 12px var(--accent)}.letter[data-layout=vapor] .mast:before{content:'';display:block;width:120px;height:120px;margin:auto auto 20px;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 8px,var(--accent) 8px 17px)}.letter[data-layout=vapor]{border-radius:0;border:3px solid var(--accent)}
.letter[data-frame='Doble']{border:5px double var(--accent)}.letter[data-frame='Sin marco']{border:0}.letter[data-frame='Pixel']{border:4px solid var(--accent);border-radius:0}.letter[data-frame='Brillo']{box-shadow:0 0 26px var(--accent)}.letter[data-photos='Polaroid'] img{border:12px solid #fff;border-bottom-width:35px;box-shadow:0 4px 12px #0003}.letter[data-photos='Círculo'] img{border-radius:50%;width:220px;height:220px;object-fit:cover}.letter[data-photos='Panorámica'] img{width:100%;aspect-ratio:2;object-fit:cover}
.letter-editor{display:flex;flex-direction:column;gap:20px}.editor-preview{position:sticky;top:0;z-index:2;max-height:46vh;overflow:auto;margin:0;background:#fff8f4;border-bottom:1px solid #cab5bd;padding:8px}.editor-preview .letter{max-width:420px;margin:auto}.editor-tools{min-width:0}.editor-tools>button[type=submit]{width:100%;margin-top:24px}
.letter[data-layout=lavender]{border:2px solid var(--accent);border-radius:36px 36px 80px 80px}.letter[data-layout=lavender] .mast{font-family:DancingScript,cursive;font-size:42px;letter-spacing:1px;border-bottom:1px solid var(--accent)}
.letter[data-layout=cloud]{border:0;border-radius:80px 80px 34px 34px;box-shadow:0 18px 45px #8f709633}.letter[data-layout=cloud] .motif{font-size:62px}.letter[data-layout=cloud] .mast{border:0;font-family:DMSerif,Georgia,serif;font-size:32px}
.letter[data-layout=strawberry]{border:3px double var(--accent);border-radius:34px}.letter[data-layout=strawberry] .mast{font-family:DMSerif,Georgia,serif;font-size:31px;border-bottom:3px dotted var(--accent)}
.letter-section{margin:16px 0}.letter-section:first-child{margin-top:0}.letter-section:last-child{margin-bottom:0}.letter-section .closing{border-top:1px solid currentColor;padding-top:20px;font-size:18px}.letter-section .brand{font-size:10px;letter-spacing:3px;color:var(--accent)}
.custom-block{max-width:100%;overflow-wrap:anywhere}.custom-writing{white-space:pre-wrap;line-height:1.4;margin:0}.block-surface{display:inline-block;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:18px;padding:14px;min-width:110px}.custom-block .author{display:block;opacity:.72;margin-top:5px}.ornament{display:inline-flex;align-items:center;gap:10px}.ornament:before,.ornament:after{content:'';display:block;width:48px;height:1px;background:currentColor;opacity:.6}
.animal-companion{display:block;line-height:1.2;transform-origin:center 75%;animation:pet-float 2.2s ease-in-out infinite}.animal-companion[data-motion=bounce]{animation-name:pet-bounce}.animal-companion[data-motion=sway]{animation-name:pet-sway}.animal-companion[data-motion=none]{animation:none}.animal-caption{display:block;font-size:14px;line-height:1.4}.editor-tools .composer{padding:16px;border:1px solid #dac7ce;border-radius:20px;background:#fffaf7}.editor-tools .composer h2{margin-top:0}.composer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.composer-actions button{padding:10px 12px;font-size:13px;min-height:40px}.section-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e5d5db;border-radius:12px;padding:8px;margin:7px 0;background:white}.section-controls>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-controls .small-actions{display:flex;gap:3px}.section-controls button{padding:7px 10px;min-height:36px;font-size:13px}.block-editor{padding:10px 14px 16px;border:1px solid #ebdce1;border-radius:14px;margin:0 0 12px;background:#fff}.block-editor label{margin-top:10px}.block-editor input[type=range]{padding:0}.block-editor select{font-size:14px}.phrase-buttons{display:flex;flex-wrap:wrap;gap:7px}.phrase-buttons button{font-size:12px;padding:8px 10px;min-height:35px}.editor-preview .letter{max-height:none}
.block-editor summary{cursor:pointer;font-weight:600;padding:3px 0}.block-editor:not([open]){padding-bottom:10px}
@keyframes pet-float{50%{transform:translateY(-8px)}}@keyframes pet-bounce{50%{transform:translateY(-14px)}}@keyframes pet-sway{25%{transform:rotate(7deg)}75%{transform:rotate(-7deg)}}
@media(max-width:420px){.section-controls{flex-wrap:wrap}.section-controls>span{width:100%}.section-controls .small-actions{width:100%;justify-content:flex-end}}