:root{
  --bg:#17130f; --bg2:#221c16; --panel:rgba(255,255,255,.04); --line:rgba(255,255,255,.10);
  --ink:#fff; --muted:rgba(255,255,255,.60); --faint:rgba(255,255,255,.38);
  --orange:#FF5600; --green:#7BC47F;
  --serif:"Playfair Display",Georgia,serif; --sans:"Onest",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{ background:radial-gradient(120% 80% at 70% -10%,rgba(255,86,0,.18),transparent 60%),linear-gradient(160deg,#17130f,#241d16 70%,#2c231b);
  color:var(--ink); font-family:var(--sans); font-weight:450; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
#app{ min-height:100dvh; display:flex; flex-direction:column; max-width:840px; margin:0 auto; padding:0 20px; }
.top{ display:flex; align-items:center; justify-content:space-between; padding:22px 2px; }
.brand{ display:flex; align-items:center; gap:9px }
.brand b{ font-family:var(--serif); font-weight:800; font-size:22px }
.brand span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:3px 7px }
.env{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.dot{ width:8px;height:8px;border-radius:50%;background:var(--faint);transition:.3s }
.dot.on{ background:var(--green); box-shadow:0 0 10px rgba(123,196,127,.7) }
.dot.warn{ background:var(--orange) }

.stage{ flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:40px }
.hero{ text-align:center; padding:40px 0 }
.hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,9vw,72px); margin:0; letter-spacing:-.02em }
.hero .sub{ font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:10px 0 40px }
.big{ font-size:19px; padding:18px 40px }
.btn-primary{ font-family:var(--sans); font-weight:600; background:var(--orange); color:#fff; border:none; border-radius:14px; cursor:pointer; transition:transform .15s,box-shadow .2s; box-shadow:0 10px 30px rgba(255,86,0,.28) }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,86,0,.36) }
.btn-primary:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none }
.hint{ color:var(--faint); font-size:13px; margin-top:20px }
.code-wrap{ margin-bottom:22px }
.code-wrap input{ font-family:var(--sans); font-size:16px; text-align:center; padding:13px 18px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:#fff; width:240px; outline:none }
.code-wrap input:focus{ border-color:var(--orange) }

/* live */
.orb-row{ display:flex; justify-content:center; margin:10px 0 26px }
.orb{ width:190px;height:190px;border-radius:50%; display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,86,0,.30),rgba(255,86,0,.05) 70%);
  border:1px solid rgba(255,86,0,.35); font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  transition:.35s; }
.orb.listening{ box-shadow:0 0 0 0 rgba(123,196,127,.5); border-color:rgba(123,196,127,.6); animation:pulse 2s infinite }
.orb.thinking{ border-color:rgba(255,214,0,.6); animation:none; opacity:.9 }
.orb.speaking{ border-color:var(--orange); box-shadow:0 0 60px rgba(255,86,0,.45); animation:breathe 1.1s infinite }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(123,196,127,.35)} 70%{box-shadow:0 0 0 26px rgba(123,196,127,0)} 100%{box-shadow:0 0 0 0 rgba(123,196,127,0)} }
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

.controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:24px }
.ctl{ font-family:var(--sans); font-weight:500; font-size:14px; padding:11px 18px; border-radius:11px; cursor:pointer;
  background:var(--panel); color:#fff; border:1px solid var(--line); transition:.15s }
.ctl:hover{ border-color:rgba(255,255,255,.35) }
.ctl.danger{ color:#ff7a52; border-color:rgba(255,86,0,.4) } .ctl.danger:hover{ background:rgba(255,86,0,.1) }
.ctl.muted{ background:rgba(255,86,0,.14); border-color:var(--orange); color:#ffb599 }

.transcript{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:8px; min-height:180px; max-height:44vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px }
.msg{ padding:10px 14px; border-radius:12px; max-width:88%; line-height:1.45; font-size:15.5px; white-space:pre-wrap; word-wrap:break-word }
.msg .who{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:3px }
.msg.user{ align-self:flex-end; background:rgba(255,86,0,.16) }
.msg.agent{ align-self:flex-start; background:rgba(255,255,255,.05) }
.msg.interim{ opacity:.55 }
.transcript .empty{ color:var(--faint); text-align:center; padding:60px 0; font-size:14px }

.diag{ margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:4px 16px }
.diag summary{ cursor:pointer; padding:12px 0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.diag-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px; padding:6px 0 16px }
.diag-grid > div{ display:flex; justify-content:space-between; gap:10px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.05); padding-bottom:6px }
.diag-grid .k{ color:var(--faint); font-family:var(--mono); font-size:11px; letter-spacing:.05em }
.diag-grid .v{ color:#fff; font-family:var(--mono); font-size:12px }
.diag-grid .v.metric{ color:var(--orange) }
@media(max-width:520px){ .diag-grid{ grid-template-columns:1fr } }
.err{ color:#ff7a52; text-align:center; font-size:14px; margin-top:14px }