:root{color-scheme:dark;--bg:#050914;--panel:rgba(10,23,44,.78);--line:rgba(111,233,255,.18);--cyan:#67efff;--violet:#a66cff;--pink:#ff77d0;--ok:#5ff0a4;--warn:#ffd166;--danger:#ff647c;--text:#f6fbff;--muted:#93a9c7}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 50% -20%,#203477 0,transparent 45%),linear-gradient(165deg,#030611,#081225 60%,#040813);overflow-x:hidden}
body.night{--panel:rgba(3,8,18,.9);filter:saturate(.78)}button{font:inherit;color:inherit;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:14px;padding:11px 14px}.app-shell{width:min(100%,820px);margin:auto;padding:14px 14px calc(28px + env(safe-area-inset-bottom))}
.topbar,footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.topbar{padding:4px 2px 14px}.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:11px;color:#07111c;background:linear-gradient(135deg,var(--cyan),var(--pink));font-weight:900}.badge{padding:6px 10px;border:1px solid var(--warn);border-radius:99px;color:var(--warn);font-size:.7rem;font-weight:800}.badge.verified{color:var(--ok);border-color:var(--ok)}.badge.offline{color:var(--danger);border-color:var(--danger)}
.jeni-stage{position:relative;isolation:isolate;min-height:510px;padding:310px 18px 20px;text-align:center;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 50% 34%,rgba(100,238,255,.15),transparent 28%),linear-gradient(180deg,rgba(17,28,58,.82),var(--panel));box-shadow:0 28px 90px rgba(0,0,0,.44),inset 0 0 60px rgba(78,197,255,.05)}
.space-grid{position:absolute;z-index:-2;inset:0;opacity:.3;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;transform:perspective(340px) rotateX(58deg) scale(1.7);transform-origin:center bottom}
.orbit{position:absolute;left:50%;top:145px;border:1px solid rgba(103,239,255,.32);border-radius:50%;transform:translate(-50%,-50%);animation:spin 12s linear infinite}.orbit-one{width:250px;height:86px}.orbit-two{width:310px;height:120px;animation-direction:reverse;animation-duration:18s}
.jeni-avatar{position:absolute;left:50%;top:32px;width:180px;height:270px;transform:translateX(-50%);animation:breathe 3.2s ease-in-out infinite}.halo{position:absolute;left:50%;top:8px;width:152px;height:180px;border:2px solid var(--cyan);border-radius:50%;transform:translateX(-50%);filter:drop-shadow(0 0 16px var(--cyan));opacity:.34;animation:pulse 2.4s ease-in-out infinite}.hair{position:absolute;z-index:3;left:39px;top:23px;width:104px;height:116px;border-radius:52% 48% 42% 58%;background:linear-gradient(140deg,#d8faff 0,#8d91ff 36%,#283467 80%);clip-path:polygon(8% 0,87% 4%,100% 47%,83% 95%,69% 67%,58% 100%,45% 69%,25% 96%,0 44%);filter:drop-shadow(0 0 12px rgba(166,108,255,.8))}
.head{position:absolute;z-index:4;left:54px;top:48px;width:76px;height:92px;border-radius:46% 46% 50% 50%;background:linear-gradient(150deg,#f9e7f4,#ad8aca);box-shadow:inset -12px -8px 20px rgba(61,30,85,.25),0 0 20px rgba(255,119,208,.3)}.eye{position:absolute;top:43px;width:14px;height:7px;border-radius:50%;background:#12203d;box-shadow:0 0 8px var(--cyan);animation:blink 5s infinite}.eye.left{left:15px}.eye.right{right:15px}.mouth{position:absolute;left:50%;bottom:17px;width:18px;height:4px;border-bottom:2px solid #8b3e72;border-radius:50%;transform:translateX(-50%)}
.neck{position:absolute;z-index:2;left:78px;top:132px;width:28px;height:32px;background:#b18bad}.body{position:absolute;z-index:1;left:31px;top:154px;width:120px;height:112px;border-radius:52% 52% 20% 20%;background:linear-gradient(145deg,rgba(110,238,255,.75),rgba(89,70,176,.86) 48%,rgba(10,19,42,.9));clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);box-shadow:0 0 30px rgba(103,239,255,.42)}.core{position:absolute;left:50%;top:35px;width:26px;height:26px;border:2px solid var(--cyan);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 17px var(--cyan),inset 0 0 10px var(--cyan);animation:pulse 1.6s infinite}.arm{position:absolute;z-index:0;top:166px;width:26px;height:96px;border-radius:16px;background:linear-gradient(#688de0,#172344);transform-origin:top}.arm-left{left:20px;transform:rotate(12deg)}.arm-right{right:18px;transform:rotate(-12deg)}
.sound-wave{position:absolute;top:278px;left:50%;display:flex;align-items:center;gap:5px;height:23px;transform:translateX(-50%);opacity:.45}.sound-wave i{width:3px;height:6px;border-radius:4px;background:var(--cyan)}.eyebrow{margin:0;color:var(--cyan);font-size:.68rem;font-weight:800;letter-spacing:.18em}h1{margin:3px 0 0;font-size:2.3rem;letter-spacing:.32em;text-indent:.32em}.jeni-state{margin:3px 0 10px;color:var(--pink);font-weight:700}.jeni-message,.transcript{margin:8px auto;max-width:580px;color:var(--muted);font-size:.9rem;line-height:1.45}.transcript{min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.18)}
.controls,.toggles{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:13px}.primary{border:0;background:linear-gradient(135deg,#2fc7de,#8067e8);box-shadow:0 8px 28px rgba(61,190,225,.26);font-weight:800}.toggles button{padding:7px 10px;color:var(--muted);font-size:.68rem;font-weight:800}
.status-grid,.telemetry-grid{display:grid;gap:10px;margin-top:12px}.status-grid{grid-template-columns:repeat(3,1fr)}.telemetry-grid{grid-template-columns:repeat(2,1fr)}article{display:flex;flex-direction:column;gap:6px;padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}article span{color:var(--muted);font-size:.68rem;letter-spacing:.08em}article strong{font-size:.84rem;overflow-wrap:anywhere}.wide{grid-column:1/-1}footer{padding:16px 4px 0;color:var(--muted);font-size:.7rem}
.jeni-stage[data-state="listening"] .halo{border-color:var(--ok);filter:drop-shadow(0 0 20px var(--ok))}.jeni-stage[data-state="thinking"] .orbit{animation-duration:2.2s}.jeni-stage[data-state="speaking"] .sound-wave{opacity:1}.jeni-stage[data-state="speaking"] .sound-wave i{animation:wave .65s ease-in-out infinite alternate}.jeni-stage[data-state="speaking"] .sound-wave i:nth-child(2n){animation-delay:.18s}.jeni-stage[data-state="speaking"] .mouth{animation:lip-sync .28s ease-in-out infinite alternate;transform-origin:center bottom}.jeni-stage[data-state="warning"]{box-shadow:inset 0 0 70px rgba(255,209,102,.14)}.jeni-stage[data-state="success"] .core{border-color:var(--ok);box-shadow:0 0 24px var(--ok)}
@keyframes breathe{50%{transform:translateX(-50%) translateY(-5px) scale(1.012)}}@keyframes pulse{50%{opacity:.9;transform:translateX(-50%) scale(1.08)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.08)}}@keyframes wave{to{height:22px;background:var(--pink)}}@keyframes lip-sync{to{height:10px;border:2px solid #8b3e72;border-top:0;background:rgba(255,119,208,.22)}}
@media(max-width:600px){.jeni-stage{min-height:540px;padding-top:310px}.status-grid{grid-template-columns:1fr 1fr}.status-grid article:last-child{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}