.live-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:38px;align-items:center;margin:24px 0}.live-intro h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;margin:12px 0 18px;letter-spacing:-.04em}.live-intro p:not(.eyebrow){max-width:590px;font-size:1rem;line-height:1.55;color:var(--muted)}.live-intro figure{margin:0}.live-intro img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:18px}.live-intro figcaption{font-size:.75rem;text-align:center;color:var(--muted);margin-top:6px}.live-lab{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel,#fff)}.live-tabs{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}.live-tabs button,.live-controls button,.live-sound-buttons button,.live-sound-heading button{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-size:.9rem;background:var(--panel,#fff);color:var(--ink);cursor:pointer}.live-tabs button[aria-selected=true],.live-controls button{background:var(--blue);color:#fff;border-color:var(--blue)}.live-pane{padding:22px}.live-pane[hidden]{display:none}.live-stage{position:relative;overflow:hidden;background:var(--bg,#f5f5f7);border:1px solid var(--line);border-radius:15px;min-height:220px;padding:30px;isolation:isolate}.live-count{font-size:.8rem;color:var(--blue)}.live-stage h2{font-size:2rem;line-height:1.2;max-width:680px;margin:18px 0 12px;letter-spacing:-.035em}.live-stage p{font-size:1rem;line-height:1.5;color:var(--muted);max-width:600px}.live-stage-dot{position:absolute;width:24px;height:24px;border:5px solid var(--blue);border-radius:50%;right:25px;top:25px;opacity:.5}.live-controls{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:18px}.live-controls label{display:grid;gap:6px;font-size:.82rem;color:var(--muted);min-width:220px}.live-controls select{min-height:44px;font-size:.95rem;background:var(--panel,#fff);color:var(--ink);padding:8px 12px;border:1px solid var(--line);border-radius:10px}.live-controls p{font-size:.9rem;color:var(--muted)}.live-type-stage h2{font-size:clamp(2rem,4vw,3rem)}#live-word{display:inline-block;color:var(--blue)}.live-sound-heading{max-width:690px}.live-sound-heading h2{font-size:1.8rem;margin-bottom:12px}.live-sound-heading p{line-height:1.55;color:var(--muted);margin-bottom:18px}.live-sound-buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.live-sound-buttons button:active{transform:scale(.98)}.live-small,.live-preference-note{font-size:.8rem;line-height:1.5;color:var(--muted);margin-top:15px}.live-preference-note{margin:0;padding:14px 22px;border-top:1px solid var(--line)}.live-demo-link{margin-top:20px}.live-lab :focus-visible{outline:3px solid var(--blue);outline-offset:4px}
html:is([data-al-mode=notte],[data-al-contrast=high]) .live-lab{background:var(--panel)}html[data-al-mode=notte] .live-stage{background:var(--panel)}html[data-al-mode=notte] .live-controls button,html[data-al-mode=notte] .live-tabs button[aria-selected=true]{color:#111923}
@media(max-width:760px){.live-intro{grid-template-columns:1fr;gap:15px;margin:18px 0}.live-intro h1{font-size:2rem;margin:10px 0 13px}.live-intro img{max-height:140px;object-fit:cover}.live-intro p:not(.eyebrow){font-size:.95rem}.live-intro figcaption{font-size:.68rem}.live-tabs{gap:4px;padding:8px}.live-tabs button{flex:1;font-size:.8rem;padding:9px 6px}.live-pane{padding:14px}.live-stage{min-height:225px;padding:22px}.live-stage h2{font-size:1.6rem;margin-top:24px}.live-stage p{font-size:.95rem}.live-controls{flex-wrap:wrap;gap:12px;margin-top:14px}.live-controls label{width:100%;min-width:0}.live-controls button{width:100%}.live-preference-note{padding:12px 14px}.live-sound-heading h2{font-size:1.5rem}.live-stage-dot{width:18px;height:18px;border-width:4px;right:17px;top:17px}}
@media(prefers-reduced-motion:reduce){.live-stage,.live-stage *,#live-word{animation:none!important;transition:none!important}}