/* The controls are illustrations: the interaction is real, the sound is not. */
:is(.plus-showcase, .bubble-experience) .bubble-demo { height: auto; }
:is(.plus-showcase, .bubble-experience) .bubble-controls { width: 284px; padding: 17px; }
:is(.plus-showcase, .bubble-experience) .bubble-controls > .bubble-controls-title { margin-bottom: 13px; color: #d0dccd; font-size: 11px; letter-spacing: .04em; }
:is(.plus-showcase, .bubble-experience) .bubble-control-actions { gap: 7px; }
:is(.plus-showcase, .bubble-experience) button.bubble-action { min-height: 66px; padding: 10px 3px; border: 1px solid #77926e; border-radius: 11px; background: #35553f; color: #faf7f2; cursor: pointer; transition: background .2s, border-color .2s, scale .2s, color .2s; }
:is(.plus-showcase, .bubble-experience) button.bubble-action:hover { background: #41664c; border-color: #c5d7bd; }
:is(.plus-showcase, .bubble-experience) button.bubble-action:focus-visible { outline: 3px solid #edb89a; outline-offset: 3px; }
:is(.plus-showcase, .bubble-experience) button.bubble-action:active { scale: .96; }
:is(.plus-showcase, .bubble-experience) button.bubble-action[aria-pressed="true"] { background: #c5d7bd; color: #284232; border-color: #c5d7bd; }
:is(.plus-showcase, .bubble-experience) button.bubble-action[aria-pressed="true"] .icon { color: #284232; }
:is(.plus-showcase, .bubble-experience) button.bubble-action[data-active="true"] { background: #edb89a; color: #442f22; border-color: #edb89a; }
:is(.plus-showcase, .bubble-experience) button.bubble-action[data-active="true"] .icon { color: #442f22; }
:is(.plus-showcase, .bubble-experience) [data-bubble-talk] { touch-action: none; user-select: none; -webkit-user-select: none; }
:is(.plus-showcase, .bubble-experience) [data-bubble-close] .icon { rotate: 45deg; }
:is(.plus-showcase, .bubble-experience) .bubble-activity { display: flex; gap: 10px; align-items: center; min-height: 38px; padding-top: 11px; }
:is(.plus-showcase, .bubble-experience) .bubble-demo-status { margin: 0; color: #d0dccd; font-size: 11px; line-height: 1.45; }
:is(.plus-showcase, .bubble-experience) .bubble-demo[data-listening="true"] .bubble-demo-status,
:is(.plus-showcase, .bubble-experience) .bubble-demo[data-talking="true"] .bubble-demo-status { color: #faf7f2; }
:is(.plus-showcase, .bubble-experience) .bubble-demo-wave { display: flex; align-items: center; justify-content: center; gap: 2px; width: 32px; height: 24px; flex-shrink: 0; }
:is(.plus-showcase, .bubble-experience) .bubble-demo-wave i { display: block; width: 3px; height: 4px; border-radius: 3px; background: #96af90; transition: height .25s, background .25s; }
:is(.plus-showcase, .bubble-experience) .bubble-demo[data-listening="true"] .bubble-demo-wave i { height: 13px; background: #c5d7bd; }
:is(.plus-showcase, .bubble-experience) .bubble-demo[data-talking="true"] .bubble-demo-wave i { height: 20px; background: #edb89a; }
:is(.plus-showcase, .bubble-experience) .bubble-demo-wave i:nth-child(2n) { --wave-delay: -.35s; }
:is(.plus-showcase, .bubble-experience) .bubble-demo-wave i:nth-child(3n) { --wave-delay: -.6s; }
:is(.plus-showcase, .bubble-experience) .bubble-controls > .bubble-hold-hint { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid #637e6370; color: #d0dccd; font-size: 10px; line-height: 1.5; }
:is(.plus-showcase, .bubble-experience) .bubble-demo[data-talking="true"] .bubble-trigger { box-shadow: 0 0 0 8px #edb89a35, 0 14px 26px #34463230; border-color: #edb89a; }
:is(.plus-showcase, .bubble-experience) .family-count { display: inline-block; transform-origin: 50% 80%; }
:is(.plus-showcase, .bubble-experience) .family-connection { overflow: visible; }
:is(.plus-showcase, .bubble-experience) .family-connection::after { content: ""; position: absolute; left: calc(50% - 4px); top: -4px; width: 8px; height: 8px; background: #426653; border: 2px solid #dce7d9; border-radius: 50%; box-shadow: 0 0 0 4px #42665312; }
:is(.plus-showcase, .bubble-experience) .family-travel-dot { position: absolute; z-index: 2; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; border: 2px solid #faf7f2; background: #9d583c; box-shadow: 0 0 0 5px #edb89a70; opacity: 0; pointer-events: none; }
:is(.plus-showcase, .bubble-experience) .routine-digit { display: inline-block; }
:is(.plus-showcase, .bubble-experience) .routine-accessible-time { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(.plus-showcase, .bubble-experience) .routine-timeline { position: relative; }
:is(.plus-showcase, .bubble-experience) .routine-timeline::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: #edb89a; transform: scaleY(0); transform-origin: top; }
:is(.plus-showcase, .bubble-experience) .routine-timeline::after { content: ""; position: absolute; left: -5px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #edb89a; box-shadow: 0 0 0 4px #edb89a20; opacity: 0; }
:is(.plus-showcase, .bubble-experience) .routine-demo[data-active="true"] .routine-timeline::before { transform: scaleY(1); }
:is(.plus-showcase, .bubble-experience) .routine-demo[data-active="true"] .routine-timeline::after { top: calc(100% - 9px); opacity: 1; }
:is(.plus-showcase, .bubble-experience) .routine-event { transition: color .2s, opacity .2s; }
:is(.plus-showcase, .bubble-experience) .routine-demo[data-active="false"] .routine-timeline { opacity: .6; }
:is(.plus-showcase, .bubble-experience) .routine-demo[data-active="true"] .routine-timeline { opacity: 1; }
:is(.plus-showcase, .bubble-experience)[data-experience-motion="playing"] .bubble-demo:is([data-listening="true"], [data-talking="true"]) .bubble-demo-wave i { animation: plus-sample-wave .65s var(--wave-delay, 0s) ease-in-out infinite alternate; }
:is(.plus-showcase, .bubble-experience)[data-experience-motion="playing"] .routine-demo[data-active="true"] .routine-timeline::before { animation: plus-timeline-draw 1.2s cubic-bezier(.2,.75,.3,1); }
:is(.plus-showcase, .bubble-experience)[data-experience-motion="playing"] .routine-demo[data-active="true"] .routine-timeline::after { animation: plus-timeline-travel 1.2s cubic-bezier(.2,.75,.3,1); }
:is(.plus-showcase, .bubble-experience)[data-experience-motion="paused"] *,
:is(.plus-showcase, .bubble-experience)[data-experience-motion="paused"] *::before,
:is(.plus-showcase, .bubble-experience)[data-experience-motion="paused"] *::after { animation-play-state: paused !important; }
@keyframes plus-sample-wave { from { scale: 1 .35; } to { scale: 1 1; } }
@keyframes plus-timeline-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes plus-timeline-travel { from { top: 0; } to { top: calc(100% - 9px); } }
@media (max-width: 800px) {
  :is(.plus-showcase, .bubble-experience) .bubble-controls { width: 263px; padding: 14px; }
  :is(.plus-showcase, .bubble-experience) button.bubble-action { min-height: 60px; font-size: 10px; }
  :is(.plus-showcase, .bubble-experience) .bubble-controls > .bubble-controls-title { font-size: 10px; margin-bottom: 10px; }
  :is(.plus-showcase, .bubble-experience) .bubble-demo-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.plus-showcase, .bubble-experience) *, :is(.plus-showcase, .bubble-experience) *::before, :is(.plus-showcase, .bubble-experience) *::after { animation: none !important; transition: none !important; }
}