*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,sans-serif;background:#f8fbff;color:#163566}body{padding:18px}.app-shell{width:min(1100px,100%);margin:auto;background:linear-gradient(180deg,#edf8ff 0,#fff 55%,#fff7fb 100%);border-radius:34px;box-shadow:0 25px 70px rgba(36,88,140,.16);overflow:hidden;min-height:calc(100vh - 36px)}.topbar{display:flex;justify-content:space-between;align-items:center;padding:24px 30px 12px}.brand-mark{font-weight:900;font-size:42px;line-height:1;letter-spacing:-3px;color:#3185e8;text-shadow:2px 2px 0 #fff}.brand-mark span{color:#ff6da8}.tagline{font-size:13px;font-weight:700;color:#6981a3;margin-top:5px}.icon-btn{border:0;background:#fff;width:48px;height:48px;border-radius:16px;font-size:25px;color:#2d70c4;box-shadow:0 8px 20px rgba(39,93,145,.12);cursor:pointer}.hero{text-align:center;padding:10px 22px 22px;position:relative}.pipi-wrap{height:390px;display:flex;justify-content:center;align-items:end;position:relative}.antenna{position:absolute;top:34px;width:24px;height:74px;background:#73c8ff;border-radius:18px 18px 10px 10px;box-shadow:inset 0 -10px 15px rgba(0,90,180,.12)}.antenna:before{content:"";position:absolute;width:45px;height:45px;left:-10px;top:-24px;background:#238de5;border-radius:50%;box-shadow:0 8px 15px rgba(30,113,188,.25)}.pipi{width:300px;height:300px;position:relative;filter:drop-shadow(0 22px 25px rgba(37,98,150,.2))}.face{position:absolute;left:25px;top:35px;width:250px;height:175px;border-radius:65px;background:#111c37;border:10px solid #eef5ff;box-shadow:inset 0 0 30px rgba(0,0,0,.35);z-index:2}.ear{position:absolute;top:82px;width:38px;height:82px;background:#318ee7;border-radius:22px}.ear.left{left:3px}.ear.right{right:3px}.eye{position:absolute;top:53px;width:57px;height:67px;background:#061126;border-radius:50%;border:7px solid #55d8ff;box-shadow:0 0 17px #55d8ff}.eye:after{content:"";position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;top:8px;left:10px}.left-eye{left:47px}.right-eye{right:47px}.mouth{position:absolute;left:104px;top:122px;width:40px;height:22px;background:#ff7184;border-radius:0 0 24px 24px}.body{position:absolute;left:56px;top:205px;width:188px;height:95px;background:#f3f7ff;border-radius:70px 70px 40px 40px;border:7px solid #dcecff}.chest-light{width:38px;height:38px;border-radius:50%;background:#4bdcff;border:5px solid #fff;box-shadow:0 0 22px #38d8ff;position:absolute;left:68px;top:20px}.speech{margin:0 auto 8px;background:#fff;border-radius:24px;padding:16px 24px;box-shadow:0 10px 30px rgba(42,100,155,.12);max-width:530px;font-size:18px}.speech strong{display:block;font-size:24px;margin-bottom:5px;color:#287fd9}.speech span{color:#66809e}.status{font-weight:800;font-size:15px;margin-top:14px;color:#6a7e98}.transcript{min-height:26px;margin-top:7px;color:#2d5e91;font-size:16px}.talk-btn{margin:14px auto 0;width:190px;height:190px;border-radius:50%;border:12px solid #fff;background:linear-gradient(145deg,#55d8ff,#238be9);color:#fff;box-shadow:0 18px 38px rgba(35,139,233,.32);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-weight:900;font-size:18px}.talk-btn .mic{font-size:48px;line-height:1;color:#fff}.talk-btn.listening{background:linear-gradient(145deg,#ff86ad,#ff5d83);animation:pulse 1.2s infinite}.talk-btn.thinking{background:linear-gradient(145deg,#a98cff,#7158df)}@keyframes pulse{50%{transform:scale(1.035);box-shadow:0 0 0 18px rgba(255,104,145,.08),0 18px 38px rgba(255,80,120,.28)}}.hint{font-size:12px;color:#8ca0b8;margin:10px}.conversation{width:min(760px,calc(100% - 40px));margin:0 auto 22px;display:flex;flex-direction:column;gap:10px}.bubble{padding:13px 16px;border-radius:18px;max-width:80%;line-height:1.45;font-size:15px}.bubble.user{align-self:flex-end;background:#dff3ff}.bubble.pipi{align-self:flex-start;background:#fff0f6;box-shadow:0 5px 15px rgba(100,70,120,.06)}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 30px 30px}.tile{border:0;border-radius:25px;padding:24px 10px;min-height:125px;cursor:pointer;color:#18376d;font-size:16px;box-shadow:0 8px 22px rgba(54,90,130,.08)}.tile span{display:block;font-size:38px;margin-bottom:8px}.pink{background:#ffdce8}.blue{background:#d9f1ff}.yellow{background:#fff0b8}.green{background:#d8f8e9}.purple{background:#eadfff}.orange{background:#ffe0d3}footer{text-align:center;padding:0 20px 25px;color:#9aabc0;font-size:11px}@media(max-width:650px){body{padding:0}.app-shell{border-radius:0;min-height:100vh}.topbar{padding:20px}.brand-mark{font-size:36px}.pipi-wrap{height:300px;transform:scale(.78);transform-origin:bottom center}.speech{margin-top:-15px}.talk-btn{width:155px;height:155px}.talk-btn .mic{font-size:40px}.tiles{padding:15px;gap:10px}.tile{min-height:105px;padding:17px 5px}.tile span{font-size:30px}.conversation{width:calc(100% - 30px)}}