/* ============================================================
   WEBCARD PHONE SHOWCASE — a pinned, scroll-driven 3D phone (see
   js/webcard-phone.js). A link goes out through a messenger, then each
   WebCard edition takes the stage in turn: the phone shows it, the
   backdrop, giant word and copy re-skin in that edition's own style.
   ============================================================ */
@font-face { font-family: LCD; src: url("../assets/fonts/LoveLCD-Regular.woff2") format("woff2"); font-display: swap; }

.wcp {
  position: relative;
  margin: 0 calc(-1 * clamp(1.2rem, 5vw, 4rem));
  background: var(--dark);
  --intro: 175vh;
  --slide: 115vh;
}
.wcp-track { position: relative; height: calc(100vh + var(--intro) + var(--n, 8) * var(--slide)); }
.wcp-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background-color: var(--dark); color: #fff; font-family: var(--font-display);
}
.phone-glow {
  position: absolute; inset: 0; pointer-events: none; will-change: transform; transform: translateZ(0);
  background-image:
    radial-gradient(50% 58% at 50% 48%, rgba(255, 255, 255, 0.15), transparent 72%),
    radial-gradient(110% 55% at 50% 118%, rgba(0, 0, 0, 0.3), transparent 70%);
}
.phone-glow-pink { opacity: 0; background-image: radial-gradient(46% 52% at 50% 50%, rgba(255, 46, 126, 0.34), transparent 72%); }
.phone-grid {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 5h6M5 0v6' stroke='%2320351b' stroke-width='.6'/%3E%3C/svg%3E");
  background-size: 6px 6px;
}
.phone-planes { position: absolute; inset: 0; pointer-events: none; }
.phone-plane { position: absolute; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; will-change: transform; }
.phone-words { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.phone-word {
  position: absolute; left: 0; right: 0; top: 50%; opacity: 0; text-align: center; white-space: nowrap;
  font: 700 min(24vw, 42vh) / 0.8 var(--font-display); letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.12);
  will-change: transform, opacity;
}
.phone-word[data-slide="scrap"] { font-family: Nunito, var(--font-display); font-weight: 900; letter-spacing: -0.06em; color: rgba(255, 214, 196, 0.12); }
.phone-word[data-slide="box"] { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 800; color: rgba(148, 97, 220, 0.26); }
.phone-word[data-slide="book"] { font-family: Poppins, var(--font-display); font-weight: 600; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.18); }
.phone-word[data-slide="date"] { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.03em; color: rgba(255, 46, 126, 0.11); }
.phone-word[data-slide="winxp"] { font-family: Tahoma, Verdana, sans-serif; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.17); }
.phone-word[data-slide="pixel"] { font-family: LCD, monospace; font-weight: 400; letter-spacing: -0.02em; color: rgba(32, 53, 27, 0.14); }
.phone-word[data-slide="petal"] { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; letter-spacing: -0.03em; color: rgba(216, 109, 158, 0.13); }

