:root{--bg:#0a1a26;--surface:#0a18228c;--surface-strong:#102430b3;--border:#ffffff17;--border-strong:#ffffff29;--text:#f4f4f8;--text-soft:#b7b7c6;--text-dim:#7d7d90;--red:#ff5a45;--pink:#ff8a3d;--violet:#ffc04d;--gradient:linear-gradient(135deg, var(--red) 0%, var(--pink) 55%, var(--violet) 100%);--radius-lg:22px;--radius-md:16px;--shadow:0 20px 60px -20px #000000b3;--content-width:820px;--font-display:"Space Grotesk", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-height:100vh;margin:0}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}.gradient-text{background:var(--gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.backdrop{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.illustration{width:100%;height:100%;position:absolute;inset:0}.ill-star{animation:5s ease-in-out infinite twinkle}.ill-moon{animation:8s ease-in-out infinite moon-glow}.ill-bird{animation:16s ease-in-out infinite bird-drift}.ill-wing{transform-box:fill-box;transform-origin:30% 100%;animation:1.4s ease-in-out infinite alternate flap}.ill-firefly{animation:9s ease-in-out infinite firefly}.ill-lantern{animation:3.2s ease-in-out infinite flicker}.ill-sway-right{transform-box:fill-box;transform-origin:50% 100%;animation:9s ease-in-out infinite sway}.ill-steam{animation:4s ease-in-out infinite steam}.ill-cat{transform-box:fill-box;transform-origin:50% 100%;animation:4.5s ease-in-out infinite breathe}@keyframes twinkle{0%,to{opacity:.35}50%{opacity:1}}@keyframes moon-glow{0%,to{opacity:.92}50%{opacity:1}}@keyframes bird-drift{0%,to{transform:translate(0)}25%{transform:translate(-18px,-10px)}50%{transform:translate(-30px,4px)}75%{transform:translate(-12px,10px)}}@keyframes firefly{0%,to{opacity:.4;transform:translate(0)}30%{opacity:1;transform:translate(14px,-18px)}60%{opacity:.6;transform:translate(-10px,-30px)}}@keyframes flicker{0%,to{opacity:.85}40%{opacity:1}70%{opacity:.7}}@keyframes flap{0%{transform:scaleY(1)}to{transform:scaleY(.55)}}@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.55}to{opacity:0;transform:translateY(-18px)}}@keyframes breathe{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.05)}}@keyframes sway{0%,to{transform:rotate(0)}50%{transform:rotate(1.6deg)}}.app{flex-direction:column;height:100dvh;display:flex;position:relative}.app>:not(.backdrop){z-index:1;position:relative}.topbar{padding:14px 28px;padding-top:max(14px, env(safe-area-inset-top));padding-left:max(28px, env(safe-area-inset-left));padding-right:max(28px, env(safe-area-inset-right));border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px)saturate(140%);background:#08141e8c;justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.3rem;font-weight:700;line-height:1.1}.brand p{color:var(--text-dim);margin:2px 0 0;font-size:.78rem}.ghost-button{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-size:.9rem;font-weight:500;transition:background .2s,border-color .2s,transform .2s;display:inline-flex}.ghost-button:hover:not(:disabled){background:var(--surface-strong);border-color:#ffffff47;transform:translateY(-1px)}.ghost-button:disabled{opacity:.4}.conversation{padding:32px max(24px, calc((100% - var(--content-width)) / 2)) 24px;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;flex-direction:column;flex:1;gap:22px;display:flex;overflow-y:auto}.hero{text-align:center;margin:auto 0;padding:24px 0;animation:.7s ease-out both rise}.hero-logo{background:var(--surface);border:1px solid var(--border);border-radius:28px;margin-bottom:26px;padding:18px;animation:6s ease-in-out infinite float;display:inline-flex;box-shadow:0 0 80px -10px #ff8a3d8c}.hero h2{font-family:var(--font-display);letter-spacing:-.035em;margin:0 0 18px;font-size:clamp(2rem,5vw,3.4rem);font-weight:700;line-height:1.05}.hero>p{max-width:540px;color:var(--text-soft);margin:0 auto 36px;font-size:1.05rem;line-height:1.6}.suggestions{text-align:left;grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.suggestion{text-align:left;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(12px);align-items:center;gap:14px;padding:16px 18px;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;animation:.6s ease-out both rise;display:flex}.suggestion:hover{background:var(--surface-strong);border-color:#ff8a3d80;transform:translateY(-3px);box-shadow:0 14px 40px -18px #ff8a3d99}.suggestion-icon{border:1px solid var(--border);background:linear-gradient(135deg,#ff5a4533,#ffc04d2e);border-radius:12px;flex:0 0 44px;place-items:center;height:44px;font-size:1.35rem;display:grid}.suggestion strong{margin-bottom:3px;font-size:.95rem;font-weight:600;display:block}.suggestion small{color:var(--text-dim);font-size:.8rem}.row{gap:12px;animation:.35s ease-out both rise;display:flex}.row.user{justify-content:flex-end}.avatar{background:var(--surface-strong);border:1px solid var(--border);border-radius:12px;flex:0 0 36px;place-items:center;height:36px;display:grid}.avatar.pulsing{animation:1.6s ease-in-out infinite pulse}.error-avatar{color:#ff8080;font-weight:800}.bubble{border-radius:var(--radius-lg);max-width:min(680px,100%);padding:14px 18px;font-size:.97rem;line-height:1.65}.user-bubble{background:var(--gradient);color:#fff;white-space:pre-wrap;border-bottom-right-radius:6px;box-shadow:0 12px 32px -14px #ff8a3dcc}.assistant-bubble{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);border-top-left-radius:6px}.error-bubble{color:#ffb4b4;background:#ff3d3d1a;border:1px solid #ff3d3d59}.markdown>:first-child{margin-top:0}.markdown>:last-child{margin-bottom:0}.markdown p,.markdown ul,.markdown ol{margin:0 0 .8em}.markdown ul,.markdown ol{padding-left:1.3em}.markdown li{margin-bottom:.35em}.markdown li::marker{color:var(--pink)}.markdown strong{color:#fff;font-weight:650}.markdown code{background:#ffffff14;border-radius:6px;padding:2px 6px;font-size:.88em}.markdown a{color:#ffe2c4;vertical-align:baseline;background:#ff8a3d1f;border:1px solid #ff8a3d59;border-radius:999px;align-items:center;gap:6px;margin:2px;padding:2px 10px 2px 4px;font-size:.82rem;font-weight:500;line-height:1.6;text-decoration:none;transition:background .2s,border-color .2s,transform .2s;display:inline-flex}.markdown a:before{content:"▶";color:#fff;background:var(--gradient);border-radius:50%;place-items:center;width:18px;height:18px;padding-left:1px;font-size:.5rem;display:grid}.markdown a:hover{background:#ff8a3d3d;border-color:#ff8a3db3;transform:translateY(-1px)}.meta{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;display:flex}.chip{color:var(--text-soft);border:1px solid var(--border);background:#ffffff0f;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.74rem;font-weight:500;display:inline-flex}.time{color:var(--text-dim);margin-left:auto;font-size:.74rem}.thinking{align-items:center;gap:12px;display:flex}.dots{gap:5px;display:inline-flex}.dots i{background:var(--gradient);border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite bounce}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}.shimmer{background:linear-gradient(90deg, var(--text-dim) 0%, #fff 50%, var(--text-dim) 100%);color:#0000;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;font-size:.92rem;animation:2s linear infinite shimmer}.composer-wrap{padding:8px max(24px, calc((100% - var(--content-width)) / 2)) 18px;padding-bottom:max(18px, env(safe-area-inset-bottom))}.composer{border:1px solid var(--border-strong);-webkit-backdrop-filter:blur(20px)saturate(150%);box-shadow:var(--shadow);background:#0a1a24c7;border-radius:26px;align-items:flex-end;gap:10px;padding:8px 8px 8px 20px;transition:border-color .25s,box-shadow .25s;display:flex}.composer:focus-within{box-shadow:var(--shadow), 0 0 0 4px #ff8a3d1f, 0 0 50px -12px #ff8a3d80;border-color:#ff8a3d8c}.composer textarea{resize:none;min-height:40px;max-height:180px;color:var(--text);font:inherit;background:0 0;border:none;outline:none;flex:1;padding:10px 0;font-size:1rem;line-height:1.45}.composer textarea::placeholder{color:var(--text-dim)}.send-button{color:#fff;background:var(--gradient);border:none;border-radius:50%;flex:0 0 44px;place-items:center;height:44px;transition:transform .2s,opacity .2s,box-shadow .2s;display:grid;box-shadow:0 8px 24px -8px #ff8a3de6}.send-button:hover:not(:disabled){transform:scale(1.07)rotate(-4deg);box-shadow:0 10px 30px -6px #ff8a3d}.send-button:disabled{opacity:.3;box-shadow:none}.hint{text-align:center;color:var(--text-dim);margin:10px 0 0;font-size:.74rem}.hint-error{color:#ffb4b4}.voice-status{color:var(--text-soft)}.rec-dot{background:var(--red);border-radius:50%;width:8px;height:8px;margin-right:4px;animation:1s ease-in-out infinite blink;display:inline-block}.icon-button{height:40px;color:var(--text-soft);background:0 0;border:1px solid #0000;border-radius:50%;flex:0 0 40px;place-items:center;margin-bottom:2px;transition:background .2s,color .2s,border-color .2s;display:grid}.icon-button:hover:not(:disabled){color:var(--text);background:var(--surface-strong);border-color:var(--border)}.icon-button:disabled{opacity:.35}.icon-button.recording{color:#fff;background:var(--red);animation:1.6s ease-in-out infinite pulse}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{box-shadow:0 0 #ff8a3d73}50%{box-shadow:0 0 0 8px #ff8a3d00}}@keyframes bounce{0%,80%,to{opacity:.5;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=680px){.topbar{padding:12px 16px;padding-top:max(12px, env(safe-area-inset-top))}.composer-wrap{padding-left:12px;padding-right:12px}.brand p{display:none}.suggestions{grid-template-columns:1fr}.hero-logo{margin-bottom:18px}.avatar,.hint{display:none}}
