:root {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #0c1016;
  --line: rgba(255,255,255,.10);
  --muted: #9097a5;
  --text: #f5f7fb;
  --accent: #7bd8ff;
  --accent2: #a7ffcf;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; background: radial-gradient(circle at 30% 30%, rgba(42,102,127,.18), transparent 36%), radial-gradient(circle at 85% 8%, rgba(68,97,78,.13), transparent 29%), var(--bg); }
button, a { font: inherit; }
.shell { width: min(1260px, calc(100% - 40px)); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: white; text-decoration: none; font-weight: 700; letter-spacing: -.04em; font-size: 25px; }
.brand span { color: var(--accent); }
.badge { display:flex; gap:9px; align-items:center; border:1px solid var(--line); background:rgba(255,255,255,.025); padding:9px 13px; border-radius:999px; font-size:13px; color:#b7bdc9; }
.badge i { width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 16px var(--accent2); }
.stage { flex: 1; display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(320px, .7fr); gap:34px; align-items:center; padding: 12px 0 72px; }
.avatar-frame { min-height: 690px; position:relative; overflow:hidden; border-radius:32px; border:1px solid var(--line); background: radial-gradient(circle at 50% 38%, #172431 0, #0e151d 33%, #090d12 72%); box-shadow:0 40px 100px rgba(0,0,0,.42); }
.idle, .loading, .conversation-frame { position:absolute; inset:0; }
.conversation-frame { width:100%; height:100%; border:0; display:none; background:#080b10; }
.conversation-frame.active { display:block; }
.idle { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.silhouette { width:290px; height:430px; position:relative; filter: drop-shadow(0 35px 38px rgba(0,0,0,.45)); z-index:2; }
.head { width:180px; height:225px; position:absolute; left:55px; top:16px; border-radius:48% 48% 44% 44%; background:linear-gradient(150deg,#354654,#1a242d); box-shadow: inset -30px -24px 55px rgba(0,0,0,.22), inset 18px 12px 45px rgba(161,218,244,.06); }
.shoulders { width:290px; height:220px; position:absolute; bottom:0; border-radius: 48% 48% 18% 18% / 38% 38% 12% 12%; background:linear-gradient(160deg,#2c3c49,#151e26 64%); }
.pulse-ring { position:absolute; width:400px; height:400px; border:1px solid rgba(123,216,255,.12); border-radius:50%; animation:pulse 5s ease-in-out infinite; }
.ring-b { width:540px; height:540px; animation-delay:-2.1s; border-color:rgba(167,255,207,.08); }
@keyframes pulse { 0%,100%{transform:scale(.98);opacity:.5} 50%{transform:scale(1.035);opacity:1} }
.loading { z-index:8; display:grid; place-content:center; gap:14px; text-align:center; color:#b9c0cc; backdrop-filter:blur(12px); background:rgba(7,9,13,.72); }
.spinner { width:34px; height:34px; border:2px solid rgba(255,255,255,.14); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.panel { padding:12px 12px 12px 4px; }
.eyebrow { font-size:12px; letter-spacing:.18em; color:var(--accent); margin:0 0 18px; }
h1 { margin:0; font-size:clamp(44px,5vw,72px); line-height:.98; letter-spacing:-.055em; font-weight:650; }
.bio { color:#aab1be; font-size:19px; line-height:1.55; max-width:460px; margin:24px 0 34px; }
.talk-button { appearance:none; border:0; width:100%; max-width:390px; padding:18px 22px; border-radius:18px; background:white; color:#080a0d; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:11px; transition:transform .16s ease, opacity .16s ease; }
.talk-button:hover { transform:translateY(-1px); }
.talk-button:disabled { opacity:.45; cursor:wait; transform:none; }
.mic { color:#0a91c8; font-size:13px; }
.end-button { width:100%; max-width:390px; margin-top:12px; padding:14px 18px; border-radius:16px; border:1px solid var(--line); background:transparent; color:#c7ccd5; cursor:pointer; }
.hint { color:#777f8e; font-size:13px; margin:13px 0 0; }
.disclosure { font-size:12px; line-height:1.45; color:#606977; border-top:1px solid var(--line); margin-top:34px; padding-top:20px; max-width:390px; }
.demo-note { margin-top:22px; max-width:430px; padding:15px 16px; border:1px dashed rgba(123,216,255,.25); border-radius:14px; color:#91a8b2; font-size:13px; line-height:1.45; }
code { color:#b8eaff; }
.hidden { display:none !important; }
@media (max-width: 900px) {
  .shell { width:min(100% - 24px, 720px); }
  .topbar { height:70px; }
  .stage { grid-template-columns:1fr; align-items:start; gap:24px; padding-bottom:40px; }
  .avatar-frame { min-height:58vh; border-radius:24px; }
  .panel { padding:0 4px 20px; }
  .bio { margin:18px 0 24px; }
}