:root{color-scheme:light;--ink:#253d35;--muted:#66746a;--paper:#f5f2e9;--line:#dadfd3}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'PingFang SC','Hiragino Sans GB',sans-serif}main{max-width:660px;margin:auto;padding:30px 28px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:65px}.brand{text-decoration:none;color:var(--ink);font-size:26px;font-weight:700;letter-spacing:3px}.brand span{display:block;font-size:9px;letter-spacing:4px;margin-top:4px}.badge{font-size:11px;background:#e6e9df;border-radius:20px;padding:8px 11px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted)}h1{font-family:'Songti SC','Noto Serif CJK SC',serif;font-size:52px;line-height:1.3;font-weight:500;letter-spacing:-2px;margin:20px 0}.intro{font-size:16px;color:var(--muted);line-height:1.9;margin-bottom:32px}button,input,textarea{font:inherit}button{cursor:pointer;color:var(--ink);border:1px solid var(--line);background:transparent;border-radius:14px;padding:13px}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a5bfa4;outline-offset:3px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}.modes button{text-align:left;padding:18px 14px}.modes small{display:block;font-size:11px;margin-top:10px;color:var(--muted)}button.selected{border-color:var(--ink);background:#e7ecdf}label{display:block;font-size:13px;margin-bottom:10px}textarea,input[type=text],input:not([type]){width:100%;border:1px solid var(--line);background:#fff9;border-radius:12px;padding:14px;color:var(--ink)}textarea{min-height:80px;resize:vertical}.language{display:flex;align-items:center;gap:13px;font-size:12px;margin:22px 0}.language span{margin-left:auto;font-size:11px;color:var(--muted)}.primary{background:var(--ink);color:white;width:100%;border:0;padding:19px;font-size:17px;text-align:left}.primary span{float:right}.note{font-size:11px;line-height:1.8;color:var(--muted)}footer{margin:45px 0 12px;border-top:1px solid var(--line);padding-top:20px;font-size:11px;color:var(--muted)}[hidden]{display:none!important}.session-title{font-size:37px}.orb{height:120px;display:flex;gap:8px;justify-content:center;align-items:center}.orb span{display:block;width:10px;height:35px;border-radius:10px;background:#829b79}.orb span:nth-child(2),.orb span:nth-child(4){height:60px}.orb span:nth-child(3){height:85px}#state{text-align:center;font-size:14px}#context{font-size:12px;color:var(--muted);text-align:center;overflow-wrap:anywhere}#transcript{max-height:300px;overflow:auto;margin:25px 0}.utterance{padding:16px;border-radius:14px;margin:10px 0;background:#e7ecdf;font-size:15px;line-height:1.8;overflow-wrap:anywhere}.utterance.user{background:#fff8;margin-left:30px}.utterance small{display:block;font-size:10px;color:var(--muted)}.hints,.controls{display:flex;gap:8px;margin:15px 0;flex-wrap:wrap}.hints button,.controls button{font-size:12px}.input-row{display:flex;gap:8px}.input-row input{min-width:0}.input-row button{flex-shrink:0}.audio-option{font-size:11px;line-height:1.6;margin-top:15px}.audio-option input{vertical-align:middle}blockquote{margin:30px 0;padding:25px;background:#e7ecdf;font-family:Georgia,serif;font-size:24px;border-radius:16px}blockquote small{display:block;font-size:13px;line-height:1.8;margin-top:14px;font-family:'PingFang SC',sans-serif}@media(max-width:480px){main{padding:24px 20px}header{margin-bottom:45px}h1{font-size:43px}.language{flex-wrap:wrap}.language span{margin-left:0;width:100%}.modes button{padding:16px 12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
summary{cursor:pointer;font-size:14px;padding:16px 0}details{border-top:1px solid var(--line);margin-top:22px}.external{color:var(--ink);font-size:13px;padding:13px}select{background:var(--paper);color:var(--ink);font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px}#interim{min-height:24px;text-align:center;color:var(--muted);font-size:14px}.audio-option{margin-bottom:20px}
fieldset{border:0;margin:0;padding:0}legend{font-size:12px;margin-bottom:16px;color:var(--muted)}.setting-row{display:grid;grid-template-columns:1fr 1.4fr;gap:15px}.setting-row select{display:block;width:100%;font-size:12px;margin-top:8px}#status{font-size:14px;margin:22px 0;color:var(--ink)}@media(max-width:420px){.setting-row{grid-template-columns:1fr}}

/* Conversation surface: native controls, a single non-figurative breathing circle. */
.practice{max-width:680px;padding-top:24px}.practice header{margin-bottom:40px}.conversation{text-align:center}.conversation h1{font-family:Georgia,serif;font-size:clamp(44px,9vw,64px);line-height:1.08;letter-spacing:-2px;margin:20px 0}.conversation .intro{font-size:14px;margin:20px 0 26px}.voice-orb{position:relative;isolation:isolate;display:grid;place-items:center;width:184px;height:184px;margin:24px auto 30px;border:0;border-radius:50%;background:#cfddd8;color:#193b36;box-shadow:0 16px 48px #618c7524;opacity:1;overflow:hidden}.orb-color{position:absolute;inset:-16%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 25% 25%,#f9df9a,transparent 55%),radial-gradient(ellipse at 78% 75%,#a7b5f5,transparent 60%),radial-gradient(ellipse at 15% 85%,#64c9a8,transparent 65%),#bddbc6;animation:breathe 5s ease-in-out infinite}.voice-orb:disabled{cursor:default;opacity:1}.voice-orb:not(:disabled):hover{box-shadow:0 16px 50px #618c7550}.voice-orb span:last-child{font-size:16px;font-weight:600;letter-spacing:2px}.practice[data-state="waiting"] .orb-color{filter:hue-rotate(45deg);animation-duration:3s}.practice[data-state="assistant-speaking"] .orb-color{filter:hue-rotate(115deg);animation-duration:1.8s}.practice[data-state="error"] .orb-color{background:radial-gradient(ellipse at 25% 25%,#ffe2b2,#e9abab);animation:none}.practice[data-state="connecting"] .orb-color{animation-duration:2.5s}.practice #status{min-height:44px;line-height:1.6;margin:16px 0 6px}.practice .controls{justify-content:center}.practice .controls button{min-height:44px;font-size:13px}.practice .consent{max-width:380px;margin:24px auto;text-align:left;color:var(--muted);font-size:12px}.practice footer{margin-top:24px}.practice a{color:var(--ink)}dialog{width:min(540px,calc(100% - 28px));max-height:85dvh;overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:24px}dialog::backdrop{background:#21372f66;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.dialog-heading h2{font-size:24px}dialog select{width:100%}button,summary,select{min-height:44px}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #45785f;outline-offset:5px}input[type=checkbox]{min-width:18px;min-height:18px;accent-color:#416b59}.practice .diagnostics{margin-top:24px}.practice details summary{color:var(--muted);font-size:12px}@keyframes breathe{0%,100%{transform:scale(.92) rotate(-8deg)}50%{transform:scale(1.1) rotate(14deg)}}@media(max-width:480px){.practice{padding:20px}.practice header{margin-bottom:30px}.voice-orb{width:164px;height:164px}.conversation .intro{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){.orb-color{animation:none!important;transform:none!important}}

/* Main screen deliberately contains only the voice control and its menu. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.minimal{max-width:none;min-height:100svh;padding:0;display:grid;place-items:center}.minimal .conversation{width:100%;padding:80px 24px}.minimal .menu-toggle{position:absolute;right:max(20px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));border:0;background:transparent;font-size:28px;min-width:48px;min-height:48px;line-height:1}.minimal .voice-orb{width:clamp(168px,45vw,220px);height:clamp(168px,45vw,220px);margin:0 auto}.minimal #status:not(.sr-only){max-width:320px;margin:28px auto 0;font-size:13px;line-height:1.8;color:var(--muted)}.minimal .voice-orb[aria-pressed="true"]{box-shadow:0 0 0 2px #618c752b,0 16px 48px #618c7524}.minimal[data-state="listening"] .orb-color,.minimal[data-state="user-speaking"] .orb-color{filter:hue-rotate(-25deg);animation-duration:4s}.minimal dialog .consent{margin:24px 0}.minimal dialog footer{margin-top:24px}
