:root {
  color-scheme: dark;
  --bg: #08090b;
  --panel: rgba(17, 19, 23, 0.78);
  --text: #f7f4ed;
  --muted: rgba(247, 244, 237, 0.68);
  --line: rgba(255, 255, 255, 0.14);
  --gold: #dfb95d;
  --green: #45d38d;
  --blue: #4b8cff;
  --red: #ff6b6b;
  --phone: #111318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 18% 16%, rgba(223, 185, 93, 0.17), transparent 28rem),
    linear-gradient(135deg, #07080a 0%, #14161a 48%, #090b0e 100%);
}

button,
a {
  font: inherit;
}

.saving-page {
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.saving-stage {
  width: min(1160px, 100%);
  min-height: min(760px, calc(100svh - 48px));
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(330px, 1.12fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
}

.saving-copy {
  max-width: 500px;
}

.saving-brand {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.saving-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.saving-kicker {
  margin: 46px 0 12px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  max-width: 9.5ch;
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 6.8rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.saving-intro {
  max-width: 36rem;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.62;
}

.saving-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.saving-button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(223, 185, 93, 0.42);
  border-radius: 8px;
  background: rgba(223, 185, 93, 0.14);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.saving-button-muted {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
}

.saving-button-icon {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  position: relative;
}

.saving-button-icon::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  position: absolute;
  right: -4px;
  top: -2px;
  transform: rotate(10deg);
}

.saving-demo {
  min-height: 600px;
  display: grid;
  place-items: center;
  position: relative;
}

.saving-animation-box {
  width: min(560px, 100%);
  min-height: 700px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(223, 185, 93, 0.16), transparent 18rem),
    radial-gradient(circle at 72% 80%, rgba(69, 211, 141, 0.08), transparent 17rem),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(10, 12, 14, 0.76);
  background-size: auto, auto, 86px 86px, 86px 86px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -42px 90px rgba(0, 0, 0, 0.36),
    0 32px 90px rgba(0, 0, 0, 0.34);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 66px 32px 70px;
  position: relative;
  overflow: hidden;
}

.saving-animation-box::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(223, 185, 93, 0.08);
  border-radius: 8px;
  pointer-events: none;
}

.phone-scale-shell {
  width: 214px;
  height: 438px;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 0;
  transform: translate(-70px, -126px);
}

.instruction-pill {
  position: absolute;
  z-index: 10;
  top: 24px;
  left: 50%;
  width: min(330px, calc(100vw - 44px));
  min-height: 48px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(8, 9, 11, 0.72);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
}

.iphone {
  width: 360px;
  aspect-ratio: 390 / 796;
  border-radius: 54px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 19%),
    linear-gradient(315deg, rgba(0, 0, 0, 0.72), transparent 32%),
    #111318;
  box-shadow:
    0 46px 100px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  position: relative;
  transform: scale(0.595);
  transform-origin: center;
}

.iphone::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 50%;
  width: 118px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050608;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.iphone-side {
  position: absolute;
  width: 4px;
  border-radius: 999px;
  background: #252930;
}

.iphone-side-left {
  left: -2px;
  top: 132px;
  height: 84px;
}

.iphone-side-right {
  right: -2px;
  top: 184px;
  height: 108px;
}

.iphone-screen {
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #f6f6f6;
  color: #111;
  position: relative;
  isolation: isolate;
}

.status-bar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  padding: 16px 28px 0;
  display: flex;
  justify-content: space-between;
  color: #121212;
  font-size: 0.82rem;
  font-weight: 800;
}

.status-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.status-icons span {
  display: block;
  width: 17px;
  height: 10px;
  border-radius: 3px;
  background: #111;
  opacity: 0.86;
}

