/* Three objects on an open stage: a phone, a family, an evening. */
.bubble-trigger, .bubble-controls, .family-baby, .family-parent, .routine-demo { --bg: #284232; --cream: #faf7f2; --text: #faf7f2; --sage: #c5d7bd; --peach: #edb89a; --muted: #d0dccd; --quiet: #bdccba; --line: #637e63; color-scheme: dark; }
.bubble-demo { position: relative; width: 360px; max-width: 100%; height: auto; padding-block: 18px 36px; margin-inline: auto; isolation: isolate; }
.bubble-demo::before { content: ""; position: absolute; inset: 12% -3% 3%; z-index: -1; background: radial-gradient(ellipse, #edb89a30, transparent 66%); }
.demo-phone-body { position: relative; width: var(--device-width, 236px); max-width: 100%; height: auto; aspect-ratio: var(--device-ratio, 9 / 19.5); margin-inline: auto; padding: 18px 20px 23px; overflow: hidden; border: 7px solid #3d5747; border-radius: 32px; background: linear-gradient(155deg, #fffdf7, #eee4d3); color: #303d35; transform: rotate(-7deg); box-shadow: 0 0 0 1px #71886d70, 5px 5px 0 #294131, 15px 26px 35px #3446322b, inset 0 0 0 1px #fffdf7; }
.demo-phone-body::before { content: ""; position: absolute; width: 43px; height: 7px; top: 5px; left: calc(50% - 21.5px); border-radius: 9px; background: #344b3b; }
.demo-phone-body::after { content: ""; position: absolute; height: 3px; width: 62px; bottom: 8px; left: calc(50% - 31px); border-radius: 3px; background: #5b605357; }
.demo-phone-top { display: flex; justify-content: space-between; align-items: center; color: #4e554a; font-size: 10px; font-weight: 500; line-height: 1.4; }
.demo-phone-top .icon { width: 14px; height: 14px; }
.demo-feed { display: flex; flex-direction: column; height: calc(100% - 45px); margin-top: 26px; }
.demo-feed .eyebrow { color: #52634f; font-size: 8px; font-weight: 500; letter-spacing: .12em; line-height: 1.5; }
.demo-feed h4 { margin: 10px 0 15px; max-width: 190px; color: #343e33; font-size: 33px; line-height: 1.07; font-weight: 400; letter-spacing: -.045em; }
.demo-feed-picture { flex: 1; min-height: 0; background: #e5d8c4; border-radius: 4px 4px 20px 4px; overflow: hidden; margin-block: 16px 18px; }
.demo-feed-picture svg { display: block; width: 100%; height: 100%; }
.demo-feed-picture path:first-child { fill: #75917a; fill-opacity: .9; }
.demo-feed-picture path:nth-child(2) { fill: #c98d68; fill-opacity: .9; }
.demo-feed-picture circle { fill: #dca271; fill-opacity: 1; }
.demo-feed-picture path:last-child { stroke: #456049; }
.demo-feed-line { display: block; flex-shrink: 0; height: 4px; margin-top: 8px; background: #a8a49355; border-radius: 1px; }
.demo-feed-line:nth-of-type(2) { width: 84%; }
.demo-feed-line:last-child { width: 58%; }
.bubble-trigger { position: absolute; z-index: 3; top: 148px; right: 11px; width: 74px; height: 74px; padding: 10px; display: grid; place-items: center; background: #284232; border: 2px solid #bfd4b6; border-radius: 50%; box-shadow: 0 0 0 7px #4266530b, 0 14px 26px #34463230; transition: background .25s, border-color .25s; }
.bubble-trigger:hover { background: #3b5944; border-color: var(--cream); }
.bubble-trigger:focus-visible { border-radius: 50%; outline-offset: 7px; }
.bubble-avatar { width: 43px; height: 43px; object-fit: contain; border-radius: 50%; }
.bubble-signal { position: absolute; bottom: -3px; right: -3px; height: 25px; min-width: 30px; padding: 4px 6px; display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--peach); border: 2px solid #284232; border-radius: 15px; }
.bubble-signal i { display: block; height: 6px; width: 2px; background: #60402f; border-radius: 2px; }
.bubble-signal i:nth-child(2) { height: 12px; }
.bubble-signal i:nth-child(3) { height: 8px; }
.bubble-demo[data-expanded="true"] .bubble-trigger { background: #3b5944; border-color: var(--peach); }
.bubble-controls { position: absolute; top: 216px; right: 0; z-index: 4; width: 263px; max-width: calc(100% - 8px); padding: 16px 17px; border: 1px solid #73906a; border-radius: 19px; background: #284232; box-shadow: 0 18px 35px #34463236; }
.bubble-controls > p { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.bubble-control-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bubble-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 58px; color: var(--cream); font-size: 10px; line-height: 1.35; text-align: center; }
.bubble-action .icon { width: 23px; height: 23px; color: var(--sage); }
.bubble-action:nth-child(2) .icon { color: var(--peach); }

/* The phones form a shallow arc, with room for each new person. */
.family-demo { width: 100%; max-width: 430px; margin-inline: auto; text-align: center; padding-top: 8px; }
.family-baby { position: relative; width: 54px; height: auto; aspect-ratio: var(--device-ratio, 9 / 19.5); margin-inline: auto; padding: 12px 2px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 3px solid #6f8d66; border-radius: 13px; background: radial-gradient(circle at 50% 20%, #416147, #284232); box-shadow: 2px 3px 0 #284232, 0 8px 16px #3446321f; color: var(--cream); }
.family-baby::before { content: ""; position: absolute; top: 5px; left: calc(50% - 8px); width: 16px; height: 2px; border-radius: 2px; background: #8d9f8980; }
.family-baby > .icon { width: 27px; height: 27px; color: var(--peach); }
.family-baby > span { font-size: 8px; line-height: 1.3; text-align: center; }
.family-connection { position: relative; width: 76%; height: 31px; margin: 6px auto 0; border-top: 1px solid #7b9a6e70; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.family-connection::before { content: ""; position: absolute; height: 11px; width: 1px; left: 50%; top: -12px; background: #7b9a6e; }
.family-parents { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 11px; height: auto; max-width: 385px; margin: -6px auto 0; padding: 18px 12px 23px; }
.family-parent { --phone-angle: 0deg; --phone-shift: -5px; position: relative; min-width: 0; width: min(100%, 54px); height: auto; aspect-ratio: var(--device-ratio, 9 / 19.5); justify-self: center; padding: 14px 1px 12px; display: flex; align-items: flex-end; justify-content: center; background: #304b39; border: 3px solid #5c7554; border-radius: 13px; box-shadow: 2px 3px 0 #284232, 0 8px 16px #3446321f; color: var(--cream); opacity: .38; transform: translateY(var(--phone-shift)) rotate(var(--phone-angle)); transition: opacity .35s, background .35s, border-color .35s; }
.family-parent:nth-child(1) { --phone-angle: -10deg; --phone-shift: 11px; }
.family-parent:nth-child(2) { --phone-angle: -5deg; --phone-shift: 1px; }
.family-parent:nth-child(4) { --phone-angle: 5deg; --phone-shift: 1px; }
.family-parent:nth-child(5) { --phone-angle: 10deg; --phone-shift: 11px; }
.family-parent::before { content: ""; position: absolute; top: 5px; left: calc(50% - 8px); width: 16px; height: 2px; border-radius: 2px; background: #8d9f895c; }
.family-parent::after { content: ""; position: absolute; top: 24px; left: calc(50% - 14px); width: 28px; height: 28px; background: url("/assets/nini-logo.webp") center / contain no-repeat; opacity: .5; }
.family-parent > .icon { display: none; }
.family-parent > span:not(.family-device-check) { font-size: 8px; line-height: 1.25; white-space: nowrap; }
.family-device-check { position: absolute; z-index: 1; top: -8px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--sage); border: 2px solid #284232; border-radius: 50%; color: #263e2a; opacity: 0; }
.family-device-check .icon { width: 12px; height: 12px; stroke-width: 2; }
.family-parent[data-connected="true"] { opacity: 1; background: linear-gradient(155deg, #416147, #284232); border-color: #6f8d66; color: var(--cream); }
.family-parent[data-connected="true"]::after, .family-parent[data-connected="true"] .family-device-check { opacity: 1; }
.family-count-label { margin: 14px 0 0; color: var(--quiet); font-size: 23px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.family-count { color: var(--cream); font-size: 58px; font-weight: 400; font-variant-numeric: tabular-nums; }
.family-status { max-width: 328px; margin: 9px auto 0; min-height: 36px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.family-add, .routine-trigger { min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 11px; margin-top: 12px; padding: 10px 17px; border: 1px solid #426653; border-radius: 30px; background: #426653; color: #faf7f2; font-size: 12px; line-height: 1.5; transition: background .25s, border-color .25s; }
.family-add:hover, .routine-trigger:hover { background: #355842; border-color: #355842; }
.family-add:focus-visible, .routine-trigger:focus-visible { border-radius: 30px; }
.family-add .icon, .routine-trigger .icon { width: 17px; height: 17px; }

/* Time gets the space. The schedule stays a simple, honest illustration. */
.routine-demo { position: relative; width: 100%; max-width: 354px; margin-inline: auto; padding-top: 16px; isolation: isolate; }
.routine-demo::before { content: ""; position: absolute; z-index: -2; inset: -18px -18px -12px; border: 1px solid #5c7655; border-radius: 26px; background: linear-gradient(145deg, #304f3c, #223c2d); box-shadow: 0 14px 30px #3446321f; pointer-events: none; }
.routine-moon { position: absolute; z-index: -1; top: 12px; right: 6px; width: 74px; height: 74px; color: var(--peach); }
.routine-moon::before { content: ""; position: absolute; inset: -16px; background: radial-gradient(circle, #edb89a20, transparent 68%); border-radius: 50%; }
.routine-moon .icon { width: 74px; height: 74px; stroke-width: .8; }
.routine-clock { color: var(--cream); font-size: 96px; font-weight: 300; line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.routine-label { margin-top: 10px; color: var(--sage); font-size: 13px; line-height: 1.4; }
.routine-timeline { display: grid; gap: 14px; margin-top: 28px; margin-left: 3px; padding-left: 21px; border-left: 1px solid #c5d7bd66; }
.routine-event { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 27px; }
.routine-event::before { content: ""; position: absolute; top: calc(50% - 3px); left: -25px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); border: 2px solid #304f3c; }
.routine-event > span { color: var(--muted); font-size: 17px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.routine-event:last-child > span { font-size: 28px; color: var(--cream); }
.routine-event strong { color: var(--muted); font-weight: 400; font-size: 12px; line-height: 1.5; }
.routine-demo[data-active="true"] .routine-event::before { background: var(--sage); }
.routine-demo[data-active="true"] .routine-event > span { color: var(--peach); }
.routine-demo[data-active="true"] .routine-event strong { color: var(--cream); }
.routine-status { min-height: 60px; margin-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.routine-trigger { margin-top: 12px; background: var(--sage); border-color: var(--sage); color: #284232; }
.routine-trigger:hover, .routine-demo[data-active="true"] .routine-trigger { background: #dce7d9; border-color: #dce7d9; color: #284232; }

/* The site's existing motion zones and pause control own playback. */
.motion-enabled[data-motion="playing"] .bubble-demo[data-expanded="false"] .bubble-trigger { animation: plus-art-bubble-float 4.5s ease-in-out infinite; }
.motion-enabled[data-motion="playing"] .bubble-signal i { animation: plus-art-wave 1.2s ease-in-out infinite alternate; }
.motion-enabled[data-motion="playing"] .bubble-signal i:nth-child(2n) { animation-delay: -.55s; }
.motion-enabled[data-motion="playing"] .bubble-controls:not([hidden]) { animation: plus-art-controls-in .42s cubic-bezier(.2,.75,.25,1); transform-origin: right top; }
.motion-enabled[data-motion="playing"] .family-parent[data-connected="true"] { animation: plus-art-phone-in .55s cubic-bezier(.2,.75,.25,1); }
.motion-enabled[data-motion="playing"] .family-connection { animation: plus-art-connection 3.2s ease-in-out infinite; }
.motion-enabled[data-motion="playing"] .routine-moon { animation: plus-art-moon 6s ease-in-out infinite; }
.motion-enabled[data-motion="playing"] .routine-demo[data-active="true"] .routine-event { animation: plus-art-event-in .5s ease-out; }
.motion-enabled[data-motion="playing"] .routine-demo[data-active="true"] .routine-event:last-child { animation-delay: .08s; }
@keyframes plus-art-bubble-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes plus-art-wave { from { transform: scaleY(.5); } to { transform: scaleY(1.2); } }
@keyframes plus-art-controls-in { from { opacity: .2; scale: .92; translate: 0 -7px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes plus-art-phone-in { 0% { translate: 0 9px; scale: .94; } 65% { translate: 0 -2px; scale: 1.02; } 100% { translate: 0 0; scale: 1; } }
@keyframes plus-art-connection { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes plus-art-moon { 0%,100% { rotate: -7deg; translate: 0 0; } 50% { rotate: 5deg; translate: 0 -4px; } }
@keyframes plus-art-event-in { from { opacity: .4; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 800px) {
  .bubble-demo { width: 305px; padding-block: 13px 33px; }
  .demo-phone-body { padding: 15px 16px 21px; border-width: 6px; border-radius: 30px; }
  .demo-phone-top { font-size: 8px; }
  .demo-phone-top .icon { width: 12px; height: 12px; }
  .demo-feed { margin-top: 19px; }
  .demo-feed .eyebrow { font-size: 7px; letter-spacing: .1em; }
  .demo-feed h4 { margin: 9px 0 12px; font-size: 27px; }
  .demo-feed-picture { margin-block: 12px 13px; }
  .demo-feed-line { height: 3px; margin-top: 6px; }
  .bubble-trigger { width: 64px; height: 64px; top: 113px; right: 3px; padding: 8px; }
  .bubble-avatar { width: 36px; height: 36px; }
  .bubble-signal { height: 23px; min-width: 27px; }
  .bubble-controls { top: 175px; right: 3px; width: 232px; padding: 13px 14px; border-radius: 16px; }
  .bubble-controls > p { font-size: 10px; margin-bottom: 9px; }
  .bubble-action { font-size: 9px; min-height: 49px; gap: 7px; }
  .bubble-action .icon { width: 20px; height: 20px; }
  .family-demo { max-width: 350px; padding-top: 0; }
  .family-baby { width: 48px; border-width: 2px; border-radius: 10px; gap: 6px; }
  .family-baby > .icon { width: 23px; height: 23px; }
  .family-baby > span { font-size: 8px; }
  .family-connection { height: 24px; margin-top: 5px; }
  .family-parents { padding: 15px 8px 23px; gap: 7px; }
  .family-parent { width: min(100%, 48px); border-width: 2px; border-radius: 10px; padding-bottom: 10px; }
  .family-parent::after { width: 23px; height: 23px; left: calc(50% - 11.5px); top: 19px; }
  .family-parent > span:not(.family-device-check) { font-size: 8px; }
  .family-device-check { width: 17px; height: 17px; top: -6px; right: -5px; }
  .family-device-check .icon { width: 10px; height: 10px; }
  .family-count-label { margin-top: 11px; font-size: 18px; }
  .family-count { font-size: 42px; }
  .family-status { margin-top: 7px; font-size: 11px; min-height: 33px; }
  .family-add { margin-top: 8px; font-size: 11px; }
  .routine-demo { max-width: 306px; padding-top: 6px; }
  .routine-clock { font-size: 72px; }
  .routine-label { margin-top: 7px; font-size: 12px; }
  .routine-moon { width: 54px; height: 54px; right: 8px; top: 7px; }
  .routine-moon .icon { width: 54px; height: 54px; }
  .routine-timeline { margin-top: 20px; padding-left: 20px; gap: 10px; }
  .routine-event { grid-template-columns: 61px minmax(0, 1fr); gap: 10px; min-height: 24px; }
  .routine-event::before { left: -24px; }
  .routine-event > span { font-size: 15px; }
  .routine-event:last-child > span { font-size: 25px; }
  .routine-event strong { font-size: 11px; }
  .routine-status { min-height: 60px; margin-top: 14px; font-size: 11px; }
  .routine-trigger { margin-top: 8px; font-size: 11px; }
}
@media (max-width: 700px) {
  .demo-phone-body { width: var(--device-mobile-width, 216px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble-demo *, .bubble-demo *::before, .bubble-demo *::after,
  .family-demo *, .family-demo *::before, .family-demo *::after,
  .routine-demo *, .routine-demo *::before, .routine-demo *::after { animation: none !important; transition: none !important; }
}