:root{color-scheme:dark;--bg:#101413;--panel:#181e1b;--border:#303a34;--text:#eef4ed;--muted:#a9b8ae;--lime:#cbf497;font-family:Inter,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 23% 37%,#19251a 0,transparent 45%),var(--bg);color:var(--text);min-height:100vh}
.top,footer{max-width:1320px;margin:auto;padding:0 44px;display:flex;align-items:center;justify-content:space-between}
.top{height:78px;border-bottom:1px solid #2a332d}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px}
.brand-mark{display:grid;place-items:center;background:var(--lime);color:#172316;width:30px;height:30px;border-radius:9px}
.local{display:flex;align-items:center;gap:8px;color:#c4d2c6;font-size:13px}
.local span,.engines i{width:7px;height:7px;display:inline-block;border-radius:50%;background:#819084}
.local span,.engines .ready i{background:var(--lime);box-shadow:0 0 12px #a2ff7860}
main{max-width:1240px;margin:0 auto;min-height:calc(100vh - 140px);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 44px}
.stage{text-align:center;min-width:0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.23em;color:#a3bc9e;margin:0 0 12px}
h1{font-size:clamp(48px,6.8vw,102px);font-weight:650;letter-spacing:-.095em;line-height:.97;margin:0 10px 16px 0}
.intro,.hint{color:var(--muted);margin:0}.intro{font-size:16px}
.visual{position:relative;margin:28px auto 14px;width:230px;height:230px;display:grid;place-items:center}
.halo{position:absolute;inset:2px;border:1px solid #a7d89830;border-radius:50%;box-shadow:0 0 46px #8bd45f14,inset 0 0 35px #8bd45f12}
.orb{position:relative;display:grid;place-items:center;border-radius:50%;width:180px;height:180px;background:radial-gradient(circle at 34% 24%,#d7ffa7 0%,#a7db6c 33%,#699f4e 65%,#355f39 100%);box-shadow:0 14px 65px #9df77920,inset 0 0 24px #34643590}
.wave{display:flex;align-items:center;gap:5px}.wave i{display:inline-block;width:4px;height:18px;border-radius:5px;background:#243a22}.wave i:nth-child(even){height:31px}.wave i:nth-child(4){height:45px}
.visual[data-state="listening"] .wave i,.visual[data-state="speaking"] .wave i,.visual[data-state="hearing"] .wave i{animation:wave 1s ease-in-out infinite alternate}.wave i:nth-child(2n){animation-delay:-.35s!important}.wave i:nth-child(3n){animation-delay:-.7s!important}
.visual[data-state="working"] .halo{animation:pulse 1s ease-in-out infinite alternate}
@keyframes wave{to{transform:scaleY(.38)}}@keyframes pulse{to{transform:scale(1.05);opacity:.5}}
#state{font-weight:650;margin:0 0 16px;min-height:20px}.controls{display:flex;justify-content:center;gap:8px}
button{border:1px solid var(--border);background:#202923;color:var(--text);border-radius:10px;padding:10px 13px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
button:hover:not(:disabled){border-color:#8eae80}button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}button:disabled{opacity:.48;cursor:default}
.primary{background:var(--lime);color:#182616;border-color:var(--lime);padding:12px 18px}
.hint{font-size:12px;margin:13px 0 16px}#error{color:#ffc2a6;font-size:13px;overflow-wrap:anywhere}
.engines{display:flex;gap:17px;justify-content:center;font-size:11px;color:var(--muted)}.engines i{margin-right:4px}
.conversation{min-width:0;height:min(640px,calc(100vh - 180px));min-height:480px;background:var(--panel);border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 70px #0003}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:23px 23px 20px;border-bottom:1px solid var(--border)}
h2{font-size:25px;font-weight:640;letter-spacing:-.035em;margin:0}.panel-head .eyebrow{margin-bottom:6px}
#history{flex:1;overflow:auto;min-height:100px;display:flex;flex-direction:column;padding:19px 23px;gap:16px}
#empty{margin:auto;text-align:center;color:var(--muted);font-size:13px}#empty span{font-size:25px;color:#b7d9a8}
.entry{max-width:92%;margin:0;align-self:flex-start;min-width:0}.entry.user{align-self:flex-end;text-align:right}
.entry small{display:block;font-weight:700;color:#a3bc9e;margin:0 0 6px}.entry p{margin:0;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;background:#202923;border:1px solid #344434;padding:10px 13px;border-radius:12px;line-height:1.5}
.entry.user p{background:#2a3829}.entry.tool p{background:transparent;border-style:dashed;color:#b7d4ab;font-size:12px}
.samples{display:flex;gap:6px;padding:0 16px 10px}.samples[hidden]{display:none}.samples button{color:#cbddc7;font-size:12px;padding:7px 10px}
form{display:flex;gap:8px;padding:12px 15px 15px;border-top:1px solid var(--border)}
input{flex:1;min-width:0;border:1px solid #364138;background:#121814;color:var(--text);font:inherit;border-radius:9px;padding:11px 12px}input::placeholder{color:#96a69a}
form button{background:var(--lime);color:#182616;border-color:var(--lime);font-size:18px;width:43px;padding:0}
footer{gap:18px;min-height:62px;border-top:1px solid #2a332d;color:#92a49a;font-size:11px}footer span:last-child{letter-spacing:.14em;text-align:right}
@media(max-width:780px){.top,footer{padding-inline:20px}.top{height:60px}main{grid-template-columns:1fr;gap:28px;padding:34px 18px}.visual{width:176px;height:176px;margin-top:22px}.orb{width:135px;height:135px}.conversation{min-height:390px;height:480px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}