:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222a30;background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #3ac9c8;outline-offset:4px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{min-height:100svh;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;isolation:isolate;background:#fff;padding:32px 22px 35px}
.ambient{pointer-events:none;position:absolute;z-index:-1;border-radius:50%;filter:blur(18px);opacity:.33}.ambient-one{width:min(75vw,850px);height:min(75vw,850px);background:radial-gradient(circle,rgba(88,214,206,.12) 0%,rgba(246,255,255,.025) 61%,transparent 74%);top:-30%;left:50%;transform:translateX(-50%)}.ambient-two{width:570px;height:570px;bottom:-490px;right:-160px;background:radial-gradient(circle,rgba(35,181,185,.07),transparent 65%)}
.top-actions{position:fixed;top:24px;right:29px;z-index:15}.icon-button{width:44px;height:44px;border:1px solid #edf2f1;border-radius:999px;background:rgba(255,255,255,.95);display:grid;place-items:center;color:#87939a;transition:background .2s,color .2s,transform .2s}.icon-button:hover{background:#f5fbfb;color:#129c9a;transform:scale(1.035)}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button svg[hidden]{display:none}
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:880px;margin-top:-20px;gap:0}
.pomji-stage{--figure:clamp(320px, min(58vh,58vw),565px);position:relative;border:0;appearance:none;background:transparent;width:var(--figure);height:var(--figure);padding:0;flex:none;display:block;overflow:visible;transform:translateZ(0);-webkit-tap-highlight-color:transparent;transition:filter .3s}.pomji-stage:hover{filter:drop-shadow(0 14px 20px rgba(44,151,154,.07))}.pomji-stage:focus-visible{border-radius:24px}.video-mount{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 94%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.pomji-video,.poster{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0;opacity:0;transition:opacity .33s ease;pointer-events:none;background:transparent;filter:brightness(1.04)}.pomji-video.active{opacity:1;z-index:2}.poster:not([hidden]){opacity:1;z-index:3}.halo{display:none;pointer-events:none;position:absolute;border:1px solid rgba(54,199,205,.17);border-radius:50%;inset:8%;z-index:-1}.pomji-stage.is-thinking .halo{display:block;animation:halo 2.3s infinite ease-out}.pomji-stage.is-thinking .halo-b{animation-delay:1.15s}.pomji-stage.is-talking .halo{display:block;border-color:rgba(24,181,179,.22);animation:halo 1.25s infinite ease-out}.pomji-stage.is-talking .halo-b{animation-delay:.55s}
.state-dot{position:absolute;bottom:5%;left:50%;width:7px;height:7px;border-radius:50%;background:#16bbb2;opacity:0;transform:translate(-50%,2px);transition:opacity .35s}.pomji-stage.is-thinking .state-dot,.pomji-stage.is-talking .state-dot{opacity:.7}
.conversation{width:min(100%,690px);display:flex;flex-direction:column;align-items:stretch;gap:15px;margin-top:-16px;position:relative;z-index:4}
.ask-form{height:64px;width:100%;background:#fff;border:1px solid #e5e9eb;box-shadow:0 7px 30px rgba(39,73,76,.065),0 1px 2px rgba(39,73,76,.025);border-radius:999px;display:flex;align-items:center;padding:6px 8px 6px 22px;gap:10px;transition:border-color .23s,box-shadow .23s}.ask-form:focus-within,.ask-form:hover{border-color:#cbdbda;box-shadow:0 11px 34px rgba(39,73,76,.09)}
.ask-spark{display:grid;place-items:center;width:22px;flex:none;color:#10aaa5}.ask-spark svg{width:19px;height:19px;fill:currentColor;stroke:none}
.ask-form input{width:100%;min-width:0;flex:1;border:0;outline:0!important;background:transparent;font-size:17px;color:#20323a;letter-spacing:-.01em}.ask-form input::placeholder{color:#9aa8aa;opacity:1}
.search-action{width:45px;height:45px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#718086;padding:0;transition:transform .15s,background .2s,color .2s}.search-action svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.85;fill:none;stroke-linecap:round;stroke-linejoin:round}.search-action:hover{background:#edf9f7;color:#0c9394}.send{background:#11a6a8;color:#fff}.send:hover{background:#09898b;color:white}.send svg{width:21px}.microphone.recording{color:#fff;background:#de646f;animation:rec 1.15s infinite}
.reply{width:min(100%,670px);align-self:center;animation:fadein .3s ease-out}.reply[hidden]{display:none}.reply-inner{border:1px solid #ecf2f0;border-radius:23px;background:rgba(248,252,251,.96);padding:18px 24px 14px;box-shadow:0 8px 26px rgba(58,99,101,.035);text-align:left}.reply p{margin:0;color:#30464b;font-size:15px;line-height:1.57}.reply-disclaimer{display:block;color:#95a2a3;font-size:11px;letter-spacing:.01em;margin-top:9px}
@keyframes halo{0%{opacity:0;transform:scale(.82)}25%{opacity:1}100%{opacity:0;transform:scale(1.28)}}@keyframes rec{50%{box-shadow:0 0 0 7px rgba(222,100,111,.14)}}@keyframes fadein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1200px){.home{margin-top:-28px}.conversation{margin-top:-23px}}
@media(max-width:640px){.app{min-height:100svh;padding:24px 18px 26px}.home{margin-top:-24px}.top-actions{top:13px;right:17px}.pomji-stage{--figure:min(91vw,53svh);max-width:455px;max-height:455px}.conversation{margin-top:-8px;gap:11px}.ask-form{height:58px;padding:6px 7px 6px 16px;gap:6px}.ask-form input{font-size:15px}.ask-spark{width:17px}.ask-spark svg{width:16px}.search-action{width:40px;height:40px}.reply-inner{padding:15px 17px 12px}.reply p{font-size:14px}}
@media(max-height:660px){.app{padding:12px 18px}.home{margin-top:0}.pomji-stage{--figure:min(65svh,445px)}.conversation{margin-top:-6px}}
@media(prefers-reduced-motion:reduce){.halo,.state-dot{display:none!important}.pomji-video{transition:none!important}.ambient{display:none}.reply{animation:none}}
/* V2: gentler transitions and fewer distracting pulses */
.pomji-video,.poster{transition:opacity .70s cubic-bezier(.22,.61,.36,1)}
.pomji-stage.is-listening .halo{display:block;animation:halo 3s infinite ease-out}
.pomji-stage.is-listening .halo-b{animation-delay:1.5s}
.pomji-stage.is-thinking .halo{animation-duration:3.3s}
.pomji-stage.is-talking .halo{animation-duration:2.1s}
.pomji-stage.is-talking .halo-b{animation-delay:1.05s}
@media(prefers-reduced-motion:reduce){.pomji-video,.poster{transition:none}}

/* V2.5: attentive presence — very restrained whole-character movement.
   Eye tracking is NOT independent, as the eyes are baked into Kling videos. */
.video-mount{--look-x:0px;--look-y:0px;--look-rotate:0deg;transform:translate(var(--look-x),var(--look-y)) rotate(var(--look-rotate));transform-origin:50% 57%;transition:transform 1.2s cubic-bezier(.22,.68,.3,1)}
.pomji-stage[data-attention="visitor"] .video-mount{filter:drop-shadow(0 5px 7px rgba(32,160,154,.045));}
.pomji-stage[data-attention="input"] .video-mount{transform:translate(0,-2px) scale(1.008);transition-duration:1.1s}
.pomji-stage.first-keystroke .video-mount{animation:soft-attention 1.05s cubic-bezier(.25,.7,.25,1) 1}
@keyframes soft-attention{0%{transform:translateY(-2px) scale(1.008)}45%{transform:translateY(-4px) scale(1.011)}100%{transform:translateY(-2px) scale(1.008)}}
.pomji-stage.is-listening .halo{display:block;border-color:rgba(17,171,170,.20);animation:halo 3.15s ease-out infinite}
.pomji-stage.is-listening .halo-b{animation-delay:1.58s}
.pomji-stage.is-listening .state-dot{opacity:.74;animation:listening-dot 2s ease-in-out infinite}
@keyframes listening-dot{50%{opacity:.34;transform:translate(-50%,1px) scale(.75)}}
.pomji-stage[data-state="glancing"] .halo{display:none}
.pomji-stage[data-state="idle"] .state-dot{opacity:0}
@media(prefers-reduced-motion:reduce){.video-mount{transform:none!important;transition:none!important;animation:none!important}.pomji-stage.first-keystroke .video-mount{animation:none!important}.pomji-stage.is-listening .halo,.pomji-stage.is-listening .state-dot{animation:none!important}}

/* V2.6 Living Eyes: tracking fades over the idle video. Does not alter Kling clips. */
.living-eyes{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;z-index:4;pointer-events:none;background:transparent;transition:opacity .70s cubic-bezier(.22,.61,.36,1);will-change:opacity;filter:brightness(1.04)}
.living-eyes.is-following{opacity:1}
.pomji-stage[data-state="thinking"] .living-eyes,.pomji-stage[data-state="talking"] .living-eyes,.pomji-stage[data-state="greeting"] .living-eyes,.pomji-stage[data-state="listening"] .living-eyes,.pomji-stage[data-state="glancing"] .living-eyes{opacity:0!important}
/* Keep Pomji grounded. Small scale shifts come from his own footage, not pointer rotation. */
.pomji-stage:not([data-state="idle"]) .video-mount{transform:none!important}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.living-eyes{display:none!important}}

/* V2.8 — restful approved frame stays still; facial patches are drawn only while reacting. */
.pomji-stage[data-state="idle"] .poster,.pomji-stage[data-state="listening"] .poster{opacity:1;z-index:3}
.pomji-stage[data-state="idle"] .living-eyes{opacity:1!important}
.living-eyes{filter:none;will-change:auto;transition:none;opacity:0}
.pomji-stage[data-state="idle"] .video-mount{animation:pomji-breathe 5.8s ease-in-out infinite}
@keyframes pomji-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.002)}}
@media(prefers-reduced-motion:reduce){.pomji-stage[data-state="idle"] .video-mount{animation:none}}
.poster[hidden]{display:none!important}