/* The floating bubble is a distinct feature story, independent of the two tabs below. */
#plus .bubble-experience {
  --bubble-card: #e3eadb;
  --bubble-well: #d8e3cd;
  --bubble-border: #bacbb0;
  --bubble-ink: #2b4230;
  --bubble-muted: #53694d;
  position: relative;
  overflow: hidden;
  margin: 0 0 42px;
  border: 1px solid var(--bubble-border);
  border-radius: 28px;
  background: var(--bubble-card);
  color: var(--bubble-ink);
  box-shadow: 0 18px 48px #233e2d09;
}
html[data-theme="night"] #plus .bubble-experience {
  --bubble-card: #294331;
  --bubble-well: #314e37;
  --bubble-border: #56724d;
  --bubble-ink: #f5f1e7;
  --bubble-muted: #c4d2bc;
  box-shadow: 0 18px 48px #07170d20;
}
#plus .bubble-experience-heading { min-height: 61px; padding: 16px 29px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--bubble-border); }
#plus .bubble-plus-label { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; background: #efc7a5; border: 1px solid #d8b38f; color: #4b422f; border-radius: 7px; font-size: 10px; font-weight: 500; letter-spacing: .11em; white-space: nowrap; }
#plus .bubble-plus-label .icon { width: 13px; height: 13px; stroke-width: 1.5; }
#plus .bubble-experience-heading > span:last-child { color: var(--bubble-muted); font-size: 9px; letter-spacing: .1em; line-height: 1.6; text-align: right; }
#plus .bubble-experience-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "copy art"; gap: 28px; align-items: center; padding: 28px 30px; }
#plus .bubble-experience-layout > * { min-width: 0; }
#plus .bubble-experience-copy { max-width: 410px; padding: 22px 10px 22px 10px; margin: 0; }
#plus .bubble-experience-copy .plus-demo-kicker { color: var(--bubble-muted); font-size: 10px; }
#plus .bubble-experience-copy h3 { margin: 15px 0 19px; color: var(--bubble-ink); font-size: clamp(43px, 4.8vw, 66px); font-weight: 400; line-height: 1.02; letter-spacing: -.05em; }
#plus .bubble-experience-copy .plus-demo-description { max-width: 350px; color: var(--bubble-muted); font-size: 15px; line-height: 1.8; }
#plus .bubble-howto { display: grid; gap: 14px; padding: 0; margin: 26px 0 0; list-style: none; }
#plus .bubble-howto li { display: flex; align-items: center; gap: 11px; }
#plus .bubble-howto-number { display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0; border: 1px solid var(--bubble-border); border-radius: 50%; color: var(--bubble-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
#plus .bubble-howto strong, #plus .bubble-howto small { display: block; }
#plus .bubble-howto strong { color: var(--bubble-ink); font-size: 12px; font-weight: 500; line-height: 1.5; }
#plus .bubble-howto small { margin-top: 2px; color: var(--bubble-muted); font-size: 10px; line-height: 1.5; }
#plus .bubble-experience .plus-demo-details { border-color: var(--bubble-border); margin-top: 26px; }
#plus .bubble-experience .plus-demo-details summary { color: var(--bubble-ink); }
#plus .bubble-experience .plus-demo-points li, #plus .bubble-experience .plus-demo-note { color: var(--bubble-muted); }
#plus .bubble-experience-art { min-height: 592px; padding: 39px 18px 21px; background: var(--bubble-well); border: 1px solid var(--bubble-border); border-radius: 22px; overflow: visible; }
#plus .bubble-experience-art::before { inset: 8% 4% 7%; border: 0; border-radius: 50%; background: radial-gradient(ellipse, #ecc1a038, transparent 65%); }
#plus .bubble-experience-art::after { width: 82%; height: auto; aspect-ratio: 1; top: 49%; bottom: auto; border-color: var(--bubble-border); background: transparent; opacity: .75; }
#plus .bubble-feature-badge { position: absolute; z-index: 1; top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 7px; color: var(--bubble-muted); font-size: 9px; line-height: 1.5; }
#plus .bubble-feature-badge .icon { width: 16px; height: 16px; }
#plus .bubble-experience .bubble-demo { width: 360px; max-width: 100%; padding-block: 19px 20px; height: auto; }
#plus .bubble-experience .demo-phone-body { width: var(--device-width, 236px); aspect-ratio: var(--device-ratio, 9 / 19.5); height: auto; transform: rotate(-4deg); }
#plus .bubble-experience .bubble-trigger { width: 78px; height: 78px; top: 148px; right: 35px; border-width: 2px; }
#plus .bubble-experience .bubble-avatar { width: 45px; height: 45px; }
#plus .bubble-experience .bubble-controls { width: 292px; max-width: 100%; top: 229px; right: 8px; padding: 16px; }
#plus .bubble-experience .bubble-controls > .bubble-controls-title { margin-bottom: 12px; font-size: 10px; }
#plus .bubble-experience button.bubble-action { min-height: 65px; font-size: 10px; }
#plus .bubble-experience .plus-art-caption { max-width: 265px; margin-top: 12px; color: var(--bubble-muted); font-size: 11px; line-height: 1.65; }
#plus .bubble-experience-note { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 0 26px 22px; margin: 0; color: var(--bubble-muted); font-size: 10px; line-height: 1.6; }
#plus .bubble-experience-note .icon { width: 13px; height: 13px; flex-shrink: 0; }
#plus .plus-flow-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 0 0 24px; }
#plus .plus-flow-heading h3 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; color: var(--plus-ink); }
#plus .plus-flow-heading > p { max-width: 330px; margin: 0; color: var(--plus-muted); font-size: 13px; line-height: 1.7; }
#plus .plus-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bubble-experience[data-experience-motion="paused"] *,
.bubble-experience[data-experience-motion="paused"] *::before,
.bubble-experience[data-experience-motion="paused"] *::after { animation-play-state: paused !important; }
@media (max-width: 1050px) {
  #plus .bubble-experience-layout { gap: 22px; padding: 25px; }
  #plus .bubble-experience-copy { padding-inline: 0; }
  #plus .bubble-experience-art { padding-inline: 14px; }
  #plus .bubble-experience .bubble-trigger { right: 7px; }
  #plus .bubble-experience .bubble-controls { right: 0; }
}
@media (max-width: 800px) {
  #plus .bubble-experience-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art"; padding: 26px; gap: 26px; }
  #plus .bubble-experience-copy { max-width: 530px; width: 100%; padding: 0; margin-inline: auto; }
  #plus .bubble-experience-copy h3 { font-size: 54px; }
  #plus .bubble-experience-copy h3 br { display: none; }
  #plus .bubble-experience-copy .plus-demo-description { max-width: 510px; }
  #plus .bubble-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 23px; }
  #plus .bubble-howto li { flex-direction: column; align-items: flex-start; gap: 8px; }
  #plus .bubble-howto strong { font-size: 11px; }
  #plus .bubble-experience-art { width: 100%; max-width: 580px; margin-inline: auto; min-height: 585px; }
  #plus .bubble-experience .bubble-trigger { right: 28px; }
  #plus .bubble-experience .bubble-controls { right: 8px; }
  #plus .plus-flow-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  #plus .plus-flow-heading > p { max-width: 480px; }
  #plus .plus-tabs button { flex-direction: row; align-items: center; min-height: 92px; }
}
@media (max-width: 500px) {
  #plus .bubble-experience { border-radius: 21px; margin-bottom: 32px; }
  #plus .bubble-experience-heading { min-height: 61px; padding: 14px 17px; gap: 14px; }
  #plus .bubble-plus-label { padding: 5px 7px; font-size: 8px; gap: 5px; }
  #plus .bubble-experience-heading > span:last-child { max-width: 136px; font-size: 7px; line-height: 1.65; }
  #plus .bubble-experience-layout { padding: 21px 14px 16px; gap: 22px; }
  #plus .bubble-experience-copy { padding: 0 4px; }
  #plus .bubble-experience-copy h3 { font-size: 43px; line-height: 1.05; margin-top: 13px; }
  #plus .bubble-experience-copy h3 br { display: initial; }
  #plus .bubble-experience-copy .plus-demo-description { font-size: 14px; line-height: 1.75; }
  #plus .bubble-howto { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  #plus .bubble-howto li { flex-direction: row; align-items: center; gap: 10px; }
  #plus .bubble-howto strong { font-size: 12px; }
  #plus .bubble-experience .plus-demo-details { margin-top: 22px; }
  #plus .bubble-experience-art { min-height: 535px; padding: 38px 12px 18px; border-radius: 16px; }
  #plus .bubble-feature-badge { top: 14px; left: 13px; font-size: 8px; }
  #plus .bubble-experience .bubble-demo { width: 100%; max-width: 300px; padding-block: 12px 14px; }
  #plus .bubble-experience .demo-phone-body { width: min(var(--device-mobile-width, 216px), calc(100% - 20px)); transform: rotate(-2deg); }
  #plus .bubble-experience .bubble-trigger { width: 63px; height: 63px; top: 137px; right: 0; padding: 8px; }
  #plus .bubble-experience .bubble-avatar { width: 37px; height: 37px; }
  #plus .bubble-experience .bubble-controls { top: 202px; right: 0; width: 100%; max-width: 100%; padding: 11px; }
  #plus .bubble-experience .bubble-control-actions { gap: 5px; }
  #plus .bubble-experience button.bubble-action { min-height: 61px; font-size: 9px; }
  #plus .bubble-experience .bubble-controls > .bubble-controls-title { font-size: 9px; }
  #plus .bubble-experience .bubble-demo-status { font-size: 10px; }
  #plus .bubble-experience .bubble-hold-hint { font-size: 9px; }
  #plus .bubble-experience .plus-art-caption { max-width: 225px; font-size: 10px; margin-top: 10px; }
  #plus .bubble-experience-note { align-items: flex-start; text-align: left; padding: 0 19px 19px; font-size: 9px; }
  #plus .bubble-experience-note .icon { margin-top: 2px; }
  #plus .plus-flow-heading { margin-bottom: 18px; gap: 10px; }
  #plus .plus-flow-heading h3 { font-size: 28px; }
  #plus .plus-flow-heading > p { font-size: 12px; }
  #plus .plus-tabs { gap: 8px; }
  #plus .plus-tabs button { flex-direction: column; align-items: flex-start; gap: 9px; min-height: 128px; padding: 13px; }
  #plus .plus-tab-copy strong { font-size: 13px; }
  #plus .plus-tab-copy small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble-experience *, .bubble-experience *::before, .bubble-experience *::after { animation: none !important; transition: none !important; }
}

/* Keep the moved sound section clear of the rounded home scene. */
.home-scene + .sound-demo { margin-top: clamp(40px, 5vw, 64px); }