:root{--navy:#29235f;--navy2:#2b2e68;--blue:#31356d;--slate:#494c77;--sun:#fbd161;--amber:#fb9f28;--orange:#ff6625;--red:#cf312e;--crimson:#82203c}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(ellipse 40% 30% at 30% 22%,rgba(166,239,252,.55),transparent 70%),radial-gradient(ellipse 35% 25% at 75% 70%,rgba(196,242,252,.35),transparent 70%),radial-gradient(ellipse at 50% 40%,#59cdee 0%,#49bce2 45%,#25ace1 100%);color:#f3eee6;font-family:"Inter","Helvetica Neue",system-ui,sans-serif;overflow:hidden}
#sea{position:fixed;inset:0;width:100%;height:100%}
.glass{background:rgba(12,70,120,.30);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 40px rgba(10,8,40,.35)}
.pill{position:fixed;top:18px;left:50%;transform:translateX(-50%);border-radius:999px;padding:7px 16px;color:#f3eee6;font:300 13px inherit;font-family:inherit;cursor:pointer;z-index:3}
#hist{position:fixed;top:58px;left:50%;transform:translateX(-50%);width:min(560px,92vw);max-height:50vh;overflow:auto;border-radius:18px;padding:14px 18px;z-index:3;font-size:14px;font-weight:300}
#hist .qa{margin:0 0 12px}#hist b{font-weight:500;color:var(--sun)}.empty{opacity:.6;margin:0}
main{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;z-index:2;pointer-events:none}
main>*{pointer-events:auto}
h1{font-weight:100;font-size:clamp(34px,6vw,68px);letter-spacing:-.02em;margin:0 0 28px;text-shadow:0 2px 24px rgba(6,50,95,.6)}
.box{width:min(640px,100%);border-radius:28px;padding:14px 16px 10px 22px}
textarea{width:100%;background:none;border:0;outline:0;resize:none;color:#fff;font:300 16px/1.5 inherit;font-family:inherit;max-height:30vh}
textarea::placeholder{color:rgba(243,238,230,.55)}
.row{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.hint{font:12px ui-monospace,monospace;opacity:.55}
#send{width:36px;height:36px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--amber),var(--orange));color:#2b2e68;font-size:17px;cursor:pointer}
#send:focus-visible,.pill:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
#ans{width:min(640px,100%);margin-top:18px;font-weight:300;line-height:1.55;min-height:3em;text-shadow:0 1px 12px rgba(6,50,95,.9)}
@media (max-width:520px){.hint{display:none}.box{border-radius:22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:520px){h1{font-weight:200}}

h1{min-height:1.25em;cursor:pointer;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.caret{display:inline-block;width:.04em;min-width:1px;height:.95em;margin-left:.06em;vertical-align:-.1em;background:currentColor;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:520px){h1{font-size:clamp(22px,7.4vw,34px)}}
@media (prefers-reduced-motion:reduce){.caret{display:none}}