*,:before,:after{box-sizing:border-box}html,body{width:100%;min-height:100vh;margin:0;padding:0}#root{width:100%;min-height:100vh}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{width:100%;min-height:100vh}body{width:100%;min-height:100vh;overflow-x:hidden}:root{--dark-bg:#0d0b1a;--accent:#8b3fff;--accent-warm:#ff6a40;--grad:linear-gradient(135deg, #8b3fff, #ff6a40);--right-bg:#f5f3ff;--border:#c4b8ff;--border-focus:#8b3fff;--text-on-dark:#ede8ff;--text-muted-dark:#9b93cc;--text-accent:#5b21b6}body{background:var(--right-bg);min-height:100vh;font-family:Inter,sans-serif}.page{grid-template-columns:1fr 1fr;min-height:100vh;display:grid;position:relative}.left-panel{background:var(--dark-bg);z-index:1;width:100%}.left-panel-inner{text-align:center;flex-direction:column;justify-content:space-between;align-items:center;height:100vh;padding:48px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.logo-icon{flex-shrink:0;width:100px;height:100px}.brand-name{color:var(--text-on-dark);letter-spacing:.01em;font-family:Playfair Display,serif;font-size:26px;font-weight:700}.hero-text{text-align:center;will-change:transform;margin-top:18vh;transform:translateZ(0)}.hero-text h1{color:#fff;margin-bottom:20px;font-family:Playfair Display,serif;font-size:clamp(36px,4vw,52px);line-height:1.15;animation:1.6s cubic-bezier(.22,1,.36,1) both slideFromRight}.hero-text p{color:var(--text-muted-dark);font-size:15px;line-height:1.7;animation:1.4s cubic-bezier(.22,1,.36,1) .5s both slideFromBottom}@keyframes slideFromRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes slideFromBottom{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.palette{gap:8px;display:flex}.palette span{opacity:.8;border-radius:50%;width:26px;height:26px;display:block}.right-panel-topbar{flex-direction:column;align-items:flex-end;gap:4px;display:flex;position:absolute;top:20px;right:24px}.right-panel{background:var(--right-bg);flex-direction:column;justify-content:flex-start;align-items:center;gap:32px;width:100%;min-height:100vh;padding:max(48px,50vh - 320px) 48px 48px;display:flex}.right-panel--center{justify-content:center;padding:48px}.card{background:#fff;border-radius:20px;flex-direction:column;gap:24px;width:100%;max-width:600px;padding:40px;display:flex;box-shadow:0 8px 48px #8b3fff1a}.card-header h2{color:var(--text-accent);margin-bottom:6px;font-family:Playfair Display,serif;font-size:26px}.card-header p{color:#999;font-size:14px}.card-header--centered{text-align:center}.input{color:#1a1a1a;border:1.5px solid var(--border);resize:vertical;background:#fafaff;border-radius:12px;outline:none;width:100%;min-height:260px;padding:18px;font-family:Inter,sans-serif;font-size:14px;line-height:1.7;transition:border-color .2s}.input:focus{border-color:var(--border-focus)}.input:disabled{opacity:.6;cursor:not-allowed}.input--short{min-height:140px}.input-section{flex-direction:column;gap:8px;display:flex}.input-label{color:var(--text-accent);font-size:13px;font-weight:600}.card-header-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.btn-google{color:#3c3c3c;border:1.5px solid var(--border);background:#fff;border-radius:12px;justify-content:center;align-self:center;align-items:center;gap:10px;padding:14px 32px;font-family:Inter,sans-serif;font-size:15px;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s;display:flex;box-shadow:0 1px 4px #00000012}.btn-google:hover{border-color:var(--accent);background:#fafaff;box-shadow:0 2px 8px #8b3fff1f}@keyframes bounce{0%{transform:translateY(0)}15%{transform:translateY(-10px)}30%{transform:translateY(0)}45%{transform:translateY(-6px)}60%{transform:translateY(0)}75%{transform:translateY(-3px)}to{transform:translateY(0)}}.btn-buy{color:#fff;background:var(--accent);cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;transition:opacity .15s,transform .1s}.btn-buy:hover{opacity:.85;transform:translateY(-1px)}.btn-buy:active{transform:translateY(0)}.btn-logout{color:#c0392b;white-space:nowrap;cursor:pointer;background:0 0;border:1.5px solid #c0392b;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}.btn-logout:hover{color:#fff;background:#c0392b}.step-bar{background:var(--border);border-radius:99px;height:3px;margin-top:14px;overflow:hidden}.step-bar-fill{background:var(--accent);border-radius:99px;width:50%;height:100%;transition:width .35s}.step-bar-fill.full{width:100%}.btn-back{border:1.5px solid var(--border);color:#888;cursor:pointer;white-space:nowrap;background:0 0;border-radius:10px;padding:12px 20px;font-family:Inter,sans-serif;font-size:14px;transition:border-color .15s,color .15s}.btn-back:hover{border-color:var(--accent);color:var(--accent)}.actions{gap:10px;display:flex}.tooltip-wrap{width:100%;display:inline-block;position:relative}.tooltip-wrap:after{content:attr(data-tip);color:var(--text-on-dark);white-space:nowrap;pointer-events:none;opacity:0;background:#1a1530;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500;transition:opacity .15s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.tooltip-wrap:before{content:"";pointer-events:none;opacity:0;border:6px solid #0000;border-top-color:#1a1530;transition:opacity .15s;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.tooltip-wrap:hover:after,.tooltip-wrap:hover:before{opacity:1}.btn-generate{color:#fff;background:var(--grad);cursor:pointer;will-change:transform;border:none;border-radius:12px;justify-content:center;align-items:center;gap:12px;width:100%;padding:16px 24px;font-family:Inter,sans-serif;font-size:15px;font-weight:600;transition:opacity .2s,transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s;display:flex;transform:translateZ(0)}.btn-generate:hover:not(:disabled){opacity:.92;transform:translateY(-1px)translateZ(0)}.btn-generate:disabled{opacity:.4;cursor:not-allowed}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{opacity:.9;font-size:14px;font-weight:400;animation:.4s fadein}@keyframes fadein{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.success{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:12px 0;display:flex}.success-icon{background:var(--grad);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:24px;display:flex}.success-label{color:var(--text-accent);font-size:16px;font-weight:600}.btn-download{color:#fff;background:var(--grad);cursor:pointer;border:none;border-radius:12px;width:100%;padding:16px;font-family:Inter,sans-serif;font-size:15px;font-weight:600;transition:opacity .2s,transform .15s}.btn-download:hover{opacity:.88;transform:translateY(-1px)}.btn-reset{color:#aaa;cursor:pointer;text-underline-offset:3px;background:0 0;border:none;font-family:Inter,sans-serif;font-size:13px;text-decoration:underline}.btn-reset:hover{color:var(--accent)}.char-counter{color:#bbb;text-align:right;margin-top:-4px;font-size:12px}.char-counter--total{text-align:right;color:#ddd;margin-top:-8px;font-size:11px}.char-counter.near-limit{color:var(--accent-warm)}.char-counter.over-limit{color:#c0392b;font-weight:600}.textarea-footer{justify-content:space-between;align-items:center;margin-top:-4px;display:flex}.textarea-footer .char-counter{margin-top:0}.btn-mic{border:1.5px solid var(--border);width:30px;height:30px;color:var(--text-accent);cursor:pointer;background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:border-color .15s,background .15s,box-shadow .15s;display:flex}.btn-mic:hover:not(:disabled){border-color:var(--accent);background:#f5f0ff}.btn-mic:disabled{opacity:.4;cursor:not-allowed}.btn-mic--active{color:#ef4444;background:#fee2e2;border-color:#ef4444;animation:1.4s infinite mic-pulse}@keyframes mic-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 6px #ef444400}}.payment-banner{color:#2e7d32;cursor:pointer;text-align:center;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:500}.error{color:#7c3aed;border:1px solid var(--border);background:#f5f0ff;border-radius:8px;padding:10px 14px;font-size:13px}.blur-on-load{transition:filter .5s,opacity .5s}.is-loading .blur-on-load{filter:blur(6px);opacity:.25}.is-loading .hero-text{filter:none!important;opacity:1!important}.is-loading .btn-generate{box-shadow:0 20px 60px #8b3fff73;transform:scale(1.07)translateZ(0)!important}.page{position:relative}.example-teaser{z-index:100;flex-direction:column;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.example-annotation{color:#ffffffbf;pointer-events:none;flex-direction:column;align-items:flex-end;gap:2px;display:flex;position:absolute;bottom:calc(100% + 10px);right:calc(100% - 10px);transform:rotate(-8deg)}.example-annotation-text{white-space:nowrap;font-family:Caveat,cursive;font-size:36px;font-weight:700;line-height:1.2}.example-arrow{align-self:flex-end;width:80px;height:50px;margin-right:-8px}.example-fab{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#0d0b1acc;border:1.5px solid #8b3fff80;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex;box-shadow:0 4px 24px #0006,0 0 0 4px #8b3fff1a}.example-fab:hover{border-color:#8b3fffe6;transform:scale(1.08);box-shadow:0 6px 32px #8b3fff59,0 0 0 6px #8b3fff1a}.example-popup{opacity:0;pointer-events:none;z-index:9999;background:#fff;border-radius:16px;width:794px;height:min(88vh,920px);transition:opacity .25s,transform .25s;position:fixed;top:50%;left:50%;overflow:hidden auto;transform:translate(-50%,-46%)scale(.94);box-shadow:0 32px 100px #000000a6,0 0 0 1px #8b3fff40}.example-popup canvas{width:100%;display:block}.carousel-nav{pointer-events:none;z-index:10000;opacity:0;justify-content:space-between;align-items:center;width:794px;padding:0 12px;transition:opacity .25s;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.example-teaser:hover .carousel-nav{opacity:1}.carousel-btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:36px;height:36px;color:var(--text-accent);cursor:pointer;pointer-events:auto;background:#ffffffbf;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:background .15s,transform .15s;display:flex;box-shadow:0 2px 8px #0000002e}.carousel-btn:hover:not(:disabled){background:#fff;transform:scale(1.08)}.carousel-btn:disabled{opacity:.2;cursor:default}.carousel-indicator{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;opacity:0;background:#00000080;border-radius:20px;padding:4px 14px;font-size:13px;transition:opacity .25s;position:fixed;bottom:4vh;left:50%;transform:translate(-50%)}.example-teaser:hover .carousel-indicator{opacity:1}.example-teaser:hover .example-popup{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}@media (width<=768px){.example-teaser{display:none}}.history-section{width:100%;max-width:600px}.history-title{color:var(--text-accent);margin-bottom:12px;font-family:Playfair Display,serif;font-size:18px}.history-empty{color:#bbb;text-align:center;padding:20px 0;font-size:13px}.history-list{flex-direction:column;gap:8px;list-style:none;display:flex}.history-item{background:#fff;border-radius:12px;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;box-shadow:0 2px 12px #8b3fff12}.history-item-info{flex-direction:column;gap:2px;display:flex}.history-item-name{color:var(--text-accent);font-size:14px;font-weight:600}.history-item-date{color:#aaa;font-size:12px}.btn-history-download{color:var(--accent);border:1.5px solid var(--border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.btn-history-download:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.privacy-note{color:#bbb;text-align:center;margin-top:4px;font-size:11px}.privacy-note--left{text-align:left;margin-top:-8px;margin-bottom:-8px}@media (width<=768px){.page{grid-template-columns:1fr}.left-panel{height:auto;padding:32px 24px;position:static}.right-panel,.card{padding:24px}}