:root{font-family:system-ui,Noto Sans JP,sans-serif;color:#37413f;background:#f5efe5}*{box-sizing:border-box}body,html{margin:0;min-height:100%;overscroll-behavior:none}body{background:#f5efe5}main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(9px,2.2dvh,18px);padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));text-align:center;overflow:hidden}time{font-size:clamp(26px,5vw,48px);color:#746f67;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.face{position:relative;width:min(66vw,34dvh,330px);min-width:150px;aspect-ratio:1;border-radius:48% 48% 44% 44%;background:#f4c96b;box-shadow:0 24px 70px #70572022;transition:.25s;flex:none}.face i{position:absolute;top:42%;width:clamp(18px,8%,28px);height:clamp(25px,11%,38px);border-radius:50%;background:#3c3a34;transform:translate(-50%,-50%)}.face i:first-child{left:35%}.face i:nth-child(2){left:65%}.face b{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-size:clamp(38px,18%,54px);font-weight:400;line-height:.4}.face.thinking{transform:rotate(-2deg)}.face.listening{box-shadow:0 0 0 10px #e8785b22,0 0 0 20px #e8785b12;animation:breathe 1.4s infinite alternate}.face.speaking b{animation:talk .45s infinite alternate}.face.speaking{background:#f6cf76}@keyframes talk{to{transform:translateX(-50%) scaleY(1.5)}}@keyframes breathe{to{transform:scale(1.025)}}h1{font-size:clamp(32px,6vw,58px);line-height:1;margin:0}.reply{font-size:clamp(20px,3.4vw,34px);line-height:1.45;min-height:2.9em;max-width:720px;margin:0}.reply,.talk{display:flex;align-items:center}.talk{gap:10px;width:min(680px,100%)}input{min-width:0;flex:1 1;border:2px solid #c8bba6;border-radius:20px;padding:14px 17px;font-size:clamp(18px,3vw,22px);background:#fffdf9;color:#37413f}button{flex:none;width:70px;height:70px;border:0;border-radius:50%;background:#d95f43;color:white;font-size:32px;box-shadow:0 8px 18px #8f3b2533;touch-action:manipulation}.mic.active{animation:pulse .8s infinite alternate}@keyframes pulse{to{transform:scale(1.1);background:#c94c31}}small{font-size:clamp(15px,2.5vw,18px);color:#665f56;min-height:1.4em}button:focus-visible,input:focus-visible{outline:4px solid #2563eb;outline-offset:3px}@media(max-height:620px){main{gap:7px}.face{width:min(48vw,27dvh,170px);min-width:135px}time{font-size:24px}h1{font-size:30px}.reply{font-size:19px;min-height:2.8em}input{padding:10px 14px;font-size:18px}button{width:60px;height:60px}.talk{max-width:500px}}@media(orientation:landscape) and (max-height:520px){main{display:grid;grid-template-columns:minmax(150px,32vw) 1fr;grid-template-rows:auto auto auto 1fr;grid-column-gap:24px;column-gap:24px;text-align:left}.face{grid-column:1;grid-row:1/5;width:min(29vw,72dvh,260px);justify-self:center}.reply,.talk,h1,small,time{grid-column:2}time{align-self:end}.reply{text-align:left}.talk{align-self:start}}@media(prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}.pairing .reply{min-height:auto;text-align:center}.pairForm{display:flex;width:min(520px,100%);gap:12px}.pairForm input{text-align:center;letter-spacing:.16em;font-size:clamp(24px,5vw,34px)}.pairForm button{font-size:28px}.face.warm{box-shadow:0 18px 60px #70572025}.emergency{display:block;width:min(520px,100%);padding:16px 24px;border-radius:18px;background:#b42318;color:#fff;font-size:clamp(22px,4vw,30px);font-weight:800;text-decoration:none;box-shadow:0 8px 20px #7a1b1433}.emergency:focus-visible{outline:4px solid #2563eb;outline-offset:3px}.network{position:fixed;inset:max(8px,env(safe-area-inset-top)) 12px auto;z-index:10;padding:10px 16px;border-radius:14px;background:#655b50;color:#fff;font-size:clamp(16px,3vw,20px)}.network.restored{background:#39744b}button.install{width:auto;height:auto;padding:10px 18px;border-radius:16px;background:#665f56;font-size:16px;box-shadow:none}.face.idle{animation:idleFloat 4.6s ease-in-out infinite}.face i{transform-origin:center;animation:blink 6.4s infinite}.face i:nth-child(2){animation-delay:.06s}.face.happy:after,.face.happy:before,.face.warm:after,.face.warm:before{content:"";position:absolute;top:56%;width:13%;height:7%;border-radius:50%;background:#e88b7560;filter:blur(1px)}.face:before{left:18%}.face:after{right:18%}.face.concerned b{top:66%;transform:translateX(-50%) rotate(180deg)}.face.happy b{transform:translateX(-50%) scale(1.2)}.face.thinking{animation:think 1.5s ease-in-out infinite}.face.thinking i{animation:thinkingEyes 1.5s ease-in-out infinite}.face.speaking{animation:speakingNod 1.3s ease-in-out infinite}.face.speaking b{animation:talkNatural .38s infinite alternate}@keyframes idleFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.008)}}@keyframes blink{0%,44%,48%,to{transform:translate(-50%,-50%) scaleY(1)}46%{transform:translate(-50%,-50%) scaleY(.08)}}@keyframes think{0%,to{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}@keyframes thinkingEyes{0%,to{margin-left:-2px}50%{margin-left:3px}}@keyframes speakingNod{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}@keyframes talkNatural{to{transform:translateX(-50%) scale(1.08,1.55)}}@media (prefers-reduced-motion:reduce){.face,.face b,.face i{animation:none!important}}