:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#f5f7f2;--surface:#fff;--surface-soft:#eef5f0;--ink:#18221f;--muted:#5d6863;--line:#d8ded8;--mint:#2c8b7d;--mint-dark:#196b61;--coral:#df6658;--amber:#d79b25;--blue:#2f78b7;--violet:#7057a4;--shadow:0 18px 48px #19272224;letter-spacing:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box}body{min-width:320px;min-height:100dvh;color:var(--ink);background:linear-gradient(135deg, #2f78b71a, transparent 34%), linear-gradient(225deg, #d79b2521, transparent 38%), var(--paper);margin:0}button,select,textarea,input{font:inherit;letter-spacing:0}button,select,input[type=range]{cursor:pointer}button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #2f78b752}#app{min-height:100dvh;padding:20px}.topbar{justify-content:space-between;align-items:center;gap:14px;max-width:1420px;margin:0 auto 14px;display:flex}.brand{align-items:center;gap:10px;min-width:0;font-size:1.02rem;font-weight:760;display:flex}.brand-mark{color:#fff;background:var(--ink);border-radius:8px;justify-content:center;align-items:center;width:48px;height:32px;font-size:.78rem;font-weight:850;display:inline-flex}.workspace{grid-template-columns:minmax(420px,1.16fr) minmax(356px,.84fr);gap:16px;max-width:1420px;margin:0 auto;display:grid}.stage-panel,.control-panel,.control-section{border:1px solid var(--line);box-shadow:var(--shadow);background:#ffffffd1;border-radius:8px}.stage-panel{overflow:hidden}.status-strip{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px;padding:12px;display:flex}.chip{min-height:30px;color:var(--ink);background:var(--surface-soft);white-space:nowrap;border-radius:8px;align-items:center;padding:5px 10px;font-size:.82rem;font-weight:760;display:inline-flex}.runtime-chip{color:#fff;background:var(--blue)}.voice-chip{color:#fff;background:var(--mint)}.stage{background:linear-gradient(#ffffffc7,#eef5f0e0),#eaf0ec;min-height:590px;position:relative;overflow:hidden}.stage-grid{opacity:.6;background-image:linear-gradient(#18221f12 1px,#0000 1px),linear-gradient(90deg,#18221f12 1px,#0000 1px);background-size:34px 34px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 12% 86%,#0000);mask-image:linear-gradient(#0000,#000 12% 86%,#0000)}.speech{z-index:4;width:min(560px,100% - 32px);min-height:68px;color:var(--ink);background:#ffffffeb;border:1px solid #18221f24;border-radius:8px;padding:14px 16px;font-size:.98rem;font-weight:680;line-height:1.48;position:absolute;top:30px;left:50%;transform:translate(-50%);box-shadow:0 14px 38px #1927221f}.waveform{z-index:4;opacity:0;align-items:flex-end;gap:7px;width:116px;height:68px;transition:opacity .18s;display:flex;position:absolute;bottom:56px;left:32px}.waveform span{background:var(--mint);transform-origin:bottom;border-radius:8px;width:9px;min-height:12px;animation:.76s ease-in-out infinite waveform}.waveform span:nth-child(2){background:var(--blue);animation-delay:80ms}.waveform span:nth-child(3){background:var(--amber);animation-delay:.16s}.waveform span:nth-child(4){background:var(--coral);animation-delay:.24s}.waveform span:nth-child(5){background:var(--violet);animation-delay:.32s}.waveform span:nth-child(6){background:var(--blue);animation-delay:.4s}.waveform span:nth-child(7){background:var(--mint);animation-delay:.48s}.stage[data-state=listening] .waveform,.stage[data-state=speaking] .waveform{opacity:1}.thoughts{z-index:4;opacity:0;gap:8px;transition:opacity .18s,transform .18s;display:flex;position:absolute;top:128px;right:18%;transform:translateY(8px)}.thoughts span{background:var(--amber);border-radius:50%;width:12px;height:12px;animation:.98s ease-in-out infinite thinkingDots}.thoughts span:nth-child(2){background:var(--mint);animation-delay:.12s}.thoughts span:nth-child(3){background:var(--blue);animation-delay:.24s}.stage[data-state=thinking] .thoughts{opacity:1;transform:translateY(0)}.avatar-shadow{filter:blur(2px);background:#18221f29;border-radius:50%;width:250px;height:42px;position:absolute;bottom:34px;left:50%;transform:translate(-50%)}.avatar{--mouth-open:0;z-index:3;transform-origin:50% 90%;width:270px;height:430px;transition:transform .22s,filter .22s;animation:4.2s ease-in-out infinite avatarBreath;position:absolute;bottom:46px;left:50%;transform:translate(-50%)rotate(0)}.stage[data-state=listening] .avatar{transform:translate(-50%)rotate(-1.8deg)}.stage[data-state=thinking] .avatar{transform:translate(-50%)translateY(-4px)rotate(1.2deg)}.stage[data-state=speaking] .avatar{filter:saturate(1.04);transform:translate(-50%)translateY(-8px)rotate(1deg)}.stage[data-state=reacting] .avatar{transform:translate(-50%)translateY(-10px)rotate(-2deg)}.avatar-back-hair{background:#25302e;border-radius:46% 46% 40% 40%;width:196px;height:230px;position:absolute;top:34px;left:37px;box-shadow:inset 0 -28px #00000024}.avatar-neck{background:#f1b89e;border:2px solid #64392f52;border-radius:18px;width:46px;height:58px;position:absolute;top:224px;left:113px}.avatar-torso{background:linear-gradient(115deg,#0000 0 48%,#ffffff38 48% 58%,#0000 58%),#337d87;border:2px solid #17201d2e;border-radius:46px 46px 8px 8px;width:166px;height:142px;position:absolute;top:264px;left:52px;box-shadow:inset 0 -18px #00000014}.collar{background:#f5f7f2;border-radius:0 0 42px 42px;width:82px;height:42px;position:absolute;top:0;left:42px}.badge{background:var(--amber);border:4px solid #fffc;border-radius:50%;width:30px;height:30px;position:absolute;top:56px;right:34px}.avatar-arm{transform-origin:top;background:#2a6870;border-radius:28px;width:38px;height:112px;position:absolute;top:292px}.avatar-arm-left{left:34px;transform:rotate(12deg)}.avatar-arm-right{right:34px;transform:rotate(-12deg)}.stage[data-state=reacting] .avatar-arm-right{transform:rotate(-34deg)translateY(-10px)}.avatar-head{transform-origin:50% 76%;background:#f8c9ae;border:2px solid #64392f42;border-radius:48% 48% 44% 44%;width:180px;height:198px;transition:transform .18s;position:absolute;top:58px;left:45px;box-shadow:inset 16px -10px #dd8d6d29,0 12px 30px #19272224}.stage[data-state=listening] .avatar-head{transform:rotate(-3deg)translateY(1px)}.stage[data-state=thinking] .avatar-head{transform:rotate(4deg)translateY(-3px)}.stage[data-state=reacting] .avatar-head{transform:rotate(-5deg)translateY(-6px)}.hair{background:#25302e;height:76px;position:absolute;top:-20px}.hair-left{border-radius:58px 20px 54px 18px;width:112px;left:-4px;transform:rotate(-8deg)}.hair-right{border-radius:20px 58px 18px 54px;width:116px;right:-8px;transform:rotate(12deg)}.ear{background:#efb79e;border:2px solid #64392f3d;border-radius:50%;width:28px;height:38px;position:absolute;top:82px}.ear-left{left:-18px}.ear-right{right:-18px}.face{position:absolute;inset:0}.eye{background:#fffaf4;border:2px solid #2e231fe0;border-top-width:3px;border-radius:50%;width:32px;height:20px;transition:height .16s,transform .16s;position:absolute;top:84px;overflow:hidden}.eye span{background:#1a2522;border-radius:50%;width:10px;height:10px;transition:transform .16s;position:absolute;top:4px;left:10px}.eye-left{left:43px}.eye-right{right:43px}.brow{border-top:4px solid #25302e;border-radius:50%;width:34px;height:8px;transition:transform .16s;position:absolute;top:67px}.brow-left{left:42px}.brow-right{right:42px}.cheek{opacity:.38;background:#df6658;border-radius:50%;width:26px;height:12px;position:absolute;top:122px}.cheek-left{left:28px}.cheek-right{right:28px}.mouth{width:42px;height:calc(5px + var(--mouth-open) * 30px);min-height:5px;transform:translateX(-50%) scaleX(calc(1 + var(--mouth-open) * .18));background:#55262f;border:2px solid #743f38;border-radius:44% 44% 52% 52%;transition:height 70ms linear,transform 70ms linear,width .14s,border-radius .14s,background .14s;position:absolute;top:132px;left:50%;box-shadow:inset 0 -7px #ff737042}.stage:not([data-state=speaking]) .mouth{height:7px}.stage[data-emotion=happy]:not([data-state=speaking]) .mouth{height:24px;box-shadow:none;background:0 0;border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;border-radius:0 0 28px 28px;top:126px}.stage[data-emotion=happy] .eye{height:13px;transform:translateY(2px)}.stage[data-emotion=happy] .cheek{opacity:.62}.stage[data-emotion=surprised] .eye{height:26px}.stage[data-emotion=surprised] .mouth{border-radius:50%;width:34px}.stage[data-emotion=surprised]:not([data-state=speaking]) .mouth{height:28px}.stage[data-emotion=focused] .brow-left{transform:rotate(8deg)translateY(1px)}.stage[data-emotion=focused] .brow-right{transform:rotate(-8deg)translateY(1px)}.stage[data-emotion=focused] .eye span{transform:translateY(-1px)}.timeline{border-top:1px solid var(--line);background:var(--surface);grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:12px;list-style:none;display:grid}.timeline-step{border:1px solid var(--line);min-height:42px;color:var(--muted);background:var(--surface-soft);text-align:center;border-radius:8px;padding:10px;font-size:.78rem;font-weight:780}.timeline-step.is-active{color:#fff;border-color:var(--mint);background:var(--mint)}.timeline-step.is-done{color:var(--mint-dark);background:#2c8b7d1a;border-color:#2c8b7d57}.control-panel{align-content:start;gap:12px;padding:12px;display:grid}.control-section{box-shadow:none;padding:12px}.control-section.compact{gap:10px;display:grid}.section-title{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:.88rem;font-weight:820;display:flex}.mini-label{max-width:170px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:760;overflow:hidden}select,textarea{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:8px}select{min-height:36px;padding:0 10px;font-size:.86rem;font-weight:700}textarea{resize:vertical;width:100%;min-height:104px;padding:11px 12px;font-size:.92rem;line-height:1.45}.button-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.82fr);gap:8px;margin-top:10px;display:grid}.button,.segment,.text-button{border:1px solid var(--line);min-height:38px;color:var(--ink);background:var(--surface);overflow-wrap:anywhere;border-radius:8px;font-size:.86rem;font-weight:800;transition:transform .13s,border-color .13s,background .13s,color .13s}.button:hover,.segment:hover,.text-button:hover{border-color:#2c8b7d80;transform:translateY(-1px)}.button.primary{color:#fff;border-color:var(--mint);background:var(--mint)}.button.ghost,.text-button{color:var(--muted);background:0 0}.segmented{gap:6px;display:grid}.runtime-tabs{border:1px solid var(--line);background:#ffffffb8;border-radius:8px;grid-template-columns:repeat(2,minmax(86px,1fr));padding:4px}.state-grid,.emotion-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.segment.is-active{color:#fff;border-color:var(--ink);background:var(--ink)}.range-row,.select-row{color:var(--muted);grid-template-columns:minmax(94px,.36fr) minmax(0,1fr);align-items:center;gap:12px;font-size:.82rem;font-weight:780;display:grid}input[type=range]{width:100%;accent-color:var(--mint)}.packet-section pre{color:#effbf6;background:#17221f;border:1px solid #18221f1a;border-radius:8px;min-height:206px;max-height:310px;margin:0;padding:12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.76rem;line-height:1.5;overflow:auto}.event-log{gap:6px;min-height:154px;max-height:194px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.event-log li{color:var(--muted);background:var(--surface-soft);border:1px solid #18221f14;border-radius:8px;padding:8px 9px;font-size:.78rem;font-weight:700;line-height:1.35}@keyframes avatarBreath{0%,to{margin-bottom:0}50%{margin-bottom:5px}}@keyframes waveform{0%,to{height:16px}45%{height:60px}}@keyframes thinkingDots{0%,to{transform:translateY(0)}45%{transform:translateY(-8px)}}@media (width<=1060px){.workspace{grid-template-columns:1fr}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.packet-section,.event-section{grid-column:span 2}}@media (width<=720px){#app{padding:12px}.topbar{flex-direction:column;align-items:stretch}.brand{justify-content:space-between}.runtime-tabs{width:100%}.stage{min-height:500px}.speech{min-height:64px;font-size:.9rem;top:16px}.avatar{bottom:22px;transform:translate(-50%)scale(.74)}.stage[data-state=listening] .avatar{transform:translate(-50%)scale(.74)rotate(-1.8deg)}.stage[data-state=thinking] .avatar{transform:translate(-50%)translateY(-4px)scale(.74)rotate(1.2deg)}.stage[data-state=speaking] .avatar{transform:translate(-50%)translateY(-8px)scale(.74)rotate(1deg)}.stage[data-state=reacting] .avatar{transform:translate(-50%)translateY(-10px)scale(.74)rotate(-2deg)}.waveform{width:94px;bottom:26px;left:18px}.thoughts{top:118px;right:12%}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.control-panel,.packet-section,.event-section{grid-column:auto;grid-template-columns:1fr;display:grid}.state-grid,.emotion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.button-row,.range-row,.select-row{grid-template-columns:1fr}}