@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap");:root{color-scheme:dark;--night:#0b1516;--night-2:#132124;--night-3:#1b2e31;--mint:#c0e99f;--mint-hi:#d6f6bd;--mint-ink:#14352a;--chick:#ffd978;--coral:#ff9f8e;--coral-ink:#47201a;--amber:#f2c38e;--bg:var(--night);--panel:var(--night-2);--panel-raised:var(--night-3);--line:#2a4347;--control:#718a87;--ink:#f3f6ec;--muted:#a9bdb9;--action:var(--mint);--action-ink:var(--mint-ink);--recording:var(--coral);--warn:var(--amber);--display:"Baloo 2","Nunito",system-ui,sans-serif;--spring:cubic-bezier(0.34,1.56,0.64,1);font-family:Nunito,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:1rem;min-height:100dvh;overflow-x:clip;background:radial-gradient(720px 420px at 50% -80px,#1c3a37 0,transparent 70%),var(--bg);background-repeat:no-repeat}button,input,select{font:inherit}a,button,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button{color:inherit;border:0;min-height:44px;transition:transform .12s var(--spring),background-color .15s}button:not(:disabled,[aria-disabled=true]):active{transform:scale(.96)}button:disabled,button[aria-disabled=true]{cursor:not-allowed;opacity:.45}:where(button,a,input,select,summary):focus-visible{outline:3px solid var(--mint);outline-offset:4px}button svg{flex-shrink:0}a{color:inherit;text-underline-offset:.2em}h1,h2,p{margin:0}h1,h2{font-family:var(--display);font-weight:700}h1{font-size:clamp(2rem,6vw,2.75rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}p{line-height:1.6}.app-shell{max-width:720px;min-height:100dvh;padding:0 24px;margin:0 auto;display:flex;flex-direction:column}.app-shell>main{flex:1}.topbar{padding:16px 0;flex-wrap:wrap;justify-content:space-between;gap:12px}.brand,.topbar{display:flex;align-items:center}.brand{gap:8px;font:800 2rem/1 var(--display),sans-serif;letter-spacing:-.02em}.brand-mark{width:40px;height:40px;flex-shrink:0}.language-pill{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:48px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.875rem;font-weight:600}.language-pill:hover{border-color:var(--control)}.language-pill span,.language-pill>svg:last-child{color:var(--muted)}.language-pill strong{font-weight:800;color:var(--mint)}.session-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:8px}.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--panel);color:var(--muted);font-size:.875rem;font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.chip.ready .status-dot{background:var(--mint)}.chip.progress.earned{color:var(--chick)}.chip.progress.earned svg{fill:currentColor}.conversation{max-width:560px;margin:0 auto;text-align:center;padding:16px 0 32px}.pio-orb{--size:168px;position:relative;width:var(--size);height:var(--size);margin:8px auto 16px;display:grid;place-items:center}.pio-halo{position:absolute;inset:0;border-radius:50%;border:2px solid #c0e99f40;background:radial-gradient(circle,#c0e99f1f 0,transparent 68%);transform:scale(calc(1 + var(--level, 0) * .16));transition:transform .12s}.pio-nest{width:78%;height:78%;padding:4%;border-radius:50%;background:radial-gradient(circle at 32% 24%,#dff5c2 0,#b3dc9a 34%,#6fae93 72%,#3b6f63 100%);transition:filter .3s}.pio-orb.listening .pio-halo{border-color:#ff9f8e99;background:radial-gradient(circle,#ff9f8e26 0,transparent 68%)}.pio-orb:is(.thinking,.speaking) .pio-halo{animation:breathe 2s ease-in-out infinite}.pio-orb.sleepy .pio-nest{filter:saturate(.55) brightness(.8)}.pio-orb.sleepy .pio-halo{border-color:var(--line);background:none}.mascot{display:block;width:100%;height:100%;overflow:visible;transition:transform .35s var(--spring)}.mascot *{transform-box:fill-box;transform-origin:center}.m-dots,.m-eyes-closed,.m-eyes-happy,.m-notes,.m-sparks,.m-zzz{display:none}.m-body{transform-origin:50% 100%}.mood-curious .m-body,.mood-idle .m-body,.mood-listening .m-body{animation:bob 3.2s ease-in-out infinite}.m-eyes-open{animation:blink 4.6s infinite}.mood-curious{transform:rotate(8deg)}.mood-listening{transform:rotate(-8deg)}.mood-listening .m-wing-r{transform:translate(3px,-14px) rotate(-28deg)}.m-brows path,.m-iris{transition:transform .3s var(--spring)}.mood-thinking .m-iris{transform:translate(2.5px,-3px)}.mood-curious .m-brow-r,.mood-thinking .m-brow-r{transform:translateY(-3px) rotate(8deg)}.mood-listening .m-iris{transform:translateX(2.5px)}.mood-listening .m-brows path,.mood-speaking .m-brows path{transform:translateY(-1.5px)}.mood-happy .m-brows path{transform:translateY(-3px)}.mood-sleepy .m-brows path{transform:translateY(2.5px)}.mood-thinking .m-dots{display:block}.mood-thinking .m-dots circle{animation:pop 1.2s ease-in-out infinite}.mood-thinking .m-dots circle:nth-child(2){animation-delay:.18s}.mood-thinking .m-dots circle:nth-child(3){animation-delay:.36s}.mood-speaking .m-beak-low{animation:talk .28s ease-in-out infinite alternate}.mood-speaking .m-notes{display:block}.mood-speaking .m-notes path{animation:pop .9s ease-in-out infinite}.mood-speaking .m-notes path:nth-child(2){animation-delay:.2s}.mood-happy .m-eyes-open,.mood-sleepy .m-eyes-open{display:none}.mood-happy .m-eyes-happy,.mood-happy .m-sparks,.mood-sleepy .m-eyes-closed,.mood-sleepy .m-zzz{display:block}.mood-happy .m-body{animation:hop .6s var(--spring) 3}.mood-happy .m-wing-l{animation:flap-l .3s ease-in-out 6 alternate}.mood-happy .m-wing-r{animation:flap-r .3s ease-in-out 6 alternate}.mood-happy .m-sparks path{animation:pop 1.4s ease-in-out infinite}.mood-happy .m-sparks path:nth-child(2n){animation-delay:.5s}.mood-sleepy .m-body{animation:snooze 4.2s ease-in-out infinite}.mood-sleepy .m-zzz text{animation:drift 3s ease-in-out infinite}.mood-sleepy .m-zzz text:nth-child(2){animation-delay:.8s}.mood-still *{animation:none!important}.session-copy p{color:var(--muted);margin:8px auto 0;max-width:440px}.recording-time{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.875rem;font-weight:700;color:var(--recording);font-variant-numeric:tabular-nums}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--recording);animation:breathe 1.2s ease-in-out infinite}.example{margin-top:16px;color:var(--muted);font-size:.875rem}.example q{color:var(--ink);font-weight:700}.bubble{max-width:88%;margin-top:24px;padding:12px 16px;text-align:left;overflow-wrap:anywhere}.bubble.mine{margin-left:auto;width:fit-content;background:var(--panel-raised);border-radius:20px 20px 6px 20px}.bubble-label{display:block;font-size:.875rem;font-weight:700;color:var(--muted)}.phrase-card{background:var(--panel);border:1px solid var(--line);border-radius:24px 24px 24px 8px;padding:20px;text-align:left;margin-top:12px;animation:rise .35s var(--spring)}.phrase-top{display:flex;align-items:center;gap:8px;color:var(--mint);font-size:.875rem;font-weight:800}.phrase-badge{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--mint-ink)}.phrase-badge svg{stroke-width:3}.phrase-card>p{font:600 1.625rem/1.35 var(--display),sans-serif;margin:8px 0 16px;overflow-wrap:anywhere}.phrase-card.practice{border-color:#a9917480}.phrase-card.practice .phrase-top{color:var(--warn)}.phrase-card.accepted{border-color:#c0e99f80;background:linear-gradient(160deg,#1d3a2f,var(--panel) 70%)}.phrase-actions{flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:.875rem;font-weight:700}.listen,.phrase-actions{display:flex;align-items:center}.listen{gap:8px;min-height:48px;padding:4px 16px 4px 4px;border-radius:999px;background:var(--panel-raised);color:var(--ink);text-align:left}.listen-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--mint);color:var(--mint-ink)}.listen-icon svg{fill:currentColor;margin-left:2px}.switch-row{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--muted);font-size:.875rem;font-weight:700;text-align:left;cursor:pointer}.switch{appearance:none;position:relative;width:46px;height:28px;margin:0;flex-shrink:0;border-radius:999px;border:2px solid var(--control);background:transparent;cursor:pointer;transition:background-color .15s,border-color .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--control);transition:transform .2s var(--spring),background-color .15s}.switch:checked{background:var(--mint);border-color:var(--mint)}.switch:checked:after{transform:translateX(18px);background:var(--mint-ink)}.focus-words{font-size:.875rem;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}.focus-words>p,.focus-words>span{flex-basis:100%}.focus-words button{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 16px 8px 12px;border:1px solid #a99174;border-radius:999px;color:var(--warn);background:#3e3326;font-weight:700;max-width:100%;text-align:left;overflow-wrap:anywhere}.focus-words button svg{fill:currentColor}.notice{font-size:.875rem;color:var(--muted);max-width:560px;margin:24px auto 0;padding:16px;border:1px solid var(--line);border-radius:16px;text-align:left}.field-error,.notice.error{color:var(--warn)}.notice.error{border-color:#a99174;background:#3e332640}.notice .secondary{margin-top:12px}.connection-action{display:flex;justify-content:center;margin-top:24px}.connection-action .access-form{width:min(100%,360px)}.clarify{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}.dock{position:sticky;bottom:0;z-index:2;flex-direction:column;gap:4px;margin-top:24px;padding:16px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 78%,transparent)}.dock,.mic-button{display:flex;align-items:center}.mic-button{width:min(100%,320px);min-height:64px;padding:8px 24px 8px 8px;gap:16px;color:var(--action-ink);background:var(--action);border-radius:999px;font:700 1.25rem/1.2 var(--display),sans-serif;text-align:left;box-shadow:0 8px 24px #0006}.mic-button:hover{background:var(--mint-hi)}.mic-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:50%;background:var(--mint-ink);color:var(--mint)}.mic-button.listening{background:var(--recording);color:var(--coral-ink)}.mic-button.listening .mic-icon{background:var(--coral-ink);color:var(--recording);animation:breathe 1.2s ease-in-out infinite}.mic-button:is(.permission,.thinking,.preparing-voice,.speaking){background:var(--panel-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--control)}.mic-button:is(.permission,.thinking,.preparing-voice,.speaking) .mic-icon{background:var(--ink);color:var(--bg)}.text-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;background:none;color:var(--muted);font-size:.875rem;font-weight:700;padding:12px;border-radius:999px}.text-button:hover{color:var(--ink)}.new-idea{margin-top:8px}.help-details{margin-top:24px;padding:0 16px;border-radius:16px;background:var(--panel);text-align:left;font-size:.875rem;color:var(--muted)}.help-details+.help-details{margin-top:8px}.help-details summary{min-height:48px;padding:12px 0;color:var(--ink);font-weight:700;line-height:1.5}.help-details p{margin:0 0 16px}.help-details ol{padding-left:24px;margin:0 0 16px;line-height:1.6}.help-details li+li{margin-top:8px}footer{padding:24px 0 calc(24px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--muted);font-size:.875rem}.welcome{text-align:center;max-width:460px;margin:8px auto 48px}.welcome h1 em{font-style:normal;color:var(--chick)}.intro{color:var(--muted);margin-top:8px}.steps{list-style:none;counter-reset:step;width:fit-content;max-width:100%;margin:24px auto 0;padding:0;display:grid;gap:12px;text-align:left;font-weight:600}.steps li{counter-increment:step;display:flex;align-items:center;gap:12px}.steps li:before{content:counter(step);display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--panel-raised);color:var(--mint);font:800 1rem/1 var(--display),sans-serif}.setup-card{background:var(--panel);padding:24px;border:1px solid var(--line);border-radius:24px;margin:32px auto 0;text-align:left}.setup-card h2{font-size:1.375rem;margin-bottom:16px}.language-form label{display:flex;flex-direction:column;gap:8px;font-size:.875rem;font-weight:700;color:var(--ink)}select{color:var(--ink);width:100%;background:var(--bg);border:1px solid var(--control);border-radius:14px;padding:12px;min-height:52px;font-size:1rem;font-weight:600}.pair-arrow{display:grid;place-items:center;padding:8px;color:var(--mint);transform:rotate(90deg)}.form-note{font-size:.875rem;color:var(--muted);margin:16px 0}.form-note.field-error{color:var(--warn)}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 24px;min-height:52px;border-radius:999px;font-weight:800;font-size:1rem}.primary{background:var(--action);color:var(--action-ink)}.primary:not(:disabled):hover{background:var(--mint-hi)}.secondary{background:transparent;border:2px solid var(--control)}.secondary:not(:disabled,[aria-disabled=true]):hover{border-color:var(--ink)}.full{width:100%}.settings-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:24px}.settings-dialog::backdrop{background:#000c}.dialog-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.dialog-heading h2{font-size:1.5rem}.dialog-heading button{display:grid;place-items:center;min-width:44px;height:44px;border-radius:50%;background:var(--panel-raised)}.access-form{gap:12px}.access-form,.access-form label{display:flex;flex-direction:column}.access-form label{font-size:.875rem;font-weight:700;gap:8px;text-align:left}.access-form input{background:var(--bg);border:1px solid var(--control);color:var(--ink);border-radius:14px;padding:12px;min-height:52px;min-width:0}.access-form p{color:var(--warn);font-size:.875rem;text-align:left}.loading{min-height:100dvh;display:grid;place-content:center;justify-items:center;color:var(--muted)}.qa-moods{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}.qa-moods figure{margin:0;font-size:.875rem;color:var(--muted)}.qa-moods .pio-orb{--size:120px}@keyframes breathe{50%{transform:scale(1.08);opacity:.55}}@keyframes bob{50%{transform:translateY(-2.5px)}}@keyframes blink{0%,95%,to{transform:scaleY(1)}97.5%{transform:scaleY(.1)}}@keyframes pop{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}@keyframes talk{to{transform:translateY(5px)}}@keyframes hop{0%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-9px) scale(.97,1.04)}80%{transform:translateY(0) scale(1.04,.96)}}@keyframes flap-l{to{transform:rotate(38deg) translateY(-6px)}}@keyframes flap-r{to{transform:rotate(-38deg) translateY(-6px)}}@keyframes snooze{50%{transform:scale(1.03,.97)}}@keyframes drift{0%{opacity:0;transform:translateY(4px)}50%{opacity:1}to{opacity:0;transform:translateY(-6px)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}.pio-halo{transform:none!important}}@media (max-width:650px){.app-shell{padding:0 16px}.brand{font-size:1.75rem}.brand-mark{width:36px;height:36px}.pio-orb{--size:144px}.phrase-card>p{font-size:1.375rem}.mic-button{width:100%}}@media (max-width:350px){.language-pill{width:100%}.phrase-card,.settings-dialog,.setup-card{padding:16px}}