:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#283d36;background:#f5f6f2;font-synthesis:none;--ink:#283d36;--muted:#7b8981;--line:#e4e9df;--accent:#668f75;--soft:#eaf0e5}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #9bbfa6;outline-offset:3px}input:focus,textarea:focus{outline:2px solid #9bbfa6;outline-offset:1px}svg{width:22px;height:22px;flex:none}[hidden]{display:none!important}.app-header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px;background:#fafbf7}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:750;letter-spacing:1px}.brand small{display:block;font-size:11px;font-weight:400;letter-spacing:1px;color:var(--muted);margin-top:5px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--soft);color:var(--accent);border-radius:13px;font-size:32px;font-weight:700;line-height:1;padding-bottom:7px}.app-header nav{display:flex;gap:8px}.app-header nav a{padding:11px 22px;font-size:14px;color:#748078;border-radius:24px}.app-header nav a[aria-current=page]{background:#e7eedf;color:#49694f;font-weight:600}.icon-button{border:1px solid var(--line);background:transparent;border-radius:12px;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px}.app-main{max-width:1440px;margin:auto;padding:32px 5% 26px}.page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:1px;color:#84927b;margin:0 0 10px}h1{font-size:28px;font-weight:600;letter-spacing:1px;margin:0 0 10px}.page-intro>div>p:last-child{color:var(--muted);font-size:14px;margin:0;line-height:1.8}.connection{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}.connection i,.online-dot,.learning-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a6b49a}.connection[data-connected=true] i{background:#779c77}.app-layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:26px;align-items:start}.companion-panel{min-width:0}.companion-heading{display:flex;align-items:center;gap:11px;padding:0 3px 20px}.avatar-mark{width:42px;height:42px;border-radius:50%;background:#e4ece0;display:grid;place-items:center;color:var(--accent);font-weight:700;font-size:24px;padding-bottom:4px}h2{font-size:17px;font-weight:600;margin:0}.companion-heading p{font-size:12px;color:var(--muted);margin:5px 0 0}.little-tag{margin-left:auto;font-size:11px;color:#84927b;background:#ecf0e7;border:1px solid #e3e9db;padding:5px 9px;border-radius:20px}.robot-stage{background:#edf1ea;border:1px solid #e1e7da;border-radius:24px;overflow:hidden;position:relative}iframe{display:block;width:100%;height:350px;border:0;background:transparent}.stage-toolbar{display:flex;gap:8px;align-items:center;padding:0 20px}.stage-toolbar button{padding:5px 8px;border:0;background:transparent;font-size:11px;color:#788578;white-space:nowrap}.stage-toolbar input{width:100%;accent-color:var(--accent);height:3px}.stage-status{font-size:11px;color:#8b968b;text-align:center;padding:9px 14px 14px;margin:0;min-height:37px}.companion-note{display:flex;gap:14px;margin:26px 10px 24px;align-items:start}.note-mark{font:48px Georgia,serif;line-height:1;color:#b9c6ae}.companion-note p{font-size:13px;color:#84917f;line-height:1.9;margin:0}.learning-note{border-top:1px solid var(--line);margin:0 10px;padding:17px 0;display:flex;align-items:start;gap:9px}.learning-dot{flex:none;margin-top:6px;width:5px;height:5px}.learning-note p{font-size:11px;color:#93a08d;line-height:1.8;margin:0}.chat-panel,.expressions-panel{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;min-width:0}.panel-heading{padding:21px 25px 18px;border-bottom:1px solid #edf0e8;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading>div{display:flex;align-items:center;gap:9px}.panel-heading h2{font-size:15px}.text-button{border:0;background:transparent;font-size:12px;color:#83917c;padding:5px 0}.chat-messages{height:420px;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:22px;scroll-behavior:smooth;overscroll-behavior:contain}.chat-row{display:flex;flex-direction:column;align-items:flex-start;max-width:94%;gap:8px;animation:arrive .2s ease-out}.chat-row.user{align-self:flex-end;align-items:flex-end;max-width:84%}.chat-row .who{font-size:10px;letter-spacing:1px;color:#97a18f;margin-left:3px}.bubble{padding:13px 17px;border-radius:4px 16px 16px;background:#f2f5ed;line-height:1.9;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.user .bubble{background:#e7eedf;border-radius:16px 4px 16px 16px}.reply-tools{display:flex;gap:15px;margin:0 3px}.reply-tools button{font-size:11px;color:#99a28f;background:transparent;border:0;padding:2px 0}.reply-tools button[aria-pressed=true]{color:#62856a}.empty-chat{margin:auto;text-align:center;padding:30px 0}.empty-face{font-size:34px;letter-spacing:7px;color:#b5c7a6;line-height:1}.empty-chat h3{font-weight:500;font-size:18px;color:#64785f;margin:23px 0 10px}.empty-chat p{color:#a1aa97;font-size:12px;margin:0}.starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px;justify-content:center}.starters button{border:1px solid #e9eedf;background:#fafbf7;font-size:11px;color:#8c9a81;padding:8px 10px;border-radius:16px}.composer-area{padding:15px 20px 17px;border-top:1px solid #edf0e8}#chatForm{display:flex;align-items:flex-end;gap:12px;background:#f8faf4;border:1px solid #e9eddf;border-radius:16px;padding:12px}textarea{resize:vertical}#chatInput{width:100%;background:transparent;border:0;resize:none;min-height:48px;max-height:140px;font-size:14px;line-height:1.7;padding:2px;outline:none;color:var(--ink)}textarea::placeholder,input::placeholder{color:#a1ad97}.primary{background:#75966d;color:white;border:0;border-radius:11px;min-height:40px;padding:10px 16px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.primary svg{width:17px;height:17px}.composer-foot{display:flex;justify-content:space-between;gap:10px;padding:10px 2px 0;color:#a4ad9a;font-size:10px}.comparison{width:100%;margin-top:8px}.comparison p{font-size:11px;color:#8b9882;margin:2px 0 10px}.pair-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pair-option{border:1px solid #dfe7d6;border-radius:13px;padding:13px;min-width:0}.pair-option p{font-size:13px;color:var(--ink);white-space:pre-wrap;line-height:1.8;overflow-wrap:anywhere}.pair-option button{background:#edf2e7;color:#62815a;border:0;border-radius:8px;padding:7px 10px;font-size:12px}.feedback-note{font-size:11px;color:#85927c;margin:6px 0}.issue-form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:13px;margin:6px 0}.issue-form button{font-size:11px}.expressions-panel .panel-heading>div{display:block}.panel-heading p{font-size:12px;color:#99a18f;margin:8px 0 0}.expression-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:22px}.expression-card{padding:0 0 11px;border:1px solid #e5ebdc;border-radius:15px;background:#f8faf4;overflow:hidden;transition:border-color .2s,background .2s}.expression-card[aria-pressed=true]{border-color:#87a678;background:#eaf1e1}.expression-card canvas{width:100%;height:auto;display:block}.expression-card span{font-size:12px;display:block;color:#7b8c70}.expression-foot{font-size:11px;color:#a2ac95;text-align:center;margin:0 10px 20px}dialog{border:1px solid var(--line);border-radius:22px;padding:28px;width:min(490px,calc(100% - 28px));max-height:85dvh;color:var(--ink)}dialog::backdrop{background:#21352955;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:start}.dialog-header h2{font-size:21px}.close-dialog{border:0;font-size:24px;padding:0 5px}.dialog-intro{font-size:13px;color:var(--muted);line-height:1.9}#memoryForm{display:grid;gap:9px}#memoryForm label{font-size:12px;color:#8a977e}#memoryForm input,#memoryForm textarea{border:1px solid var(--line);border-radius:10px;padding:11px;background:#fafbf7;font-size:13px;color:var(--ink)}#memoryForm label:not(:first-child){margin-top:6px}#memoryForm .primary{justify-self:end;margin-top:3px}#memoryStatus{font-size:12px;color:var(--accent);min-height:15px}.memory-notes{list-style:none;padding:0;margin:0}.memory-notes li{padding:14px 0;border-top:1px solid var(--line)}.memory-notes strong{font-size:13px;font-weight:500}.memory-notes p{font-size:12px;line-height:1.8;color:var(--muted);margin:8px 0}.memory-notes .note-tools{display:flex;gap:16px}.memory-notes li.inactive{opacity:.5}.learning-setting{border-top:1px solid var(--line);padding-top:18px;margin-top:15px}.learning-setting label{display:flex;align-items:start;gap:9px;font-size:13px;cursor:pointer}.learning-setting input{accent-color:var(--accent);margin-top:3px}.learning-setting small{display:block;font-size:11px;color:var(--muted);line-height:1.8;margin-top:7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.thinking .bubble{color:#98a28e}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.chat-messages{height:480px}iframe{height:400px}}@media(max-width:900px){.app-header{padding:0 4%;gap:12px}.app-main{padding:25px 4%}.app-layout{gap:18px;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)}iframe{height:300px}.little-tag{display:none}.app-header nav a{padding:10px 14px}.composer-foot span:last-child{display:none}.expression-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.app-header{height:72px;padding:0 18px;flex-wrap:wrap;position:relative;gap:8px}.brand{font-size:15px;gap:8px}.brand small{display:none}.brand-mark{width:32px;height:32px;border-radius:10px;font-size:26px}.app-header nav{gap:0}.app-header nav a{padding:9px 10px;font-size:12px}.settings-button{padding:8px;border:0}.settings-button span{display:none}.settings-button svg{width:20px;height:20px}.app-main{padding:20px 16px}.page-intro{margin-bottom:17px;gap:10px;align-items:start}.eyebrow{font-size:10px;margin-bottom:8px;letter-spacing:.5px}h1{font-size:23px;margin-bottom:8px}.page-intro>div>p:last-child{font-size:11px;max-width:240px}.connection{font-size:10px;margin-top:3px;gap:5px}.app-layout{display:flex;flex-direction:column;gap:15px}.companion-panel{width:100%}.companion-heading{display:none}.robot-stage{border-radius:18px;display:grid;grid-template-columns:1fr 100px;align-items:center;min-height:136px}iframe{height:150px;grid-row:1/3}.stage-toolbar{padding:8px 7px 0 0;flex-wrap:wrap;gap:0;align-self:end}.stage-toolbar input{flex-basis:100%;margin:10px 12px 0 8px}.stage-status{font-size:9px;padding:5px 10px 10px;line-height:1.5;align-self:start;min-height:0}.companion-note,.learning-note{display:none}.chat-panel,.expressions-panel{width:100%;border-radius:18px}.panel-heading{padding:15px 17px}.panel-heading h2{font-size:14px}.chat-messages{height:clamp(210px,35dvh,390px);padding:19px 16px;gap:18px}.bubble{font-size:14px;padding:11px 14px}.composer-area{padding:12px}.composer-foot{font-size:9px;padding-top:8px}#chatForm{padding:9px;gap:8px}#chatInput{font-size:14px;min-height:43px}.primary{padding:10px 12px;font-size:12px}.empty-chat{padding:12px 0}.empty-chat h3{font-size:16px;margin:14px 0 8px}.starters{margin-top:17px;gap:6px}.starters button{font-size:10px;padding:7px 8px}.empty-face{font-size:26px}.expression-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:15px;gap:8px}.expression-card{border-radius:11px}.expression-card span{font-size:11px}.pair-choices{grid-template-columns:1fr}.connection[data-connected=false] span{max-width:68px;white-space:normal;text-align:right}dialog{padding:22px}.dialog-header h2{font-size:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Keep the composer in the initial viewport, including compact laptops and phones. */
.chat-panel{display:flex;flex-direction:column;height:calc(100dvh - 270px);min-height:420px}.chat-messages{height:auto;flex:1;min-height:0}.composer-area{flex:none}.chat-panel>.panel-heading{flex:none}.robot-stage iframe{height:clamp(220px,calc(100dvh - 425px),350px)}
@media(max-width:650px){.app-main{padding-top:16px}.page-intro .eyebrow{display:none}.page-intro{margin-bottom:12px}.page-intro>div>p:last-child{line-height:1.6}.robot-stage{min-height:120px}.robot-stage iframe{height:120px}.app-layout{gap:12px}.chat-panel{height:calc(100dvh - 312px);min-height:300px}.chat-messages{height:auto}.empty-chat{padding:6px 0}.starters{margin-top:12px}}

