/* product.css: the /products/deadlock remix (Simple Remix mockup v25), generated by
   deploys/product-remix-20261009/build.py. Every rule is scoped under .p-page; the mockup's tokens are set on
   .p-page (dark) and [data-theme="light"] .p-page, and its keyframes are renamed pr-*. Edit the mockup and
   re-run the build instead of hand-editing this file. */
.p-page {
  --bg-deep: #09090b;
  --bg-card: #151517;
  --border-subtle: #1f1f23;
  --border-active: #333338;
  --text-heading: #ededef;
  --text-primary: #d4d4d8;
  --text-secondary: #8a8a92;
  --text-muted: #5a5a63;
  --accent: #7374ff;
  --accent-fill: #5758f0;
  --on-accent: #ffffff;
  --nav-glass: rgba(9,9,11,0.88);
  --strip-bg: rgba(13,13,17,0.55);
  --strip-line: rgba(127,127,140,0.09);
  --top-wash: #111118;
  --cover-top: #111118;
  --cover-mid: #0a0a0d;
  --star: 255,255,255;
  --star-accent: 104,105,255;
  --amber: #ecb254;
  --mint: #8ccec4;
  --pink: #e876a8;
  --peri: #96b0e2;
  --violet: #a884ec;
  --mint-ink: #8ccec4;
  --pink-ink: #e98bb4;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-dot: 'Pixelify Sans', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --accent-deep: #3a3bb8;
  --nav-h: 58px;
  --strip-h: 30px;
  --scan-ink: rgba(9,9,11,0.12);
  --ok: #6fd6a0;
  --ok-ink: #7ddcaa;
  --rose: #d97c7c;
  --rose-ink: #e59b9b;
  --dc-shadow: rgba(0,0,0,0.55);
  --dc-glow: rgba(104,105,255,0.14);
}
[data-theme="light"] .p-page {
  --bg-deep: #f5f5f7;
  --bg-card: #ffffff;
  --border-subtle: #d8d8de;
  --border-active: #c0c0c8;
  --text-heading: #111118;
  --text-primary: #2a2a32;
  --text-secondary: #55555e;
  --text-muted: #88889a;
  --accent: #4a4cde;
  --accent-fill: #4547d6;
  --nav-glass: rgba(255,255,255,0.9);
  --strip-bg: rgba(236,236,241,0.6);
  --strip-line: rgba(30,30,50,0.08);
  --top-wash: #e8e8f0;
  --cover-top: #f0f0f5;
  --cover-mid: #e8e8f0;
  --star: 30,30,50;
  --star-accent: 74,76,222;
  --amber: #b9852a;
  --mint: #5fb3a6;
  --pink: #d9619a;
  --peri: #6f8fd6;
  --violet: #8b66d8;
  --mint-ink: #237a6d;
  --pink-ink: #b33d74;
  --accent-deep: #2d2f9e;
  --scan-ink: rgba(245,245,247,0.18);
  --ok: #2f9e66;
  --ok-ink: #1f7f50;
  --rose: #c25555;
  --rose-ink: #a33f3f;
  --dc-shadow: rgba(40,40,80,0.18);
  --dc-glow: rgba(74,76,222,0.07);
}
.p-page { font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); -webkit-font-smoothing: antialiased; }  /* the mockup was approved on a 14px page */
.p-page *, .p-page *::before, .p-page *::after {box-sizing: border-box;}
.p-page [hidden] {display: none !important;}
.p-page a {color: inherit; text-decoration: none;}
.p-page button {font-family: inherit;}
.p-page :focus-visible {outline: 2px solid var(--peri); outline-offset: 2px; border-radius: 4px;}
.p-page ::selection {background: var(--accent-fill); color: var(--on-accent);}
.p-page svg.ic {width: 1em; height: 1em; fill: currentColor; flex: none;}
.p-page span.dot {width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); animation: pr-pulse 2.6s ease-in-out infinite;}
.p-page .container {width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 1rem; position: relative; z-index: 1;}
.p-page h1 {font-size: 2.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--text-heading); margin: 0 0 0.75rem; text-wrap: balance;}
.p-page .prism {color: var(--accent);}
.p-page .p-title {position: relative;}
.p-page .p-title::after {content: attr(data-text); content: attr(data-text) / "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--scan-ink) 0 1px, transparent 1px 3px);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: pr-crawl 1.5s steps(3) infinite;}
.p-page .btn {display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; padding: 0.65rem 1.1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s, border-color 0.15s, color 0.15s;}
.p-page .btn-primary {background: var(--accent-fill); color: var(--on-accent);}
.p-page .btn-primary:hover {opacity: 0.88;}
.p-page .btn-ghost {border-color: var(--border-active); color: var(--text-primary);}
.p-page .btn-ghost:hover {border-color: var(--text-muted); color: var(--text-heading);}
.p-page .trust {display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1.6rem; font-size: 0.75rem; color: var(--text-muted);}
.p-page .trust span {display: inline-flex; align-items: center; gap: 0.35rem;}
.p-page .trust svg {color: var(--mint-ink);}
.p-page .badges {display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem;}
.p-page .badge {display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 4px;}
.p-page .badge.mint {color: var(--mint-ink); background: color-mix(in srgb, var(--mint) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);}
.p-page .badge.mint::before {content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; flex: none;}
.p-page .sec {padding-block: 3rem 3rem;}
.p-page .sec-label {font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-ink); margin-bottom: 0.5rem;}
.p-page .sec-heading {font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading); margin: 0 0 0.4rem;}
.p-page svg.ix {width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;}
.p-page .sec-label {color: var(--accent);}
.p-page .badge.mint {color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.15);}
.p-page .trust svg {color: var(--text-muted);}
@media (max-width: 900px) {
  .p-page .trust {justify-content: center;}
}
@media (max-width: 760px) {
  .p-page h1 {font-size: 1.9rem;}
}
@media (prefers-reduced-motion: reduce) {
  .p-page span.dot, .p-page .prism, .p-page .p-title::after {animation: none !important;}
}
.p-page svg.ix {width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;}
.p-page .lb {position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 3.5rem 4.25rem;
  background: rgba(5,5,8,0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.p-page .lb img {max-width: min(1200px, 100%); max-height: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: zoom-in; transition: transform 0.2s ease;}
.p-page .lb img.zoom {transform: scale(2); cursor: zoom-out;}
.p-page .lb-btn {position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(20,20,26,0.82); color: #ededef; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem;}
.p-page .lb-btn:hover {background: rgba(44,44,56,0.92);}
.p-page .lb-x {top: 1rem; right: 1rem;}
.p-page .lb-prev {left: 1rem; top: 50%; transform: translateY(-50%);}
.p-page .lb-next {right: 1rem; top: 50%; transform: translateY(-50%);}
.p-page .lb-count {position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 12px; letter-spacing: 0.08em; color: #a3a3ac;}
.p-page .ia-clip {position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--border-subtle)); box-shadow: 0 30px 70px -30px var(--dc-shadow);}
.p-page .ia-clip video {display: block; width: 100%; height: 100%; object-fit: cover;}
.p-page .ia-clip video {cursor: pointer;}
.p-page .ia-pp {position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #ededef; background: rgba(9,9,11,0.62); border: 1px solid rgba(255,255,255,0.14);
  opacity: 0.75; transition: opacity 0.2s, background 0.2s;}
.p-page .ia-pp:hover, .p-page .ia-pp:focus-visible {opacity: 1; background: rgba(9,9,11,0.85);}
.p-page .ia-pp svg {width: 14px; height: 14px; fill: currentColor;}
.p-page .ia-pp .ia-pp-play {display: none;}
.p-page {position: relative;}
.p-page .p-hero {position: relative; padding-block: 1.2rem 3.2rem;}
.p-page .p-hero .container {z-index: 1;}
.p-page .p-crumb {list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);}
.p-page .p-crumb li {display: inline-flex; align-items: center; gap: 0.45rem;}
.p-page .p-crumb li + li::before {content: '/'; color: var(--border-active);}
.p-page .p-crumb a {color: var(--text-muted);}
.p-page .p-crumb a:hover {color: var(--text-heading);}
.p-page .p-crumb [aria-current] {color: var(--text-secondary);}
.p-page .p-split {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: start;}
.p-page .p-stage {position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-deep);
  border: 1px solid var(--border-subtle); box-shadow: 0 30px 70px -34px var(--dc-shadow);}
