:root{--bg:#f6f3ff;--ink:#171640;--muted:#716d91;--violet:#7357ff;--coral:#ff665c;--mint:#bdf4d0;--line:#ded9ef;--white:#fff;--sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:var(--bg)}button,select{font:inherit;color:inherit}.shell{min-height:100dvh;max-width:820px;margin:auto;display:flex;flex-direction:column;overflow:hidden}.top{height:68px;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;padding:env(safe-area-inset-top) 18px 0}.top h1{font-size:17px;text-align:center;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{border:0;background:transparent;width:46px;height:46px;border-radius:50%;font-size:22px}.stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 22px 170px;text-align:center}.portrait-wrap{position:relative;width:min(56vw,250px);aspect-ratio:1;margin-top:8px}.portrait-ring{position:absolute;inset:0;border-radius:50%;background:#eadfff;border:1px solid #d9cefa;transform:scale(1.07)}.portrait{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.live-dot{position:absolute;right:8%;bottom:8%;width:22px;height:22px;background:#45c977;border:4px solid var(--bg);border-radius:50%}.person h2{font-size:32px;margin:20px 0 2px}.person p{margin:0;color:var(--muted)}.state{color:var(--violet);font-weight:700;margin-top:22px}.wave{height:42px;display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0 12px}.wave i{display:block;width:4px;height:10px;border-radius:9px;background:var(--violet);animation:wave 1s ease-in-out infinite}.wave i:nth-child(2n){animation-delay:.13s}.wave i:nth-child(3n){animation-delay:.27s}.wave.paused i{animation:none;height:5px}@keyframes wave{0%,100%{height:8px;opacity:.5}50%{height:32px;opacity:1}}.subtitle{position:relative;width:min(100%,620px);background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 58px 20px 20px;text-align:left;font-size:18px;line-height:1.5;box-shadow:0 12px 40px #4c3c9e0d}.replay{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--violet);color:var(--violet);background:#fff}.progress{width:min(100%,620px);display:flex;align-items:center;gap:14px;margin-top:16px;color:var(--violet);font-size:13px}.track{height:4px;flex:1;background:#ddd8eb;border-radius:9px;overflow:hidden}.track span{display:block;height:100%;width:25%;background:var(--violet)}.dock{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,820px);padding:12px 24px calc(14px + env(safe-area-inset-bottom));background:#f6f3fff0;backdrop-filter:blur(14px);display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:end}.dock button{border:0;background:transparent}.utility{display:grid;justify-items:center;gap:6px;font-size:12px}.utility span:first-child{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--violet);font-size:20px}.mic{display:grid;justify-items:center;gap:7px;font-weight:700}.mic span:first-child{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--coral);color:#fff;font-size:31px;box-shadow:0 11px 28px #ff665c42;transition:.2s}.mic.listening span:first-child{transform:scale(1.06);box-shadow:0 0 0 10px #ff665c20}.sheet{position:fixed;z-index:10;left:50%;bottom:0;transform:translate(-50%,105%);width:min(100%,820px);background:#fff;border-radius:24px 24px 0 0;padding:12px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px #1d14552b;transition:.28s}.sheet.open{transform:translate(-50%,0)}.handle{width:40px;height:5px;background:#d8d6df;border-radius:9px;margin:0 auto 18px}.sheet h3{font-size:21px;margin:0 0 14px}.tip{background:#effcf4;border:1px solid #9fe6b8;border-radius:14px;padding:15px;text-align:left;line-height:1.45}.primary{width:100%;border:0;border-radius:14px;background:var(--violet);color:#fff;padding:15px;margin-top:14px;font-weight:700}.transcript{max-height:45vh;overflow:auto;text-align:left}.turn{padding:12px 0;border-bottom:1px solid #eeeaf6}.turn b{display:block;font-size:12px;color:var(--violet);margin-bottom:4px}.scenario-screen{min-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 22px 30px}.scenario-screen h1{font-size:32px;margin:20px 0 6px}.scenario-screen>p{color:var(--muted);margin-bottom:28px}.scenario-list{display:grid;gap:12px}.scenario{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;text-align:left}.scenario b{display:block;font-size:17px;margin-bottom:5px}.scenario small{color:var(--muted)}.start{margin-top:24px}.hidden{display:none!important}
@media(min-width:700px){.stage{padding-top:18px}.portrait-wrap{width:230px}.subtitle{font-size:20px}.dock{border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0}}
.offline-dot{background:#aaa4bd}.live-label{margin-top:14px;color:var(--muted);font-size:12px}.start-live{margin-top:18px;border:0;border-radius:16px;background:var(--violet);color:#fff;padding:15px 24px;font-weight:750;box-shadow:0 12px 28px #7357ff2b}.start-live:active{transform:translateY(1px)}.mic:disabled{opacity:.48}