.status-icons span:nth-child(2) {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.status-icons span:nth-child(3) {
  width: 22px;
}

.safari-view,
.share-sheet,
.add-screen,
.home-screen,
.launch-view {
  position: absolute;
  inset: 0;
}

.safari-view {
  z-index: 1;
  background: #08090b;
  padding: 58px 14px 168px;
  animation: safariStage 20s infinite both;
}

.safari-bottom-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 20px;
  height: 162px;
  border-radius: 36px;
  background: rgba(49, 49, 49, 0.94);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(24px);
  padding: 20px 22px 18px;
}

.address-bar {
  height: 54px;
  border-radius: 23px;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 700;
  padding: 0 24px;
}

.reader-icon,
.refresh-icon {
  width: 27px;
  height: 27px;
  position: relative;
  flex: 0 0 auto;
}

.reader-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 18px;
  height: 10px;
  border: 3px solid #ffffff;
  border-radius: 4px;
}

.reader-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 4px;
  width: 20px;
  height: 11px;
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
}

.refresh-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 4px solid #ffffff;
  border-left-color: transparent;
  border-radius: 50%;
}

.refresh-icon::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-top: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  transform: rotate(28deg);
}

.web-preview {
  height: 100%;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: #08090b;
  color: #fff;
  position: relative;
}

.web-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.web-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.9) 100%);
}

.web-preview div {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 28px;
}

.web-preview p {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.web-preview strong {
  font-size: 2.3rem;
  line-height: 0.95;
  letter-spacing: 0;
}

.safari-toolbar {
  height: 72px;
  padding: 18px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar-icon {
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
}

.back-icon::before,
.forward-icon::before {
  content: "";
  position: absolute;
  inset: 9px 11px;
  border-left: 5px solid rgba(255, 255, 255, 0.36);
  border-bottom: 5px solid rgba(255, 255, 255, 0.36);
  transform: rotate(45deg);
}

.forward-icon {
  transform: rotate(180deg);
}

.share-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 1px;
  height: 19px;
  border: 4px solid #ffffff;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.share-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px;
  height: 20px;
  border-left: 4px solid #ffffff;
  border-top: 4px solid #ffffff;
  transform: translateX(-50%) rotate(45deg);
}

.book-icon::before,
.tabs-icon::before {
  content: "";
  position: absolute;
  inset: 5px 5px 4px;
  border: 5px solid #ffffff;
  border-radius: 6px;
}

.book-icon::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 7px;
  bottom: 7px;
  border-left: 4px solid #ffffff;
}

.tabs-icon::before {
  transform: translate(4px, -4px);
}

.tabs-icon::after {
  content: "";
  position: absolute;
  inset: 11px 5px 5px 11px;
  border: 5px solid #ffffff;
  border-radius: 4px;
}

.tap-target {
  outline: 0 solid transparent;
  animation: targetPulse 20s infinite both;
}

.share-target {
  animation-name: shareTargetPulse;
}

.add-home-target {
  animation-name: addHomeTargetPulse;
}

.view-more-target {
  animation-name: viewMoreTargetPulse;
}

.confirm-target {
  animation-name: confirmTargetPulse;
}

.launch-target {
  animation-name: launchTargetPulse;
}

.share-sheet {
  z-index: 2;
  padding: 156px 14px 0;
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  animation: shareSheetStage 20s infinite both;
}

.share-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
}

.add-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.8;
}

.sheet-card {
  position: relative;
  z-index: 1;
  border-radius: 30px;
  background: rgba(30, 32, 31, 0.94);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  min-height: 426px;
  animation: sheetCardStage 20s infinite both;
}

.sheet-title {
  min-height: 116px;
  padding: 18px 20px 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}

.mini-site-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #fff;
  object-fit: cover;
}

.sheet-title strong,
.sheet-title small,
.add-card strong,
.add-card small {
  display: block;
}

.sheet-title small,
.add-card small {
  color: rgba(255, 255, 255, 0.58);
  margin-top: 3px;
}

.sheet-title strong {
  font-size: 1.1rem;
}

.options-pill {
  width: fit-content;
  margin-top: 14px;
  min-height: 36px;
  border: 1px solid rgba(223, 185, 93, 0.28);
  border-radius: 999px;
  padding: 5px 14px 6px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
}

