:root{--ink:#07111d;--ink-2:#10263d;--aqua:#42e8df;--aqua-soft:#a5fff8;--blue:#1764bf;--paper:#fffdf8;--muted:#718098;--line:#dce5ef;--danger:#b42318}*{box-sizing:border-box}html{background:#07111d;scroll-behavior:smooth}body{min-height:100vh;margin:0;color:#17253a;font-family:Heebo,Arial,sans-serif;background:#07111d url('/assets/letter-background.png') center/cover fixed}.page-glow{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(120deg,rgba(4,12,22,.93),rgba(5,22,37,.72)),radial-gradient(circle at 30% 15%,rgba(53,221,212,.14),transparent 27%)}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{position:relative;z-index:20;min-height:130px;padding:9px clamp(18px,5vw,78px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(4,12,21,.46);backdrop-filter:blur(18px)}.brand{display:block;width:420px;height:112px;overflow:hidden}.brand img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.header-actions{display:flex;gap:10px;align-items:center}.header-button{min-height:43px;padding:0 15px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-weight:800;transition:.2s}.header-button:hover{border-color:var(--aqua);background:rgba(66,232,223,.15)}.header-button i{margin-left:6px;color:var(--aqua)}.account-wrap{position:relative}.account-menu{position:absolute;left:0;top:52px;width:220px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 18px 46px rgba(0,0,0,.3)}.account-menu button{display:block;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;text-align:right;font-weight:700;color:#1d3049}.account-menu button:hover{background:#eafafa}.account-menu i{width:20px;color:#117f92}.stage{position:relative;z-index:1;display:grid;place-items:center;min-height:calc(100vh - 130px);padding:44px 22px 70px;overflow:hidden}.floating-icon{position:absolute;color:rgba(93,247,239,.26);font-size:42px;animation:float 9s ease-in-out infinite;pointer-events:none}.icon-a{top:12%;right:8%}.icon-b{top:65%;right:12%;animation-delay:-3.5s}.icon-c{top:20%;left:10%;animation-delay:-6s}.icon-d{left:18%;bottom:8%;animation-delay:-2s}@keyframes float{50%{transform:translateY(-30px) rotate(9deg)}}.view{display:none;width:min(1080px,100%)}.view.active{display:block;animation:enter .38s ease both}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.home-view{text-align:center}.hero-card{padding:22px 0;color:#fff}.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border:1px solid rgba(86,244,235,.28);border-radius:999px;background:rgba(66,232,223,.11);color:var(--aqua-soft);font-size:13px;font-weight:800}.hero-card h1{max-width:780px;margin:22px auto 16px;font-size:clamp(42px,7vw,78px);line-height:1.01;letter-spacing:-1.5px}.hero-card h1 span{color:var(--aqua)}.hero-card p{max-width:610px;margin:0 auto 29px;color:#d5deeb;font-size:18px;line-height:1.75}.start-orb{width:112px;height:112px;border:0;border-radius:50%;background:linear-gradient(135deg,#b6fff9,var(--aqua));box-shadow:0 0 0 13px rgba(66,232,223,.1),0 22px 48px rgba(29,231,221,.27);color:#052033;font-size:49px;font-weight:900;transition:.25s}.start-orb:hover{transform:translateY(-5px) scale(1.04)}.start-caption{display:block;margin-top:18px;color:#fff;font-weight:800}.letter-types{max-width:840px;margin:33px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transition:.35s}.letter-types.collapsed{max-height:0;margin-top:0;opacity:0;overflow:hidden;pointer-events:none}.type-card{min-height:128px;padding:17px;border:1px solid rgba(255,255,255,.17);border-radius:19px;background:rgba(255,255,255,.09);color:#fff;text-align:right;transition:.2s}.type-card:hover{transform:translateY(-4px);border-color:var(--aqua);background:rgba(66,232,223,.15)}.type-card i{color:var(--aqua);font-size:21px}.type-card b{display:block;margin-top:10px}.type-card small{display:block;margin-top:3px;color:#cbd6e4}.content-card{padding:clamp(24px,4.7vw,52px);border-radius:28px;background:rgba(255,255,255,.97);box-shadow:0 25px 75px rgba(0,0,0,.31)}.card-kicker{display:flex;align-items:center;justify-content:space-between;color:#52647c;font-weight:800;font-size:13px}.content-card h2{margin:7px 0;color:var(--ink);font-size:clamp(29px,4vw,38px)}.content-card>p{margin:0;color:var(--muted)}.text-button{border:0;background:transparent;color:#355171;font-weight:800}.text-button:hover{color:#0b8994}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:26px}.field{display:grid;gap:7px;color:#1c2a3d;font-weight:800;font-size:14px}.field.full{grid-column:1/-1}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:13px;padding:12px 14px;outline:0;background:#fff;font-weight:500;transition:.2s}.field input:focus,.field textarea:focus{border-color:#19b7b2;box-shadow:0 0 0 4px #defbf8}.field textarea{min-height:145px;resize:vertical;line-height:1.65}.field small{color:var(--muted);font-weight:500}.hidden{display:none!important}.tone-picker{display:flex;flex-wrap:wrap;gap:9px}.tone-picker button{padding:8px 13px;border:1px solid #d4dfeb;border-radius:999px;background:#fff;color:#3a4d66;font-weight:800;transition:.16s}.tone-picker button.selected{border-color:#1cb9b3;background:#dffbf8;color:#077d7c}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:29px}.primary-button{border:0;border-radius:14px;padding:14px 20px;background:linear-gradient(135deg,#0eaaa8,#49e4d7);box-shadow:0 12px 27px rgba(13,169,166,.24);color:#04202d;font-weight:900;transition:.2s}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.04)}.secondary-button{border:0;background:transparent;color:#596a81;font-weight:800}.primary-button i{margin-right:5px}.wide{display:block;width:100%;margin-top:18px}.result-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 11px;color:#d7e9f3;font-size:14px;font-weight:800}.text-button.light{color:#e8fcff}.letter-preview{position:relative;min-height:535px;padding:46px clamp(25px,6vw,74px);border-radius:9px;background:var(--paper);box-shadow:0 17px 46px rgba(3,14,25,.25);overflow:hidden}.letter-preview::before{position:absolute;right:0;top:0;bottom:0;width:7px;background:linear-gradient(var(--aqua),var(--blue));content:""}.letter-head{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #e7e2d8;color:#0e527c}.letter-head div{display:grid;gap:3px}.letter-head span{font-size:13px;color:#758397}.letter-content{min-height:350px;margin-top:34px;outline:0;white-space:pre-wrap;color:#203046;font-size:17px;line-height:2}.letter-content:focus{box-shadow:0 0 0 4px rgba(66,232,223,.15)}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.result-actions>button:not(.primary-button){border:1px solid #cad6e2;border-radius:11px;background:#fff;color:#1d354e;padding:10px 13px;font-weight:800}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;margin-top:25px}.studio-paper{min-height:570px;background-color:var(--paper);background-size:cover;background-position:center}.toolbox{padding:18px;border-radius:18px;background:#f2f7fb}.toolbox h3{margin:0 0 11px;color:#162941}.toolbox button{display:block;width:100%;margin:6px 0;padding:10px;border:1px solid #d6e1ed;border-radius:10px;background:#fff;color:#1d354e;text-align:right;font-size:14px;font-weight:800;transition:.17s}.toolbox button:hover{border-color:#23bbb5;background:#effdfa}.toolbox i{width:21px;color:#168b9a}.toolbox .save-button{margin-top:13px;border-color:#18aaa7;background:#dffbf8}.modal{position:fixed;z-index:40;inset:0;display:none;place-items:center;padding:20px;background:rgba(2,10,18,.77);backdrop-filter:blur(5px)}.modal.open{display:grid}.modal-box{position:relative;width:min(485px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:30px;border-radius:24px;background:#fff;box-shadow:0 28px 75px rgba(0,0,0,.35)}.modal-box h2{margin:0 0 8px;color:var(--ink);font-size:28px}.modal-box p{color:#67768a;line-height:1.7}.modal-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:13px;border-radius:13px;background:#e1fbf9;color:#078d93}.close-modal{position:absolute;left:14px;top:10px;border:0;background:transparent;color:#4d6076;font-size:25px}.auth-tabs{display:flex;gap:7px;margin:20px 0 18px;padding:4px;border-radius:12px;background:#edf3f8}.auth-tabs button{flex:1;border:0;border-radius:9px;padding:9px;background:transparent;color:#5f7186;font-weight:800}.auth-tabs button.active{background:#fff;color:#0e757e;box-shadow:0 2px 7px rgba(0,0,0,.08)}.auth-form{display:grid;gap:13px}.auth-form .primary-button{margin-top:4px}.auth-note{margin-top:15px!important;font-size:13px}.personal-box{width:min(620px,100%)}.personal-list{display:grid;gap:10px;margin-top:19px}.saved-letter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid #dce6ef;border-radius:13px;background:#fbfdff}.saved-letter strong{display:block;color:#1a314d}.saved-letter small{color:#7b899b}.saved-letter button{border:0;border-radius:9px;padding:8px 12px;background:#e5faf8;color:#087c81;font-weight:800}.account-detail{display:grid;gap:9px;margin-top:18px;padding:16px;border-radius:13px;background:#f3f8fc}.danger-button{margin-top:17px;border:1px solid #f0c9c4;border-radius:10px;background:#fff7f6;color:var(--danger);padding:10px 12px;font-weight:800}.empty-state{padding:24px 0;color:#748398;text-align:center}.toast{position:fixed;z-index:55;left:20px;bottom:20px;max-width:min(430px,calc(100vw - 40px));padding:12px 16px;border:1px solid rgba(80,246,238,.45);border-radius:13px;background:#093447;color:#fff;box-shadow:0 16px 36px rgba(0,0,0,.24);transform:translateY(130px);transition:.24s}.toast.show{transform:none}@media(max-width:760px){.topbar{min-height:96px;padding:7px 16px}.brand{width:260px;height:78px}.header-button{width:42px;padding:0}.header-button span{display:none}.header-button i{margin:0}.stage{min-height:calc(100vh - 96px);padding:32px 16px 55px}.letter-types{grid-template-columns:repeat(2,1fr)}.type-card{min-height:115px;padding:13px}.form-grid,.studio-grid{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column-reverse}.primary-button{width:100%}.letter-preview{padding:32px 24px}.toolbox{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.toolbox h3{grid-column:1/-1}.toolbox button{margin:0}.result-heading{align-items:flex-start;gap:7px;flex-direction:column}.hero-card h1{letter-spacing:-.8px}}@media(max-width:410px){.brand{width:220px}.letter-types{grid-template-columns:1fr}.toolbox{grid-template-columns:1fr}}