:root { --ink:#171126; --paper:#fcfbff; --muted:#6e687a; --line:#e2deea; --violet:#5b30ae; --violet2:#7c4bd9; --soft:#f0eaff; --danger:#7d1f42; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(130deg,#f7f2ff,#fff 50%,#f4effc); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:32px 0 26px; }
.brand { display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:-.04em; }
.mark { font-size:22px; color:var(--violet); }.prototype { font-size:10px; letter-spacing:.12em; color:var(--muted); border-left:1px solid var(--line); padding-left:12px; }
.hero { padding:52px 0 26px; }.eyebrow { margin:0 0 10px; color:var(--violet); font-size:12px; font-weight:800; letter-spacing:.11em; }.hero h1 { margin:0; max-width:680px; font-size:clamp(31px,5vw,52px); line-height:1.04; letter-spacing:-.055em; }.lead { color:var(--muted); line-height:1.55; max-width:600px; font-size:17px; }
.chat-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.9); box-shadow:0 20px 50px rgba(50,22,102,.10); }.progress-wrap { display:flex; align-items:center; gap:14px; padding:17px 22px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted); }.progress { flex:1; height:5px; background:var(--soft); border-radius:4px; overflow:hidden; }.progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--violet2)); transition:width .3s; }
.chat { min-height:330px; max-height:460px; overflow:auto; padding:26px 22px; display:flex; flex-direction:column; gap:14px; }.message { max-width:88%; padding:14px 15px; border-radius:15px; line-height:1.45; white-space:pre-wrap; font-size:15px; }.bot { align-self:flex-start; background:var(--soft); border-bottom-left-radius:4px; }.user { align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }.options { display:flex; flex-wrap:wrap; gap:8px; margin-top:-4px; }.option { color:var(--violet); border:1px solid #d7c8f4; background:#fff; padding:9px 11px; border-radius:10px; cursor:pointer; font-weight:700; }.option:hover,.option:focus { background:var(--soft); outline:2px solid #bda3ef; outline-offset:2px; }
.answer-form { border-top:1px solid var(--line); padding:16px 22px 18px; }.answer-form textarea { display:block; width:100%; border:1px solid #cfc8db; border-radius:11px; padding:11px; resize:vertical; font:inherit; color:var(--ink); }.answer-form textarea:focus { outline:3px solid #dfd1fa; border-color:var(--violet); }.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }button { border:0; border-radius:9px; padding:10px 15px; font-weight:800; cursor:pointer; font:inherit; }#send { background:var(--violet); color:#fff; }.ghost { background:transparent; color:var(--violet); }.hidden { display:none!important; }footer { color:var(--muted); font-size:12px; line-height:1.45; padding:16px 4px; }.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 (max-width:600px) { .shell { width:min(100% - 22px,760px); padding-top:20px; }.hero { padding-top:36px; }.chat { min-height:360px; padding:18px; }.answer-form,.progress-wrap { padding-left:18px; padding-right:18px; }.message { max-width:94%; } }