.options-pill::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.sheet-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sheet-close::before,
.sheet-close::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 20px;
  border-top: 3px solid #fff;
  transform: rotate(45deg);
}

.sheet-close::after {
  transform: rotate(-45deg);
}

.share-app-row,
.share-action-row {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 14px;
}

.share-app,
.share-action {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  color: #ffffff;
  font-style: normal;
}

.share-app b,
.share-action b {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.share-action b {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.share-app em,
.share-action em {
  max-width: 82px;
  font-size: 0.78rem;
  line-height: 1.16;
  font-style: normal;
}

.airdrop b {
  background: radial-gradient(circle at 50% 54%, #0ea5ff 0 13%, #006cc5 14% 33%, #043f6d 34% 100%);
}

.messages b {
  background: radial-gradient(circle at 48% 45%, #4ee861, #0a9825);
}

.mail b {
  background: linear-gradient(135deg, #5bd1ff, #173eb2 65%);
}

.mail b::after {
  content: "";
  position: absolute;
  inset: 16px 10px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  transform: skewY(-8deg);
}

.notes b {
  background: linear-gradient(180deg, #f8d229 0 28%, #343434 28% 100%);
}

.copy-action b::before,
.copy-action b::after,
.bookmark-action b::before,
.reading-action b::before,
.view-more-action b::before,
.view-more-action b::after,
.list-icon::before,
.list-icon::after {
  content: "";
  position: absolute;
}

.copy-action b::before,
.copy-action b::after {
  width: 18px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 4px;
  left: 17px;
  top: 15px;
}

.copy-action b::after {
  left: 23px;
  top: 20px;
}

.bookmark-action b::before {
  left: 19px;
  top: 13px;
  width: 20px;
  height: 30px;
  border: 4px solid #fff;
  border-bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.reading-action b::before {
  left: 12px;
  right: 12px;
  top: 24px;
  border-top: 4px solid #fff;
  box-shadow: 0 -10px 0 #fff;
}

.view-more-action b::before {
  left: 50%;
  top: 25px;
  width: 22px;
  height: 22px;
  border-left: 5px solid #fff;
  border-bottom: 5px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.view-more-action b::after {
  left: 29px;
  top: 14px;
  height: 28px;
  border-left: 5px solid #fff;
}

.share-more-list,
.share-more-secondary {
  margin: 0 14px 14px;
  border-radius: 22px;
  background: rgba(86, 88, 94, 0.92);
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px);
  animation: moreListStage 20s infinite both;
}

.share-more-secondary {
  background: rgba(75, 77, 82, 0.9);
  animation-name: secondaryListStage;
}

.sheet-list-row {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  position: relative;
  color: #ffffff;
}

.sheet-list-row + .sheet-list-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sheet-list-row strong {
  font-size: 0.98rem;
  font-weight: 500;
}

.list-icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex: 0 0 auto;
}

.plus-list::before,
.plus-list::after {
  left: 50%;
  top: 50%;
  width: 19px;
  border-top: 3px solid #fff;
  transform: translate(-50%, -50%);
}

.plus-list::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.bookmark-list::before {
  inset: 2px 5px;
  border: 3px solid #fff;
  border-bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.star-list::before {
  inset: 1px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 80% 94%, 50% 70%, 20% 94%, 31% 56%, 0 35%, 38% 35%);
}

.page-list::before {
  inset: 1px 4px;
  border: 3px solid #fff;
  border-radius: 3px;
}

.markup-list::before {
  inset: 2px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.print-list::before {
  left: 3px;
  right: 3px;
  top: 8px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 3px;
}

.reader-icon {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='18' height='12' rx='2.5'/%3E%3Cpath d='M8 23h16M10 28h12'/%3E%3C/svg%3E");
}

.refresh-icon {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24.5 9A9.5 9.5 0 1 0 26 18.5'/%3E%3Cpath d='M24.5 3.5V9h5.5'/%3E%3C/svg%3E");
}

.back-icon {
  color: rgba(255, 255, 255, 0.36);
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 7.5 11 16l8.5 8.5'/%3E%3C/svg%3E");
}

.forward-icon {
  color: rgba(255, 255, 255, 0.36);
  transform: none;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 7.5 21 16l-8.5 8.5'/%3E%3C/svg%3E");
}

.share-icon {
  color: #ffffff;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4v17'/%3E%3Cpath d='m10 10 6-6 6 6'/%3E%3Cpath d='M9 17v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8'/%3E%3C/svg%3E");
}

.book-icon {
  color: #ffffff;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h8A4.5 4.5 0 0 1 18 12v15a4.5 4.5 0 0 0-4.5-4.5h-8z'/%3E%3Cpath d='M26.5 7.5h-8A4.5 4.5 0 0 0 14 12v15a4.5 4.5 0 0 1 4.5-4.5h8z'/%3E%3C/svg%3E");
}

.tabs-icon {
  color: #ffffff;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='15' height='15' rx='2.5'/%3E%3Crect x='12' y='12' width='15' height='15' rx='2.5'/%3E%3C/svg%3E");
}

.copy-action b,
.bookmark-action b,
.reading-action b,
.view-more-action b,
.list-icon {
  color: #ffffff;
}

.copy-action b {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6h10l5 5v15H11z'/%3E%3Cpath d='M21 6v6h5'/%3E%3Cpath d='M6 11h5M6 11v15h12v-2'/%3E%3C/svg%3E");
}

.bookmark-action b {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h12v22l-6-4-6 4z'/%3E%3C/svg%3E");
}

.reading-action b {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='16' r='6'/%3E%3Ccircle cx='21' cy='16' r='6'/%3E%3Cpath d='M17 16h-2M5 16H3M29 16h-2'/%3E%3C/svg%3E");
}

.view-more-action b {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12 9 9 9-9'/%3E%3C/svg%3E");
}

.plus-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3C/svg%3E");
}

.bookmark-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h12v22l-6-4-6 4z'/%3E%3C/svg%3E");
}

.star-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='black'%3E%3Cpath d='m16 3.5 3.7 8 8.8 1.1-6.5 6 1.7 8.7-7.7-4.4-7.7 4.4 1.7-8.7-6.5-6 8.8-1.1z'/%3E%3C/svg%3E");
}

.page-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h10l5 5v19H9z'/%3E%3Cpath d='M19 4v6h5M13 15h7M13 20h5'/%3E%3C/svg%3E");
}

.markup-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M11 21 21 11M18 11h3v3'/%3E%3C/svg%3E");
}

.print-list {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11V5h12v6M10 23H7a3 3 0 0 1-3-3v-6h24v6a3 3 0 0 1-3 3h-3'/%3E%3Cpath d='M10 18h12v9H10z'/%3E%3C/svg%3E");
}

.reader-icon::before,
.refresh-icon::before,
.toolbar-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  transform: none;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.refresh-icon::before,
.back-icon::before,
.forward-icon::before,
.book-icon::before,
.tabs-icon::before {
  inset: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  -webkit-mask: none;
  mask: none;
}

.back-icon::before,
.forward-icon::before,
.book-icon::before,
.tabs-icon::before {
  inset: 11px;
}

.copy-action b::before,
.copy-action b::after {
  display: none;
}

.reader-icon::after,
.refresh-icon::after,
.share-icon::after,
.book-icon::after,
.tabs-icon::after,
.share-action b::after,
.list-icon::after {
  display: none;
}

.share-action b::before,
.list-icon::before {
  content: "";
  position: absolute;
  inset: 12px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  clip-path: none;
  transform: none;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.list-icon::before {
  inset: 0;
}

.add-screen {
  z-index: 3;
  background: #f7f7f9;
  opacity: 0;
  transform: translateX(22%);
  animation: addScreenStage 20s infinite both;
}

.add-screen::before {
  display: none;
}

.add-nav {
  height: 92px;
  padding: 54px 18px 0;
  border-bottom: 1px solid #dddfe5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 800;
}

.add-nav strong {
  color: #171a20;
  font-size: 0.9rem;
  text-align: center;
}

.add-card {
  margin: 24px 18px 0;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.add-card img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.add-help {
  margin: 18px 24px 0;
  color: #6d7380;
  font-size: 0.84rem;
  line-height: 1.42;
}

.home-screen {
  z-index: 4;
  padding: 78px 24px 26px;
  background:
    radial-gradient(circle at 26% 16%, rgba(223, 185, 93, 0.55), transparent 34%),
    radial-gradient(circle at 78% 8%, rgba(75, 140, 255, 0.6), transparent 28%),
    linear-gradient(160deg, #15181d, #08090b 62%, #19150d);
  opacity: 0;
  animation: homeStage 20s infinite both;
}

.wallpaper-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%);
}

.home-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 17px;
}

.app-dot,
.vip-icon img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: block;
  justify-self: center;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

.photos {
  background: linear-gradient(135deg, #ffcf5a, #ff6978 58%, #8c7dff);
}

.calendar {
  background: linear-gradient(180deg, #fff, #e9edf5);
}

.maps {
  background: linear-gradient(135deg, #78e08f, #4b8cff 58%, #f7d358);
}

.camera {
  background: linear-gradient(180deg, #474c55, #111318);
}

.app-dot.notes {
  background: linear-gradient(180deg, #ffe173 0 28%, #fff 28% 100%);
}

.music {
  background: linear-gradient(135deg, #ff4f8b, #8a4dff);
}

.wallet {
  background: linear-gradient(180deg, #323741, #101217);
}

.settings {
  background: linear-gradient(135deg, #aab2c0, #5c6370);
}

.vip-icon {
  width: 68px;
  min-height: 80px;
  color: #fff;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.1;
  justify-self: center;
}

.vip-icon img {
  margin: 0 auto 6px;
}

.dock {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 82px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
}

.dock span {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
}

.launch-view {
  z-index: 5;
  display: grid;
  place-items: end start;
  padding: 0 24px 58px;
  color: #fff;
  opacity: 0;
  animation: launchStage 20s infinite both;
}

.launch-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.launch-view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.92));
}

.launch-view div {
  position: relative;
  z-index: 1;
}

.launch-view p {
  margin: 0 0 10px;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
}

.launch-view strong {
  display: block;
  max-width: 11ch;
  font-size: 2.2rem;
  line-height: 0.96;
}

.mouse-pointer {
  position: absolute;
  z-index: 30;
  width: 48px;
  height: 48px;
  left: 0;
  top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 58'%3E%3Cpath d='M7 5v45l12.2-12.1 7.7 15.4 6.7-3.4-7.4-14.8h16.6z' fill='white' stroke='black' stroke-width='4.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
  transform: translate(150px, 650px);
  animation: pointerMove 20s infinite both;
}

.mouse-pointer::before {
  display: none;
}

.mouse-pointer::after {
  display: none;
}

.tap-ring {
  position: absolute;
  z-index: 28;
  width: 64px;
  height: 64px;
  border: 3px solid rgba(223, 185, 93, 0.95);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.tap-ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: rgba(223, 185, 93, 0.22);
}

.tap-ring-share {
  left: 134px;
  top: 612px;
  animation: tapShare 20s infinite both;
}

.tap-ring-more {
  left: 242px;
  top: 405px;
  animation: tapMore 20s infinite both;
}

.tap-ring-option {
  left: 134px;
  top: 592px;
  animation: tapOption 20s infinite both;
}

.tap-ring-confirm {
  left: 267px;
  top: 30px;
  animation: tapConfirm 20s infinite both;
}

.tap-ring-launch {
  left: 28px;
  top: 242px;
  animation: tapLaunch 20s infinite both;
}

.step-list {
  position: relative;
  z-index: 12;
  width: min(430px, 100%);
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  transform: none;
}

.step-list li {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.58);
  display: grid;
  place-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

body.step-share .step-list li:nth-child(1),
body.step-more .step-list li:nth-child(2),
body.step-option .step-list li:nth-child(3),
body.step-confirm .step-list li:nth-child(4),
body.step-launch .step-list li:nth-child(5) {
  border-color: rgba(223, 185, 93, 0.5);
  background: rgba(223, 185, 93, 0.16);
  color: #fff;
}

body.is-paused .safari-view,
body.is-paused .share-sheet,
body.is-paused .sheet-card,
body.is-paused .share-more-list,
body.is-paused .share-more-secondary,
body.is-paused .add-screen,
body.is-paused .home-screen,
body.is-paused .launch-view,
body.is-paused .mouse-pointer,
body.is-paused .tap-ring,
body.is-paused .tap-target {
  animation-play-state: paused;
}

body.restarting .safari-view,
body.restarting .share-sheet,
body.restarting .sheet-card,
body.restarting .share-more-list,
body.restarting .share-more-secondary,
body.restarting .add-screen,
body.restarting .home-screen,
body.restarting .launch-view,
body.restarting .mouse-pointer,
body.restarting .tap-ring,
body.restarting .tap-target {
  animation: none;
}

@keyframes safariStage {
  0%, 70% { opacity: 1; transform: translateX(0); }
  76%, 100% { opacity: 0; transform: translateX(-18%); }
}

@keyframes shareSheetStage {
  0%, 17% { transform: translateY(100%); opacity: 0; }
  22%, 68% { transform: translateY(0); opacity: 1; }
  72%, 100% { transform: translateY(100%); opacity: 0; }
}

@keyframes sheetCardStage {
  0%, 45% { transform: translateY(0); min-height: 426px; }
  50%, 68% { transform: translateY(-106px); min-height: 640px; }
  72%, 100% { transform: translateY(0); min-height: 426px; }
}

@keyframes moreListStage {
  0%, 47% { opacity: 0; transform: translateY(32px); }
  52%, 68% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(32px); }
}

@keyframes secondaryListStage {
  0%, 50% { opacity: 0; transform: translateY(32px); }
  55%, 68% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(32px); }
}

@keyframes addScreenStage {
  0%, 68% { opacity: 0; transform: translateX(22%); }
  73%, 87% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(-16%); }
}

@keyframes homeStage {
  0%, 87% { opacity: 0; transform: scale(1.08); }
  92%, 96% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1.02); }
}

@keyframes launchStage {
  0%, 94% { opacity: 0; transform: scale(1.03); }
  97%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes pointerMove {
  0%, 7% { opacity: 0; transform: translate(150px, 632px) scale(1); }
  10%, 17% { opacity: 1; transform: translate(150px, 632px) scale(1); }
  19% { transform: translate(150px, 632px) scale(0.86); }
  22%, 32% { transform: translate(150px, 632px) scale(1); }
  36%, 43% { transform: translate(245px, 443px) scale(1); }
  45% { transform: translate(245px, 443px) scale(0.86); }
  48%, 54% { transform: translate(245px, 443px) scale(1); }
  57%, 63% { transform: translate(146px, 614px) scale(1); }
  65% { transform: translate(146px, 614px) scale(0.86); }
  68%, 75% { transform: translate(146px, 614px) scale(1); }
  78%, 82% { transform: translate(278px, 50px) scale(1); }
  84% { transform: translate(278px, 50px) scale(0.86); }
  87%, 91% { transform: translate(278px, 50px) scale(1); }
  93%, 96% { transform: translate(44px, 262px) scale(1); }
  97% { transform: translate(44px, 262px) scale(0.86); }
  100% { opacity: 1; transform: translate(44px, 262px) scale(1); }
}

@keyframes tapShare {
  0%, 17%, 23%, 100% { opacity: 0; transform: scale(0.68); }
  19% { opacity: 1; transform: scale(0.68); }
  22% { opacity: 0; transform: scale(1.45); }
}

@keyframes tapMore {
  0%, 43%, 49%, 100% { opacity: 0; transform: scale(0.68); }
  45% { opacity: 1; transform: scale(0.68); }
  48% { opacity: 0; transform: scale(1.45); }
}

@keyframes tapOption {
  0%, 63%, 69%, 100% { opacity: 0; transform: scale(0.68); }
  65% { opacity: 1; transform: scale(0.68); }
  68% { opacity: 0; transform: scale(1.45); }
}

@keyframes tapConfirm {
  0%, 82%, 88%, 100% { opacity: 0; transform: scale(0.68); }
  84% { opacity: 1; transform: scale(0.68); }
  87% { opacity: 0; transform: scale(1.45); }
}

@keyframes tapLaunch {
  0%, 95%, 100% { opacity: 0; transform: scale(0.68); }
  97% { opacity: 1; transform: scale(0.68); }
  99% { opacity: 0; transform: scale(1.45); }
}

@keyframes shareTargetPulse {
  0%, 14%, 25%, 100% { outline-width: 0; outline-color: transparent; }
  16%, 23% { outline: 5px solid rgba(223, 185, 93, 0.34); border-radius: 12px; }
}

@keyframes viewMoreTargetPulse {
  0%, 40%, 51%, 100% { outline-width: 0; outline-color: transparent; }
  42%, 49% { outline: 5px solid rgba(223, 185, 93, 0.34); border-radius: 18px; }
}

@keyframes addHomeTargetPulse {
  0%, 60%, 70%, 100% { outline-width: 0; outline-color: transparent; }
  62%, 68% { outline: 5px solid rgba(223, 185, 93, 0.34); border-radius: 12px; }
}

@keyframes confirmTargetPulse {
  0%, 80%, 89%, 100% { outline-width: 0; outline-color: transparent; }
  82%, 87% { outline: 5px solid rgba(223, 185, 93, 0.34); border-radius: 8px; }
}

@keyframes launchTargetPulse {
  0%, 93%, 100% { outline-width: 0; outline-color: transparent; }
  95%, 99% { outline: 5px solid rgba(223, 185, 93, 0.42); border-radius: 18px; }
}

@media (max-width: 820px) {
  .saving-page {
    overflow: auto;
  }

  .saving-stage {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 6px 0 76px;
  }

  .saving-copy {
    max-width: none;
    text-align: center;
    display: grid;
    justify-items: center;
  }

  .saving-kicker {
    margin-top: 12px;
    margin-bottom: 6px;
  }

  h1 {
    max-width: 11ch;
    font-size: clamp(2.2rem, 10.5vw, 3.25rem);
    line-height: 0.94;
  }

  .saving-intro {
    max-width: 23rem;
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .saving-actions {
    margin-top: 14px;
  }

  .saving-button {
    min-height: 42px;
    padding: 0 15px;
  }

  .saving-demo {
    min-height: min(710px, 182vw);
  }

  .saving-animation-box {
    width: min(430px, 100%);
    min-height: 690px;
    padding: 58px 18px 26px;
  }

  .instruction-pill {
    top: 16px;
  }

  .step-list {
    width: calc(100% - 28px);
  }
}

@media (max-width: 430px) {
  .saving-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .saving-demo {
    min-height: min(700px, 188vw);
  }

  .saving-animation-box {
    min-height: 680px;
  }

  .phone-scale-shell {
    margin-bottom: 0;
    transform: translate(-70px, -134px) scale(0.92);
  }

  .step-list li {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .safari-view,
  .share-sheet,
  .sheet-card,
  .share-more-list,
  .share-more-secondary,
  .add-screen,
  .home-screen,
  .launch-view,
  .mouse-pointer,
  .tap-ring,
  .tap-target {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}