:root{--bg:#f6f3ec;--card:#fff;--ink:#2f3a36;--soft:#6c7a74;--mint:#87c9a3;--mint2:#d9f0e2;--peach:#f7c6a8;--peach2:#fde9dc;--lav:#c9c2ee;--lav2:#ece9fb;--sky:#bfe1f2;--sky2:#e6f4fb;--sun:#f6dd8a;--rose:#f2a7b5;--r:22px;--sh:0 6px 20px rgba(60,80,70,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:linear-gradient(160deg,#eaf6ef,#f6f3ec 45%,#f3eefb);font-family:"Nunito","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink)}
#frame{position:relative;max-width:440px;margin:0 auto;min-height:100dvh;background:var(--bg);overflow:hidden}
@media(min-width:600px){body{padding:24px 0}#frame{min-height:880px;height:880px;border-radius:38px;box-shadow:0 20px 60px rgba(60,80,70,.18);border:8px solid #fff}}
#app{height:100%;min-height:100dvh;overflow-y:auto;padding:18px 20px 110px}
@media(min-width:600px){#app{min-height:0;height:100%}}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:28px;margin:8px 0 6px;letter-spacing:-.3px}h2{font-size:22px;margin:6px 0}h3{font-size:16px;margin:14px 0 6px}
p{line-height:1.45}.muted{color:var(--soft)}.small{font-size:13px}.center{text-align:center}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--sh);margin:12px 0}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;background:var(--mint);color:#173a2a;margin:10px 0;font-family:inherit;transition:transform .1s}
.btn:active{transform:scale(.97)}.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--sh)}.btn.peach{background:var(--peach)}.btn.lav{background:var(--lav)}.btn.small{padding:10px;font-size:14px}
.btn:disabled{opacity:.45}
.opts{display:grid;gap:10px;margin:14px 0}.opts.two{grid-template-columns:1fr 1fr}
.opt{background:#fff;border:2px solid transparent;border-radius:18px;padding:14px;font-size:16px;text-align:left;cursor:pointer;box-shadow:var(--sh);font-family:inherit;color:var(--ink)}
.opt.sel{border-color:var(--mint);background:var(--mint2)}.opt .sub{display:block;font-size:12.5px;color:var(--soft);margin-top:3px}
.opt.dis{opacity:.5}
.steps{display:flex;gap:6px;margin:4px 0 10px}.steps i{flex:1;height:6px;border-radius:6px;background:#e3e0d8}.steps i.on{background:var(--mint)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.back{background:none;border:0;font-size:22px;cursor:pointer;color:var(--soft);padding:4px}
.chip{display:inline-block;background:var(--mint2);border-radius:99px;padding:5px 11px;font-size:13px;font-weight:700;margin:2px}
.chip.p{background:var(--peach2)}.chip.l{background:var(--lav2)}.chip.s{background:var(--sky2)}
#tabs{position:absolute;bottom:0;left:0;right:0;display:flex;background:#fffd;backdrop-filter:blur(8px);border-top:1px solid #eee;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
#tabs button{flex:1;background:none;border:0;font-size:20px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;opacity:.55;font-family:inherit}
#tabs button span{font-size:12px;font-weight:700}#tabs button.on{opacity:1}
.hidden{display:none!important}
#modal{position:absolute;inset:0;background:rgba(40,50,45,.35);display:flex;align-items:flex-end;z-index:20;animation:fade .2s}
#modal .sheet{background:var(--bg);width:100%;border-radius:28px 28px 0 0;padding:22px 20px 30px;max-height:90%;overflow:auto}
#toast{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#2f3a36;color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;z-index:30;max-width:90%;text-align:center}
.proto-badge{position:fixed;bottom:6px;right:8px;font-size:11px;color:#8a978f;pointer-events:none}
@media(max-width:599px){.proto-badge{display:none}}
/* mascots */
.mascot{display:inline-block}.mascot svg{display:block}
.bob{animation:bob 2.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px)}}
.mouth{transition:all .1s}.talking .mouth{animation:talk .28s infinite alternate}
@keyframes talk{from{transform:scaleY(.25)}to{transform:scaleY(1.4)}}
.listening .ear,.listening .head{animation:tilt 1.6s ease-in-out infinite;transform-origin:center}
@keyframes tilt{50%{transform:rotate(-4deg)}}
/* conversation */
.convo{background:linear-gradient(180deg,var(--sky2),#fff 80%);border-radius:26px;padding:12px 10px 8px;box-shadow:var(--sh);position:relative}
.convo-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--soft);padding:0 6px}
.stage{position:relative;height:190px}
.stage .who{position:absolute;bottom:0;text-align:center;font-size:12px;font-weight:800}
.stage .who.l{left:2px}.stage .who.r{right:2px}
.stage svg.string{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.bubble-dot{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--lav));box-shadow:0 0 0 4px #fff8,0 4px 10px rgba(0,0,0,.12);opacity:0;pointer-events:none}
.role-tag{display:inline-block;background:#fff;border-radius:99px;padding:3px 8px;font-size:11px;margin-top:2px}
.prompt{background:#fff;border-radius:18px;padding:12px 14px;margin:10px 0;font-weight:700;box-shadow:var(--sh)}
.prompt .tr{display:block;font-weight:600;font-size:13px;color:var(--soft);margin-top:4px}
.status{text-align:center;font-weight:700;color:var(--soft);min-height:22px;margin:6px 0}
.rec{width:96px;height:96px;border-radius:50%;border:0;background:var(--peach);margin:8px auto;display:flex;align-items:center;justify-content:center;font-size:34px;cursor:pointer;box-shadow:0 8px 22px rgba(240,150,110,.35)}
.rec.on{background:#f39b8a;animation:pulse 1.2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 #f39b8a88}100%{box-shadow:0 0 0 22px #f39b8a00}}
.timer{text-align:center;font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}
.wave{display:flex;gap:3px;justify-content:center;height:30px;align-items:center}.wave i{width:4px;border-radius:3px;background:var(--mint);height:6px;transition:height .1s}
.clip{display:flex;gap:10px;align-items:flex-start;margin:8px 0}.clip.me{flex-direction:row-reverse}
.clip .b{background:#fff;border-radius:16px;padding:10px 12px;box-shadow:var(--sh);font-size:14.5px;max-width:82%}
.clip.me .b{background:var(--mint2)}.clip .meta{font-size:11px;color:var(--soft);margin-top:4px}
.feedback-row{display:grid;gap:8px;margin-top:8px}
.report{background:none;border:0;color:var(--soft);font-size:12.5px;cursor:pointer;text-decoration:underline;font-family:inherit}
/* journey map */
.map{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#e6f4fb,#e9f6ec 55%,#f5efe0);box-shadow:var(--sh)}
.map svg{display:block;width:100%;height:auto}
.memory{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:16px;padding:10px 12px;margin:8px 0;box-shadow:var(--sh)}
.memory.new{animation:glow 1.6s ease 2;border:2px solid var(--sun)}@keyframes glow{50%{box-shadow:0 0 0 6px #f6dd8a66}}
.xpbar{height:12px;background:#ece8df;border-radius:9px;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),#a8dcbc);border-radius:9px;transition:width 1.4s ease}
.switch{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center}
.switch h1{font-size:56px;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.3);opacity:0}}
.swap{display:flex;gap:30px;align-items:center;margin:20px 0}.swap .x{animation:spin 1s ease}@keyframes spin{from{transform:rotate(-180deg)}}
.stars{display:flex;gap:8px;justify-content:center;margin:8px 0}.stars button{width:46px;height:46px;border-radius:14px;border:0;background:#fff;box-shadow:var(--sh);font-size:18px;font-weight:800;cursor:pointer;font-family:inherit}.stars button.sel{background:var(--mint)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xpfloat{font-size:40px;font-weight:900;color:#3f9a6a;text-align:center;animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
.hero{text-align:center;padding-top:30px}
.ai{border-left:4px solid var(--lav)}.human{border-left:4px solid var(--peach)}
.label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--soft)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall 2.4s linear forwards}@keyframes fall{to{transform:translateY(900px) rotate(540deg)}}
/* ---- V0.2 ---- */
.scene{position:relative;width:100%;aspect-ratio:360/220;border-radius:24px;overflow:hidden;box-shadow:var(--sh)}
.scene>svg.bg{position:absolute;inset:0;width:100%;height:100%}
.actor{position:absolute;bottom:37%;width:25%;transition:left 1s ease,opacity .5s,transform .5s}
.actor svg{width:100%;height:auto;display:block}
.actor.flip svg{transform:scaleX(-1)}
.actor.small{width:19%}
.actor .tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;background:#fffd;border-radius:9px;padding:1px 7px;white-space:nowrap}
.scene .bubble-dot{z-index:3}
.think{position:absolute;top:-8px;right:-4px;font-size:16px;animation:pop .4s}
.trail-note{position:absolute;background:#fff;border-radius:12px;padding:6px 10px;font-size:12.5px;box-shadow:var(--sh);max-width:70%;pointer-events:none;animation:fade .2s;z-index:4}
.faces{display:flex;justify-content:space-between;gap:4px}.faces button{font-size:30px;background:#fff;border:0;border-radius:16px;width:58px;height:58px;box-shadow:var(--sh);cursor:pointer;opacity:.6}.faces button.sel{opacity:1;background:var(--mint2);transform:scale(1.08)}
.big-stat{display:flex;gap:10px}.big-stat>div{flex:1;background:#fff;border-radius:18px;padding:12px;text-align:center;box-shadow:var(--sh)}.big-stat b{display:block;font-size:24px}
.live{min-height:20px;text-align:center;font-size:14px;color:var(--ink);font-style:italic;margin:4px 8px}
.walk{animation:walk .5s ease-in-out infinite}@keyframes walk{50%{transform:translateY(-3px) rotate(2deg)}}
.zz{animation:zz 2s infinite}@keyframes zz{50%{opacity:.3;transform:translateY(-3px)}}
.opt svg{width:52px;height:auto}
/* ---- V0.3 design system ---- */
:root{--soft:#56635d;--fs-xs:12px;--fs-s:14px;--fs-m:16px;--fs-l:22px;--fs-xl:28px;--sp:12px}
h1{font-size:var(--fs-xl)}h3{font-size:var(--fs-m);margin:20px 0 8px}
.btn{min-height:48px}.btn.small{min-height:44px}
.btn:hover{filter:brightness(1.03)}.opt{min-height:48px}
.lead{font-size:var(--fs-s);color:var(--soft);margin:2px 0 10px}
.xp-pill{background:#fdf0c4;color:#6b5310;border-radius:99px;padding:6px 12px;font-weight:800;font-size:var(--fs-s)}
.hero-card{background:linear-gradient(180deg,#e9f6ee,#fff);border-radius:28px;padding:14px 16px 16px;box-shadow:var(--sh);margin:14px 0}
.online{font-size:var(--fs-xs);font-weight:800;color:#2f7a52;display:flex;align-items:center;gap:6px}
.online .dot{width:8px;height:8px;border-radius:50%;background:#3cb371;box-shadow:0 0 0 0 #3cb37188;animation:pulse 1.6s infinite}
.btn.cta{font-size:20px;padding:20px;border-radius:22px;margin-top:6px;box-shadow:0 8px 18px rgba(95,174,132,.35)}
.row{display:flex;align-items:center;gap:12px}.tap{cursor:pointer}
.race{position:relative;height:64px;margin-top:6px}
.race .track{position:absolute;left:8px;right:44px;top:44px;height:8px;border-radius:8px;background:repeating-linear-gradient(90deg,#e7d8b5 0 8px,transparent 8px 14px)}
.race .track i{display:block;height:100%;background:var(--mint);border-radius:8px}
.race .rt{position:absolute;top:2px;width:44px;transform:translateX(-30%)}.race .rr{position:absolute;right:-2px;top:0;width:40px}.race .rx{position:absolute;right:30px;top:36px;font-size:14px}
.race svg,.lang svg,.row svg,.profile-head svg{width:100%;height:auto;display:block}
.week{display:flex;justify-content:space-between;align-items:flex-end;height:70px;margin-top:8px}
.week div{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.week i{width:18px;border-radius:6px;background:var(--mint)}.week i.zero{background:#e6e1d6}.week span{font-size:var(--fs-xs);color:var(--soft)}
.profile-head{display:flex;align-items:center;gap:14px;background:#fff;border-radius:28px;padding:14px;box-shadow:var(--sh)}
.lang-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lang{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:18px;padding:10px 6px;box-shadow:var(--sh);border:2px solid transparent;font-family:inherit;color:var(--ink);cursor:pointer;font-size:var(--fs-s)}
.lang.sel{border-color:var(--mint);background:var(--mint2)}
.wardrobe{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.item{background:#fff;border:2px solid transparent;border-radius:16px;padding:8px 2px;min-height:72px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--sh);cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .15s}
.item .ie{font-size:24px}.item .small{font-size:10.5px;line-height:1.2}.item.on{border-color:var(--mint);background:var(--mint2);transform:translateY(-2px)}.item.locked{opacity:.55}
.mini{width:auto;padding:8px 16px;margin:0}
.goal-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
details summary{cursor:pointer;min-height:32px;list-style:none}.set{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.chip{color:#24332c}
button:focus-visible,.opt:focus-visible{outline:3px solid #3b7bd8;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}