.p-page .p-main {display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;}
.p-page .p-main img {display: block; width: 100%; height: 100%; object-fit: cover;}
.p-page .p-zoom {position: absolute; left: 0.6rem; top: 0.6rem; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #ededef; background: rgba(9,9,11,0.62); border: 1px solid rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.2s;}
.p-page .p-main:hover .p-zoom, .p-page .p-main:focus-visible .p-zoom {opacity: 1;}
.p-page .p-arrow {position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #ededef; background: rgba(9,9,11,0.55); border: 1px solid rgba(255,255,255,0.14); opacity: 0.8; transition: opacity 0.2s, background 0.2s;}
.p-page .p-arrow:hover, .p-page .p-arrow:focus-visible {opacity: 1; background: rgba(9,9,11,0.82);}
.p-page .p-prev {left: 0.6rem;}
.p-page .p-next {right: 0.6rem;}
.p-page .p-thumbs {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.6rem;}
.p-page .p-thumb {position: relative; aspect-ratio: 16 / 10; padding: 0; border-radius: 7px; overflow: hidden; cursor: pointer; background: var(--bg-deep);
  border: 1px solid var(--border-subtle); opacity: 0.6; transition: opacity 0.2s, border-color 0.2s;}
.p-page .p-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.p-page .p-thumb:hover, .p-page .p-thumb:focus-visible {opacity: 0.9;}
.p-page .p-thumb.on {opacity: 1; border-color: color-mix(in srgb, var(--peri) 60%, var(--border-active));}
.p-page .p-badges {margin: 0 0 1rem;}
.p-page .p-online {gap: 0.4rem;}
.p-page .p-title {font-size: 3.2rem; letter-spacing: -0.035em; line-height: 1.04; margin: 0 0 0.85rem;}
.p-page .p-desc {color: var(--text-secondary); line-height: 1.65; margin: 0 0 1.4rem;}
.p-page .p-plabel {font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;}
.p-page .tier-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem;}
.p-page .tier {position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.8rem 0.95rem 0.85rem; border-radius: 10px; cursor: pointer; text-align: left; font: inherit;
  color: var(--text-secondary); background: color-mix(in srgb, var(--bg-card) 88%, transparent); border: 1px solid var(--border-active); transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);}
