:root{--bg:#08111e;--panel:#101d2d;--panel2:#142337;--text:#f3f7fa;--muted:#9bacbd;--accent:#8facff;--accent2:#78e6cd;--warn:#ffcc7d;--danger:#ff8b9d;--border:rgba(255,255,255,.09)}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0,rgba(143,172,255,.14),transparent 35%),radial-gradient(circle at 90% 100%,rgba(120,230,205,.09),transparent 34%),var(--bg);min-height:100vh}.demo-head{width:min(940px,calc(100% - 32px));margin:0 auto;padding:22px 0;display:flex;justify-content:space-between;align-items:center}.demo-head a{color:#c5d2df;text-decoration:none;font-size:.78rem}.demo-brand{display:flex;align-items:center;gap:10px;font-weight:800}.demo-brand i{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#07111f;font-style:normal}.demo-shell{width:min(940px,calc(100% - 32px));margin:20px auto 80px}.demo-intro{text-align:center;max-width:700px;margin:45px auto 30px}.eyebrow{font-weight:800;letter-spacing:.13em;font-size:.62rem;color:var(--accent2)}h1{font-size:clamp(2.7rem,7vw,5rem);line-height:.93;letter-spacing:-.055em;margin:12px 0 18px}h1 span{color:var(--accent)}.demo-intro p{color:var(--muted);line-height:1.7}.scenario-card{border:1px solid var(--border);border-radius:30px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:0 28px 90px rgba(0,0,0,.35)}.scenario-top{padding:17px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:#9aaabd}.scenario-top b{letter-spacing:.12em;color:#cbd8e5}.scene{padding:46px;min-height:330px;position:relative;background:linear-gradient(145deg,#142238,#0f1a2a)}.scene::after{content:"";position:absolute;inset:auto -80px -120px auto;width:360px;height:360px;border-radius:50%;border:1px solid rgba(143,172,255,.13);box-shadow:0 0 0 45px rgba(143,172,255,.025),0 0 0 90px rgba(143,172,255,.013)}.chat{max-width:620px;position:relative;z-index:2}.chat-label{font-size:.65rem;color:#8ba1b7;letter-spacing:.08em;margin-bottom:18px}.bubble{width:max-content;max-width:84%;padding:13px 16px;border-radius:18px 18px 18px 5px;background:#1f3149;margin:8px 0;color:#dbe6ef;font-size:.9rem;line-height:1.5}.bubble.them{margin-left:auto;border-radius:18px 18px 5px 18px;background:rgba(143,172,255,.2);border:1px solid rgba(143,172,255,.14)}.bubble.flag{border-color:rgba(255,139,157,.25);background:rgba(255,139,157,.11)}.question{padding:34px 38px 40px}.question small{color:var(--accent2);font-weight:800;letter-spacing:.11em}.question h2{font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.04em;margin:9px 0 22px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{appearance:none;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.025);padding:17px;text-align:left;color:#dce6ee;cursor:pointer;font:600 .82rem/1.35 Inter;transition:.2s ease}.choice:hover{transform:translateY(-2px);border-color:rgba(143,172,255,.35);background:rgba(143,172,255,.08)}.feedback{display:none;margin-top:20px;padding:20px;border-radius:16px;background:rgba(120,230,205,.07);border:1px solid rgba(120,230,205,.16)}.feedback.show{display:block;animation:in .25s ease both}.feedback h3{margin:0 0 8px;font-size:1rem}.feedback p{margin:0;color:#aebdca;font-size:.8rem;line-height:1.65}.feedback.warning{background:rgba(255,204,125,.07);border-color:rgba(255,204,125,.18)}.continue{display:none;margin-top:18px}.continue.show{display:inline-flex}.button{border:0;border-radius:14px;padding:12px 16px;text-decoration:none;cursor:pointer;font-weight:800;font-size:.74rem;background:linear-gradient(135deg,var(--accent),#adc2ff);color:#08111e}.reflection{display:none;padding:38px}.reflection.show{display:block}.reflection h2{font-size:2rem;margin:0 0 8px}.reflection>p{color:var(--muted);line-height:1.6}.reflection-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.reflect-card{padding:19px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.025)}.reflect-card b{display:block;font-size:.75rem;color:var(--accent2);margin-bottom:7px}.reflect-card span{color:#aebdca;font-size:.78rem;line-height:1.55}.help-card{grid-column:1/-1;border-color:rgba(255,139,157,.16);background:rgba(255,139,157,.055)}.disclaimer{margin:18px 0 0;color:#788b9f;font-size:.66rem;line-height:1.55}.restart{margin-top:22px;background:transparent;color:#cdd9e3;border:1px solid var(--border)}@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:650px){.scene{padding:28px 22px}.question{padding:28px 22px 32px}.choices,.reflection-grid{grid-template-columns:1fr}.bubble{max-width:94%}.help-card{grid-column:auto}}
.demo-brand img{width:112px;height:auto;display:block}