*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{position:relative;z-index:0;background:radial-gradient(ellipse at 50% 35%,#2a2f36,#121417 70%);color:#f2f2f2;font-family:"Lato","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;overflow-x:hidden}
main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2rem);padding:2rem 1rem;text-align:center}
.mark{width:clamp(72px,14vw,110px);height:auto}
.word{font-size:clamp(1.15rem,6vw,3.6rem);letter-spacing:.04em;font-weight:300;white-space:nowrap}
.word b{font-weight:800}
.cur{display:inline-block;width:.08em;height:1em;margin-left:.06em;background:#f2f2f2;vertical-align:-.12em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.soon{color:#b4bcc5;font-size:clamp(.8rem,2.5vw,1rem);letter-spacing:.3em;text-transform:uppercase}
.soon a{color:#b4bcc5}
.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}
@media (prefers-reduced-motion:reduce){.cur{animation:none}}
/* r2: light start -> dark end */
body,.word,.soon,.soon a,.cur{transition:background-color .8s ease,color .8s ease}
body::before{content:"";position:fixed;inset:0;background:#fff;opacity:0;transition:opacity .8s ease;z-index:-1}
body.light::before{opacity:1}
body.light .word{color:#3f5866}
body.light .cur{background:#3f5866}
body.light .soon,body.light .soon a{color:#5f7587}
.gap{display:inline}
.markwrap{position:relative;display:inline-block;width:clamp(72px,14vw,110px);aspect-ratio:1}
.markwrap .mark{position:absolute;inset:0;width:100%;transition:opacity .8s ease}
body.light .m-dark{opacity:0}
body:not(.light) .m-light{opacity:0}
.cur{transition:background-color .8s ease}
@media (prefers-reduced-motion:reduce){body,body *,body::before{transition:none!important}}
body.notr,body.notr *,body.notr::before{transition:none!important}
/* r4: lead box */
.lead{width:min(100%,34rem);display:grid;gap:.6rem;text-align:left;margin-top:clamp(.5rem,3vw,1.5rem);transition:opacity .8s ease}
.lead label{font-size:.9rem;color:#d5dbe1}
.lead .opt{color:#b4bcc5}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lead .row>div{display:grid;gap:.35rem;min-width:0}
.lead textarea,.lead input{width:100%;font:inherit;font-size:1rem;color:#f2f2f2;background:rgba(255,255,255,.06);border:1px solid #5b6570;border-radius:6px;padding:.65rem .75rem}
.lead textarea{resize:vertical;min-height:6rem}
.lead textarea:focus,.lead input:focus,.lead button:focus-visible{outline:2px solid #8fb3cc;outline-offset:2px}
.lead button{justify-self:start;font:inherit;font-weight:700;letter-spacing:.06em;background:#f2f2f2;color:#121417;border:0;border-radius:6px;padding:.7rem 1.6rem;cursor:pointer}
.lead button[disabled]{opacity:.6;cursor:progress}
.lead-msg{min-height:1.4em;font-size:.95rem;color:#b4bcc5}
.lead-msg.ok{color:#9fe0b4}.lead-msg.err{color:#ffb3a8}
.lead-back{color:#b4bcc5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:480px){.lead .row{grid-template-columns:1fr}}
body.light .lead{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
/* r6: tagline + chat */
.tag{color:#d5dbe1;font-size:clamp(.95rem,3.2vw,1.25rem);font-weight:300;letter-spacing:.02em;margin-top:calc(-1 * clamp(.4rem,1.5vw,1rem));transition:opacity .8s ease .15s}
body.light .tag{opacity:0;visibility:hidden;transition:none}
.chat{display:block}
.chat .prompt{font-size:clamp(1.05rem,3.6vw,1.3rem);color:#f2f2f2;margin-bottom:.6rem;min-height:1.4em}
.chat .entry{display:flex;gap:.5rem;align-items:stretch}
.chat .entry input{flex:1;min-width:0}
.chat .entry button{justify-self:auto;white-space:nowrap}
.chat .alt{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.chat .ghost{background:transparent;color:#d5dbe1;border:1px solid #5b6570;font-weight:400}
.chat .err{color:#ffb3a8;font-size:.9rem;min-height:1.3em;margin-top:.4rem}
.chat .bar{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:.8rem}
.chat .bar i{display:block;height:100%;width:100%;background:#8fb3cc;transform-origin:left;transform:scaleX(1)}
.chat .bar i.run{transition:transform linear}
@media (max-width:420px){.chat .entry{flex-direction:column}.chat .entry button{align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.chat .bar i.run{transition:none!important}}
/* r7: thread */
.chat{display:flex;flex-direction:column;gap:.5rem;width:min(100%,36rem)}
.chat .thread{max-height:50vh;min-height:8rem;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.55rem;padding:.75rem;border:1px solid #3a424b;border-radius:10px;background:rgba(255,255,255,.03);scroll-behavior:smooth}
.chat .thread:focus-visible{outline:2px solid #8fb3cc;outline-offset:2px}
.msg{display:flex;max-width:85%}
.msg p{margin:0;padding:.55rem .8rem;border-radius:14px;line-height:1.4;font-size:.98rem;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.agent{align-self:flex-start}
.msg.agent p{background:rgba(255,255,255,.07);color:#e8ecef;border-bottom-left-radius:4px}
.msg.visitor{align-self:flex-end}
.msg.visitor p{background:#3f5866;color:#fff;border-bottom-right-radius:4px}
.msg.typing p{display:flex;gap:.3rem;align-items:center;padding:.7rem .9rem}
.msg.typing i{width:.4rem;height:.4rem;border-radius:50%;background:#b4bcc5;animation:dot 1s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.chat .chips{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;min-height:0}
.chat .chip{font:inherit;font-size:.85rem;background:transparent;color:#d5dbe1;border:1px solid #5b6570;border-radius:999px;padding:.3rem .8rem;cursor:pointer}
.chat .chip:focus-visible{outline:2px solid #8fb3cc;outline-offset:2px}
.chat .bar{margin-top:0}
.chat .entry{flex-direction:row!important}
.chat .entry button{align-self:stretch!important}
.chat .entry input::placeholder{color:#8e98a2}
@media (max-width:600px){.chat .thread{max-height:58vh}}
@media (prefers-reduced-motion:reduce){.chat .thread{scroll-behavior:auto}.msg.typing i{animation:none}}
/* r8: arrow button */
.chat .entry button.arrow{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;align-self:center!important}
.chat .bar[hidden]{display:none}
/* r8: cumulative wordmark growth on interaction */
.word{transform-origin:50% 100%;transform:scale(var(--wm,1));transition:transform .55s cubic-bezier(.34,1.56,.64,1),color .8s ease}
@media (prefers-reduced-motion:reduce){.word{transition:none!important}}
/* r9: DOM order thread,bar,form,chips; visual order thread,chips,bar,form */
.chat .thread{order:0}.chat .chips{order:1}.chat .bar{order:2}.chat .entry{order:3}
.chat .entry input:disabled{opacity:.55}
.chat .thread{border-color:#5b6570}