.p-page .tier:not([aria-checked="true"]):hover {border-color: rgba(104,105,255,0.4); background: rgba(104,105,255,0.03); transform: translateY(-1px);}
.p-page .tier[aria-checked="true"] {border-color: var(--accent); background: rgba(104,105,255,0.08); box-shadow: 0 0 0 1.5px var(--accent), 0 0 24px rgba(104,105,255,0.25); transform: translateY(-1px);}
.p-page .tier[aria-checked="true"]:hover {box-shadow: 0 0 0 1.5px var(--accent), 0 0 28px rgba(104,105,255,0.35); transform: translateY(-2px);}
.p-page .tier-pop-badge {position: absolute; top: -0.55rem; right: 0.7rem; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--on-accent); background: var(--accent-fill); border: 1px solid var(--accent);}
.p-page .tier-duration {font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);}
.p-page .tier-price-row {display: inline-flex; align-items: baseline; gap: 0.3rem;}
.p-page .tier-price {font-size: 1.45rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums;}
.p-page .tier-currency {font-size: 0.72rem; color: var(--text-muted);}
.p-page .tier-perday {font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums;}
.p-page .tier[aria-checked="true"] .tier-perday, .p-page .p-save {color: var(--mint-ink);}
.p-page .p-buy, .p-page .p-discord {display: flex; width: 100%; justify-content: center; margin-bottom: 0.55rem;}
.p-page .p-buy {padding-block: 0.8rem; font-size: 0.98rem;}
.p-page .p-trust {margin-top: 0.9rem; flex-wrap: wrap;}
.p-page .sticky-buy {position: fixed; left: 0; right: 0; top: var(--nav-h, 58px); z-index: 900; transform: translateY(-110%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
  background: var(--nav-glass, rgba(13,13,17,0.82)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-subtle);}
.p-page .sticky-buy.show {transform: none; opacity: 1;}
.p-page .sticky-buy-inner {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.55rem;}
.p-page .sticky-buy-info strong {color: var(--text-heading); font-size: 0.92rem;}
.p-page .sticky-buy-plan {margin-left: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink);}
.p-page .sticky-buy-right {display: flex; align-items: center; gap: 0.9rem;}
.p-page .sticky-buy-price {font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums;}
.p-page .sticky-buy-btn {padding: 0.45rem 1rem; font-size: 0.85rem;}
.p-page .p-divider {max-width: 1140px; height: 1px; margin: 0 auto; background: var(--border-subtle);}
.p-page .p-show {padding-block: 3.6rem 3.4rem;}
.p-page .p-sgrid {display: grid; gap: 3.6rem;}
.p-page .p-sitem {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center;}
.p-page .p-sitem.rev {grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);}
.p-page .p-sitem.rev .ia-clip {order: 2;}
.p-page .p-stext {min-width: 0;}
.p-page .p-stag {display: inline-flex; padding: 0.28rem 0.7rem; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 75%, var(--text-heading));
  background: color-mix(in srgb, var(--tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border-subtle));}