/* Three product destinations also fit compact phones without moving the composer. */
@media(max-width:650px){.app-header nav a{padding-left:7px;padding-right:7px}}
@media(max-width:360px){.app-header .brand>span:last-child{display:none}}

/* One compact selector keeps the five official companions in the real conversation. */
.spirit-picker{display:flex;align-items:center;gap:14px;margin:-7px 0 22px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}.spirit-picker label{font-size:12px;color:var(--muted);white-space:nowrap}.spirit-picker select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 28px 8px 10px;max-width:100%;min-width:170px}.spirit-picker p{margin:0;font-size:12px;color:var(--muted)}.spirit-picker button{margin-left:auto;white-space:nowrap}.notebook-tabs{display:flex;gap:8px;margin:20px 0}.notebook-tabs button{border:1px solid var(--line);border-radius:20px;background:transparent;padding:8px 16px;font-size:13px}.notebook-tabs button[aria-pressed=true]{background:var(--soft);border-color:#b8c9b1}.growth-stats{background:var(--soft);padding:14px;border-radius:12px;font-size:13px;line-height:1.8}.growth-records{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto}.growth-records li{border-bottom:1px solid var(--line);padding:13px 0;font-size:13px;line-height:1.7}.growth-records small{display:block;color:var(--muted);font-size:11px}.growth-records p{margin:5px 0;color:var(--muted);overflow-wrap:anywhere}.chat-panel{height:calc(100dvh - 342px)}
@media(max-width:650px){.spirit-picker{margin:0 0 12px;padding:8px 10px;gap:9px}.spirit-picker label{font-size:10px}.spirit-picker select{font-size:12px;min-width:0;flex:1;padding:7px 4px}.spirit-picker p{display:none}.spirit-picker button{font-size:11px}.chat-panel{height:calc(100dvh - 368px);min-height:280px}}
@media(min-width:651px){.chat-panel{min-height:340px;height:calc(100dvh - 350px)}}
@media(min-width:651px) and (max-height:800px){.empty-chat{padding:10px 0}.empty-chat h3{margin-top:16px}.starters{margin-top:16px}.chat-messages{padding-top:18px;padding-bottom:18px}}