*{box-sizing:border-box}
:root{
  --bg:#031225;
  --bg-2:#071a33;
  --panel:rgba(7,23,45,.88);
  --panel-2:rgba(12,32,61,.78);
  --line:rgba(42,216,255,.22);
  --line-strong:rgba(42,216,255,.42);
  --text:#edf8ff;
  --muted:#a8c4d7;
  --accent:#25d9ff;
  --accent-2:#2f74ff;
  --violet:#7868ff;
  --good:#34d399;
  --danger:#fb7185;
  --shadow:0 28px 80px rgba(0,0,0,.38);
}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,Segoe UI,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 10%,rgba(37,217,255,.28),transparent 28%),
    radial-gradient(circle at 86% 12%,rgba(47,116,255,.26),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(120,104,255,.16),transparent 34%),
    linear-gradient(135deg,#031225 0%,#06172d 48%,#0b1024 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 75%);
}
.wrap{width:min(1320px,94vw);margin:auto;padding:38px 0 56px;position:relative;z-index:1}
.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
.hero-copy{max-width:820px}
.tag{color:var(--accent);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;margin:0 0 8px}
h1{font-size:clamp(46px,7vw,92px);letter-spacing:-.08em;line-height:.9;margin:0 0 14px;text-shadow:0 0 28px rgba(37,217,255,.18)}
.hero p:last-child{color:var(--muted);line-height:1.7;margin:0}
.hero-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.status-dot{width:10px;height:10px;border-radius:999px;background:var(--good);box-shadow:0 0 18px var(--good)}
.status-text{font-size:13px;font-weight:900;color:#c5f7ff;margin-right:6px}
.main-grid{display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:stretch}
.robot-card,.chat-card{background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.robot-card{display:flex;flex-direction:column;gap:18px;min-height:720px}
.robot-stage{display:grid;place-items:center;min-height:370px;border-radius:24px;background:linear-gradient(180deg,rgba(37,217,255,.1),rgba(7,23,45,.34));border:1px solid rgba(37,217,255,.15);padding:18px;overflow:hidden}
.robot-image{width:min(100%,330px);max-height:360px;object-fit:contain;filter:none;transition:transform .35s ease,filter .35s ease}
.robot-image.idle{animation:floaty 2.7s ease-in-out infinite}
.robot-image.speaking{animation:bounce .55s ease-in-out infinite alternate}
.robot-image.walking{animation:walkmove .55s ease-in-out infinite alternate}
.robot-image.playing{animation:playjump .75s ease-in-out infinite alternate}
.robot-image.lowpower{animation:lowpower 1.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-10px) scale(1.02)}}
@keyframes walkmove{0%{transform:translateX(-8px) rotate(-1deg)}100%{transform:translateX(8px) rotate(1deg)}}
@keyframes playjump{0%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(-14px) rotate(3deg)}}
@keyframes lowpower{0%,100%{opacity:1;filter:grayscale(.1) brightness(1)}50%{opacity:.72;filter:grayscale(.25) brightness(.8)}}
.robot-meta{padding:4px 2px 0}
.state-badge{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(37,217,255,.12);border:1px solid rgba(37,217,255,.2);color:#c7f8ff;text-transform:capitalize;font-weight:900;font-size:12px;letter-spacing:.04em}
#moodText{font-size:24px;margin:10px 0 6px}
#stateDesc{margin:0;color:var(--muted);line-height:1.6}
.state-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto}
.state-thumb{background:rgba(3,18,37,.55);border:1px solid rgba(37,217,255,.13);border-radius:18px;color:var(--text);padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;transition:.2s ease}
.state-thumb img{width:100%;height:70px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.04)}
.state-thumb span{text-transform:capitalize;font-size:12px;font-weight:800;color:#d8f4ff}
.state-thumb:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 10px 24px rgba(37,217,255,.08)}
.title-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}
h2{font-size:25px;margin:0}
.pill{border:1px solid rgba(37,217,255,.22);background:rgba(37,217,255,.12);border-radius:999px;padding:7px 11px;color:#c7f8ff;font-weight:900;font-size:12px}
.chat-box{height:460px;overflow:auto;border:1px solid rgba(37,217,255,.15);border-radius:20px;background:rgba(2,10,22,.42);padding:18px;display:flex;flex-direction:column;gap:12px;scrollbar-color:rgba(37,217,255,.3) transparent}
.bubble{max-width:88%;padding:13px 15px;border-radius:17px;line-height:1.65;white-space:pre-wrap;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.user{align-self:flex-end;background:linear-gradient(135deg,rgba(37,217,255,.18),rgba(47,116,255,.18));border:1px solid rgba(37,217,255,.12)}
.bot{align-self:flex-start;background:rgba(120,104,255,.18);border:1px solid rgba(120,104,255,.12)}
.error{align-self:flex-start;background:rgba(251,113,133,.14);border:1px solid rgba(251,113,133,.25)}
.input-row{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:16px;align-items:end}
textarea{width:100%;min-height:88px;resize:vertical;border:1px solid rgba(37,217,255,.2);background:rgba(2,10,22,.62);color:var(--text);border-radius:16px;padding:14px;font:inherit;outline:none;line-height:1.5}
textarea:focus{border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(37,217,255,.08)}
.btn,.chips button{border:0;border-radius:15px;padding:13px 16px;color:var(--text);font-weight:900;cursor:pointer;background:rgba(148,163,184,.18);transition:.18s ease}
.btn:hover,.chips button:hover{transform:translateY(-1px)}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#031225;box-shadow:0 16px 34px rgba(37,217,255,.16)}
.primary:disabled{opacity:.7;cursor:not-allowed;transform:none}
.secondary{background:rgba(37,217,255,.12);border:1px solid rgba(37,217,255,.22)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chips button{border-radius:999px;padding:8px 12px;color:#c7f8ff;border:1px solid rgba(37,217,255,.14);background:rgba(37,217,255,.1)}
.note{color:var(--muted);font-size:13px;margin:16px 2px 0;line-height:1.6}
code{color:#c7f8ff;background:rgba(37,217,255,.08);border:1px solid rgba(37,217,255,.12);border-radius:8px;padding:2px 6px}
@media(max-width:960px){.hero{flex-direction:column;align-items:flex-start}.hero-actions{justify-content:flex-start}.main-grid{grid-template-columns:1fr}.input-row{grid-template-columns:1fr}.state-gallery{grid-template-columns:repeat(2,1fr)}h1{font-size:52px}.robot-card{min-height:auto}}