:root{--color-blush: #F5D0D3;--color-blush-light: #FAE8E9;--color-blush-dark: #E8BCC0;--color-rose: #E6CDD0;--color-cream: #FDFCFB;--color-ivory: #FFFDFD;--color-champagne: #F5EFE0;--color-lavender: #E8E3F3;--color-mint: #D8E8E0;--color-text-primary: #4A4543;--color-text-secondary: #5f5956;--color-text-muted: #7b7470;--color-text-accent: #9B7B85;--color-gold: #D4C4A0;--color-gold-light: #EDE5D5;--color-burgundy: #A67C7C;--color-sage: #B5C4B0;--color-lavender-accent: #B8AEC9;--color-bg-primary: #FFFEFE;--color-bg-secondary: #FAF8F6;--color-bg-accent: #F7F4F2;--color-border-soft: #eadcdf;--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;--font-sans: "Montserrat", system-ui, -apple-system, sans-serif;--text-xs: clamp(.7rem, .65rem + .25vw, .8rem);--text-sm: clamp(.8rem, .75rem + .25vw, .9rem);--text-base: clamp(.9rem, .85rem + .24vw, 1rem);--text-lg: clamp(.95rem, .9rem + .22vw, 1.12rem);--text-xl: clamp(1.22rem, 1.05rem + .9vw, 1.58rem);--text-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);--text-3xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);--space-xs: clamp(.25rem, .2rem + .25vw, .5rem);--space-sm: clamp(.5rem, .4rem + .5vw, 1rem);--space-md: clamp(1rem, .8rem + 1vw, 1.5rem);--space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);--space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);--space-2xl: clamp(3rem, 2rem + 5vw, 6rem);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(200, 180, 185, .08);--shadow-md: 0 4px 16px rgba(200, 180, 185, .12);--shadow-lg: 0 8px 32px rgba(200, 180, 185, .15);--shadow-glow: 0 0 40px rgba(220, 200, 205, .15);--transition-fast: .15s ease;--transition-medium: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;scroll-behavior:smooth}body{font-family:var(--font-serif);font-size:var(--text-base);line-height:1.8;color:var(--color-text-primary);font-weight:400;background:var(--color-cream);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(155,123,133,.18)}main{position:relative;z-index:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.letter-background{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at top right,rgba(245,208,211,.2) 0%,transparent 50%),radial-gradient(ellipse at bottom left,rgba(232,227,240,.18) 0%,transparent 50%),radial-gradient(ellipse at center,rgba(216,232,224,.12) 0%,transparent 70%),var(--color-cream)}.letter-border{position:fixed;inset:0;pointer-events:none;z-index:0;border:12px solid transparent;border-image:linear-gradient(135deg,var(--color-blush-light) 0%,var(--color-ivory) 25%,var(--color-blush-light) 50%,var(--color-ivory) 75%,var(--color-blush-light) 100%) 1;opacity:.3}@media(max-width:768px){.letter-border{border-width:8px}}@media(max-width:480px){.letter-border{border-width:6px}}.letter-container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-xl)}@media(max-width:768px){.letter-container{padding:var(--space-lg)}}@media(max-width:480px){.letter-container{padding:var(--space-md)}}.letter-paper{position:relative;width:100%;max-width:860px;background:radial-gradient(circle at 8% 12%,rgba(245,208,211,.24),transparent 42%),radial-gradient(circle at 92% 88%,rgba(232,227,243,.18),transparent 38%),var(--color-bg-primary);border:1px solid var(--color-border-soft);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:var(--shadow-lg),var(--shadow-glow);animation:fadeInUp .6s ease-out}.letter-paper>*{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.letter-paper:before,.letter-paper:after{content:"✦";position:absolute;font-size:1.25rem;color:var(--color-blush);opacity:.4}.letter-paper:before{top:var(--space-lg);left:var(--space-lg)}.letter-paper:after{bottom:var(--space-lg);right:var(--space-lg)}@media(max-width:768px){.letter-paper{padding:var(--space-xl);border-radius:var(--radius-md)}.letter-paper:before,.letter-paper:after{font-size:1rem}}@media(max-width:480px){.letter-paper{padding:var(--space-lg)}.editor-btn{padding:var(--space-sm) var(--space-md)}.btn-shortcut{display:none}}.letter-header{text-align:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid transparent}.letter-date{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);opacity:.8;font-variant-numeric:tabular-nums}.letter-title{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:600;color:var(--color-text-accent);line-height:1.2;margin-bottom:var(--space-sm)}.letter-subtitle{font-family:var(--font-serif);font-size:var(--text-lg);font-weight:500;color:var(--color-text-secondary)}.letter-content{font-family:var(--font-serif);font-size:var(--text-lg);line-height:1.85;color:var(--color-text-primary);font-weight:400;max-width:66ch;margin-inline:auto}.letter-content p{margin-bottom:var(--space-md)}.letter-content p:first-child{text-indent:0}.letter-content p:first-child:first-letter{font-size:3.5em;float:left;line-height:.8;margin-right:.1em;margin-top:.05em;color:var(--color-text-accent);font-weight:600}.letter-content h1,.letter-content h2,.letter-content h3{font-family:var(--font-serif);color:var(--color-text-accent);margin-top:var(--space-xl);margin-bottom:var(--space-md);line-height:1.3;text-wrap:balance;scroll-margin-top:7.5rem}.letter-content h1{font-size:var(--text-2xl);font-weight:600}.letter-content h2{font-size:var(--text-2xl);font-weight:600;margin-top:var(--space-2xl);margin-bottom:var(--space-lg)}.letter-content h3{font-size:var(--text-xl);font-weight:600;margin-top:var(--space-xl);margin-bottom:var(--space-md)}.letter-content blockquote{font-weight:500;border-left:3px solid var(--color-blush);padding-left:var(--space-lg);margin:var(--space-lg) 0;color:var(--color-text-secondary)}.letter-content strong{font-weight:600;color:var(--color-text-accent);font-size:1em;line-height:inherit}.letter-content b{font-size:1em;line-height:inherit}.letter-content em{font-style:italic;font-weight:400}.letter-content ul,.letter-content ol{margin:var(--space-md) 0;padding-left:var(--space-xl)}.letter-content li{margin-bottom:var(--space-sm)}.letter-content hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--color-blush),transparent);margin:var(--space-xl) 0}.letter-content a{color:var(--color-text-accent);text-decoration:underline;text-decoration-color:var(--color-blush);transition:color var(--transition-fast),text-decoration-color var(--transition-fast)}.letter-content a:hover{color:var(--color-burgundy)}.letter-signature{text-align:right;margin-top:var(--space-xl);padding-top:var(--space-lg);font-family:var(--font-serif)}.letter-signature-text{font-size:var(--text-lg);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.letter-signature-name{font-size:var(--text-2xl);font-weight:600;color:var(--color-text-accent)}.editor-toolbar{display:flex;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);position:sticky;top:16px;z-index:12;background:#fdfcfbe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);margin-bottom:var(--space-md);flex-wrap:wrap;justify-content:center;box-shadow:0 8px 20px #a580851f,inset 0 1px #fff9}.editor-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:.01em;color:var(--color-text-secondary);background:var(--color-bg-primary);border:1px solid var(--color-border-soft);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-medium),color var(--transition-medium),border-color var(--transition-medium),transform var(--transition-medium),box-shadow var(--transition-medium);min-height:40px;box-shadow:0 1px 3px #7d606614;touch-action:manipulation}.btn-icon{font-size:.95em;filter:grayscale(.08)}.btn-shortcut{margin-left:.2rem;padding:1px 6px;border-radius:var(--radius-full);font-size:.66rem;font-family:var(--font-sans);font-weight:600;letter-spacing:.01em;color:var(--color-text-muted);background:var(--color-bg-secondary)}.editor-btn:hover{color:var(--color-text-primary);background:#fff7f8;border-color:#e9cfd3;transform:translateY(-1px);box-shadow:0 6px 14px #a17c8329}.editor-btn:active{transform:translateY(0);box-shadow:0 1px 3px #0000000a}.editor-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.editor-btn:disabled:hover{background:var(--color-bg-primary);border-color:transparent}.editor-btn.primary{background:linear-gradient(135deg,#f4d6d9,#e9c0c5);color:var(--color-text-primary);border-color:#ddb1b8;box-shadow:0 2px 6px #f5d0d366}.editor-btn.primary:hover{background:linear-gradient(135deg,var(--color-blush-dark) 0%,var(--color-blush) 100%);box-shadow:0 4px 12px #f5d0d380;transform:translateY(-1px)}.editor-btn.primary:active{transform:translateY(0);box-shadow:0 2px 4px #f5d0d34d}.editor-btn.secondary{background:#ffffffc2;border:1px solid #e7d5d9;color:#635b58}.editor-btn.secondary:hover{background:var(--color-blush-light);border-color:var(--color-blush-light);color:var(--color-text-secondary)}.editor-btn.active{background:var(--color-text-accent);border-color:var(--color-text-accent);color:var(--color-ivory)}.letter-editor{width:100%;min-height:350px;font-family:var(--font-mono, "SF Mono", "Monaco", "Inconsolata", monospace);font-size:var(--text-base);line-height:1.75;color:var(--color-text-primary);background:var(--color-bg-primary);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);padding:var(--space-lg);resize:vertical;transition:border-color var(--transition-medium),box-shadow var(--transition-medium);box-shadow:inset 0 1px 2px #0000000a}.letter-editor:focus-visible{border-color:var(--color-blush);box-shadow:inset 0 2px 4px #00000005,0 0 0 4px #f5d0d333}.letter-editor::placeholder{color:var(--color-text-muted)}.editor-help{font-family:var(--font-sans);font-size:.7rem;color:var(--color-text-muted);text-align:center;margin-top:var(--space-sm);display:flex;gap:var(--space-xs);justify-content:center;flex-wrap:wrap;opacity:.92}.help-divider{opacity:.5}.toc-container{position:sticky;top:20px;z-index:10;background:#fffefeeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-medium),background-color var(--transition-medium)}.toc-container.collapsed{box-shadow:var(--shadow-sm)}.toc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:transparent;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.toc-toggle:hover{color:var(--color-text-primary)}.toc-arrow{transition:transform var(--transition-medium);font-size:.7rem}.toc-arrow.expanded{transform:rotate(180deg)}.toc-nav{max-height:200px;overflow-y:auto;padding:var(--space-xs) 0;border-top:1px solid var(--color-bg-secondary)}.toc-link{display:block;width:100%;padding:var(--space-xs) var(--space-md);background:transparent;border:none;border-left:2px solid transparent;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;text-decoration:none;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);line-height:1.35;white-space:normal;word-break:break-word}.toc-link:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.toc-link.active{border-left-color:var(--color-blush);color:var(--color-text-accent);font-weight:600;background:linear-gradient(90deg,rgba(245,208,211,.2),transparent 65%)}.toc-link.h3{padding-left:var(--space-lg)}.letter-actions{text-align:center;margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-bg-secondary);display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}@media(max-width:768px){.letter-paper{padding:var(--space-lg)}.letter-content{font-size:clamp(1rem,.94rem + .38vw,1.1rem);line-height:1.92;max-width:100%;letter-spacing:.005em}.letter-content p{margin-bottom:var(--space-lg)}.letter-content h2{margin-top:var(--space-xl);margin-bottom:var(--space-md)}.letter-content h3{margin-top:var(--space-lg)}.editor-toolbar{top:10px}.letter-editor{min-height:300px;font-size:var(--text-sm)}}@media(max-width:480px){.letter-content{font-size:clamp(.98rem,.94rem + .24vw,1.05rem);line-height:1.95}.letter-content ul,.letter-content ol{padding-left:var(--space-lg)}}.status-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:500;font-variant-numeric:tabular-nums;border-radius:var(--radius-full);transition:background-color var(--transition-medium),color var(--transition-medium)}.status-badge.saving{background:var(--color-champagne);color:#8b7355}.status-badge.saved{background:var(--color-sage);color:#fff}.status-badge.error{background:#f5e0e0;color:#a67c7c}.auth-container{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 20%,#d7b79f,#c59f82 28%,#ae8567 58%,#946a4f)}.auth-card{width:100%;max-width:400px;background:#fff;border:1px solid rgba(120,79,52,.28);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:0 24px 56px #43281847;text-align:center;transition:transform .4s ease,opacity .4s ease}.auth-card.shake{animation:shake .5s ease-in-out}.auth-card.unlocking{animation:unlock .6s ease forwards}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}@keyframes unlock{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(.95);opacity:0}}.auth-icon{font-size:3.25rem;width:5.25rem;height:5.25rem;margin:0 auto var(--space-lg);display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border:1px solid var(--color-border-soft);border-radius:var(--radius-md)}.auth-icon .icon{display:inline-block;transition:transform .3s ease}.auth-icon .lock{animation:lockBob 2s ease-in-out infinite}@keyframes lockBob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.auth-title{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:600;color:var(--color-text-accent);margin-bottom:var(--space-sm)}.auth-subtitle{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-lg)}.auth-form{display:flex;flex-direction:column;gap:var(--space-md)}.captcha-row{display:grid;gap:var(--space-sm);justify-content:center}.captcha-row .cf-turnstile{margin-inline:auto}.auth-input{width:100%;padding:var(--space-md);font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-primary);background:var(--color-bg-secondary);border:2px solid var(--color-blush-light);border-radius:var(--radius-md);text-align:left;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}.auth-input:focus-visible{border-color:var(--color-blush);box-shadow:0 0 0 3px #f5d0d340}.auth-input::placeholder{color:var(--color-text-muted)}.auth-btn{width:100%;padding:var(--space-md) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;color:var(--color-text-primary);background:linear-gradient(135deg,var(--color-blush) 0%,var(--color-blush-dark) 100%);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-position var(--transition-medium),transform var(--transition-medium),box-shadow var(--transition-medium);box-shadow:0 2px 8px #f5d0d366;touch-action:manipulation}.auth-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--color-blush-dark) 0%,var(--color-blush) 100%);transform:translateY(-2px);box-shadow:0 4px 12px #f5d0d380}.auth-btn:active:not(:disabled){transform:translateY(0)}.auth-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.auth-error{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-burgundy);margin-top:var(--space-sm);min-height:1.4em;text-wrap:pretty}.hidden{display:none!important}.text-center{text-align:center}.text-right{text-align:right}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}:focus-visible{outline:2px solid var(--color-blush);outline-offset:2px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.letter-background,.letter-border,.editor-toolbar,.letter-editor{display:none!important}.letter-paper{box-shadow:none;padding:0}}