[data-theme="light"] .p-page .p-stag {color: color-mix(in srgb, var(--tone) 45%, var(--text-heading));}
.p-page .p-stitle {font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-heading); margin: 0.85rem 0 0.7rem; text-wrap: balance;}
.p-page .p-sdesc {color: var(--text-secondary); line-height: 1.7; margin: 0; max-width: 46ch;}
.p-page .p-head {margin-bottom: 1.8rem;}
.p-page .p-feats {background: color-mix(in srgb, var(--bg-card) 45%, transparent); border-block: 1px solid var(--border-subtle);}
.p-page .p-center {text-align: center;}
.p-page .p-fgrid {counter-reset: pf; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;}
.p-page .p-feat {display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text-heading) 1.5%, transparent) 0 1px, transparent 1px 3px); transition: border-color 0.2s;}
.p-page .p-feat:hover {border-color: var(--border-active);}
.p-page .p-feat {counter-increment: pf;}
.p-page .p-fno::before {content: counter(pf, decimal-leading-zero);}
.p-page .p-fno {flex: none; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.72rem; font-weight: 700; color: var(--mint-ink); padding-top: 0.12rem;}
.p-page .p-ftitle {font-weight: 700; color: var(--text-heading); margin-bottom: 0.2rem;}
.p-page .p-fdesc {font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55;}
.p-page .p-more {display: flex; justify-content: center; margin-top: 1.6rem;}
.p-page .p-narrow {max-width: 720px;}
.p-page .p-faq-list {border-top: 1px solid var(--border-subtle);}
.p-page .p-faq-item {border-bottom: 1px solid var(--border-subtle);}
.p-page .p-faq-q {display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.2rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; text-align: left; color: var(--text-heading);}
.p-page .p-faq-q .ix {flex: none; color: var(--text-muted); transition: transform 0.2s;}
.p-page .p-faq-item.open .p-faq-q .ix {transform: rotate(180deg);}
.p-page .p-faq-a {display: none; padding: 0 0.2rem 1.1rem; color: var(--text-secondary); line-height: 1.7;}
.p-page .p-faq-a p {margin: 0;}
.p-page .p-faq-a a {color: var(--mint-ink);}
.p-page .p-faq-item.open .p-faq-a {display: block;}
.p-page .p-vouch {padding-bottom: 4.5rem;}
.p-page .p-vlead {color: var(--text-secondary); line-height: 1.65; margin: 0 auto 1.4rem; max-width: 52ch;}
@media (max-width: 900px) {
  .p-page .p-split {grid-template-columns: minmax(0, 1fr); gap: 1.6rem;}
  .p-page .p-thumbs {grid-template-columns: repeat(5, minmax(0, 1fr));}
  .p-page .p-title {font-size: 2.3rem;}
  .p-page .p-fgrid {grid-template-columns: minmax(0, 1fr);}
  .p-page .p-hero {padding-bottom: 2.4rem;}
  .p-page .p-sitem, .p-page .p-sitem.rev {grid-template-columns: minmax(0, 1fr); gap: 1.3rem;}
  .p-page .p-sitem.rev .ia-clip {order: 0;}
  .p-page .p-sgrid {gap: 2.6rem;}
  .p-page .p-stitle {font-size: 1.6rem;}
  .p-page .sticky-buy-info .sticky-buy-plan {display: none;}
}
@media (max-width: 560px) {
  .p-page .lb {padding: 3.5rem 0.75rem 4.5rem;}
  .p-page .lb-prev, .p-page .lb-next {top: auto; bottom: 0.7rem; transform: none;}
}
.p-page .p-sdesc a {color: var(--mint-ink); text-underline-offset: 2px;}
.p-page .p-sdesc a:hover {text-decoration: underline;}
.p-page .badge.mint.p-online::before {display: none;}
.p-page .p-title {font-size: clamp(2rem, 7vw, 2.6rem);}
.p-page .p-vwrap {max-width: 880px;}
.p-page .p-vcard2 {position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
  padding: 1.1rem 1.5rem 1.1rem 1.25rem; border-radius: 12px; background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle)); box-shadow: inset 0 0 36px var(--dc-glow);
  transition: border-color 0.3s, box-shadow 0.3s;}
