:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#253e37;background:#faf9f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{max-width:660px;margin:auto;padding:28px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Georgia,serif;font-size:20px;text-decoration:none;color:inherit;line-height:1.3}.brand span{display:block;font:9px Arial,sans-serif;letter-spacing:3px;margin-top:6px}.preview{font-size:11px;color:#586a62;border:1px solid #d8ded6;border-radius:20px;padding:8px 12px}main{max-width:660px;margin:12px auto 0;padding:0 28px}.experience{text-align:center}.eyebrow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#627368;margin:7px 0 13px}h1{font:normal clamp(44px,7vw,60px)/1.1 Georgia,serif;letter-spacing:-2px;margin:0 0 16px}.intro{font-size:15px;line-height:1.65;color:#59675f;margin:0}.controls{margin:28px auto 0;max-width:290px}label{display:block;font-size:12px;text-align:left;margin-bottom:8px}select,button{font:inherit;min-height:48px;border-radius:7px;width:100%}select{appearance:auto;padding:0 14px;background:#fffefa;color:#253e37;border:1px solid #ccd5cb}button{cursor:pointer;border:0;padding:13px 18px;background:#294e41;color:#fff;font-size:14px;text-align:center;position:relative;display:flex;justify-content:center;align-items:center}button>span{position:absolute;right:18px}button:hover{background:#1e3e32}button:disabled,select:disabled{opacity:.55;cursor:default}button[hidden]{display:none}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #91a877;outline-offset:4px}.buttons{margin-top:10px}#end{background:#e8e7df;color:#37433b;text-align:center;justify-content:center}#end:hover{background:#ddddd2}#status{font-size:11px;color:#687269;line-height:1.6;min-height:36px;margin:13px 0 0}.transcript{margin-top:26px;border-top:1px solid #dce1d8}.transcript-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 0 10px}h2{font-size:13px;font-weight:500;margin:0}.transcript-heading span{font-size:10px;color:#69746b}#captions{height:180px;overflow:auto;scrollbar-width:thin;padding:0 7px 12px 0}.empty{font-size:13px;color:#7b8379;margin-top:25px;text-align:center}#captions .turn{font-size:14px;line-height:1.6;margin:16px 0}.speaker{display:block;font-size:9px;letter-spacing:1.4px;color:#607268;margin-bottom:4px}.note{border-top:1px solid #dce1d8;padding-top:20px;font-size:11px;line-height:1.7;color:#73796d;margin:0}footer{text-align:center;font-size:10px;color:#778074;padding:30px 20px} @media(max-width:520px){header{padding:22px 24px}.brand{font-size:17px}.preview{font-size:9px;padding:7px 9px}main{padding:0 24px;margin-top:0}.eyebrow{font-size:9px;letter-spacing:1px}.controls{margin-top:22px}.transcript{margin-top:22px}#captions{height:180px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){.orb,.orb.active,.orb.connecting,.orb::before{animation:none;transition:none}}


/* Voice sphere: the animation amplitude comes only from agent playback. */
.orb-wrap{height:204px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.orb{--orb-scale:1;--orb-turn:-12deg;position:relative;isolation:isolate;flex:none;width:156px;height:156px;min-height:0;padding:0;border:0;border-radius:50%;overflow:visible;background:transparent;color:#386b58;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.orb:hover{background:transparent;transform:scale(1.025)}
.orb:active{transform:scale(.98)}
.orb:disabled{opacity:1;cursor:wait}
.orb-surface{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.orb-body{transform-origin:80px 80px;transform:scale(var(--orb-scale));will-change:transform}
.orb-layer,.orb-drift{transform-origin:80px 80px}
.orb-layer-a{transform:rotate(var(--orb-turn))}
.orb-layer-b{transform:rotate(calc(var(--orb-turn) * -.7))}
.orb-layer-c{transform:rotate(calc(var(--orb-turn) * 1.35))}
.orb-layer-a .orb-drift{animation:orb-drift-a 17s ease-in-out infinite}
.orb-layer-b .orb-drift{animation:orb-drift-b 23s ease-in-out infinite}
.orb-layer-c .orb-drift{animation:orb-drift-c 13s ease-in-out infinite}
.orb-halo{transform-origin:80px 80px;opacity:calc(.18 + var(--orb-energy,0) * .7);transform:scale(calc(.94 + var(--orb-energy,0) * .1));transition:opacity .25s}
@keyframes orb-drift-a{50%{transform:rotate(110deg) translate(4px,-3px) scale(1.06,.94)}100%{transform:rotate(360deg)}}
@keyframes orb-drift-b{50%{transform:rotate(-140deg) translate(-3px,4px) scale(.94,1.07)}100%{transform:rotate(-360deg)}}
@keyframes orb-drift-c{50%{transform:rotate(160deg) translate(3px,3px) scale(1.08,.95)}100%{transform:rotate(360deg)}}
.orb-progress{opacity:0;transform-origin:80px 80px}
.orb[data-phase="connecting"] .orb-progress,.orb[data-phase="saving"] .orb-progress{opacity:.75;animation:orb-progress-turn 1.5s linear infinite}
.orb[data-phase="connecting"] .orb-body,.orb[data-phase="saving"] .orb-body{opacity:.6}
.orb-label{font-size:12px;line-height:20px;color:#405e50;max-width:100%;text-align:center}
.orb:focus-visible{outline:2px solid #0e2e28;outline-offset:7px}
@keyframes orb-progress-turn{to{transform:rotate(360deg)}}
@media(max-width:520px){.orb-wrap{height:188px}.orb{width:144px;height:144px}}
@media(prefers-reduced-motion:reduce){.orb,.orb-layer,.orb-drift,.orb-body,.orb-halo,.orb-progress{animation:none!important;transition:none!important}.orb-body,.orb-layer,.orb-halo{transform:none}}

.record-consent{display:flex!important;gap:10px;align-items:flex-start;max-width:390px;text-align:left;font-size:13px!important;line-height:1.5;margin:18px auto}.record-consent input{flex:none;width:18px;height:18px;margin-top:2px}#record-status{font-size:12px;line-height:1.5;max-width:390px;margin:12px auto}footer a{color:inherit}

.record-notice{font-size:12px;line-height:1.5;color:#687269;margin:16px 0}