.phone-intro, .phone-ring-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.phone-intro { z-index: 0; padding-inline: 20px; will-change: transform, opacity; }
.pi-row { display: flex; align-items: center; justify-content: center; gap: var(--gap, 340px); }
.phone-intro h3 { margin: 0; font-size: clamp(2.4rem, 6.4vw, 6rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; color: #fff; }
.phone-intro h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-2); }
.pi-l { text-align: right; }
.pi-r { text-align: left; }
.phone-intro-sub { max-width: 26ch; margin: 22px 0 0; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
.phone-ring-copy {
  z-index: 2; margin: 0; padding-bottom: 6vh; justify-content: flex-end; opacity: 0;
  font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.phone-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
.phone-links line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 3 7; stroke-linecap: round; }

/* ---------- the phone ---------- */
.phone-stage { position: absolute; inset: 0; z-index: 1; perspective: 1500px; }
.phone {
  position: absolute; left: 50%; top: 50%; width: 280px; height: 580px; margin: -290px 0 0 -140px;
  transform-style: preserve-3d; will-change: transform;
}
.phone-layers { position: absolute; inset: 0; transform-style: preserve-3d; }
.phone-layers i { position: absolute; inset: 0; border-radius: 44px; background: #2b2b39; border: 1px solid #56566b; }
.phone-layers i.back { background: #101018; box-shadow: 0 50px 70px -18px rgba(0, 0, 0, 0.5); }
.phone-btn { position: absolute; width: 4px; border-radius: 2px; background: #3c3c4d; transform: translateZ(0); }
.phone-btn.vol { left: -3px; top: 112px; height: 50px; }
.phone-btn.pwr { right: -3px; top: 150px; height: 78px; }
.phone-front {
  position: absolute; inset: 0; border-radius: 44px; overflow: hidden; transform: translateZ(8.5px);
  background: #0a0a10; border: 2px solid #7d7d94;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 6px #0a0a10;
}
.phone-front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%);
}
.phone-status {
  position: absolute; top: 16px; left: 0; right: 0; height: 22px; padding: 0 32px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; font: 600 11px var(--font-display);
  color: var(--st, #fff); transition: color 0.4s;
}
.phone-island { position: absolute; left: 50%; top: 0; width: 78px; height: 22px; margin-left: -39px; border-radius: 20px; background: #000; }
.phone-status i { width: 20px; height: 9px; border-radius: 3px; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 0 72%, transparent 72%); }
.phone-screen { position: absolute; inset: 9px; border-radius: 36px; overflow: hidden; background: #0b0a1c; }
/* screens slide vertically: the outgoing one leaves upward, the next rises from below */
.pscreen {
  position: absolute; inset: 0; overflow: hidden; font-size: 11px; color: #fff;
  opacity: 0; transform: translateY(28px) scale(0.98);
  transition: opacity 0.5s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pscreen[data-s="on"] { opacity: 1; transform: none; }
.pscreen[data-s="before"] { transform: translateY(-28px) scale(0.98); }
.pscreen svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pscreen.idle { display: grid; place-items: center; background: radial-gradient(70% 42% at 50% 42%, rgba(242, 165, 65, 0.5), transparent 70%); }
.idle-logo { font: italic 400 34px var(--font-serif); letter-spacing: 0.01em; }

/* ---- 1 · messenger: a 56moments.com link goes out (restarts each time the slide is shown) ---- */
.s-ms { background: #0c0b16; }
.ms-head { position: absolute; top: 34px; left: 0; right: 0; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ms-back { font-size: 22px; line-height: 1; color: #f2c38a; margin-right: -2px; }
.ms-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ff6b9d, #ffb86b); }
.ms-who { display: flex; flex-direction: column; gap: 1px; }
.ms-who b { font-size: 12px; }
.ms-who small { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: #8f8cab; }
.ms-who small i { width: 5px; height: 5px; border-radius: 50%; background: #3ddc84; }
.ms-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #f2c38a; }
.ms-actions svg { stroke-width: 1.7; }
.ms-body { position: absolute; top: 86px; left: 0; right: 0; bottom: 56px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.ms-time { text-align: center; font-size: 8.5px; color: #77749a; margin-bottom: 2px; }
.ms-msg { max-width: 80%; padding: 8px 11px; border-radius: 16px; font-size: 11px; line-height: 1.35; }
.ms-msg.in { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 5px; }
.ms-msg.out { align-self: flex-end; background: linear-gradient(135deg, #e4572e, #f2a541); border-bottom-right-radius: 5px; }
.ms-link-msg { padding: 4px; opacity: 0; transform: translateY(26px) scale(0.92); transform-origin: 100% 100%; }
.ms-url { display: block; padding: 4px 7px 6px; font-size: 10.5px; text-decoration: underline; text-underline-offset: 2px; }
.ms-card { overflow: hidden; border-radius: 12px; background: #fff; color: #0b0b12; }
.ms-thumb { position: relative; height: 72px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #12110f, #4a2a1a 55%, #e4572e); }
.ms-thumb span { font: italic 400 24px var(--font-serif); letter-spacing: 0.01em; }
.ms-thumb svg { position: absolute; right: 10px; bottom: 8px; stroke: #fff; stroke-width: 1.5; opacity: 0.85; }
.ms-meta { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 2px; }
.ms-meta small { font-size: 8.5px; color: #6b6b80; text-transform: uppercase; letter-spacing: 0.05em; }
.ms-meta b { font-size: 10.5px; line-height: 1.25; color: #0b0b12; }
.ms-status { position: relative; align-self: flex-end; height: 12px; margin-top: -3px; font-size: 8.5px; color: #8f8cab; }
.ms-status span { position: absolute; right: 2px; top: 0; white-space: nowrap; opacity: 0; }
.ms-typing { display: flex; gap: 4px; padding: 11px 13px; opacity: 0; }
.ms-typing i { width: 6px; height: 6px; border-radius: 50%; background: #f2c38a; }
.ms-reply { opacity: 0; transform: translateY(16px) scale(0.94); transform-origin: 0 100%; }
.ms-input { position: absolute; left: 10px; right: 10px; bottom: 14px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 13px; border-radius: 20px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 11px; }
.ms-ph { position: absolute; left: 13px; color: #77749a; }
.ms-typed { position: relative; flex: 1; white-space: nowrap; overflow: hidden; }
.ms-typed span { display: inline-block; clip-path: inset(0 100% 0 0); }
.ms-send { position: relative; margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e4572e, #f2a541); }
.ms-send svg { fill: #fff; stroke: none; }
.pscreen[data-s="on"] .ms-ph { animation: msGone 0.1s 0.55s forwards; }
.pscreen[data-s="on"] .ms-typed span { animation: msType 1.3s 0.6s steps(21) both, msGone 0.15s 2.05s forwards; }
.pscreen[data-s="on"] .ms-send { animation: msPulse 0.4s 1.95s both; }
.pscreen[data-s="on"] .ms-link-msg { animation: msPop 0.55s 2.1s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.pscreen[data-s="on"] .ms-st1 { animation: msShow 0.3s 2.9s both, msGone 0.3s 3.9s forwards; }
.pscreen[data-s="on"] .ms-st2 { animation: msShow 0.3s 3.9s both; }
.pscreen[data-s="on"] .ms-typing { animation: msShow 0.3s 4.2s both, msGone 0.2s 5.3s forwards; }
.pscreen[data-s="on"] .ms-typing i { animation: msDot 0.9s infinite; }
.pscreen[data-s="on"] .ms-typing i:nth-child(2) { animation-delay: 0.15s; }
.pscreen[data-s="on"] .ms-typing i:nth-child(3) { animation-delay: 0.3s; }
.pscreen[data-s="on"] .ms-reply { animation: msPop 0.5s 5.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes msType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes msGone { to { opacity: 0; } }
@keyframes msShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes msPop { from { opacity: 0; transform: translateY(26px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes msPulse { 50% { transform: scale(0.78); } }
@keyframes msDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- Scrapbook (scrapbook.56moments.com): a little maroon book on a photo of dried grass.
   The cover swings open onto white pages, a page turns, then the book closes again ---- */
.s-scrap { background: #3a1a12; font-family: Nunito, var(--font-display); color: #fff; }
.sb-bg { position: absolute; inset: -4%; background: url("https://images.unsplash.com/photo-1687957772619-199323adea60?auto=format&fit=crop&w=640&q=72") center / cover; }
.sb-glass {
  position: absolute; padding: 6px 8px; border-radius: 10px; color: #fff; font-size: 6.6px; font-weight: 700; line-height: 1.4; text-align: center;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sb-sandbox { top: 36px; left: 64px; width: 118px; }
.sb-demo { left: 60px; bottom: 66px; width: 124px; text-align: left; background: rgba(40, 14, 8, 0.42); border-color: rgba(255, 255, 255, 0.16); }
.sb-lang { position: absolute; top: 39px; right: 10px; display: flex; padding: 2px; border-radius: 20px; background: rgba(30, 10, 6, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 7px; font-weight: 800; }
.sb-lang b, .sb-lang span { padding: 4px 8px; border-radius: 20px; }
.sb-lang b { background: #fff; color: #2a0a0a; }
.sb-book { position: absolute; left: 50%; top: 186px; width: 248px; height: 186px; margin-left: -124px; perspective: 900px; }
.sb-shadow { position: absolute; left: 0; right: 0; top: 10px; bottom: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 40px 24px rgba(0, 0, 0, 0.28); transform: scaleX(0.5); }
.sb-move { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(-62px); }
.sb-base, .sb-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; }
.sb-base, .sb-leaf i.f { background: #fff; border-radius: 3px 11px 11px 3px; box-shadow: inset 9px 0 14px -9px rgba(86, 61, 38, 0.2); }
.sb-leaf { transform-origin: 0 50%; transform-style: preserve-3d; }
.sb-leaf i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sb-leaf i.b { transform: rotateY(180deg); background: #fff; border-radius: 11px 3px 3px 11px; box-shadow: inset -9px 0 14px -9px rgba(86, 61, 38, 0.2); }
.sb-cover { transform: rotateY(0) translateZ(2px); }
.sb-cover i.f { background: #2a0a0a; box-shadow: inset 5px 0 8px -4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.sb-leaf2 { transform: rotateY(0) translateZ(1px); }
.sb-arrow { position: absolute; top: 266px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(105, 96, 96, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.pscreen .sb-arrow svg { width: 12px; height: 12px; stroke-width: 2.6; }
.sb-next { right: 6px; }
.sb-prev { left: 6px; opacity: 0; }
.sb-tap, .bx-tap, .pt-tap { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); opacity: 0; pointer-events: none; }
.sb-edit { position: absolute; left: 50%; bottom: 16px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 10, 6, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); }
.sb-edit i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #2a0a0a; }
.pscreen .sb-edit svg { width: 12px; height: 12px; stroke-width: 1.7; }
.pscreen[data-s="on"] .sb-bg { animation: sbDrift 18s ease-in-out infinite alternate; }
.pscreen[data-s="on"] .sb-move { animation: sbMove 9s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .sb-shadow { animation: sbShadow 9s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .sb-cover { animation: sbCover 9s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .sb-leaf2 { animation: sbLeaf 9s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .sb-prev { animation: sbPrev 9s ease infinite; }
.pscreen[data-s="on"] .sb-tap { animation: sbTap 9s ease-out infinite; }
@keyframes sbDrift { to { transform: scale(1.08) translate(-2%, 1%); } }
@keyframes sbMove { 0%, 16% { transform: translateX(-62px); } 30%, 86% { transform: none; } 98%, 100% { transform: translateX(-62px); } }
@keyframes sbShadow { 0%, 16% { transform: scaleX(0.5); } 30%, 86% { transform: none; } 98%, 100% { transform: scaleX(0.5); } }
@keyframes sbCover { 0%, 16% { transform: rotateY(0) translateZ(2px); } 30%, 86% { transform: rotateY(-180deg) translateZ(2px); } 98%, 100% { transform: rotateY(0) translateZ(2px); } }
@keyframes sbLeaf { 0%, 52% { transform: rotateY(0) translateZ(1px); } 64%, 78% { transform: rotateY(-180deg) translateZ(1px); } 88%, 100% { transform: rotateY(0) translateZ(1px); } }
@keyframes sbPrev { 0%, 28% { opacity: 0; } 33%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes sbTap { 0%, 10% { opacity: 0; transform: scale(0.3); } 12% { opacity: 1; } 17%, 46% { opacity: 0; transform: scale(1.6); } 46.1% { transform: scale(0.3); } 48% { opacity: 1; } 53%, 100% { opacity: 0; transform: scale(1.6); } }

/* ---- Box (box.56moments.com): a purple box on black. The lid flies off, the walls fall flat
   into a cross, then the little box inside opens on a bouquet ---- */
.s-box { background: #0c0c0c; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.bx-top { position: absolute; top: 37px; left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.bx-lang { display: flex; padding: 2px; border-radius: 20px; background: #161616; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 7.5px; font-weight: 700; color: #bdbdbd; }
.bx-lang span, .bx-lang b { padding: 4px 9px; border-radius: 20px; }
.bx-lang b { background: #fff; color: #0c0c0c; }
.bx-edit { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #161616; border: 1px solid rgba(255, 255, 255, 0.1); color: #ddd; }
.pscreen .bx-edit svg { width: 10px; height: 10px; }
.bx-scene { position: absolute; left: 0; right: 0; top: 60px; height: 400px; perspective: 720px; perspective-origin: 50% 10%; }
.bx-tilt { position: absolute; left: 50%; top: 66%; transform-style: preserve-3d; transform: rotateX(58deg); }
.bx-spin { position: absolute; transform-style: preserve-3d; transform: rotateZ(30deg); }
.bx-floor { position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; background: #e6e3e8; box-shadow: inset 0 0 0 1px rgba(60, 30, 110, 0.35); }
.bx-wall { position: absolute; width: 104px; height: 104px; transform-style: preserve-3d; }
.bx-wall > i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bx-wall > i.n { background: #e6e3e8; box-shadow: inset 0 0 0 1px rgba(60, 30, 110, 0.3); }
.bx-wall > i.o { transform: rotateY(180deg); background: #9461dc; box-shadow: inset 0 0 0 1px rgba(36, 16, 80, 0.75); }
.w-left > i.o, .w-right > i.o, .iw-left > i.o, .iw-right > i.o { background: #8656d2; }
.w-back { left: -52px; top: -156px; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.w-front { left: -52px; top: 52px; transform-origin: 50% 0; transform: rotateX(90deg); }
.w-left { left: -156px; top: -52px; transform-origin: 100% 50%; transform: rotateY(90deg); }
.w-right { left: 52px; top: -52px; transform-origin: 0 50%; transform: rotateY(-90deg); }
.bx-hb { position: absolute; left: 0; right: 0; top: 36px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: #e0459a; white-space: nowrap; }
.w-back small { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-size: 5.5px; color: #a7a3ad; }
.bx-photo { position: absolute; inset: 12px; background: #f2c94c url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=300&auto=format&fit=crop&q=60") center / cover; }
.bx-heart {
  position: absolute; left: 44px; top: 26px; width: 42px; height: 37px;
  background: radial-gradient(circle at 34% 30%, #ffb3d4, #f2508c 50%, #c41d5c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 21S0 13.4 0 6.2A6 6 0 0 1 12 3.4 6 6 0 0 1 24 6.2C24 13.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 21S0 13.4 0 6.2A6 6 0 0 1 12 3.4 6 6 0 0 1 24 6.2C24 13.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-14deg);
}
.bx-star { position: absolute; background: radial-gradient(circle at 42% 36%, #fff6c4, #ffd36b 45%, #f0a63c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.bx-star.s1 { left: 14px; top: 34px; width: 38px; height: 40px; transform: rotate(-12deg); }
.bx-star.s2 { left: 40px; top: 60px; width: 15px; height: 16px; }
.bx-star.s3 { left: 30px; top: 78px; width: 11px; height: 12px; }
.bx-lines em { position: absolute; left: 18px; right: 18px; height: 2px; border-radius: 2px; background: #cfcad6; }
.bx-lines em:nth-child(1) { top: 38px; }
.bx-lines em:nth-child(2) { top: 50px; right: 30px; }
.bx-lines em:nth-child(3) { top: 62px; right: 42px; }
.bx-bouquet {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #b9475f 0 1.5px, #f6b2c2 2px 3.4px, #e47f98 3.8px 5.2px, transparent 5.6px),
    radial-gradient(circle at 30% 34%, #b9475f 0 1.3px, #f6b2c2 1.8px 3px, #e47f98 3.4px 4.8px, transparent 5.2px),
    radial-gradient(circle at 68% 30%, #b9475f 0 1.3px, #f9c3cf 1.8px 3px, #e8899f 3.4px 4.8px, transparent 5.2px),
    radial-gradient(circle at 74% 62%, #b9475f 0 1.3px, #f6b2c2 1.8px 3px, #e47f98 3.4px 4.8px, transparent 5.2px),
    radial-gradient(circle at 36% 70%, #b9475f 0 1.3px, #f9c3cf 1.8px 3px, #e8899f 3.4px 4.8px, transparent 5.2px),
    radial-gradient(circle at 52% 22%, #c45a71 0 1px, #fbd0da 1.5px 2.6px, transparent 3px),
    radial-gradient(circle at 20% 54%, #c45a71 0 1px, #fbd0da 1.5px 2.6px, transparent 3px),
    radial-gradient(circle at 84% 44%, #c45a71 0 1px, #fbd0da 1.5px 2.6px, transparent 3px),
    radial-gradient(circle at 56% 82%, #c45a71 0 1px, #fbd0da 1.5px 2.6px, transparent 3px),
    radial-gradient(circle, #6f9a5b 0 62%, #5a8448 63% 70%, transparent 71%);
}
.bx-inner { position: absolute; transform-style: preserve-3d; transform: translateZ(1px); }
.bx-wall.iw { width: 56px; height: 56px; }
.iw-back { left: -28px; top: -84px; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.iw-front { left: -28px; top: 28px; transform-origin: 50% 0; transform: rotateX(90deg); }
.iw-left { left: -84px; top: -28px; transform-origin: 100% 50%; transform: rotateY(90deg); }
.iw-right { left: 28px; top: -28px; transform-origin: 0 50%; transform: rotateY(-90deg); }
.bx-itop { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; padding-top: 19px; text-align: center; transform: translateZ(57px); background: #e9e6ec; box-shadow: inset 0 0 0 2px #9461dc; }
.bx-itop b { display: block; font-size: 6.8px; font-weight: 800; color: #a685e6; white-space: nowrap; }
.bx-itop small { display: block; margin-top: 2px; font-size: 4px; color: #b4b0ba; }
.bx-lid { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; transform-style: preserve-3d; transform: translateZ(105px); }
.bx-lid > i { position: absolute; background: #9461dc; box-shadow: inset 0 0 0 1px rgba(36, 16, 80, 0.75); }
.bx-lid > .lt { inset: 0; background: #9c6ae2; }
.bx-lid > .s1 { left: 0; top: 100%; width: 100%; height: 16px; transform-origin: 50% 0; transform: rotateX(-90deg); }
.bx-lid > .s2 { left: 0; bottom: 100%; width: 100%; height: 16px; transform-origin: 50% 100%; transform: rotateX(90deg); }
.bx-lid > .s3 { right: 100%; top: 0; width: 16px; height: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); background: #8656d2; }
.bx-lid > .s4 { left: 100%; top: 0; width: 16px; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); background: #8656d2; }
.bx-bar {
  position: absolute; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 11px; border-radius: 30px; transform: translateX(-50%);
  background: #161616; border: 1px solid rgba(255, 255, 255, 0.06); color: #6e6e6e; font: 600 6.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em;
}
.pscreen .bx-bar > svg { width: 9px; height: 9px; stroke-width: 2.2; }
.bx-play { position: relative; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #fff; }
.bx-play .pl { position: absolute; left: 9px; top: 7px; border-left: 7px solid #111; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.pscreen .bx-play svg { width: 11px; height: 11px; stroke-width: 2.8; opacity: 0; }
.bx-labels { position: relative; width: 46px; height: 7px; color: #8a8a8a; }
.bx-labels i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; opacity: 0; }
.bx-labels i:first-child { opacity: 1; }
.pscreen[data-s="on"] .bx-scene { animation: bxScene 10s linear infinite; }
.pscreen[data-s="on"] .bx-spin { animation: bxSpin 10s linear infinite; }
.pscreen[data-s="on"] .bx-lid { animation: bxLidOff 10s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.pscreen[data-s="on"] .bx-lid > i { animation: bxLidFade 10s linear infinite; }
.pscreen[data-s="on"] .w-back { animation: bxBack 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .w-front { animation: bxFront 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .w-left { animation: bxLeft 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .w-right { animation: bxRight 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .iw-back { animation: bxIBack 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .iw-front { animation: bxIFront 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .iw-left { animation: bxILeft 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .iw-right { animation: bxIRight 10s cubic-bezier(0.55, 0, 0.35, 1.25) infinite; }
.pscreen[data-s="on"] .bx-itop { animation: bxITop 10s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.pscreen[data-s="on"] .bx-play { animation: bxPlay 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-play .pl { animation: bxPl 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-play svg { animation: bxNx 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-tap { animation: bxTap 10s ease-out infinite; }
.pscreen[data-s="on"] .bx-labels i:nth-child(1) { animation: bxL1 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-labels i:nth-child(2) { animation: bxL2 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-labels i:nth-child(3) { animation: bxL3 10s steps(1) infinite; }
.pscreen[data-s="on"] .bx-labels i:nth-child(4) { animation: bxL4 10s steps(1) infinite; }
@keyframes bxScene { 0% { opacity: 0; } 4%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bxSpin { from { transform: rotateZ(22deg); } to { transform: rotateZ(78deg); } }
@keyframes bxLidOff { 0%, 17% { transform: translateZ(105px); } 27%, 100% { transform: translate3d(40px, -60px, 260px) rotateX(30deg) rotateY(-24deg); } }
@keyframes bxLidFade { 0%, 19% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes bxBack { 0%, 40% { transform: rotateX(-90deg); } 50%, 100% { transform: rotateX(0); } }
@keyframes bxFront { 0%, 40% { transform: rotateX(90deg); } 50%, 100% { transform: rotateX(0); } }
@keyframes bxLeft { 0%, 40% { transform: rotateY(90deg); } 50%, 100% { transform: rotateY(0); } }
@keyframes bxRight { 0%, 40% { transform: rotateY(-90deg); } 50%, 100% { transform: rotateY(0); } }
@keyframes bxIBack { 0%, 60% { transform: rotateX(-90deg); } 70%, 100% { transform: rotateX(0); } }
@keyframes bxIFront { 0%, 60% { transform: rotateX(90deg); } 70%, 100% { transform: rotateX(0); } }
@keyframes bxILeft { 0%, 60% { transform: rotateY(90deg); } 70%, 100% { transform: rotateY(0); } }
@keyframes bxIRight { 0%, 60% { transform: rotateY(-90deg); } 70%, 100% { transform: rotateY(0); } }
@keyframes bxITop { 0%, 57% { transform: translateZ(57px); opacity: 1; } 66%, 100% { transform: translate3d(-20px, -30px, 200px); opacity: 0; } }
@keyframes bxPlay { 0% { background: #fff; } 17% { background: #e0458f; } }
@keyframes bxPl { 0% { opacity: 1; } 17% { opacity: 0; } }
@keyframes bxNx { 0% { opacity: 0; } 17% { opacity: 1; } }
@keyframes bxTap { 0%, 12% { opacity: 0; transform: scale(0.3); } 14% { opacity: 1; } 19%, 36% { opacity: 0; transform: scale(1.7); } 36.1% { transform: scale(0.3); } 38% { opacity: 1; } 43%, 54% { opacity: 0; transform: scale(1.7); } 54.1% { transform: scale(0.3); } 56% { opacity: 1; } 61%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bxL1 { 0% { opacity: 1; } 17% { opacity: 0; } }
@keyframes bxL2 { 0% { opacity: 0; } 17% { opacity: 1; } 40% { opacity: 0; } }
@keyframes bxL3 { 0% { opacity: 0; } 40% { opacity: 1; } 58% { opacity: 0; } }
@keyframes bxL4 { 0% { opacity: 0; } 58% { opacity: 1; } }

/* ---- Book (book.56moments.com): a white book floating in a cloudy sky; the cover opens,
   pages turn as the slider walks along, then it closes ---- */
.s-book { background: linear-gradient(180deg, #7c90bb 0%, #9cadd0 28%, #c7cee1 46%, #b4bfd9 52%, #8e9dc4 72%, #6f7eab 100%); font-family: Poppins, var(--font-display); color: #fff; }
.bk-sky i { position: absolute; border-radius: 50%; filter: blur(2.5px); background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.75) 35%, rgba(255, 255, 255, 0) 70%); }
.bk-sky i:nth-child(1) { left: -40px; top: 60px; width: 150px; height: 90px; }
.bk-sky i:nth-child(2) { left: 30px; top: 44px; width: 110px; height: 70px; }
.bk-sky i:nth-child(3) { left: 150px; top: 70px; width: 130px; height: 70px; opacity: 0.9; }
.bk-sky i:nth-child(4) { left: 200px; top: 30px; width: 110px; height: 64px; }
.bk-sky i:nth-child(5) { left: 60px; top: 130px; width: 120px; height: 46px; opacity: 0.8; }
.bk-sky i:nth-child(6) { left: -30px; top: 170px; width: 120px; height: 40px; opacity: 0.7; }
.bk-sky i:nth-child(7) { left: 170px; top: 168px; width: 130px; height: 40px; opacity: 0.75; }
.bk-sky i:nth-child(8) { left: 40px; top: 238px; width: 190px; height: 36px; opacity: 0.55; }
.bk-sky i:nth-child(9) { left: -20px; top: 330px; width: 140px; height: 50px; opacity: 0.28; }
.bk-sky i:nth-child(10) { left: 140px; top: 360px; width: 150px; height: 56px; opacity: 0.24; }
.bk-top { position: absolute; top: 36px; left: 12px; right: 10px; display: flex; align-items: center; gap: 5px; }
.bk-chip, .bk-btns i, .bk-editbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 22px; border-radius: 20px; color: #fff;
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.36); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bk-chip { gap: 4px; padding: 0 9px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.pscreen .bk-chip svg { width: 8px; height: 8px; stroke-width: 2.4; }
.bk-btns { margin-left: auto; display: flex; gap: 5px; }
.bk-btns i, .bk-editbtn { width: 22px; padding: 0; }
.bk-btns i.lock { background: rgba(72, 170, 120, 0.5); border-color: rgba(190, 255, 220, 0.5); }
.pscreen .bk-btns svg, .pscreen .bk-editbtn svg { width: 9px; height: 9px; stroke-width: 2.2; }
.bk-editbtn { position: absolute; top: 64px; right: 10px; }
.bk-stage { position: absolute; left: 0; right: 0; top: 150px; height: 230px; perspective: 800px; perspective-origin: 50% -10%; }
.bk-world { position: absolute; left: 50%; top: 22px; width: 232px; height: 160px; margin-left: -116px; transform-style: preserve-3d; transform: rotateX(28deg) rotateZ(-5deg); }
.bk-move { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(-58px); }
.bk-base, .bk-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; }
.bk-base, .bk-leaf i.f { background: linear-gradient(90deg, #d6dae4, #fff 28%, #f3f4f8); border-radius: 0 4px 4px 0; }
.bk-base { box-shadow: 2px 3px 0 -1px #e3e6ee, 4px 6px 0 -2px #cdd2de, 6px 22px 26px -8px rgba(36, 46, 90, 0.4); }
.bk-leaf { transform-origin: 0 50%; transform-style: preserve-3d; }
.bk-leaf i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-leaf i.b { transform: rotateY(180deg); background: linear-gradient(270deg, #d6dae4, #fff 28%, #f3f4f8); border-radius: 4px 0 0 4px; }
.bk-cover { transform: rotateY(0) translateZ(3px); }
.bk-cover i.f { background: linear-gradient(140deg, #fff, #f1f2f6 55%, #e3e6ee); border-radius: 2px 5px 5px 2px; box-shadow: inset 4px 0 6px -3px rgba(60, 70, 110, 0.28); }
.bk-l1 { transform: rotateY(0) translateZ(2px); }
.bk-l2 { transform: rotateY(0) translateZ(1px); }
.bk-slider { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-rail { position: relative; width: 132px; height: 16px; }
.bk-tip { position: absolute; left: 0; top: 0; height: 15px; transform: translateX(-50%); }
.bk-tip b, .bk-count b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; opacity: 0; }
.bk-tip b { padding: 3px 8px; border-radius: 20px; background: rgba(12, 5, 10, 0.85); border: 1px solid rgba(255, 255, 255, 0.13); font-size: 7px; font-weight: 700; }
.bk-tip b:first-child, .bk-count b:first-child { opacity: 1; }
.bk-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 30px; background: rgba(8, 4, 12, 0.72); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
.bk-ico { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; opacity: 0.35; }
.bk-ico em { display: block; width: 10px; height: 1.5px; border-radius: 2px; background: #fff; }
.bk-ico em:nth-child(2) { width: 7px; }
.bk-ico em:nth-child(3) { width: 4px; }
.bk-ico.r { align-items: flex-start; flex-direction: column-reverse; }
.bk-track { position: relative; width: 132px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.bk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #e8602a, #c4507a); }
.bk-thumb { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.bk-count { position: relative; width: 60px; height: 9px; font-size: 6.5px; color: rgba(255, 255, 255, 0.55); }
.pscreen[data-s="on"] .bk-move { animation: bkMove 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-cover { animation: bkCover 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-l1 { animation: bkL1 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-l2 { animation: bkL2 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-world { animation: bkFloat 5s ease-in-out infinite; }
.pscreen[data-s="on"] .bk-thumb, .pscreen[data-s="on"] .bk-tip { animation: bkSlide 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-fill { animation: bkFill 10s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.pscreen[data-s="on"] .bk-tip b:nth-child(1), .pscreen[data-s="on"] .bk-count b:nth-child(1) { animation: bkT1 10s steps(1) infinite; }
.pscreen[data-s="on"] .bk-tip b:nth-child(2), .pscreen[data-s="on"] .bk-count b:nth-child(2) { animation: bkT2 10s steps(1) infinite; }
.pscreen[data-s="on"] .bk-tip b:nth-child(3), .pscreen[data-s="on"] .bk-count b:nth-child(3) { animation: bkT3 10s steps(1) infinite; }
.pscreen[data-s="on"] .bk-tip b:nth-child(4), .pscreen[data-s="on"] .bk-count b:nth-child(4) { animation: bkT4 10s steps(1) infinite; }
@keyframes bkMove { 0%, 14% { transform: translateX(-58px); } 28%, 88% { transform: none; } 98%, 100% { transform: translateX(-58px); } }
@keyframes bkCover { 0%, 14% { transform: rotateY(0) translateZ(3px); } 28%, 88% { transform: rotateY(-180deg) translateZ(3px); } 98%, 100% { transform: rotateY(0) translateZ(3px); } }
@keyframes bkL1 { 0%, 42% { transform: rotateY(0) translateZ(2px); } 54%, 85% { transform: rotateY(-180deg) translateZ(2px); } 93%, 100% { transform: rotateY(0) translateZ(2px); } }
@keyframes bkL2 { 0%, 62% { transform: rotateY(0) translateZ(1px); } 74%, 82% { transform: rotateY(-180deg) translateZ(1px); } 90%, 100% { transform: rotateY(0) translateZ(1px); } }
@keyframes bkFloat { 50% { transform: rotateX(28deg) rotateZ(-5deg) translateZ(8px); } }
@keyframes bkSlide { 0%, 14% { left: 0; } 28%, 42% { left: 11%; } 54%, 62% { left: 22%; } 74%, 88% { left: 33%; } 98%, 100% { left: 0; } }
@keyframes bkFill { 0%, 14% { width: 0; } 28%, 42% { width: 11%; } 54%, 62% { width: 22%; } 74%, 88% { width: 33%; } 98%, 100% { width: 0; } }
@keyframes bkT1 { 0% { opacity: 1; } 21% { opacity: 0; } 93% { opacity: 1; } }
@keyframes bkT2 { 0% { opacity: 0; } 21% { opacity: 1; } 48% { opacity: 0; } }
@keyframes bkT3 { 0% { opacity: 0; } 48% { opacity: 1; } 68% { opacity: 0; } }
@keyframes bkT4 { 0% { opacity: 0; } 68% { opacity: 1; } 93% { opacity: 0; } }

/* ---- Date (Pinky): black, neon #ff2e7e, italic serifs ---- */
.s-pinky { background: #000; }
.pk-glow { position: absolute; left: 5%; top: 32%; width: 90%; height: 32%; background: radial-gradient(closest-side, rgba(255, 46, 126, 0.3), transparent); }
.pk-line { position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: rgba(255, 255, 255, 0.1); }
.pk-logo { position: absolute; top: 66px; left: 0; right: 0; text-align: center; font: italic 400 18px var(--font-serif); color: rgba(255, 255, 255, 0.92); }
.pk-bubble {
  position: absolute; left: 22px; right: 22px; top: 124px; padding: 13px 16px; text-align: center; color: #fff;
  font: italic 700 15px/1.25 "Bodoni Moda", Georgia, serif; background: #16050d; border: 1.5px solid #ff2e7e; border-radius: 14px;
  box-shadow: 0 0 20px rgba(255, 46, 126, 0.55), inset 0 0 14px rgba(255, 46, 126, 0.22);
}
.pk-bubble::before, .pk-bubble::after { content: ""; position: absolute; left: 16px; border: solid transparent; border-bottom: 0; }
.pk-bubble::before { bottom: -10px; border-width: 10px 9px 0; border-top-color: #ff2e7e; }
.pk-bubble::after { bottom: -7.5px; left: 17.5px; border-width: 8px 7.5px 0; border-top-color: #16050d; }
.pk-heart { position: absolute; right: -8px; top: -12px; font-style: normal; font-size: 22px; line-height: 1; color: #ff2e7e; filter: drop-shadow(0 0 6px rgba(255, 46, 126, 0.9)); }
.pk-yes, .pk-no { position: absolute; left: 0; right: 0; text-align: center; font: italic 400 66px/1 var(--font-serif); }
.pk-yes { top: 218px; color: #ff2e7e; text-shadow: 0 0 30px rgba(255, 46, 126, 0.5); }
.pk-no { top: 424px; color: #d6d6d6; }
.pscreen[data-s="on"] .pk-bubble { animation: pkPop 0.6s 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2) both, pkGlow 2.6s 1s ease-in-out infinite; }
.pscreen[data-s="on"] .pk-heart { animation: pkBeat 1.3s ease-in-out infinite; }
.pscreen[data-s="on"] .pk-yes { animation: pkBreath 3s ease-in-out infinite; }
@keyframes pkPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes pkGlow { 50% { box-shadow: 0 0 30px rgba(255, 46, 126, 0.8), inset 0 0 18px rgba(255, 46, 126, 0.32); } }
@keyframes pkBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes pkBreath { 50% { text-shadow: 0 0 44px rgba(255, 46, 126, 0.85); } }

/* ---- WinXP: Bliss desktop, Luna window, Tahoma ---- */
.s-xp { background: #2a7bde; font-family: Tahoma, Verdana, Arial, sans-serif; color: #fff; }
.xp-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(40px 16px at 22% 27%, rgba(255, 255, 255, 0.92), transparent 70%),
    radial-gradient(52px 18px at 78% 20%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(60px 20px at 64% 46%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(34px 12px at 12% 52%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(180deg, #1a63d8 0%, #3b90e8 45%, #8fc6f5 72%);
}
.xp-hill {
  position: absolute; left: -40%; top: 60%; width: 190%; height: 80%; border-radius: 50% 50% 0 0 / 22% 22% 0 0; transform: rotate(-7deg);
  background: radial-gradient(60% 40% at 30% 10%, #93d052, transparent 70%), linear-gradient(180deg, #63b333 0%, #3f9a1e 45%, #2c7a12 100%);
}
.xp-icons { position: absolute; left: 6px; top: 42px; display: flex; flex-direction: column; gap: 8px; }
.xp-icon { width: 58px; text-align: center; font-size: 7.5px; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.pscreen .xp-icon svg { display: block; width: 24px; height: 24px; margin: 0 auto 2px; stroke: none; fill: none; }
.xp-icon svg * { stroke-width: 1; }
.xp-icon span { display: inline-block; padding: 0 2px; }
.xp-window { position: absolute; left: 50px; right: 6px; top: 178px; border-radius: 7px 7px 0 0; border: 3px solid #0a4fd8; border-top: 0; background: #0a4fd8; box-shadow: 0 8px 22px rgba(0, 20, 80, 0.5); opacity: 0; }
.xp-title { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 3px 0 5px; border-radius: 6px 6px 0 0; font-size: 8.5px; color: #fff; text-shadow: 1px 1px 0 rgba(0, 20, 90, 0.7);
  background: linear-gradient(180deg, #3d95ff 0%, #0a5fe8 12%, #0553df 55%, #0a5fe8 88%, #0844b8 100%); }
.pscreen .xp-title svg { stroke: none; flex: none; }
.xp-title b { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-wb { display: flex; gap: 2px; }
.xp-wb i { position: relative; width: 13px; height: 13px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(180deg, #5fa0ff, #2a68e8); display: grid; place-items: center; font: 700 8px/1 Tahoma, sans-serif; color: #fff; }
.xp-wb i.x { background: linear-gradient(180deg, #f0876a, #d6401c); }
.xp-wb i:nth-child(1)::after { content: "_"; margin-top: -4px; }
.xp-wb i:nth-child(2)::after { content: "□"; font-size: 9px; }
.xp-wb i.x::after { content: "✕"; font-size: 7px; }
.xp-menu { display: flex; gap: 9px; padding: 3px 7px; font-size: 7.5px; color: #111; background: #ece9d8; border-bottom: 1px solid #cfcbb6; }
.xp-body { padding: 11px 8px 12px; text-align: center; background: #f6f4ea; }
.pscreen .xp-heart { width: 28px; height: 25px; margin: 0 auto 6px; display: block; stroke: none; }
.xp-body p { margin: 0 0 11px; font-size: 14px; font-weight: 700; line-height: 1.2; color: #12315d; }
.xp-btns { display: flex; gap: 7px; justify-content: center; }
.xp-b { padding: 5px 9px; font-size: 9px; color: #062b59; background: linear-gradient(180deg, #fff, #ecebe5 85%, #d6d0c5); border: 1px solid #003c74; border-radius: 3px; }
.xp-b.def { box-shadow: inset 0 0 0 1px #6fa0f0, inset 0 0 0 2px #b9d3fb; }
.pscreen .xp-cursor { position: absolute; left: 0; top: 0; width: 12px; height: 19px; opacity: 0; stroke: none; z-index: 4; }
.xp-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 5px; background: linear-gradient(180deg, #3d8af5 0%, #245edb 15%, #1f52c8 85%, #1a44a8 100%); border-top: 1px solid #4d92f7; }
.xp-start { align-self: stretch; display: flex; align-items: center; gap: 3px; padding: 0 11px 0 7px; border-radius: 0 10px 10px 0; font: italic 700 12px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, #5cc05c 0%, #2f9a2f 20%, #2b8a2b 80%, #237523 100%); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); }
.xp-start i { font-style: normal; font-size: 10px; }
.xp-quick { width: 6px; }
.xp-task { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 3px; font-size: 7.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, #1f57cf, #1447b5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); opacity: 0; }
.xp-tray { align-self: stretch; display: flex; align-items: center; gap: 5px; padding: 0 8px; margin-left: auto; font-size: 8px; background: linear-gradient(180deg, #19a0f5, #0f8ae8 20%, #0b7fdc); border-left: 1px solid #0b3f9a; }
.xp-tray i { font-style: normal; }
.pscreen[data-s="on"] .xp-cursor { animation: xpCursor 1.3s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both, msGone 0.25s 2.5s forwards; }
.pscreen[data-s="on"] .xp-invite span { animation: xpSel 0.01s 1.7s forwards; }
.pscreen[data-s="on"] .xp-window { animation: xpPop 0.45s 1.95s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.pscreen[data-s="on"] .xp-task { animation: msShow 0.2s 2s both; }
@keyframes xpCursor { from { opacity: 1; transform: translate(170px, 440px); } 78% { transform: translate(30px, 262px) scale(1); } 88% { transform: translate(30px, 262px) scale(0.82); } to { opacity: 1; transform: translate(30px, 262px) scale(1); } }
@keyframes xpSel { to { background: #316ac5; outline: 1px dotted #fff; } }
@keyframes xpPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* ---- Pixel: Game Boy LCD (olive #9bb477, ink #20351b) ---- */
.s-pixel { background: #9bb477; color: #20351b; font-family: LCD, monospace; }
.s-pixel::before {
  content: ""; position: absolute; inset: 0; opacity: 0.2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 3h4M3 0v4' stroke='%2320351b' stroke-width='.4'/%3E%3C/svg%3E");
}
.pscreen .px-scene { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
.px-top { position: absolute; top: 38px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; font-size: 8px; letter-spacing: 0.04em; }
.px-net { flex: 1; }
.px-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.px-bars i { width: 3px; background: #20351b; }
.px-bars i:nth-child(1) { height: 4px; } .px-bars i:nth-child(2) { height: 7px; } .px-bars i:nth-child(3) { height: 10px; } .px-bars i:nth-child(4) { height: 13px; }
.px-batt { display: flex; gap: 1px; width: 22px; height: 10px; padding: 1px; border: 2px solid #20351b; }
.px-batt i { flex: 1; background: #20351b; }
.px-logo { position: absolute; top: 60px; left: 0; right: 0; text-align: center; font-size: 15px; letter-spacing: 0.08em; }
.px-new { position: absolute; top: 100px; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: 0.06em; }
.px-title { position: absolute; top: 116px; left: 66px; right: 66px; text-align: center; font-size: 24px; line-height: 1.15; }
.px-btns { position: absolute; left: 14px; right: 14px; bottom: 36px; display: flex; justify-content: space-between; font-size: 17px; }
.px-cap { position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; font-size: 6px; letter-spacing: 0.06em; }
.pscreen[data-s="on"] .px-heart { animation: pxBeat 1s steps(1) infinite; }
@keyframes pxBeat { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---- Petal Isle (bunny.56moments.com): the cloud intro, a tap on «Явцгаая», and the clouds
   part on the island — a shot of the real 3D scene — where the heart stones wait ---- */
.s-petal { background: #97acd2; font-family: Nunito, var(--font-display); color: #6d3f58; }
.pt-world { position: absolute; inset: 0; transform-origin: 50% 64%; }
.pt-shot { position: absolute; inset: 0; background: url("../assets/img/webcard/petal-isle.webp") 50% 22px / 100% auto no-repeat; }
.pt-glow { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; opacity: 0.25; mix-blend-mode: screen; }
.pt-g1 { left: 79px; top: 378px; background: radial-gradient(closest-side, rgba(255, 175, 210, 0.95), rgba(255, 175, 210, 0)); }
.pt-g2 { left: 182px; top: 378px; background: radial-gradient(closest-side, rgba(205, 185, 255, 0.95), rgba(205, 185, 255, 0)); }
.pt-g2 { animation-delay: -1.3s !important; }
.pt-tap-heart { left: 79px; top: 380px; }
.pt-burst i { position: absolute; left: 79px; top: 366px; font-style: normal; font-size: 13px; line-height: 1; color: #ff7fb0; opacity: 0; text-shadow: 0 2px 6px rgba(200, 60, 120, 0.35); }
.pt-burst i:nth-child(2) { --dx: -26px; font-size: 10px; color: #ffa8cb; }
.pt-burst i:nth-child(3) { --dx: 24px; font-size: 15px; }
.pt-burst i:nth-child(4) { --dx: -12px; font-size: 9px; color: #d9b8ff; }
.pt-burst i:nth-child(5) { --dx: 36px; font-size: 11px; color: #ffa8cb; }
.pt-burst i:nth-child(6) { --dx: -38px; font-size: 12px; }
.pt-petals i { position: absolute; top: -10px; width: 7px; height: 5px; border-radius: 60% 40% 60% 40%; background: #ffb7d2; opacity: 0; }
.pt-petals i:nth-child(1) { left: 12%; animation-delay: 0.3s !important; }
.pt-petals i:nth-child(2) { left: 34%; animation-delay: 1.6s !important; }
.pt-petals i:nth-child(3) { left: 58%; animation-delay: 0.9s !important; }
.pt-petals i:nth-child(4) { left: 80%; animation-delay: 2.4s !important; }
.pt-petals i:nth-child(5) { left: 46%; animation-delay: 3.3s !important; }
.pt-petals i:nth-child(6) { left: 22%; animation-delay: 4.1s !important; }
.pt-intro { position: absolute; inset: 0; overflow: hidden; }
.pt-sky { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, #fffafd 0%, #fdeff7 38%, #eceefc 70%, #d8e8f9 100%); }
.pt-puff {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * 0.62); margin: calc(var(--s) * -0.31) 0 0 calc(var(--s) * -0.5); border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fff 0%, #fff 30%, #fefbfdf2 42%, #f8f1f8bf 52%, #f5eef666 61%, #f5eef61a 67%, #f5eef600 71%);
}
.pt-puff.r { background: radial-gradient(circle at 50% 36%, #fffafc 0%, #fff6f9 30%, #fff0f6f2 42%, #fde6efbf 52%, #fbe3ed66 61%, #fbe3ed1a 67%, #fbe3ed00 71%); }
.pt-puff.l { background: radial-gradient(circle at 50% 36%, #fdfcff 0%, #f9f7ff 30%, #f3f0fef2 42%, #ebe6fcbf 52%, #e8e2fb66 61%, #e8e2fb1a 67%, #e8e2fb00 71%); }
.pt-hud { position: absolute; top: 36px; left: 10px; right: 10px; display: flex; align-items: center; gap: 4px; }
.pt-badge, .pt-ic { background: rgba(41, 106, 140, 0.4); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.pt-badge { margin-right: auto; padding: 4px 8px; border-radius: 20px; font-size: 6.6px; font-weight: 700; white-space: nowrap; }
.pt-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; line-height: 1; }
.pt-card { position: absolute; left: 12px; right: 12px; top: 192px; text-align: center; }
.pt-eyebrow { display: block; margin-bottom: 11px; font-size: 5.6px; letter-spacing: 0.3em; color: #b9809d; }
.pt-card h5 { margin: 0 0 10px; font: 500 28px/1.04 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.01em; color: #6d3f58; }
.pt-card h5 em { font-style: italic; color: #d86d9e; }
.pt-card p { max-width: 180px; margin: 0 auto 18px; font-size: 8.2px; line-height: 1.7; color: #8d6479; }
.pt-go {
  position: relative; display: inline-block; padding: 10px 24px; border-radius: 999px; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  background: linear-gradient(120deg, #ff8fb8, #f4a9d0 55%, #c9a8f2); box-shadow: 0 7px 20px #e57ba455, inset 0 1px 0 #ffffff80;
}
.pscreen[data-s="on"] .pt-intro { animation: ptIntro 11s ease-in-out infinite; }
.pscreen[data-s="on"] .pt-puff { animation: ptPart 11s cubic-bezier(0.55, 0, 0.2, 1) infinite; }
.pscreen[data-s="on"] .pt-card { animation: ptCard 11s ease infinite; }
.pscreen[data-s="on"] .pt-go .pt-tap { animation: ptTapGo 11s ease-out infinite; }
.pscreen[data-s="on"] .pt-world { animation: ptZoom 11s ease-out infinite; }
.pscreen[data-s="on"] .pt-glow { animation: ptGlow 2.6s ease-in-out infinite; }
.pscreen[data-s="on"] .pt-tap-heart { animation: ptTapHeart 11s ease-out infinite; }
.pscreen[data-s="on"] .pt-burst i { animation: ptBurst 11s ease-out infinite; }
.pscreen[data-s="on"] .pt-burst i:nth-child(2) { animation-delay: 0.12s; }
.pscreen[data-s="on"] .pt-burst i:nth-child(3) { animation-delay: 0.22s; }
.pscreen[data-s="on"] .pt-burst i:nth-child(4) { animation-delay: 0.3s; }
.pscreen[data-s="on"] .pt-burst i:nth-child(5) { animation-delay: 0.4s; }
.pscreen[data-s="on"] .pt-burst i:nth-child(6) { animation-delay: 0.5s; }
.pscreen[data-s="on"] .pt-petals i { animation: ptFall 5s linear infinite; }
@keyframes ptIntro { 0%, 29% { opacity: 1; } 37%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ptPart { 0%, 28% { transform: none; } 38%, 92% { transform: translate(var(--dx), var(--dy)) scale(1.5); } 100% { transform: none; } }
@keyframes ptCard { 0%, 28% { opacity: 1; transform: none; } 33%, 94% { opacity: 0; transform: translateY(8px) scale(0.95); } 100% { opacity: 1; transform: none; } }
@keyframes ptTapGo { 0%, 20% { opacity: 0; transform: scale(0.3); } 22% { opacity: 1; } 28%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ptZoom { 0%, 28% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ptGlow { 50% { opacity: 0.85; transform: scale(1.12); } }
@keyframes ptTapHeart { 0%, 66% { opacity: 0; transform: scale(0.3); } 68% { opacity: 1; } 74%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ptBurst { 0%, 68% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 71% { opacity: 1; } 88%, 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -120px) scale(1.15); } }
@keyframes ptFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 0.9; } 100% { opacity: 0; transform: translate(26px, 560px) rotate(260deg); } }

/* ---------- the pills: burst out of the phone, scatter, then dock as the nav ---------- */
.phone-pills { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tool-pill {
  position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  border: 0; border-radius: 100px; background: #fff; color: #0b0b12; cursor: pointer;
  font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.12);
  opacity: 0; pointer-events: none; will-change: transform, opacity; transition: background-color 0.3s, color 0.3s;
}
.tool-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); transition: transform 0.3s; }
.tool-pill.is-live { pointer-events: auto; }
.tool-pill.is-live:hover, .tool-pill.is-on { background: #0b0b12; color: #fff; }
.tool-pill.is-on { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32), 0 10px 26px -10px rgba(0, 0, 0, 0.5); }
.tool-pill.is-live:hover i { transform: scale(1.7); }
.tool-pill:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* ---------- copy: one block per slide, each in its edition's own style ---------- */
.phone-copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pfeature { position: absolute; inset: 0; display: flex; align-items: center; visibility: hidden; }
.pfeature.text-l { justify-content: flex-start; padding-left: clamp(28px, 6vw, 110px); }
.pfeature.text-r { justify-content: flex-end; padding-right: clamp(28px, 6vw, 110px); }
.pf-inner { width: min(380px, 29vw); will-change: transform, opacity; }
.pf-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.06em; color: #fff; }
.pf-kicker b { font-weight: 500; }
.pf-kicker i { width: 38px; height: 1px; background: rgba(255, 255, 255, 0.55); }
.pf-kicker span { opacity: 0.6; }
.pfeature h4 { margin: 0 0 16px; font-size: clamp(2rem, 3.3vw, 3.1rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.pfeature h4 em { font-style: italic; }
.pf-text { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pf-tags li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
}
.pf-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pf-tags li.pf-price::before { display: none; }
.pf-tags li.pf-price:empty { display: none; }
.pf-link {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 6px 6px 6px 20px; border-radius: 100px; pointer-events: auto;
  background: #fff; color: #0b0b12; font: 500 0.92rem/1 var(--font-display); letter-spacing: -0.005em; text-decoration: none;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.pf-link i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #0b0b12; color: #fff; font-style: normal; font-size: 1rem;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s, color 0.3s;
}
.pf-link i::before {
  /* drawn, not the ↗ character: phones (iPhones especially) render that as a colour emoji */
  content: ""; width: 46%; height: 46%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pf-link:hover i { transform: rotate(45deg); background: var(--accent); color: #fff; }
.pf-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* Scrapbook — Nunito, glass notices over dried grass, the cover's deep maroon */
.t-scrap, .t-scrap .pf-text, .t-scrap .pf-tags li, .t-scrap .pf-link { font-family: Nunito, var(--font-display); }
.t-scrap h4 { font-family: Nunito, var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; color: #fff4ee; }
.t-scrap .pf-kicker { color: #f5c9b6; }
.t-scrap .pf-kicker i { background: rgba(245, 201, 182, 0.6); }
.t-scrap .pf-text { color: rgba(255, 240, 233, 0.86); }
.t-scrap .pf-tags li { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.26); font-weight: 700; }
.t-scrap .pf-tags li::before { background: #f5c9b6; }
.t-scrap .pf-link { background: #fff; color: #2a0a0a; font-weight: 800; }
.t-scrap .pf-link i { background: #2a0a0a; color: #fff; }

/* Box — black stage, the box's purple, the play button's pink, mono step labels */
.t-box h4 { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -0.035em; }
.t-box h4 em { font: inherit; letter-spacing: inherit; color: #b48cff; }
.t-box .pf-kicker { color: #c9b3ff; }
.t-box .pf-kicker i { background: rgba(201, 179, 255, 0.55); }
.t-box .pf-tags li { background: #161616; border: 1px solid rgba(255, 255, 255, 0.1); color: #cfcfcf; font: 600 0.7rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.t-box .pf-tags li::before { background: #e0458f; }
.t-box .pf-tags li.pf-price { text-transform: none; }
.t-box .pf-link { background: #e0458f; color: #fff; box-shadow: 0 10px 26px -8px rgba(224, 69, 143, 0.6); }
.t-box .pf-link i { background: #fff; color: #e0458f; }

/* Book — Poppins on a cloudy sky, the slider's orange-to-pink */
.t-book, .t-book .pf-text, .t-book .pf-tags li, .t-book .pf-link { font-family: Poppins, var(--font-display); }
.t-book h4 { font-family: Poppins, var(--font-display); font-weight: 600; letter-spacing: -0.035em; color: #fff; text-shadow: 0 4px 24px rgba(36, 46, 90, 0.35); }
.t-book h4 em { font: inherit; letter-spacing: inherit; color: #ffd2bd; }
.t-book .pf-kicker i { background: rgba(255, 255, 255, 0.6); }
.t-book .pf-text { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(36, 46, 90, 0.3); }
.t-book .pf-tags li { background: rgba(8, 4, 12, 0.6); border: 1px solid rgba(255, 255, 255, 0.13); }
.t-book .pf-tags li::before { background: linear-gradient(90deg, #e8602a, #c4507a); }
.t-book .pf-link { background: linear-gradient(90deg, #e8602a, #c4507a); color: #fff; font-weight: 600; box-shadow: 0 10px 26px -8px rgba(196, 80, 122, 0.6); }
.t-book .pf-link i { background: #fff; color: #c4507a; }

/* Date (Pinky) — neon pink, italic serifs */
.t-date h4 { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1; font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.t-date h4 em { color: #ff2e7e; text-shadow: 0 0 28px rgba(255, 46, 126, 0.55); }
.t-date .pf-kicker { color: #ff2e7e; }
.t-date .pf-kicker i { background: rgba(255, 46, 126, 0.55); }
.t-date .pf-text { color: rgba(255, 255, 255, 0.72); }
.t-date .pf-tags li { background: rgba(255, 46, 126, 0.1); border: 1px solid rgba(255, 46, 126, 0.55); color: #ffd3e4; }
.t-date .pf-tags li::before { background: #ff2e7e; box-shadow: 0 0 8px #ff2e7e; }
.t-date .pf-link { background: #ff2e7e; color: #fff; box-shadow: 0 0 22px rgba(255, 46, 126, 0.55); }
.t-date .pf-link i { background: #fff; color: #ff2e7e; }

/* WinXP — Tahoma, Luna buttons, start-button green */
.t-xp, .t-xp .pf-text, .t-xp h4, .t-xp .pf-kicker, .t-xp .pf-tags li, .t-xp .pf-link { font-family: Tahoma, Verdana, Arial, sans-serif; }
.t-xp h4 { font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.9rem, 3.2vw, 2.9rem); text-shadow: 2px 2px 0 rgba(0, 40, 130, 0.55); }
.t-xp .pf-text { text-shadow: 1px 1px 0 rgba(0, 40, 130, 0.45); color: #fff; }
.t-xp .pf-tags li { border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe5 85%, #d6d0c5); border: 1px solid #003c74; color: #062b59; font-weight: 400; font-size: 0.84rem; }
.t-xp .pf-tags li::before { content: "♥"; width: auto; height: auto; background: none; border-radius: 0; color: #e8455f; font-size: 0.75rem; line-height: 1; }
.t-xp .pf-link { border-radius: 14px; background: linear-gradient(180deg, #5cc05c, #2f9a2f 25%, #2b8a2b 80%, #237523); color: #fff; font-style: italic; font-weight: 700; font-size: 1rem; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45); }
.t-xp .pf-link i { background: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); font-style: normal; }

/* Pixel — LCD type, ink on olive, square corners */
.t-pixel, .t-pixel .pf-text, .t-pixel h4, .t-pixel .pf-kicker, .t-pixel .pf-tags li, .t-pixel .pf-link { font-family: LCD, monospace; color: #20351b; }
.t-pixel h4 { font-weight: 400; letter-spacing: 0; line-height: 1.08; font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
.t-pixel .pf-text { font-size: 1.1rem; line-height: 1.35; }
.t-pixel .pf-kicker { font-size: 0.95rem; letter-spacing: 0.04em; }
.t-pixel .pf-kicker i { background: #20351b; height: 2px; }
.t-pixel .pf-tags li { border-radius: 0; background: transparent; border: 2px solid #20351b; font-size: 0.95rem; font-weight: 400; padding: 7px 12px; }
.t-pixel .pf-tags li::before { border-radius: 0; background: #20351b; }
.t-pixel .pf-link { border-radius: 0; background: #20351b; color: #9bb477; box-shadow: 4px 4px 0 rgba(32, 53, 27, 0.35); font-size: 1rem; letter-spacing: 0.04em; }
.t-pixel .pf-link i { border-radius: 0; background: #9bb477; color: #20351b; }

/* Petal Isle — the intro's pastel sky: plum Cormorant, rose accents, Nunito */
.t-petal, .t-petal .pf-text, .t-petal .pf-tags li, .t-petal .pf-link { font-family: Nunito, var(--font-display); }
.t-petal h4 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; font-size: clamp(2.5rem, 4.3vw, 3.9rem); line-height: 1.02; color: #6d3f58; }
.t-petal h4 em { font-family: inherit; font-weight: inherit; color: #d86d9e; }
.t-petal .pf-kicker { color: #b9809d; }
.t-petal .pf-kicker i { background: rgba(185, 128, 157, 0.55); }
.t-petal .pf-text { color: #8d6479; }
.t-petal .pf-tags li { background: #fff; color: #6d3f58; box-shadow: 0 6px 16px -6px rgba(150, 110, 170, 0.35); }
.t-petal .pf-tags li::before { background: #d86d9e; }
.t-petal .pf-link { background: linear-gradient(120deg, #ff8fb8, #f4a9d0 55%, #c9a8f2); color: #fff; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 10px 26px -8px rgba(229, 123, 164, 0.6); }
.t-petal .pf-link i { background: #fff; color: #d86d9e; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .phone-intro { justify-content: flex-start; padding-top: 14vh; }
  .pi-row { flex-direction: column; gap: 0 !important; }
  .phone-intro h3 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .pi-l, .pi-r { text-align: center; }
  .phone-intro-sub { display: none; }
  .phone-ring-copy { padding-bottom: 14vh; }
  .pfeature.text-l, .pfeature.text-r { align-items: flex-end; justify-content: flex-start; padding: 0 22px var(--copy-pad, 120px); }
  .pf-inner { width: 100%; }
  .pfeature h4 { margin-bottom: 8px; font-size: 1.6rem; }
  .t-scrap h4, .t-date h4, .t-petal h4, .t-book h4 { font-size: 2rem; }
  .pf-kicker { margin-bottom: 8px; }
  .pf-text { font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pf-tags { display: none; }
  .pf-link { margin-top: 12px; padding: 4px 4px 4px 16px; font-size: 0.85rem; }
  .pf-link i { width: 28px; height: 28px; }
  .tool-pill { padding: 9px 12px; gap: 6px; font-size: 0.62rem; }
  .tool-pill i { width: 6px; height: 6px; }
}

/* ---------- lite mode (phones, low-memory devices): a flat card instead of a stack of 3D layers ---------- */
.wcp.is-lite .phone-stage { perspective: none; }
.wcp.is-lite .phone { transform-style: flat; }
.wcp.is-lite .phone-layers, .wcp.is-lite .phone-btn, .wcp.is-lite .phone-planes, .wcp.is-lite .phone-grid { display: none; }
.wcp.is-lite .phone-front { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 6px #0a0a10, 0 26px 44px -18px rgba(0, 0, 0, 0.55); }
.wcp.is-lite .pscreen { transition: none; transform: none; }
.wcp.is-lite .pscreen:not([data-s="on"]) { display: none; }
.wcp.is-lite .pscreen[data-s="on"] { animation: wcpScreenIn 0.45s ease-out both; }
.wcp.is-lite .pk-heart { filter: none; }
@keyframes wcpScreenIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pscreen, .pscreen *, .pscreen *::before, .pscreen *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .s-scrap *, .s-box *, .s-book *, .s-petal * { animation: none !important; }
}

/* the showcase is the section's last part: no extra space below it */
.webcard { padding-bottom: 0; }