.p-page .p-vcard2:hover {border-color: color-mix(in srgb, var(--accent) 34%, var(--border-subtle)); box-shadow: inset 0 0 36px var(--dc-glow), 0 0 26px rgba(104,105,255,0.10);}
.p-page .p-vcard2::before {content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--mint) 24%, transparent) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 110px 95% at 50px 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 110px 95% at 50px 50%, #000, transparent 75%);}
.p-page .p-vcard2::after {content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background: repeating-linear-gradient(to bottom, var(--scan-ink) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 38%); mask-image: linear-gradient(90deg, #000, transparent 38%);}
.p-page .p-vart {position: relative; z-index: 1; width: 52px; height: 52px;}
.p-page .p-vart::before {content: ''; position: absolute; inset: -45%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%);}
.p-page .p-vfloat {width: 100%; height: 100%; animation: pr-dcfloat 7s ease-in-out infinite;}
.p-page .p-vfloat svg {display: block; width: 100%; height: 100%; overflow: visible; transform: perspective(280px) rotateY(-16deg) rotateX(9deg) rotateZ(3deg);
  filter: drop-shadow(0 8px 10px var(--dc-shadow));}
.p-page .p-vshield {fill: var(--accent);}
.p-page .p-vcheck {fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;}
.p-page .p-vcopy {position: relative; z-index: 1; min-width: 0;}
.p-page .p-vkicker {display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-ink);}
.p-page .p-vkicker::before {content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor;}
.p-page .p-vtitle {font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-heading); margin: 0 0 0.3rem;}
.p-page .p-vcard2 .p-vlead {font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 56ch;}
.p-page .p-vbtn {position: relative; z-index: 1; flex: none; white-space: nowrap;}
@media (max-width: 760px) {
  .p-page .p-vcard2 {grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 1rem; padding: 1.6rem 1.25rem;}
  .p-page .p-vcard2::before {-webkit-mask-image: radial-gradient(ellipse 60% 120px at 50% 50px, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 120px at 50% 50px, #000, transparent 75%);}
  .p-page .p-vcard2::after {-webkit-mask-image: linear-gradient(#000, transparent 45%); mask-image: linear-gradient(#000, transparent 45%);}
  .p-page .p-vcard2 .p-vlead {margin-inline: auto;}
  .p-page .p-vbtn {white-space: normal;}
}
@media (prefers-reduced-motion: reduce) {
  .p-page .p-vfloat {animation: none;}
  .p-page .p-vcard2 {transition: none;}
}
.p-page .p-desc {color: color-mix(in srgb, var(--text-secondary) 60%, var(--text-heading));}
.p-page .p-thumb {opacity: 0.85;}
.p-page .p-thumb:hover, .p-page .p-thumb:focus-visible {opacity: 1;}
.p-page .p-faq-a a.p-chan {display: inline-block; padding: 0 0.32em; border-radius: 4px; font-weight: 600; color: #c9cdfb; background: rgba(88, 101, 242, 0.22); text-decoration: none; transition: background 0.15s, color 0.15s;}
.p-page .p-faq-a a.p-chan:hover {color: #fff; background: #5865f2;}
.p-page .p-faq-a a.p-chan span {opacity: 0.7; margin-right: 0.08em;}
[data-theme="light"] .p-page .p-faq-a a.p-chan {color: #4752c4; background: rgba(88, 101, 242, 0.14);}
[data-theme="light"] .p-page .p-faq-a a.p-chan:hover {color: #fff; background: #5865f2;}

.p-page .badge.p-status { gap: 0.4rem; }
.p-page .badge.p-maint { color: #f2b45c; background: rgba(242,180,92,0.1); border: 1px solid rgba(242,180,92,0.22); }
.p-page .badge.p-off { color: #ff7a7a; background: rgba(255,122,122,0.1); border: 1px solid rgba(255,122,122,0.22); }
.p-page .badge.p-maint .dot, .p-page .badge.p-off .dot { background: currentColor; box-shadow: 0 0 6px currentColor; }
[data-theme="light"] .p-page .badge.p-maint { color: #a96a12; }
[data-theme="light"] .p-page .badge.p-off { color: #c93a3a; }
/* review fixes (2026-10-09) */
.p-page .ia-pp[aria-pressed="true"] .ia-pp-pause { display: none; }
.p-page .ia-pp[aria-pressed="true"] .ia-pp-play { display: inline; }
.p-page .p-title::after { content: none; animation: none; }
.p-page .sticky-buy-btn { white-space: nowrap; }
/* the 10 screenshots (2026-10-11): two rows of five */
.p-page .p-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 359px) { .p-page .sticky-buy-info strong { display: none; } }
@keyframes pr-crawl {to { background-position: 0 3px; }}
@keyframes pr-dcfloat {50% { transform: translateY(-4px); }}
@keyframes pr-pulse {50% { opacity: 0.45; box-shadow: 0 0 2px var(--mint); }}