:root {
  --sb-strip: 0px; --sb-ear: 0px; --sb-ear-top: 0px;   
  --t-double-tap: 300ms;       
  --t-long-press: 450ms;       
  --t-hand-rest: 1200ms;       
  --t-hear: 300ms;             
  --t-breath: 400ms;           
  --t-breath-max: 1500ms;      
  --t-stagger: 250ms;
  --t-stopped-hold: 700ms;       
  --t-burst-settle: 80ms;     
  --t-first-read: 1500ms;     
  --t-kids-read: 1100ms;      
  --t-land: 600ms;             
  --t-harden: 900ms;           
  --t-glow-in: 200ms;
  --t-highlight: 1400ms;       
  --t-choose: 500ms;           
  --t-glow-out: 500ms;
  --t-callout-hold: 4000ms;    
  --t-scroll-to: 600ms;       
  --t-work-max: 180000ms;     
  --t-work-min: 2500ms;       
  --t-work-aura: 4000ms;      
  --t-think-sound-max: 20000ms;   
  --t-pick: 900ms;                        
  --t-alert-hold: 8000ms;     
  --t-soft-hold: 4000ms;             
  --t-callout-fade: 1500ms;
  --t-dissolve: 800ms;         
  --t-trail: 3500ms;           
  --t-text: 200ms;             
  --t-talk: 0.9s;   
  --t-blink: 240ms;   
  --t-sheet: 380ms;   
  --t-sheet-leave: 350ms;   
  --t-welcome-beat: 1000ms;   
  --t-orb-fly: 1150ms;   
  --t-welcome-hold: 10000ms;   
  --t-front-note-hold: 8000ms;   
  --t-wake-max: 120000ms;
  --t-start-hint: 1200ms;      
  --t-intro-say: 3200ms;   
  --t-intro-ask: 8000ms;   
  --t-intro-quick: 2200ms;   
  --t-intro-reply-max: 7000ms;   
  --t-intro-wake: 100ms;      
  --t-intro-first: 900ms;   
  --t-intro-react: 2000ms;   
  --t-intro-react-vary: 500ms;   
  --t-intro-idle: 4000ms;   
  --t-intro-gap: 1800ms;   
  --t-intro-checkin: 9000ms;   
  --t-tour-cloud: 6000ms;   
  --t-tour-tip-every: 1600ms;   
  --t-tour-tip-stay: 4200ms;   
  --t-tour-try: 20000ms;   
  --t-tour-ear: 20000ms;   
  --t-tour-fly: 900ms;   
  --t-tour-type: 32ms;   
  --t-tour-beat: 900ms;   
  --t-tour-hi: 1400ms;   
  --t-tour-scroll: 4500ms;   
  --t-tour-theme: 1600ms;   
  --t-tour-menu: 20000ms;   
  --t-tour-make-max: 15000ms;   
  --t-tour-board: 2500ms;      
  --t-intro-wait-max: 20000ms;   
  --t-li-breathe: 2800ms;   
  --t-people-follow: 60000ms;   
  --ppl-w: 8px;              
  --row-cy: 21px;            
  --ser-w: 0.075em;          
  --lib-top: 80px;              
  --lib-left: 12px;             
  --lib-bottom: 80px;           
  --lib-room: 640px;            
  --t-touched: 6000ms;          
  --t-touched-delay: 900ms;     
  --t-li-float: 2600ms;     
  --t-li-rock: 3700ms;      
  --li-float-hear-rate: 2.6;   
  --t-orb-hear: 520ms;   
  --t-orb-hear-beat: 620ms;   
  --t-hold-mute: 1100ms;   
  --t-hold-grace: 180ms;   
  --t-indicator-breath: 4000ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);   
  --ease-sink: cubic-bezier(0.55, 0, 0.9, 0.35);   
  --ease-pop: cubic-bezier(0.22, 1.35, 0.45, 1);   
  --t-afterimage: 900ms;       
  --t-flag-in: 200ms;          
  --t-flag-out: 500ms;         
  --t-indicator: 200ms;        
  --t-camera: 600ms;           
  --t-merge-pulse: 700ms;      
  --t-resume-glow: 2000ms;     
  --t-settle: 1200ms;          
  --t-tip-every: 2600ms;       
  --t-tip-stay: 7800ms;        
  --t-tip-pop: 420ms;
  --t-tip-restart: 8000ms;               
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   
  --t-card-leave: 1500ms;     
  --t-undo-toast: 6000ms;      
  --t-view: 200ms;             
  --t-orb: 4200ms;             
  --t-orb-haze: 6000ms;        
  --t-orb-mix: 5000ms;         
  --t-orb-band: 9000ms;        
  --t-orb-swap: 8400ms;       
  --t-orb-morph: 700ms;        
  --t-orb-shrivel: 800ms;
  --t-aura-fade: 500ms;        
  --t-aura-flash: 900ms;             
  --orb-work-rate: 5;          
  --orb-hear-rate: 2.4;        
  --drift: 16%;               
  --orb-c0: rgba(250,140,40,0.9); 
  --orb-c1: #f79a10;           
  --orb-c2: #ff6a30;           
  --orb-c3: #ffd98f;           
  --orb-c4: rgba(255,230,190,0.65); 
  --aura-d: 170vmax;           
  --t-started-hold: 1100ms;   
  --t-welcome-after: 2500ms;   
  --t-saved-hold: 1800ms;     
  --t-cross: 700ms;            
  --o-veil: 0.1;               
  --t-veil-drift: 1600ms;      
  --t-veil-slosh: 2400ms;      
  --t-lookup-slow: 5000ms;    
  --t-wait-extra: 3000ms;    
  --bubble-line: var(--c-mute);   
  --bubble-clock: #e0a33a;        
  --t-orb-flash: 320ms;        
  --t-orb-flash-hold: 170ms;    
  --t-orb-flash-out: 520ms;     
  --t-orb-jump: 240ms;          
  --t-orb-return: 560ms;        
  --ease-spring: linear(0, 0.6 10%, 1.1 26%, 1.13 32%, 0.97 52%, 1.02 70%, 0.995 85%, 1);             
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   
  --t-orb-lead: 420ms;          
  --t-read-min: 2000ms;         
  --t-read-char: 60ms;          
  --t-read-max: 16000ms;        
  --t-bubble-fade: 450ms;       
  --t-bubble-draw: 900ms;       
  --t-swell: 14600ms;           
  --swell-k: 1;                 
  --t-bubble-swap: 120ms;       
  --t-esbi-offer: 30000ms;      
  --t-cat-spin: 900ms;          
  --t-ghost-loop: 6000ms;       
  --t-ghost-step: 260ms;        
  --t-tip-hold: 6500ms;         
  --t-tip-gap: 3000ms;          
  --t-tip-gap-spread: 9000ms;   
  --t-home-return: 4000ms;     
  --t-home-first: 5000ms;      
  --t-think-min: 1400ms;      
  --t-esbi-wait-max: 40000ms; 
  --t-esbi-repeat: 20000ms;   
  --t-front-chatter: 8000ms;  
  --t-listen-ask-hold: 7500ms; 
  --t-confirm-hold: 20000ms;  
  --t-question-hold: 15000ms; 
  --t-check-pop: 450ms;       
  --t-answered-hold: 1400ms;  
  --answered: #a3d16a;        
  --t-stop-soft: 700ms;        
  --stop-blur: 14px;           
  --orb-clear: 88px;           
  --orb-d: 56px;                               
  --t-heard-flash: 1400ms;     
  --t-travel: 750ms;           
  --t-reslot: 350ms;           
  --t-bury: 500ms;             
  --t-drag-settle: 1500ms;     
  --t-drop-inside: 250ms;      
  --t-shake: 320ms;            
  --t-edge-in: 300ms;          
  --t-flash: 1000ms;           
  --t-spin: 1400ms;            
  --t-work: 6000ms;            
  --fill: 0%;                  
  --x-reach: 82px;             
  --rail-w: 380px;             
  --t-strike-preview: 200ms;   
  --t-ghost-dwell: 200ms;      
  --t-fan-grace: 150ms;        
  --o-afterimage: 0.15;
  --o-heard: 0.35;
  --o-sediment: 0.6;
  --o-breath-lo: 0.5;
  --o-breath-hi: 0.8;
  --o-inferred-goal: 0.5;      
  --o-slot: 0.3;               
  --o-say-quiet: 0.55;         
  --o-fold-rest: 0.45;
  --o-aura: 0.16;              
  --o-struck: 0.35;                     
  --font-num: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, sans-serif;
  --ne-text-x: 16px;          
  --ne-dot: 5px;              
  --ne-dot-x: 1.5px;          
  --ne-dot-y: 8px;            
}
:root { --c-ink: #e8e6e1; --c-mute: #7d848c; --c-text2: #cfd3d8; --c-text3: #9aa3ad; --c-line: #2a2f34; --c-dim: #4a5159; --c-surface: #15181b; --c-bg: #0f1113; --c-hover: #23272b; --c-hover2: #1d2125; --c-text4: #b8bec5; --c-link: #9fc5ff; --c-soft: #8fb3e0; --c-link-hi: #cfe2ff; --c-mute2: #8a9098; --c-card: #181b1f; --c-card2: #191d21; --c-menu: #1a1e22; --c-box-line: #d5d9de; --c-edge: #3a4048; --c-bg-rgb: 15,17,19; --c-text2-rgb: 207,211,216; --c-ink-rgb: 232,230,225; --c-glint-rgb: 255,255,255; --c-shade-rgb: 0,0,0; --c-link-rgb: 159,197,255; }
:root[data-theme="light"] { color-scheme: light; --c-ink: #1c1f23; --c-mute: #6a7179; --c-text2: #30363c; --c-text3: #596068; --c-line: #d4d8dd; --c-dim: #a9afb6; --c-surface: #ffffff; --c-bg: #f4f4f1; --c-hover: #eceef1; --c-hover2: #e9ebee; --c-text4: #4d545c; --c-link: #2463c4; --c-soft: #3f78c0; --c-link-hi: #174b99; --c-mute2: #6f767e; --c-card: #ffffff; --c-card2: #e9ebee; --c-menu: #ffffff; --c-box-line: #c3c9cf; --c-edge: #c9ced4; --c-bg-rgb: 244,244,241; --c-text2-rgb: 48,54,60; --c-ink-rgb: 28,31,35; --c-glint-rgb: 0,0,0; --c-shade-rgb: 255,255,255; --c-link-rgb: 36,99,196; }
:root { --i: 0; }
:root { --a-k0: 1; --a-k: var(--a-k0); }
@media (hover: none) and (pointer: coarse) { :root { --a-k0: 1.25; --a-k: var(--a-k0); } }   
:root { --a-talk: 1.1; }
:root { --c-esbi-line: #7fb2e5; --c-question: #e8d59a; --c-sentence: #aab1b8; --c-flash: #ffffff; --c-warn-ink: #e0a33a; --pt-by-c: var(--c-mute); }
:root[data-theme="light"] { --c-esbi-line: #2f65a8; --c-question: #7a5f0e; --c-sentence: #596068; --c-flash: #0e1012; --c-warn-ink: #a86508; }
:root { --by-c: #7fb2e5; }   
:root { --orb-sat: 1.5; --orb-contrast: 1.15; --t-orb-core: 9000ms; --t-orb-settle: 1900ms; --t-orb-color: 1600ms; --t-orb-kick: 700ms; --drift-work: 28%; --o-orb-white: 0.55; --orb-glow: 0.32; --t-orb-rays: 20000ms; --t-orb-rays-work: 9000ms; --t-orb-morph: 3600ms; --t-orb-shape: 4700ms; --o-orb-rays: 0.65; }
:root { --c-logo-edge: #868d95; }   
:root[data-theme="light"] { --c-logo-edge: #9fa6ae; }   
:root { --pick-w: 0; --pick-c: var(--bubble-clock); }
:root[data-theme="light"] { --pick-w: 2.5px; --pick-c: #d9771a; }
:root { --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-orb-hover: 420ms; --orb-hover-scale: 1.08; }
:root { --t-front-travel: 900ms; --t-intro-beat: 1700ms; --orb-front: 150px; --front-note-size: 17px; }
@media (pointer: coarse) and (min-width: 700px) { :root { --orb-front: 225px; --front-note-size: 24px; } }   
@media (pointer: coarse) and (max-height: 480px) { :root { --orb-front: 130px; --front-note-size: 15px; } }   
:root { --front-start-size: var(--front-note-size); }   
@media (pointer: coarse) and (max-width: 699px) { :root { --front-start-size: 19px; } }   
:root { --gen-top: calc(18px + env(safe-area-inset-top) + var(--sb-strip) + var(--sb-ear)); --gen-right: calc(22px + env(safe-area-inset-right)); }
:root { --t-zoom-settle: 180ms; --pdf-zoom: 1; }

@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --orb-c0 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --orb-c1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --orb-c2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --orb-c3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --orb-c4 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --drift { syntax: '<length-percentage>'; inherits: true; initial-value: 16%; }
@property --orb-d { syntax: '<length>'; inherits: true; initial-value: 56px; }
@keyframes circling { to { stroke-dashoffset: -100; } }
@keyframes slosh { from { transform: rotate(0deg) translateX(var(--drift)); } to { transform: rotate(360deg) translateX(var(--drift)); } }
@keyframes orb { to { transform: rotate(1turn); } }
@keyframes orb-swap { 0%, 35%, 100% { --orb-c0: rgba(250,140,40,0.9); --orb-c1: #f79a10; --orb-c2: #ff6a30; --orb-c3: #ffd98f; --orb-c4: rgba(255,230,190,0.65); }
  50%, 85% { --orb-c0: rgba(255,115,15,0.95); --orb-c1: #ff7d00; --orb-c2: #f2600c; --orb-c3: #ffbe6b; --orb-c4: rgba(255,196,130,0.7); } }
@keyframes bubble-fill { to { stroke-dashoffset: 0; } }
@keyframes orb-white-breathe { 0% { scale: 0.86; } 40% { scale: 1.02 0.96; } 70% { scale: 0.95 1.04; } 100% { scale: 1.05; } }
@keyframes orb-white-shape {
  0% { border-radius: 44% 56% 62% 38% / 42% 36% 64% 58%; translate: 4% -3%; }
  30% { border-radius: 62% 38% 34% 66% / 56% 64% 36% 44%; translate: -4% 2%; }
  60% { border-radius: 36% 64% 58% 42% / 64% 42% 58% 36%; translate: 2% 4%; }
  100% { border-radius: 54% 46% 38% 62% / 38% 60% 40% 62%; translate: -3% -4%; } }
@keyframes orb-core-breathe { 0% { scale: 0.88 1; } 50% { scale: 1.06 0.92; } 100% { scale: 0.94 1.08; } }
@keyframes orb-mist-wander { 0% { scale: 1 0.94; translate: 2% -1%; } 33% { scale: 0.95 1.05; translate: -2% 2%; } 66% { scale: 1.05 0.97; translate: 1% 2%; } 100% { scale: 0.97 1.03; translate: -1% -2%; } }
@keyframes orb-core-form { 0% { border-radius: 44% 56% 62% 38% / 42% 36% 64% 58%; } 33% { border-radius: 62% 38% 34% 66% / 56% 64% 36% 44%; }
  66% { border-radius: 36% 64% 58% 42% / 64% 42% 58% 36%; } 100% { border-radius: 54% 46% 38% 62% / 38% 60% 40% 62%; } }
@keyframes orb-core-wander { 0% { translate: -9% -6%; } 25% { translate: 8% -5%; } 50% { translate: 7% 8%; } 75% { translate: -7% 7%; } 100% { translate: -3% -9%; } }
@keyframes orb-white-wander { 0% { rotate: 0deg; } 50% { rotate: 70deg; } 100% { rotate: -40deg; } }
@keyframes orb-hear { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.09); } 55% { transform: scale(0.97); } 75% { transform: scale(1.04); } }
@keyframes bub-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }
@keyframes bub-undraw { from { stroke-dasharray: 100 100; } to { stroke-dasharray: 0 100; } }
@keyframes bub-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bub-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes orb-swell {
  0% { translate: 0 0; } 14% { translate: calc(2.4px * var(--swell-k)) calc(-3.6px * var(--swell-k)); } 29% { translate: calc(3.8px * var(--swell-k)) calc(1.2px * var(--swell-k)); }
  43% { translate: calc(0.6px * var(--swell-k)) calc(4.4px * var(--swell-k)); } 58% { translate: calc(-3.2px * var(--swell-k)) calc(1.6px * var(--swell-k)); }
  72% { translate: calc(-2.6px * var(--swell-k)) calc(-3.4px * var(--swell-k)); } 86% { translate: calc(-0.8px * var(--swell-k)) calc(-1.2px * var(--swell-k)); } 100% { translate: 0 0; } }
#home-orb { pointer-events: auto; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; width: 45px; height: 45px; display: grid; place-items: center;
  position: relative; isolation: isolate; flex: none; }
#indicator, #home-orb { transition: --orb-c0 var(--t-orb-color) var(--ease-inout), --orb-c1 var(--t-orb-color) var(--ease-inout), --orb-c2 var(--t-orb-color) var(--ease-inout),
              --orb-c3 var(--t-orb-color) var(--ease-inout), --orb-c4 var(--t-orb-color) var(--ease-inout); }
:is(#indicator, #home-orb) .ind-shape { width: 45px; height: 45px; display: inline-block; position: relative; box-sizing: border-box;   
  transition: scale var(--t-orb-shrivel) var(--ease-inout); }
#indicator *, #home-orb * { pointer-events: none; }
:is(#indicator, #home-orb) .ind-liquid { position: absolute; inset: calc(50% - var(--orb-d) / 2); pointer-events: none; isolation: isolate;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 30%, rgba(var(--c-shade-rgb), 0.55) 68%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 30%, rgba(var(--c-shade-rgb), 0.55) 68%, transparent 100%); }
:is(#indicator, #home-orb) .ind-liquid::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--orb-c0) 0, transparent 72%);
  filter: blur(calc(var(--orb-d) * 0.06)); }
:is(#indicator, #home-orb) .ind-liquid i { position: absolute; inset: 14%; border-radius: 50%; filter: blur(calc(var(--orb-d) * 0.09)); }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(1) { background: radial-gradient(circle at 34% 32%, var(--orb-c1) 0 30%, transparent 66%); animation: slosh var(--t-orb) linear infinite; }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(2) { background: radial-gradient(circle at 68% 62%, var(--orb-c2) 0 30%, transparent 66%); animation: slosh var(--t-orb-haze) linear infinite reverse; }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(3) { background: radial-gradient(circle at 42% 78%, var(--orb-c3) 0 26%, transparent 62%); animation: slosh var(--t-orb-mix) linear infinite; }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(4) { inset: 6%; filter: blur(calc(var(--orb-d) * 0.05)); animation: orb var(--t-orb-band) linear infinite;
  background: linear-gradient(155deg, transparent 22%, var(--orb-c4) 34%, var(--orb-c4) 42%, transparent 56%); }
#indicator:not([data-model="thinking"]):not([data-state="muted"]):not([data-state="paused_voice"]):not([data-state="auto_paused"]),
#aura:not([data-model="thinking"]):not([data-state="muted"]):not([data-state="paused_voice"]):not([data-state="auto_paused"]),
#home-orb:not([data-state="paused"]) { animation: orb-swap var(--t-orb-swap) var(--ease-inout) infinite; }
#home-orb[data-state="paused"] { --orb-c0: rgba(150,155,162,0.5); --orb-c1: #b7bcc3; --orb-c2: #858b93; --orb-c3: #d3d6da; --orb-c4: rgba(255,255,255,0); }
#home-orb[data-state="paused"] .ind-shape { scale: 0.8; }
#home-orb[data-state="speaking"] .ind-shape { scale: 1.12; }
#home-orb[data-state="speaking"] { animation: none; --orb-c0: rgba(255,200,30,0.92); --orb-c1: #ffc21a; --orb-c2: #ffab00; --orb-c3: #ffe57a; --orb-c4: rgba(255,244,190,0.7); }
@media (prefers-reduced-motion: reduce) { #indicator .ind-shape, #indicator[data-state] .ind-shape, #home-orb .ind-shape { animation: none; } #indicator .ind-liquid i, #home-orb .ind-liquid i { animation: none; } }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-ground { fill: var(--c-surface); fill: color-mix(in srgb, var(--c-surface) 91%, #f79a10); }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-line { fill: none; stroke: var(--bubble-line); stroke-width: 1; stroke-dasharray: 5 4; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-clock { fill: none; stroke: var(--bubble-clock); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100 100;
  stroke-dashoffset: 100; animation: bubble-fill var(--t-alert-hold) linear 1 forwards; }
#home-heard[data-out="1"], #home-heard[data-in="0"] { opacity: 0; }
:is(#indicator, #home-orb)[data-flash="1"] .ind-shape { scale: 1.16; transition: scale var(--t-orb-jump) var(--ease-spring); }
:is(#indicator, #home-orb)[data-flash="2"] .ind-shape { transition: scale var(--t-orb-return) var(--ease-spring); }
:is(#indicator, #home-orb) .ind-shape::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle closest-side, rgba(118, 212, 78, 0.42) 0%, rgba(118, 212, 78, 0.3) 35%, rgba(118, 212, 78, 0.12) 65%, rgba(118, 212, 78, 0) 100%);
  filter: blur(3px);   
  transition: opacity var(--t-orb-flash-out) var(--ease-inout); }
:is(#indicator, #home-orb)[data-flash="1"] .ind-shape::after { opacity: 1; transition: opacity var(--t-orb-flash) var(--ease-inout); }
#home-heard .w b { font-weight: 560; padding-right: 0.06em; color: var(--c-ink); }
#home-heard .achip.emo { position: absolute; top: -11px; left: 14px; display: inline-flex; align-items: center; height: calc(22px * var(--a-talk)); padding: 0 calc(6px * var(--a-talk)); border-radius: calc(11px * var(--a-talk));
  border: 1px solid var(--bubble-line); background: color-mix(in srgb, var(--c-surface) 91%, #f79a10); color: var(--c-ink); line-height: 1; letter-spacing: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: calc(14px * var(--a-talk)); white-space: nowrap; z-index: 1; pointer-events: none; }
#home-heard .achip.emo { top: -14px; }
#home-heard:has(.achip.emo) { padding-top: 18px !important; padding-bottom: 13px !important; }
.bubble > .b-flat { display: none; }
[data-tail="0"] > .bubble > .b-flat { display: inline; }
[data-tail="0"] > .bubble > .b-tail { display: none; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-snake { fill: none; stroke: var(--bubble-clock); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 22 78; animation: circling var(--t-spin) linear infinite; }
:is(#indicator, #home-orb) .ind-shape::before { content: ""; position: absolute; inset: calc(50% - var(--orb-d) * 0.44);    border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 34%, rgba(255,255,255,0.95) 0 26%, transparent 58%), radial-gradient(circle at 70% 64%, rgba(255,255,255,0.85) 0 24%, transparent 56%),
    radial-gradient(circle at 46% 80%, rgba(255,250,240,0.8) 0 22%, transparent 54%), radial-gradient(circle, rgba(255,255,255,0.35) 0 40%, transparent 70%);
  filter: blur(calc(var(--orb-d) * 0.08)); opacity: var(--o-orb-rays);
  animation: orb-white-breathe var(--t-orb-morph) var(--ease-inout) infinite alternate, orb var(--t-orb-rays) linear infinite;
  transition: opacity var(--t-orb-shrivel) var(--ease-inout); }
#indicator:not([data-model="thinking"]):is([data-state="muted"], [data-state="paused_voice"], [data-state="auto_paused"]) .ind-shape::before,
#home-orb[data-state="paused"] .ind-shape::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-shape::before { animation: none; } }
:is(#indicator, #home-orb) .ind-shape { filter: drop-shadow(0 0 calc(var(--orb-d) * 0.22) color-mix(in srgb, var(--orb-c1) calc(var(--orb-glow) * 100%), transparent)); }
:is(#indicator, #home-orb) .ind-shape::before {
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 66%, #000 80%, #000 100%);
          mask-image: radial-gradient(circle closest-side, transparent 0 66%, #000 80%, #000 100%); }
:is(#indicator, #home-orb) .ind-liquid { filter: saturate(var(--orb-sat)) contrast(var(--orb-contrast)); }
:is(#indicator, #home-orb) .ind-shape::before { inset: calc(50% - var(--orb-d) * 0.4);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 58%, #000 76%, #000 100%);
          mask-image: radial-gradient(circle closest-side, transparent 0 58%, #000 76%, #000 100%);
  animation: orb-white-breathe var(--t-orb-morph) var(--ease-inout) infinite alternate, orb var(--t-orb-rays) linear infinite,
    orb-white-shape var(--t-orb-shape) var(--ease-inout) infinite alternate; }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-shape::before { animation: none; } }
:is(#indicator, #home-orb) .ind-liquid::before { inset: 10%;
  background: radial-gradient(circle at 38% 40%, var(--orb-c0) 0, color-mix(in srgb, var(--orb-c0) 55%, transparent) 26%, transparent 64%),
    radial-gradient(circle at 64% 62%, var(--orb-c0) 0, color-mix(in srgb, var(--orb-c0) 45%, transparent) 22%, transparent 58%);
  filter: blur(calc(var(--orb-d) * 0.1));
  animation: orb-white-shape var(--t-orb-shape) var(--ease-inout) infinite alternate-reverse, orb var(--t-orb-core) linear infinite reverse,
    orb-core-breathe var(--t-orb-morph) var(--ease-inout) infinite alternate; }
:is(#indicator, #home-orb) .ind-liquid i { filter: blur(calc(var(--orb-d) * 0.11)); }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(1) { background: radial-gradient(circle at 34% 32%, var(--orb-c1) 0, color-mix(in srgb, var(--orb-c1) 55%, transparent) 26%, transparent 70%); }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(2) { background: radial-gradient(circle at 68% 62%, var(--orb-c2) 0, color-mix(in srgb, var(--orb-c2) 55%, transparent) 26%, transparent 70%); }
:is(#indicator, #home-orb) .ind-liquid i:nth-child(3) { background: radial-gradient(circle at 42% 78%, var(--orb-c3) 0, color-mix(in srgb, var(--orb-c3) 50%, transparent) 22%, transparent 66%); }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-liquid::before { animation: none; } }
:is(#indicator, #home-orb) .ind-liquid {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0.15) 84%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0.15) 84%, transparent 100%);
  animation: orb-mist-wander var(--t-orb-shape) var(--ease-inout) infinite alternate; }
:is(#indicator, #home-orb) .ind-liquid::before {
  animation: orb-core-form var(--t-orb-shape) var(--ease-inout) infinite alternate, orb-core-wander var(--t-orb-core) var(--ease-inout) infinite alternate,
    orb-core-breathe var(--t-orb-morph) var(--ease-inout) infinite alternate; }
:is(#indicator, #home-orb) .ind-shape::before { -webkit-mask-image: none; mask-image: none; opacity: var(--o-orb-white);
  background: radial-gradient(circle at 18% 28%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.4) 14%, transparent 34%),
    radial-gradient(circle at 84% 64%, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.35) 12%, transparent 32%),
    radial-gradient(circle at 44% 90%, rgba(255,250,240,0.8) 0, rgba(255,250,240,0.3) 12%, transparent 30%);
  animation: orb-white-breathe var(--t-orb-morph) var(--ease-inout) infinite alternate, orb-white-shape var(--t-orb-shape) var(--ease-inout) infinite alternate,
    orb-white-wander var(--t-orb-rays) var(--ease-inout) infinite alternate; }
:is(#indicator, #home-orb)[data-model="thinking"] .ind-shape::before { animation-duration: var(--t-orb-morph), var(--t-orb-shape), var(--t-orb-rays-work); }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-liquid, :is(#indicator, #home-orb) .ind-liquid::before, :is(#indicator, #home-orb) .ind-shape::before { animation: none; } }
#home-orb { transition: --drift var(--t-orb-color) var(--ease-inout); }
#home-orb[data-model="thinking"] { --drift: var(--drift-work); }
:is(#indicator, #home-orb):focus:not(:focus-visible) { outline: none; box-shadow: none; }
:is(#indicator, #home-orb) .ind-shape { transform: scale(1); transition: scale var(--t-orb-shrivel) var(--ease-inout), transform var(--t-orb-hover) var(--ease-bounce); }
@media (hover: hover) { :is(#indicator, #home-orb):hover .ind-shape { transform: scale(var(--orb-hover-scale)); } }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-shape { transition: none; } }
#home-orb { transition: width var(--t-front-travel) var(--ease-inout), height var(--t-front-travel) var(--ease-inout), --orb-d var(--t-front-travel) var(--ease-inout),
  --orb-c0 var(--t-orb-color) var(--ease-inout), --orb-c1 var(--t-orb-color) var(--ease-inout), --orb-c2 var(--t-orb-color) var(--ease-inout),
  --orb-c3 var(--t-orb-color) var(--ease-inout), --orb-c4 var(--t-orb-color) var(--ease-inout); }
#home-orb .ind-shape { transition: width var(--t-front-travel) var(--ease-inout), height var(--t-front-travel) var(--ease-inout), --orb-d var(--t-front-travel) var(--ease-inout),
  scale var(--t-orb-hear) var(--ease-bounce), transform var(--t-orb-hover) var(--ease-bounce); }
html[data-front="1"] #home-orb { width: calc(var(--orb-front) * 0.8); height: calc(var(--orb-front) * 0.8); --orb-d: var(--orb-front); }
html[data-front="1"] #home-orb .ind-shape { width: calc(var(--orb-front) * 0.8); height: calc(var(--orb-front) * 0.8); }
#home-orb { transition-property: width, height, --orb-d, --orb-c0, --orb-c1, --orb-c2, --orb-c3, --orb-c4, filter; }
#home-orb .ind-shape { filter: none; transition: width var(--t-front-travel) var(--ease-inout), height var(--t-front-travel) var(--ease-inout), --orb-d var(--t-front-travel) var(--ease-inout),
  scale var(--t-orb-hear) var(--ease-bounce), transform var(--t-orb-hover) var(--ease-bounce), filter var(--t-orb-color) var(--ease-inout); }
html[data-waking="1"] #home-orb .ind-shape { filter: grayscale(1) brightness(0.8); scale: 0.82; }
html[data-orb-go] #home-voice, html[data-orb-go] #home-orb, html[data-orb-go] #home-orb .ind-shape { transition: none !important; }
#indicator[data-speech="speaking"][data-state="listening"]:not([data-model="thinking"]) .ind-shape, #home-orb[data-state="speaking"] .ind-shape,
#home-orb[data-model="thinking"] .ind-shape {   
  animation: orb-hear var(--t-orb-hear-beat) var(--ease-bounce) infinite; }
@media (prefers-reduced-motion: reduce) { #indicator .ind-shape, #home-orb .ind-shape { animation: none; } }
#home-orb[data-model="thinking"] { animation: none; --orb-c0: rgba(186,214,64,0.9); --orb-c1: #b3d23a; --orb-c2: #e2cf3f; --orb-c3: #f2ec9c; --orb-c4: rgba(246,248,198,0.6); }
html[data-booting="1"] #home > *, html[data-booting="1"] #home-voice, html[data-booting="1"] #home-orb, html[data-booting="1"] #home-orb .ind-shape { transition: none !important; }
@media (pointer: coarse) and (min-width: 701px) { html:not([data-front="1"]) :is(#indicator, #home-orb) { --orb-d: 67px; } html:not([data-front="1"]) :is(#indicator, #home-orb) .ind-shape { width: 54px; height: 54px; } html:not([data-front="1"]) #home-orb { width: 54px; height: 54px; } }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-draw { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 100; animation: bub-draw var(--t-bubble-draw) var(--ease-inout) forwards; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-ground { animation: bub-in var(--t-bubble-draw) var(--ease-inout) both; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble.b-drawn :is(.b-draw, .b-ground), #alerts .alert[data-quick="1"] .bubble :is(.b-draw, .b-ground), #alerts .alert[data-quick="1"] > :not(svg.bubble) { animation: none; stroke-dasharray: 100 100; }
#home-heard, #home-heard[data-in="0"], #home-heard[data-out="1"] { transition: none !important; }
#home-heard[data-in="0"] { opacity: 0 !important; }
#home-heard[data-out="1"] { opacity: 1 !important; }
#home-heard[data-in="0"] .bubble :is(.b-draw, .b-ground), #home-heard[data-in="0"] > :not(svg.bubble) { animation-play-state: paused !important; }
#home-heard > :not(svg.bubble) { animation: bub-in calc(var(--t-bubble-draw) * 0.36) var(--ease-inout) calc(var(--t-bubble-draw) * 0.69) both; }
#home-heard[data-swapped="1"] > :not(svg.bubble) { animation: none; }
#home-heard[data-out="1"] .bubble .b-draw { stroke-dasharray: 100 100; animation: bub-undraw var(--t-bubble-draw) var(--ease-inout) forwards !important; }
#home-heard[data-out="1"] .bubble .b-ground { animation: bub-out calc(var(--t-bubble-draw) * 0.47) var(--ease-inout) calc(var(--t-bubble-draw) * 0.11) both !important; }
#home-heard[data-out="1"] > :not(svg.bubble) { animation: bub-out calc(var(--t-bubble-draw) * 0.36) var(--ease-inout) both !important; }
:is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble .b-rain path { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 1.65 98.35; animation: circling var(--t-spin) linear infinite; }
html[data-front="1"] #home-heard .achip { top: -14px; }
html[data-front="1"] #home-heard:has(.achip) { padding-top: 21px !important; padding-bottom: 17px !important; }
:is(#indicator, #home-orb) .ind-liquid, #alerts, #home-heard { animation: orb-swell var(--t-swell) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { :is(#indicator, #home-orb) .ind-liquid, #alerts, #home-heard { animation: none; } :is(#alerts .alert, #home-heard, #tour-point, #lessons-bubble) .bubble :is(.b-draw, .b-ground), :is(#alerts .alert, #home-heard) > :not(svg.bubble) { animation: none !important; stroke-dasharray: 100 100; opacity: 1; } #alerts .alert[data-fading="1"], #home-heard[data-out="1"] { opacity: 0 !important; } }
.ahead { display: block; font-weight: 700; color: var(--c-ink); }
/* ==== THE PAGE'S OWN ESBI: hand-written. build.py regenerates everything above this line from the app and keeps everything below it ==== */
/* (site v3 phase 2, Leo C, 2026-10-02) Her one body on the page. esbi.js places her by Leo A's four empty spots ([data-esbi-spot], site.css)
   and moves her with one transform: laid out at one box size (--esbi-box, the box her orb takes where she rests) and scaled on the way, so
   she grows and shrinks as she travels, never in a jump at the end (Mark, 3:07 pm). Fixed to the screen on the way and docked; set on the
   page itself (esbi.js: position absolute) at rest under Meet Esbi and at the close, so she scrolls with it exactly. */
/* her stage under Meet Esbi: the room her bubble and the visitor's words take above and below her (Leo A's meet spot sits in it at 62%) */
.slot { position: relative; height: clamp(340px, 27vw, 384px); margin-top: 6px; }   /* (a headline over three lines fits between the sub and her) */
@media (max-width: 759px) { .slot { height: 400px; } }   /* a phone: her longest answer (six lines at its width) fits between the sub and her */
@media (pointer: coarse) and (min-width: 760px) { .slot { height: 470px; } }   /* an iPad: her big orb (180 px) with room above it (Mark: "iPad: space above the orb") */
#esbi { position: fixed; left: 0; top: 0; z-index: 45; margin: 0; width: var(--esbi-box, 45px); height: var(--esbi-box, 45px); display: grid; place-items: center;
  transform-origin: 50% 50%; will-change: transform; }
#esbi[data-at="none"] { visibility: hidden; }
html:has(.nav[data-menu="open"]) #esbi { z-index: 25; }   /* the phone's menu open: she's part of the page it dims, under its veil */   /* until esbi.js has put her somewhere: never a stray orb */
#esbi[data-at="dock"] { left: auto; top: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
#esbi-dock { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 45px; height: 45px; visibility: hidden; pointer-events: none; }
@media (pointer: coarse) and (min-width: 701px) { #esbi-dock { width: 54px; height: 54px; } }   /* the app's iPad orb at rest */
/* HER ORB at the box she's given: the app's own drawing (its liquid --orb-d a quarter bigger than its box, as the app's 45 / 56 and 120 / 150).
   GREY UNTIL SHE CAN HEAR, everywhere (Mark, 3:07 pm: "greyed out, no label ... Mysterious"; 4:04 pm: "grey until she can hear (as
   everywhere)"): the app's own paused rest, which reverses the page's 11:13 am Ember rest. Her size changes are esbi.js's transform, so the
   app's size transitions are left out here; its colour, hover and hearing transitions stay */
#esbi #home-orb { width: var(--esbi-box); height: var(--esbi-box); --orb-d: calc(var(--esbi-box) * 1.25); border: 0; padding: 0; margin: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: --orb-c0 var(--t-orb-color) var(--ease-inout), --orb-c1 var(--t-orb-color) var(--ease-inout), --orb-c2 var(--t-orb-color) var(--ease-inout),
    --orb-c3 var(--t-orb-color) var(--ease-inout), --orb-c4 var(--t-orb-color) var(--ease-inout), filter var(--t-orb-color) var(--ease-inout); }
#esbi #home-orb .ind-shape { width: var(--esbi-box); height: var(--esbi-box);
  transition: scale var(--t-orb-hear) var(--ease-bounce), transform var(--t-orb-hover) var(--ease-bounce), filter var(--t-orb-color) var(--ease-inout); }
#home-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* the whole orb takes the tap, 44 px or more */
/* HER BUBBLE, the app's: over her under Meet Esbi, up and to her left docked, over her at the close with its point down at her (a line too
   tall for the room there goes under her, point up). Her HEADLINE (.ahead) and her emoji chip are the app's own rules, above the marker */
#home-heard { position: absolute; z-index: 2; isolation: isolate; margin: 0; width: max-content; max-width: min(86vw, 460px);   /* esbi.js fit(): as narrow as three lines allow */
  bottom: calc(100% + 30px); left: 50%; transform: translateX(-50%); padding: 13px 22px 14px;
  font: 500 17.5px/1.36 "Avenir Next", "Instrument Sans", system-ui, sans-serif; color: #cfd3d8; text-align: center; }
#home-heard[hidden] { display: none; }
#home-heard .w { display: block; white-space: pre-line; text-wrap: balance; }
#esbi[data-at="meet"] #home-heard { max-width: min(86vw, 500px); }   /* under Meet Esbi a long answer takes the width, never the room above her */
/* docked: up and to her LEFT (Mark, 6:02 pm: "The chat bubble needs to move to the left a bit when SB is on the bottom right of the screen"),
   its right edge 10 px clear of her orb's box, its bottom just under the box's top so the tail (bottom right, the app's) points down-right at
   her; the x then sits a whole orb in from the screen's edge. No wider than the room left of her (14 px kept at the left edge) */
#esbi:is([data-at="dock"], [data-at="perch"], [data-at="flight"]) #home-heard { left: auto; right: calc(100% + 10px); bottom: calc(100% - 4px); transform: none; text-align: left;
  max-width: min(calc(100vw - 100px), 460px); }
#esbi:is([data-at="dock"], [data-at="perch"], [data-at="flight"]):has(.type:not([hidden])) #home-heard { bottom: calc(100% + 34px); }   /* the field open beside her: the bubble over it */
#esbi[data-at="close"] #home-heard { bottom: calc(100% + 18px); }
#esbi[data-at="close"] #home-heard[data-below="1"] { bottom: auto; top: calc(100% + 24px); }
#esbi[data-at="close"]:has(.type:not([hidden])) #home-heard[data-below="1"] { top: calc(100% + 96px); }   /* the field, then her bubble under it */
#home-heard .bx { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); font: 400 15px/22px system-ui, sans-serif; text-align: center; cursor: pointer; z-index: 1; }   /* the app's x, one place and one look on every bubble (board.css .aclose) */
#home-heard .bx::after { content: ""; position: absolute; inset: -11px; }
@media (hover: hover) { #home-heard .bx:hover { background: #4a5159; } }
/* what the visitor said, in the voice's cream: under her at Meet Esbi, to her left docked, to her right at the close */
.said { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); margin: 0; white-space: nowrap; pointer-events: none;
  font: 500 18px/1.35 "Mona Sans", system-ui, sans-serif; font-stretch: 92%; color: var(--cream); max-width: min(86vw, 560px); overflow: hidden; text-overflow: ellipsis; transition: opacity .45s var(--ease); }
.said[data-old="1"] { opacity: 0; }
#esbi:is([data-at="dock"], [data-at="perch"], [data-at="flight"]) .said { left: auto; right: calc(100% + 12px); top: 64%; transform: translateY(-50%); text-align: right; max-width: min(calc(100vw - 110px), 440px); }   /* under her bubble's tail */
#esbi[data-at="close"] .said { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); text-align: left; max-width: min(calc(50vw - 60px), 440px); }
#esbi[data-at="hop"] .said { opacity: 0; }
#esbi[data-at="flight"] #home-heard[data-side="right"] { right: auto; left: calc(100% + 10px); }   /* hovering mid-way with no room on her left: to her right */
/* AN IPHONE'S BUBBLES A STEP SMALLER (Mark, 7:03 pm: "scale down a bit for iphone"): every bubble of hers, type and padding, the chip's room with them */
@media (max-width: 759px) {
  #home-heard { font-size: 16px; padding: 11px 18px 12px; }
  #home-heard:has(.achip.emo) { padding-top: 16px !important; padding-bottom: 11px !important; }
  html[data-front="1"] #home-heard:has(.achip) { padding-top: 18px !important; padding-bottom: 14px !important; }
}
/* the typing field (no speech recognition here, or the mic refused): under her, to her left docked */
.type { position: absolute; left: 50%; top: calc(100% + 20px); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; margin: 0; }
.type[hidden] { display: none; }
.type input { width: min(74vw, 320px); min-height: 48px; border-radius: 999px; border: 0; padding: 0 20px; background: var(--raised); color: var(--ink); font: 400 16.5px "Instrument Sans", system-ui, sans-serif; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px #000; }
.type input::placeholder { color: var(--dim); }
.type .tx { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: #7d848c; font: 400 19px/1 system-ui; cursor: pointer; }
#esbi:is([data-at="dock"], [data-at="perch"], [data-at="flight"]) .type { left: auto; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
/* OUT OF THE WAY WHILE A DEMO PLAYS (Mark, 2026-10-04 4:59 pm: "dont turn esbi grey when next demo. Just fade her away completely so unseen. Bring
   her back when user scrolls away. Point is not to interrupt user on area of focus"; 4:54 pm had been grey): demos.js sets html[data-demo] while a
   demo plays; the page's Esbi away from Meet Esbi and the close fades out whole, nothing to click, and fades back when none plays. An answer to
   the visitor still shows her (her bubble up); a line they didn't ask for waits (esbi.js floorFree). Silent: nothing said, her mic as it was */
#esbi { transition: opacity .5s ease, visibility 0s linear 0s; }
html[data-demo] #esbi:not([data-at="meet"]):not([data-at="close"]):not(:has(#home-heard:not([hidden]))) { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s; }