.mpp-ios-guide {
  --ios-blue: #007aff;
  width: min(100%, 380px);
  margin: 10px auto 4px;
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.mpp-ios-guide[hidden] { display: none !important; }
.mpp-ios-guide * { box-sizing: border-box; }
.mpp-ios-guide__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.mpp-ios-guide__heading strong,.mpp-ios-guide__heading span { display: block; }
.mpp-ios-guide__heading strong { font-size: 14px; line-height: 1.2; }
.mpp-ios-guide__heading span { margin-top: 3px; color: #718092; font-size: 10px; }
.mpp-ios-guide__heading button,.mpp-ios-guide__controls button { border: 1px solid #d4dce4; border-radius: 8px; background: #fff; color: #1d66bb; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.mpp-ios-guide__heading button { flex: 0 0 auto; padding: 7px 9px; }
.mpp-ios-guide button:focus-visible { outline: 2px solid var(--ios-blue); outline-offset: 2px; }
.mpp-ios-guide button:disabled { color: #aeb8c2; cursor: default; }

.mpp-ios-demo { position: relative; width: min(100%, 280px); aspect-ratio: 9 / 19.5; margin: 0 auto; padding: 8px; overflow: hidden; border: 1px solid #cdd3d9; border-radius: 45px; background: #e7e9ed; box-shadow: 0 18px 38px rgb(15 23 42 / 19%), inset 0 3px 0 rgb(255 255 255 / 75%); }
.mpp-ios-demo::after { position: absolute; z-index: 90; bottom: 16px; left: 50%; width: 91px; height: 4px; border-radius: 5px; background: #24272c; content: ''; transform: translateX(-50%); }
.mpp-ios-demo__status { position: absolute; z-index: 80; top: 13px; right: 22px; left: 22px; display: grid; grid-template-columns: 1fr 97px 1fr; height: 29px; align-items: center; color: #222b35; font-size: 11px; transition: color 240ms ease; }
.mpp-ios-demo__status b { font-size: 11px; }
.mpp-ios-demo__island { width: 97px; height: 27px; border-radius: 18px; background: #111318; }
.mpp-ios-demo__signals { display: flex; justify-self: end; align-items: center; gap: 4px; }
.mpp-ios-demo__signals i { display: block; width: 11px; height: 9px; background: currentColor; }
.mpp-ios-demo__signals i:first-child { clip-path: polygon(0 100%,100% 0,100% 100%); }
.mpp-ios-demo__signals i:nth-child(2) { height: 7px; clip-path: polygon(50% 100%,0 10%,20% 0,50% 35%,80% 0,100% 10%); }
.mpp-ios-demo__signals i:last-child { position: relative; width: 15px; height: 8px; border: 1px solid currentColor; border-radius: 2px; background: transparent; }
.mpp-ios-demo__signals i:last-child::before { position: absolute; inset: 1px 3px 1px 1px; border-radius: 1px; background: currentColor; content: ''; }

.mpp-ios-scene { position: absolute; inset: 8px; overflow: hidden; border-radius: 37px; opacity: 0; visibility: hidden; transform: translateY(13px); transition: opacity 360ms ease, transform 360ms ease, visibility 0s linear 360ms; }
.mpp-ios-scene--safari { z-index: 1; background: #fff; opacity: 1; visibility: visible; transform: none; }
.mpp-ios-scene--menu,.mpp-ios-scene--share { z-index: 2; }
.mpp-ios-scene--add,.mpp-ios-scene--home { z-index: 3; }
.mpp-ios-guide[data-step="1"] .mpp-ios-scene--menu,.mpp-ios-guide[data-step="2"] .mpp-ios-scene--share,.mpp-ios-guide[data-step="3"] .mpp-ios-scene--add,.mpp-ios-guide[data-step="4"] .mpp-ios-scene--home { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.mpp-ios-web { height: 100%; padding-top: 42px; background: #fff; }
.mpp-ios-web header { display: flex; height: 41px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #eceef0; }
.mpp-ios-web header b { max-width: 150px; overflow: hidden; font-size: 12px; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.mpp-ios-web header span { font-size: 18px; }
.mpp-ios-web__hero { height: 190px; padding: 44px 18px; background: radial-gradient(circle at 80% 70%,rgb(255 255 255 / 39%) 0 16%,transparent 17%),linear-gradient(140deg,#d5ccc4,#a89b91); color: #fff; }
.mpp-ios-web__hero small,.mpp-ios-web__hero strong { display: block; }
.mpp-ios-web__hero small { font-size: 8px; letter-spacing: .15em; }
.mpp-ios-web__hero strong { max-width: 160px; margin-top: 5px; font-size: 24px; font-weight: 500; line-height: 1.08; }
.mpp-ios-web__hero i { display: block; width: 50px; height: 2px; margin-top: 13px; background: #fff; }
.mpp-ios-web__products { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; }
.mpp-ios-web__products i { height: 124px; border-radius: 5px; background: linear-gradient(145deg,#e8eaed,#cfd4da); }
.mpp-ios-web__products i:last-child { background: linear-gradient(145deg,#e9e2dc,#cabdb4); }
.mpp-ios-safari-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 91px; padding: 8px 13px 10px; border-top: 1px solid rgb(0 0 0 / 8%); background: rgb(247 247 249 / 97%); backdrop-filter: blur(18px); }
.mpp-ios-address { display: grid; grid-template-columns: 25px minmax(0,1fr) 18px; gap: 7px; align-items: center; height: 35px; padding: 0 9px; border-radius: 12px; background: #fff; color: #6b6f77; font-size: 14px; }
.mpp-ios-address b { overflow: hidden; color: #343943; font-size: 9px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mpp-ios-page-menu { display: grid; height: 27px; place-items: center; color: var(--ios-blue); font-size: 18px; }
.mpp-ios-safari-bar nav { display: flex; height: 35px; align-items: center; justify-content: space-around; color: var(--ios-blue); font-size: 21px; }
.mpp-ios-share-icon { position: relative; display: block; width: 16px; height: 15px; border: 1.7px solid currentColor; border-radius: 3px; color: var(--ios-blue); }
.mpp-ios-share-icon::before { position: absolute; top: -8px; left: 6px; width: 1.7px; height: 10px; background: currentColor; content: ''; }
.mpp-ios-share-icon::after { position: absolute; top: -8px; left: 4px; width: 5px; height: 5px; border-top: 1.7px solid currentColor; border-left: 1.7px solid currentColor; content: ''; transform: rotate(45deg); }

.mpp-ios-scene__dim { position: absolute; inset: 0; background: rgb(14 18 25 / 28%); }
.mpp-ios-sheet-handle { position: absolute; top: 7px; left: 50%; width: 34px; height: 4px; border-radius: 4px; background: #c4c8cd; transform: translateX(-50%); }
.mpp-ios-page-sheet { position: absolute; right: 6px; bottom: 10px; left: 6px; min-height: 337px; padding: 18px 9px 12px; border-radius: 21px 21px 30px 30px; background: #f2f2f7; box-shadow: 0 -8px 30px rgb(0 0 0 / 16%); }
.mpp-ios-page-sheet__title { margin: 4px 3px 11px; padding: 12px; border-radius: 11px; background: #fff; font-size: 12px; font-weight: 700; }
.mpp-ios-page-sheet__title small { display: block; margin-top: 3px; color: #858992; font-size: 9px; font-weight: 400; }
.mpp-ios-page-sheet__row { position: relative; display: flex; height: 45px; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid #e5e5eb; background: #fff; font-size: 12px; }
.mpp-ios-page-sheet__row--share { border-radius: 11px 11px 0 0; color: var(--ios-blue); }
.mpp-ios-page-sheet__row:last-child { border-bottom: 0; border-radius: 0 0 11px 11px; }
.mpp-ios-page-sheet__row span:not(.mpp-ios-target) { color: #6f7580; font-size: 16px; }
.mpp-ios-page-sheet__row--share .mpp-ios-share-icon { width: 15px; height: 14px; color: var(--ios-blue); }

.mpp-ios-share-sheet { position: absolute; right: 4px; bottom: 0; left: 4px; min-height: 433px; padding: 19px 9px 12px; border-radius: 20px 20px 32px 32px; background: #f2f2f7; box-shadow: 0 -8px 30px rgb(0 0 0 / 18%); }
.mpp-ios-share-title { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 8px; align-items: center; margin: 3px 2px 13px; padding: 9px; border-radius: 11px; background: #fff; }
.mpp-ios-share-title img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; }
.mpp-ios-share-title b,.mpp-ios-share-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-ios-share-title b { font-size: 10px; }
.mpp-ios-share-title small { margin-top: 3px; color: #777d87; font-size: 8px; }
.mpp-ios-share-title>span { color: var(--ios-blue); font-size: 9px; }
.mpp-ios-share-apps { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 14px; }
.mpp-ios-share-apps>span { color: #4f5660; font-size: 8px; text-align: center; }
.mpp-ios-share-apps i { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 auto 4px; border-radius: 12px; background: #fff; color: #2584d8; font-size: 18px; font-style: normal; }
.mpp-ios-share-apps>span:nth-child(2) i { background: #3bc46b; color: #fff; }
.mpp-ios-share-apps>span:nth-child(3) i { background: #3c9fe8; color: #fff; }
.mpp-ios-action-list { overflow: hidden; border-radius: 11px; background: #fff; }
.mpp-ios-action-list>div { position: relative; display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid #e5e5ea; font-size: 11px; }
.mpp-ios-action-list>div:last-child { border-bottom: 0; }
.mpp-ios-action-list>div>span:not(.mpp-ios-target) { color: #353b43; font-size: 17px; }
.mpp-ios-edit-actions { color: var(--ios-blue); font-size: 10px !important; }

.mpp-ios-scene--add { padding-top: 39px; background: #f2f2f7; }
.mpp-ios-nav { display: grid; grid-template-columns: 1fr auto 1fr; height: 44px; align-items: center; padding: 0 12px; border-bottom: 1px solid #d8dae1; background: #fbfbfd; }
.mpp-ios-nav>span,.mpp-ios-nav>b { color: var(--ios-blue); font-size: 11px; font-weight: 500; }
.mpp-ios-nav>b { position: relative; justify-self: end; font-weight: 700; }
.mpp-ios-nav strong { font-size: 11px; }
.mpp-ios-add-card { display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 12px; align-items: center; padding: 23px 17px 18px; }
.mpp-ios-add-card img { width: 55px; height: 55px; border-radius: 12px; background: #fff; object-fit: contain; }
.mpp-ios-add-card b,.mpp-ios-add-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-ios-add-card b { font-size: 13px; }
.mpp-ios-add-card small { margin-top: 4px; color: #777d86; font-size: 9px; }
.mpp-ios-webapp-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 12px; padding: 12px; border-radius: 11px; background: #fff; }
.mpp-ios-webapp-row b,.mpp-ios-webapp-row small { display: block; }
.mpp-ios-webapp-row b { font-size: 11px; }
.mpp-ios-webapp-row small { margin-top: 3px; color: #797f88; font-size: 9px; }
.mpp-ios-switch { position: relative; width: 39px; height: 23px; flex: 0 0 auto; border-radius: 15px; background: #34c759; box-shadow: 0 0 0 3px rgb(52 199 89 / 13%); }
.mpp-ios-switch::after { position: absolute; top: 2px; right: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); content: ''; }
.mpp-ios-scene--add>p { margin: 13px 23px; color: #7c828b; font-size: 9px; line-height: 1.4; }

.mpp-ios-scene--home { padding: 64px 13px 35px; background: radial-gradient(circle at 67% 18%,#f2d4ce,transparent 33%),linear-gradient(155deg,#839bb2,#415874 55%,#1b2940); }
.mpp-ios-guide[data-step="4"] .mpp-ios-demo__status { color: #fff; }
.mpp-ios-guide[data-step="4"] .mpp-ios-demo::after { background: #fff; }
.mpp-ios-home-date { margin-bottom: 16px; color: #fff; font-size: 11px; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / 35%); }
.mpp-ios-home-widgets { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.mpp-ios-home-widgets i { height: 91px; border-radius: 17px; background: rgb(255 255 255 / 25%); backdrop-filter: blur(15px); }
.mpp-ios-home-icons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 6px; margin-top: 27px; }
.mpp-ios-home-icons>span { position: relative; min-width: 0; color: #fff; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / 45%); }
.mpp-ios-home-icons i,.mpp-ios-home-icons img { display: grid; width: 43px; height: 43px; place-items: center; margin: 0 auto 5px; border-radius: 10px; background: linear-gradient(145deg,#fefefe,#cad4e1); color: #de6e73; font-size: 20px; font-style: normal; object-fit: contain; box-shadow: 0 4px 9px rgb(0 0 0 / 18%); }
.mpp-ios-home-icons>span:nth-child(2) i { background: linear-gradient(145deg,#ffcd7f,#ed7daa); color: #fff; }
.mpp-ios-home-icons>span:nth-child(4) i { background: linear-gradient(145deg,#999fab,#586376); color: #fff; }
.mpp-ios-home-icons small { display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mpp-ios-home-dock { position: absolute; right: 11px; bottom: 19px; left: 11px; display: flex; justify-content: space-around; padding: 9px; border-radius: 22px; background: rgb(255 255 255 / 26%); backdrop-filter: blur(18px); }
.mpp-ios-home-dock i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 10px; background: #48af70; color: #fff; font-size: 19px; font-style: normal; }
.mpp-ios-home-dock i:nth-child(2) { background: #3d9fe3; }
.mpp-ios-home-dock i:nth-child(3) { background: #f17178; }
.mpp-ios-home-dock i:nth-child(4) { background: #eef1f5; color: #567; }

.mpp-ios-target { position: absolute; z-index: 8; border: 2px solid var(--ios-blue); border-radius: 12px; box-shadow: 0 0 0 5px rgb(0 122 255 / 18%); pointer-events: none; }
.mpp-ios-target--page-menu { bottom: 58px; left: 20px; width: 31px; height: 31px; }
.mpp-ios-target--share,.mpp-ios-target--add-home { inset: 3px; border-radius: 8px; }
.mpp-ios-target--confirm { inset: -7px -8px; border-radius: 8px; }
.mpp-ios-target--launch { top: -5px; left: 50%; width: 53px; height: 53px; transform: translateX(-50%); }
.mpp-ios-guide.is-playing .mpp-ios-target { animation: mpp-ios-target-pulse 1.4s ease-in-out infinite; }
@keyframes mpp-ios-target-pulse { 50% { box-shadow: 0 0 0 9px rgb(0 122 255 / 9%); } }

.mpp-ios-guide__instruction { min-height: 85px; margin: 13px 0 8px; padding: 10px 12px; border: 1px solid #dde5ed; border-radius: 11px; background: #fff; }
.mpp-ios-guide__instruction small,.mpp-ios-guide__instruction strong { display: block; }
.mpp-ios-guide__instruction small { color: var(--ios-blue); font-size: 10px; font-weight: 700; }
.mpp-ios-guide__instruction strong { margin-top: 4px; font-size: 13px; }
.mpp-ios-guide__instruction p { margin: 4px 0 0 !important; color: #536172; font-size: 11px !important; line-height: 1.35 !important; }
.mpp-ios-guide__controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 6px; align-items: center; }
.mpp-ios-guide__controls button { min-height: 30px; padding: 5px 8px; }
.mpp-ios-guide__dots { display: flex; justify-content: center; gap: 5px; }
.mpp-ios-guide__dots button { width: 13px; min-height: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: #cdd7e2; }
.mpp-ios-guide__dots button[aria-current="step"] { background: var(--ios-blue); box-shadow: 0 0 0 3px rgb(0 122 255 / 15%); }
.mpp-ios-guide__note { margin: 10px 0 0 !important; color: #667486; font-size: 10px !important; line-height: 1.4 !important; }

@media (max-width: 380px) {
  .mpp-ios-demo { width: min(100%, 260px); }
  .mpp-ios-share-sheet { min-height: 414px; }
  .mpp-ios-page-sheet { min-height: 322px; }
  .mpp-ios-guide__controls { gap: 4px; }
  .mpp-ios-guide__controls button { padding: 5px 6px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mpp-ios-scene,.mpp-ios-demo__status { transition: none; }
  .mpp-ios-guide.is-playing .mpp-ios-target { animation: none; }
}