:root{--green:#39d97e;--bg:#070b09;--card:#121a16;--line:#24352d;--text:#eaf4ec;--dim:#93a89c}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 15% -10%,#143524 0,transparent 60%),var(--bg);color:var(--text);font-family:system-ui,Arial,sans-serif}
header{padding:22px 22px 6px}
h1{margin:0;font-size:30px}
.live{display:inline-flex;align-items:center;gap:8px;background:#0e241a;border:1px solid #2a5a40;color:var(--green);padding:7px 12px;border-radius:20px;font-weight:700}
.live i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes talk{50%{height:22px;width:28px}}
.sub{color:var(--dim);max-width:760px;line-height:1.5}
.small{color:var(--dim);font-size:13px;line-height:1.5}
.hero{display:flex;flex-wrap:wrap;gap:12px;padding:16px 22px 0}
.stat{flex:1;min-width:160px;background:#101a15;border:1px solid var(--line);border-radius:18px;padding:16px}
.stat b{display:block;font-size:22px}
.stat span{color:var(--dim);font-size:13px}
.controls{padding:16px 22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
button{background:var(--green);color:#07130c;border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer}
button:hover{transform:scale(1.03)}
button:active{transform:scale(.97)}
button.ghost{background:#22332e;color:var(--text)}
.check{display:flex;gap:6px;align-items:center}
.grid{padding:0 22px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
.card.wide{grid-column:1/-1}
.face{width:150px;height:150px;border-radius:50%;background:#0e241a;border:2px solid #2a5a40;margin:10px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.face.speaking .mouth{animation:talk .35s infinite}
.eyes{display:flex;gap:36px}
.eyes i{display:block;width:18px;height:18px;border-radius:50%;background:var(--green);animation:blink 4s infinite}
.mouth{width:36px;height:10px;border-radius:12px;background:var(--green)}
video{width:100%;border-radius:14px;background:#000;min-height:180px}
.box{background:#0b1210;border:1px solid var(--line);border-radius:12px;padding:12px;min-height:44px;white-space:pre-wrap}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
input{padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1210;color:var(--text)}
.snaps{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.snaps img{width:120px;border-radius:10px;border:1px solid var(--line)}
footer{padding:0 22px 30px}