/*! isPluto Space theme · © SMHosting Co., Ltd. */
/* isPluto Space 1.3.0 (Pluto 0.24): the menu book of the photo-to-menu steps (B2), the Bio
   highlights and their dialog (B3), the short-link statistics card (B4), the 3-step dialog (B6), the add-ons shop (B7),
   and "Know what works" (B12). Tokens from theme.css. Everything that moves stops for
   prefers-reduced-motion and Kumo's pause (html.kd-paused). Breakpoints as the rest of the theme: 1100, 860, 560. */
.cms-theme-ispluto-space {

/* 0.25 (W4): the plans slider and the monthly / yearly switch are gone (v025.css: four cards a row) */

/* ---------- B2: the open menu book (a fictional café) ---------- */
& .ip-mb { position: relative; width: min(560px, 100%); aspect-ratio: 560 / 360; perspective: 1800px; transform: rotateX(6deg); transform-style: preserve-3d; color: #2e1d12; font-size: 13px; }
& .ip-mb__cover { position: absolute; inset: 6px -10px -14px; border-radius: 12px; background: #5a3a24; box-shadow: 0 34px 60px rgba(0,0,0,.6); }
& .ip-mb__paper { position: absolute; inset: 3px -4px -6px; border-radius: 6px; background: repeating-linear-gradient(180deg, #efe4d2 0 1px, #fbf6ee 1px 3px); }
& .ip-mb__page { position: absolute; top: 0; width: 50%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 6% 4% 4% 4.5%; overflow: hidden; }
& .ip-mb__page--l { left: 0; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #fffaf2 0%, #fbf3e6 86%, #e9dcc8 100%); }
& .ip-mb__page--r { right: 0; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #e9dcc8 0%, #fbf3e6 14%, #fffaf2 100%); }
& .ip-mb__brand { display: flex; align-items: center; gap: 8px; }
& .ip-mb__brand img { width: 30px; height: 30px; border-radius: 50%; }
& .ip-mb__brand span { display: flex; flex-direction: column; line-height: 1.25; }
& .ip-mb__brand b { font-size: 11px; letter-spacing: .12em; }
& .ip-mb__brand small { font-size: 10px; color: #6f5644; }
& .ip-mb__h { font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: .02em; color: #7c3f1d; }
& .ip-mb__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
& .ip-mb__row > span { display: flex; flex-direction: column; min-width: 0; }
& .ip-mb__row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
& .ip-mb__row small { font-size: 10.5px; color: #6f5644; }
& .ip-mb__row i { flex: 1; border-bottom: 1.5px dotted #c9b49c; transform: translateY(-3px); }
& .ip-mb__row strong { font-weight: 700; }
& .ip-mb__tag { padding: 1px 6px; border-radius: 999px; background: #7c3f1d; color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
& .ip-mb__sig { display: flex; align-items: center; gap: 10px; }
& .ip-mb__sig img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 10px rgba(59,36,24,.18); }
& .ip-mb__sig .ip-mb__row { flex: 1; }
& .ip-mb__foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 10px; color: #7a6250; }
& .ip-mb__spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; background: linear-gradient(90deg, transparent, rgba(80,50,30,.22) 45%, rgba(80,50,30,.32) 50%, rgba(80,50,30,.22) 55%, transparent); }
& .ip-mb__leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; animation: ipxLeaf 4.2s cubic-bezier(.6,0,.3,1) .4s infinite; }
& .ip-mb__leaf .ip-mb__front { position: absolute; inset: 0; width: 100%; right: auto; backface-visibility: hidden; background: linear-gradient(90deg, #e2d3bd 0%, #f8efe1 16%, #fffaf2 100%); }
& .ip-mb__back { position: absolute; inset: 0; border-radius: 6px 0 0 6px; background: linear-gradient(270deg, #e2d3bd 0%, #f6ecdc 20%, #fffaf2 100%); transform: rotateY(180deg); backface-visibility: hidden; }
& .ip-mb__sample { position: absolute; right: -6px; top: -14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: var(--cta-ink); font-size: 12px; font-weight: 700; }
& .ip-mb__dots { display: flex; align-items: center; gap: 10px; }
& .ip-mb__pips { display: flex; gap: 4px; }
& .ip-mb__pips i { display: block; width: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
& .ip-mb__pips i.on { width: 18px; background: var(--lime); }

/* ---------- B3: the Bio highlights and their dialog ---------- */
& .ipx-hl { margin-top: 28px; }
& .ipx-hl__h { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
& .ipx-hl__h span { margin-left: 8px; font-size: 15px; font-weight: 400; color: var(--muted); }
& .ipx-hl__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
& .ipx-hl__btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 96px; padding: 16px; border: 0; border-radius: 20px; background: rgba(255,255,255,.05); color: var(--fg); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .2s, transform .15s var(--ease-out); }
& .ipx-hl__btn:hover { background: rgba(140,151,255,.12); }
& .ipx-hl__btn:active { transform: scale(.97); }
& .ipx-hl__btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
& .ipx-hl__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(140,151,255,.18); color: #c7cdff; }
& .ipx-hl__t { font-weight: 700; font-size: 16px; line-height: 1.35; }
& .ipx-hl__plan { font-size: 13px; color: var(--muted); }
& .ipx-new { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--lime); color: var(--cta-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
& .ipx-hl__btn .ipx-new { position: absolute; right: 12px; top: 12px; }

& .ipx-dlg { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; background: #0d1330; color: var(--fg); box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: auto; }
& .ipx-dlg::backdrop { background: rgba(3,5,18,.72); }
& .ipx-dlg[open] { animation: ipxPop .28s var(--ease-out); }
& .ipx-dlg__in { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3.4vw, 36px); }
& .ipx-dlg__x { position: absolute; right: 14px; top: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--fg); cursor: pointer; }
& .ipx-dlg__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
& .ipx-dlg__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
& .ipx-dlg__slide[hidden] { display: none; }
& .ipx-dlg__txt { display: flex; flex-direction: column; gap: 12px; }
& .ipx-dlg__txt h3 { margin: 0; font-size: 28px; line-height: 1.2; }
& .ipx-dlg__txt p { margin: 0; font-size: 16px; line-height: 1.65; }
& .ipx-dlg__txt ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
& .ipx-dlg__plan { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #c7cdff; }
& .ipx-dlg__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
& .ipx-dlg__pos { font-size: 14px; color: var(--muted); }

/* the pictures of the dialog (drawn; a fictional café) */
& .ipx-pic { margin: 0; min-height: 300px; display: grid; place-items: center; border-radius: 22px; padding: 20px; background: radial-gradient(90% 90% at 50% 0%, rgba(140,151,255,.22), transparent 70%), #121a42; }
& .ipx-ph { position: relative; width: 210px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 0 16px; border-radius: 28px; overflow: hidden; background: #f6f1e7; color: #2f241c; box-shadow: 0 0 0 6px #050818, 0 24px 50px rgba(0,0,0,.5); text-align: center; }
& .ipx-ph b { font-size: 15px; }
& .ipx-ph > span { font-size: 12px; color: #6b5a4b; }
& .ipx-ph > i { display: block; width: 80%; height: 30px; border-radius: 10px; background: #8a5a3b; opacity: .9; }
& .ipx-ph__cover { position: relative; width: 100%; height: 96px; overflow: hidden; }
& .ipx-ph__cover > img { width: 100%; height: 100%; object-fit: cover; }
& .ipx-ph__av { width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; position: relative; }
& .ipx-ph--sign { padding-top: 28px; }
& .ipx-ph--sign .ipx-ph__av { margin-top: 0; }
& .ipx-fx { position: absolute; inset: 0; pointer-events: none; }
& .ipx-fx i { position: absolute; top: -12%; font-style: normal; animation: ipxFall linear infinite; }
& .ipx-fxpick { display: flex; flex-wrap: wrap; gap: 8px; }
& .ipx-fxpick button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
& .ipx-fxpick button[aria-checked=true] { background: var(--lime); color: var(--cta-ink); font-weight: 700; }
& .ipx-sign { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 12px !important; font-weight: 700; }
& .ipx-sign.is-open { background: #dcfce7; color: #14532d !important; }
& .ipx-sign.is-soon { background: #fef3c7; color: #78350f !important; }
& .ipx-sign.is-shut { background: #fee2e2; color: #7f1d1d !important; }
& .ipx-sch { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
& .ipx-sch li { --sch-dot: #8c97ff; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #1a2250; }
& .ipx-sch li.is-pub { --sch-dot: #ffd84d; background: #2a2410; }
& .ipx-sch li.is-back { --sch-dot: #4ade80; background: #10301f; }
& .ipx-sch b { display: flex; align-items: center; gap: 8px; }
& .ipx-sch b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sch-dot); }
& .ipx-sch span { padding-left: 16px; font-size: 14px; color: #d6dafc; }
& .ipx-sheet { width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 18px; border-radius: 22px 22px 0 0; background: #fff; color: #1f2937; box-shadow: 0 -10px 40px rgba(0,0,0,.4); font-size: 13px; }
& .ipx-sheet__grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #d1d5db; }
& .ipx-sheet__who { display: flex; align-items: center; gap: 10px; }
& .ipx-sheet__who img { border-radius: 50%; }
& .ipx-sheet__who span { display: flex; flex-direction: column; }
& .ipx-sheet__who small { color: #15803d; font-weight: 700; }
& .ipx-sheet p { margin: 0; }
& .ipx-sheet__kw { color: #4338ca; }
& .ipx-sheet__row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f3f4f6; }
& .ipx-sheet__row em { font-style: normal; font-weight: 700; color: #1d4ed8; }
& .ipx-br { margin: 0; padding: 0; list-style: none; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
& .ipx-br li { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: #f6f1e7; color: #2f241c; }
& .ipx-br span { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
& .ipx-br .is-open { background: #dcfce7; color: #14532d; }
& .ipx-br .is-shut { background: #fee2e2; color: #7f1d1d; }
& .ipx-slider { display: flex; flex-direction: column; gap: 12px; align-items: center; }
& .ipx-slider__row { display: flex; gap: 8px; }
& .ipx-slider__row img { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
& .ipx-slider__boo { display: flex; flex-direction: column; align-items: center; padding: 12px 22px; border-radius: 16px; background: #8a5a3b; color: #fff; }
& .ipx-slider__boo small { opacity: .9; }
& .ipx-tpl { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 88px); gap: 12px; }
& .ipx-tpl li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
& .ipx-tpl span { display: block; width: 88px; height: 110px; border-radius: 14px; background: linear-gradient(160deg, var(--a), var(--b)); }
& .ipx-qe { width: 220px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fff; color: #111827; box-shadow: 0 24px 50px rgba(0,0,0,.5); }
& .ipx-qe__f { padding: 10px 12px; border-radius: 10px; background: #f3f4f6; }
& .ipx-qe__pin { display: flex; gap: 8px; }
& .ipx-qe__pin i { width: 22px; height: 28px; border-radius: 6px; background: #e5e7eb; }
& .ipx-qe__go { padding: 10px; border-radius: 12px; background: #4338ca; color: #fff; text-align: center; font-weight: 700; }

/* ---------- B4: the short-link statistics card ---------- */
& .ipx-ls { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; text-align: left; }
& .ipx-ls__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
& .ipx-ls__top b span { color: var(--lime); }
& .ipx-ls__rg, & .ipx-st__rg { display: flex; flex-wrap: wrap; gap: 6px; }
& .ipx-ls__rg button, & .ipx-st__rg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, transform .15s; }
& .ipx-ls__rg button:active, & .ipx-st__rg button:active { transform: scale(.95); }
& .ipx-ls__rg button[aria-checked=true], & .ipx-st__rg button[aria-checked=true] { background: var(--lime); color: var(--cta-ink); }
& .ipx-st__rg button span { font-weight: 400; }
& .ipx-ls__k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
& .ipx-ls__k div { display: flex; flex-direction: column; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); }
& .ipx-ls__k dt { font-size: 13px; color: var(--muted); }
& .ipx-ls__k dd { margin: 0; font-size: 24px; font-weight: 700; }
& .ipx-ls__h { margin: 0; font-size: 14px; font-weight: 700; }
& .ipx-ls__src { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
& .ipx-ls__src li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; }
& .ipx-ls__src b { text-align: right; }
& .ipx-bar { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
& .ipx-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--c); transform-origin: left; animation: ipxGrow .8s var(--ease-out) both; }
& .ipx-ls__dev { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 14px; }
& .ipx-ls__dev i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--c); }
& .ipx-ls__note { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- B6: the 3-step dialog ---------- */
& button.ipf-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: rgb(var(--c)); cursor: pointer; }
& button.ipf-more:hover { text-decoration: underline; }
& button.ipf-more:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
& .ipx-how__h { margin: 0; font-size: 26px; }
& .ipx-how__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
& .ipx-how__tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
& .ipx-how__tabs button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 700; }
& .ipx-how__tabs button[aria-selected=true] { background: var(--lime); color: var(--cta-ink); font-weight: 700; }
& .ipx-how__p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
& .ipx-how__p[hidden] { display: none; }
& .ipx-how__pic { margin: 0; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 22px; padding: 20px; background: #121a42; }
& .ipx-how__txt h4 { margin: 0 0 8px; font-size: 22px; }
& .ipx-how__txt p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; }
& .ipx-how__tip { padding: 12px 14px; border-radius: 14px; background: rgba(184,255,92,.1); }
& .ipx-how__tip b { color: var(--lime); margin-right: 6px; }
& .ipx-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px; border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(184,255,92,.45); text-align: center; }
& .ipx-drop b { padding: 6px 12px; border-radius: 8px; background: #d9473b; color: #fff; }
& .ipx-drop small, & .ipx-how__pic small { color: var(--muted); }
& .ipx-pages { display: grid; grid-template-columns: repeat(4, 44px); gap: 8px; }
& .ipx-pages i { display: block; height: 58px; border-radius: 6px; background: #fff7ec; }
& .ipx-mini { display: flex; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4)); }
& .ipx-mini span { display: block; width: 90px; height: 120px; background: #fff7ec; }
& .ipx-mini__l { border-radius: 6px 0 0 6px; }
& .ipx-mini__r { border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #ead9c3, #fff7ec 18%) !important; }
& .ipx-miniqr { display: grid; grid-template-columns: repeat(5, 10px); gap: 2px; padding: 8px; border-radius: 8px; background: #fff; }
& .ipx-miniqr i { display: block; height: 10px; background: transparent; }
& .ipx-miniqr i.on { background: #0a0e24; }

/* ---------- B7: the add-ons shop ---------- */
& .ipx-add__demo { display: flex; flex-direction: column; gap: 14px; }
& .ipx-add__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
& .ipx-add__item { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; }
& .ipx-add__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--k); }
& .ipx-add__t { display: flex; flex-direction: column; }
& .ipx-add__t small { color: var(--muted); font-size: 13px; }
& .ipx-add__p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
& .ipx-add__p b { font-size: 18px; }
& .ipx-cart { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; }
& .ipx-cart p { margin: 0; }
& .ipx-cart__h { display: flex; align-items: center; gap: 8px; }
& .ipx-cart__n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--cta-ink); font-size: 12px; font-weight: 700; }
& .ipx-cart__h small { margin-left: auto; color: var(--muted); }
& .ipx-cart__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
& .ipx-cart__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; }
& .ipx-cart__row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
& .ipx-cart__tot { font-size: 16px; }
& .ipx-cart__tot .ip-display { font-size: 26px; }
& .ipx-cart__note { font-size: 13px; color: var(--muted); }

/* ---------- B12: Know what works ---------- */
& .ipx-st__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
& .ipx-st__kpi > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 22px; }
& .ipx-st__kpi dt { font-size: 14px; color: var(--muted); }
& .ipx-st__kpi dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
& .ipx-st__kpi dd b { font-size: 32px; }
& .ipx-trend { padding: 2px 8px; border-radius: 999px; background: rgba(134,239,172,.14); color: #86efac; font-size: 13px; font-weight: 700; }
& .ipx-trend.is-down { background: rgba(255,155,144,.14); color: #ff9b90; }
& .ipx-st__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
& .ipx-st__chart { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 24px; }
& .ipx-st__chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
& .ipx-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
& .ipx-key i { display: block; width: 14px; height: 4px; border-radius: 2px; }
& .ipx-key i.is-a, & .ipx-line.is-a { background: #8c97ff; stroke: #8c97ff; }
& .ipx-key i.is-b, & .ipx-line.is-b { background: #b8ff5c; stroke: #b8ff5c; }
& .ipx-st__chart svg { width: 100%; height: 200px; }
& .ipx-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
& .ipx-st.is-pending .ipx-line { stroke-dashoffset: 1; }
& .ipx-st.is-drawn .ipx-line { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }
& .ipx-st.is-drawn .ipx-line.is-b { transition-delay: .25s; }
& .ipx-st__axis { margin: 0; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
& .ipx-st__peak { margin: 0; font-size: 14px; }
& .ipx-st__side { display: flex; flex-direction: column; gap: 14px; }
& .ipx-st__side > section, & .ipx-st__hours { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; }
& .ipx-st__side h3, & .ipx-st__hours h3 { margin: 0; font-size: 17px; }
& .ipx-st__hours { margin-top: 14px; }
& .ipx-st__hours h3 span { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--muted); }
& .ipx-st__tops { margin: 0; padding: 0; list-style: none; counter-reset: t; display: flex; flex-direction: column; gap: 8px; }
& .ipx-st__tops li { counter-increment: t; display: flex; align-items: center; gap: 10px; font-size: 15px; }
& .ipx-st__tops li::before { content: counter(t); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(140,151,255,.18); color: #c7cdff; font-size: 12px; font-weight: 700; }
& .ipx-st__tops b { margin-left: auto; }
& .ipx-st__bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
& .ipx-st__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: rgba(140,151,255,.45); transform-origin: bottom; animation: ipxRise .7s var(--ease-out) both; }
& .ipx-st__bars i.is-peak { background: #ffd84d; }
& .ipx-st__note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- phones and tablets ---------- */
@media (max-width: 1100px) {
	& .ipx-hl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	& .ipx-st__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	& .ipx-st__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	& .ipx-dlg__slide, & .ipx-how__p { grid-template-columns: minmax(0, 1fr); }
	& .ipx-pic { min-height: 240px; }
}
@media (max-width: 560px) {
	& .ipx-hl__grid { grid-template-columns: minmax(0, 1fr); }
	& .ipx-add__grid, & .ipx-ls__k { grid-template-columns: minmax(0, 1fr); }
	& .ipx-st__kpi { grid-template-columns: minmax(0, 1fr); }
	& .ip-mb { font-size: 10px; }
	& .ip-mb__h { font-size: 15px; }
	& .ip-mb__row small, & .ip-mb__sig img { display: none; }
}

/* motion stops */
@media (prefers-reduced-motion: reduce) {
	& .ip-mb__leaf, & .ipx-fx i, & .ipx-bar i, & .ipx-st__bars i, & .ipx-dlg[open] { animation: none; }
	& .ipx-st.is-pending .ipx-line { stroke-dashoffset: 0; }
}
}
html.kd-paused .cms-theme-ispluto-space .ip-mb__leaf, html.kd-paused .cms-theme-ispluto-space .ipx-fx i { animation-play-state: paused; }
@keyframes ipxLeaf { 0%, 14% { transform: rotateY(0); opacity: 1; } 46% { transform: rotateY(-179deg); opacity: 1; } 62%, 100% { transform: rotateY(-179deg); opacity: 0; } }
@keyframes ipxPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ipxFall { to { transform: translateY(140px) rotate(160deg); } }
@keyframes ipxGrow { from { transform: scaleX(0); } }
@keyframes ipxRise { from { transform: scaleY(0); } }