:root{--ink:#243f32;--muted:#7b887b;--cream:#f5f5ee;--forest:#2e503e;--line:#dce4d6;--glass:#fbfcf4ec;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid #d6b96f;outline-offset:3px}[hidden]{display:none!important}
#camera{touch-action:none;position:fixed;inset:0;overflow:hidden;visibility:hidden;background:#1d2e24}body.scanning #camera{visibility:visible}body.scanning #welcome{display:none}
#welcome{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 26px max(28px,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(ellipse at 20% 5%,#e4ecd9 0,transparent 46%),radial-gradient(ellipse at 100% 85%,#e8e4d4 0,transparent 50%),#f7f7f0}
.content{width:100%;max-width:354px;text-align:center}.brand{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:600;letter-spacing:2.6px;color:#647860}.brand:before{content:'';width:6px;height:6px;border-radius:50%;background:#8ba374}
.welcome-portrait{position:relative;display:grid;place-items:center;width:106px;height:112px;margin:38px auto 28px;border-radius:34px 34px 40px 40px;border:1px solid #ffffff;background:linear-gradient(145deg,#eef2e3,#dce7cc);box-shadow:0 14px 34px #4a654e12,inset 0 1px #fff}.welcome-portrait svg{width:60px;height:60px}.welcome-portrait:after{content:'✦';position:absolute;right:-6px;bottom:3px;display:grid;place-items:center;width:30px;height:30px;border-radius:12px;background:#fcfbf2;color:#a68c51;box-shadow:0 4px 12px #54614712;font-size:19px}
#photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:34px;background:#e1e9d6}h1{font-size:29px;font-weight:650;letter-spacing:-1px;line-height:1.3;margin:0 0 16px}.instruction{font-size:14px;line-height:1.95;color:#7b897b;margin:0}
.welcome-steps{display:flex;justify-content:center;gap:8px;margin:25px 0 28px}.welcome-steps span{padding:7px 10px;border:1px solid #e0e6d8;border-radius:10px;background:#ffffff6b;color:#71826d;font-size:11px;white-space:nowrap}.welcome-steps b{font-weight:500;color:#a0ad94;margin-right:5px}
#status{font-size:12px;line-height:1.6;min-height:20px;margin:0 0 14px;color:#74836e}#status:before{content:'';display:inline-block;width:5px;height:5px;margin:0 7px 2px 0;border-radius:50%;background:#9cad8d}
#start{width:100%;min-height:56px;padding:16px;border:1px solid #284734;border-radius:18px;background:#315440;color:#fff;font-size:16px;font-weight:550;box-shadow:0 7px 18px #31544019}#start:disabled{background:#b5c1ac;border-color:#b5c1ac;box-shadow:none;cursor:wait}.welcome-note{font-size:11px;color:#97a18f;letter-spacing:.2px;margin:16px 0 0}
#scanToolbar{position:fixed;top:max(12px,calc(env(safe-area-inset-top) + 8px));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));z-index:40;display:none;align-items:center;justify-content:space-between;gap:6px;max-width:520px;height:54px;padding:4px;margin-inline:auto;border:1px solid #ffffffae;border-radius:23px;background:var(--glass);box-shadow:0 6px 22px #17361f16;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}body.scanning #scanToolbar{display:flex}
#voiceControls{display:flex;align-items:center;gap:3px;min-width:0}#scanToolbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 10px;flex-shrink:0;border:0;border-radius:17px;background:transparent;color:#3e5845;font-size:12px;white-space:nowrap}#scanToolbar button:active{background:#e4eadb}#scanToolbar button:disabled{opacity:.4}#placementMode{min-width:60px}#placementMode:before{content:'↺';font-size:18px}#sound{width:44px;font-size:18px!important}#sound[aria-pressed=false]{color:#9da996}#sound[data-voice-state=error]{color:#a95f38}#replayVoice{min-width:74px;background:#e8eddf!important}#scanToolbar #exit{min-width:46px;border-left:1px solid #dce4d4;border-radius:0 16px 16px 0;color:#7a8875}
#greeting{position:fixed;z-index:25;width:196px;height:107.8px;max-width:calc(100vw - 24px);transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 6px 14px #2f4d2f1c)}#greeting svg{display:block;width:100%;height:100%;overflow:visible}#greeting .cloud-small{font:11.5px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:1px;fill:#a49783}#greeting .cloud-words{font:500 23px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:1px;fill:#5c5646}
#zoomControls{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(112px,calc(env(safe-area-inset-bottom) + 96px));z-index:30;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--glass);border:1px solid #ffffff9c;box-shadow:0 5px 20px #29462d17;backdrop-filter:blur(12px)}#zoomControls button{width:44px;min-height:44px;border:0;background:transparent;color:#38533e;font-size:22px}#zoomControls #zoomReset{font-size:11px;min-height:29px;border-block:1px solid #dce4d5}#zoomControls button:disabled{opacity:.35}
#scanHint{position:fixed;bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px));left:18px;right:18px;z-index:30;width:max-content;max-width:calc(100% - 36px);margin:auto;padding:11px 17px;border:1px solid #ffffff75;border-radius:20px;background:#f5f8edf0;color:#526849;font-size:12px;text-align:center;line-height:1.65;box-shadow:0 4px 18px #29462d15;backdrop-filter:blur(12px)}
#conversation{max-width:480px!important}#conversationSpeak{background-color:#365a44!important;color:#fff!important;border-color:#ffffff9c!important;box-shadow:0 6px 24px #1c36282b!important;border-radius:22px!important;font-size:16px!important}#conversationSpeak[aria-pressed=true]{background-color:#f3ddbe!important;color:#6b4626!important}#conversation summary{background:#f5f7edeb!important;color:#3c5845!important;border-color:#ffffffad!important;border-radius:22px!important;box-shadow:0 5px 18px #233d2819}#conversation details[open] summary{background:#dfe9d4!important}.conversation-body{background:#f8faf2f5!important;border-color:#ffffffb0!important;color:#314f3a;box-shadow:0 9px 32px #17381e24!important}.conversation-choices button{background:#edf1e5!important;border-color:#dae3d0!important;color:#3d5941!important;border-radius:14px!important}.conversation-choices button:active{background:#dce7d1!important}#conversationPrivacy{color:#84917b!important}#conversationStatus{background:#f7faeff0!important;color:#52684c!important;font-size:11px!important;box-shadow:0 3px 16px #2643280d}
@media(max-width:340px){#scanToolbar{left:10px;right:10px;gap:3px}#scanToolbar button{padding-inline:8px}#voiceControls{gap:1px}#replayVoice{min-width:68px}#placementMode{min-width:56px}.welcome-steps{gap:5px}.welcome-steps span{padding-inline:7px}}
@media(max-height:620px){.welcome-portrait{margin:20px auto;width:80px;height:84px;border-radius:25px}.welcome-portrait svg{width:48px;height:48px}h1{font-size:25px;margin-bottom:10px}.welcome-steps{margin:15px 0}#welcome{align-items:flex-start;padding-top:24px}.instruction{line-height:1.65}}

/* A cloud placed beside/below the head must not point down at the feet. */
#greeting:not([data-placement=above]) #cloudTailSmall,#greeting:not([data-placement=above]) #cloudTailLarge{visibility:hidden}

/* Keep all playback tools below the stage; leave the head's speech area clear. */
#scanToolbar{top:auto;bottom:max(86px,calc(env(safe-area-inset-bottom) + 82px));z-index:40}
body.scanning #scanToolbar{display:flex}
body.has-conversation #zoomControls{bottom:max(154px,calc(env(safe-area-inset-bottom) + 150px))}
/* The interaction panel has two rows of direct action buttons and a language selector. */
body.has-conversation #scanToolbar{bottom:max(218px,calc(env(safe-area-inset-bottom) + 214px))}
body.has-conversation #zoomControls{bottom:max(286px,calc(env(safe-area-inset-bottom) + 282px))}

/* Humans have a separate stage and control dock; controls never cover the camera. */
body.has-human-layout #camera{bottom:max(284px,calc(env(safe-area-inset-bottom) + 280px))}
body.has-human-layout #scanToolbar{bottom:max(218px,calc(env(safe-area-inset-bottom) + 214px));gap:3px}
body.has-human-layout #zoomControls{position:static;flex-direction:row;align-items:center;gap:0;border:0;border-radius:12px;box-shadow:none;backdrop-filter:none;background:transparent;overflow:visible}
body.has-human-layout #zoomControls button{min-height:44px;width:40px;padding:4px;font-size:22px}
body.has-human-layout #zoomControls #zoomReset{min-height:44px;border:0;font-size:11px;width:40px}
body.has-human-layout #scanToolbar #placementMode{min-width:48px;padding-inline:6px}
body.has-human-layout #scanToolbar #sound{width:40px;padding-inline:4px}
body.has-human-layout #scanToolbar #exit{min-width:40px;padding-inline:6px}
@media(max-height:500px){body.has-human-layout #camera{right:300px;bottom:0}body.has-human-layout #conversation{left:auto;right:10px;width:280px;bottom:12px}body.has-human-layout #scanToolbar{left:auto;right:10px;width:280px;bottom:220px}}

/* Individual quiet side controls; the middle viewport belongs to the character. */
body.has-human-layout #camera,body.pet-interacting #camera{left:0;right:0;bottom:max(140px,calc(env(safe-area-inset-bottom) + 136px))}
body.has-human-layout #scanToolbar,body.pet-interacting #scanToolbar{left:12px;right:12px;width:auto;bottom:max(72px,calc(env(safe-area-inset-bottom) + 68px));gap:3px}
body.pet-interacting #zoomControls{position:static;flex-direction:row;border:0;box-shadow:none;background:transparent;backdrop-filter:none}
body.pet-interacting #zoomControls button{width:40px;min-height:44px;padding:4px}
body.pet-interacting #zoomControls #zoomReset{border:0;font-size:11px}
body.has-human-layout #conversation{position:fixed;inset:0;width:auto;max-width:none!important;margin:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;pointer-events:none}
#conversation .conversation-heading{position:fixed;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));left:0;right:0;justify-content:center;margin:0;pointer-events:none}
#conversation .conversation-title,#conversation .conversation-language label,#conversationStatus{display:none}
#conversation .conversation-language{pointer-events:auto}
#conversationLanguage{min-height:40px;font-size:12px;background:#f8faf2d9}
#conversation .conversation-choices{display:contents}
#conversation .conversation-choices button,#petInteraction#petInteraction button{position:fixed;width:64px;min-height:44px;height:auto;padding:8px 4px;border:1px solid #e1e6db!important;border-radius:12px!important;background:#f8faf2d9!important;color:#52634e!important;box-shadow:0 2px 8px #17381e0a;font:500 12px/1.3 system-ui;pointer-events:auto;white-space:normal}
#conversation .conversation-choices button{top:calc(100dvh - 340px + var(--side-slot)*60px)}
#conversation .conversation-choices button:nth-child(-n+3){left:max(8px,env(safe-area-inset-left))}
#conversation .conversation-choices button:nth-child(n+4){right:max(8px,env(safe-area-inset-right))}
#conversation .conversation-choices button:nth-child(1),#conversation .conversation-choices button:nth-child(4){--side-slot:0}
#conversation .conversation-choices button:nth-child(2),#conversation .conversation-choices button:nth-child(5){--side-slot:1}
#conversation .conversation-choices button:nth-child(3),#conversation .conversation-choices button:nth-child(6){--side-slot:2}
#petInteraction#petInteraction{inset:0;width:auto;max-width:none;display:block;overflow:visible;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;pointer-events:none}
#petInteraction#petInteraction button{top:calc(100dvh - 400px + var(--side-slot)*60px)}
#petInteraction button[data-side=left]{left:max(8px,env(safe-area-inset-left))}
#petInteraction button[data-side=right]{right:max(8px,env(safe-area-inset-right))}
#petInteraction#petInteraction button[aria-pressed=true]{background:#e5eddb!important;color:#355037!important;border-color:#b4c4aa!important}
#petInteraction#petInteraction:not([data-lifecycle=awake]) button:not([hidden]){left:50%;right:auto;top:auto;bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));width:148px;transform:translateX(-50%)}
@media(max-height:500px){body.has-human-layout #camera,body.pet-interacting #camera{bottom:110px}body.has-human-layout #scanToolbar,body.pet-interacting #scanToolbar{bottom:52px;max-width:420px}#conversation .conversation-choices button{top:calc((100dvh - 110px)/2 - 68px + var(--side-slot)*50px)}#petInteraction#petInteraction button{top:calc((100dvh - 110px)/2 - 85px + var(--side-slot)*48px)}}
/* Pet controls are mounted after this stylesheet; keep playback tools above wake. */
body.pet-interacting #scanToolbar#scanToolbar{bottom:max(72px,calc(env(safe-area-inset-bottom) + 68px))}
@media(max-height:500px){body.pet-interacting #scanToolbar#scanToolbar{bottom:52px}}
/* Keep the AR view visible through every individual interaction button. */
#conversation .conversation-choices button,#conversation .conversation-choices button:active,#petInteraction#petInteraction button,#petInteraction#petInteraction button[aria-pressed=true]{background:transparent!important;border-color:#60745b70!important;color:#344f3a!important;box-shadow:none;text-shadow:0 1px 2px #ffffffe0;backdrop-filter:none}
#conversation .conversation-choices button:active,#petInteraction#petInteraction button[aria-pressed=true]{border-color:#345b35!important;outline:1px solid #345b3570;outline-offset:1px}
/* Borderless text controls retain their full 64 × 44 px transparent touch area. */
#conversation .conversation-choices button,#conversation .conversation-choices button:active,#petInteraction#petInteraction button,#petInteraction#petInteraction button[aria-pressed=true]{border:0!important;outline:none;box-shadow:none}
#conversation .conversation-choices button:active,#petInteraction#petInteraction button[aria-pressed=true]{color:#1f4028!important;font-weight:650}
#conversation .conversation-choices button:focus-visible,#petInteraction#petInteraction button:focus-visible{outline:2px solid #6b8060;outline-offset:1px}