.product-guide[hidden] { display: none !important; }
.product-guide { position: fixed; inset: 0; z-index: 12000; pointer-events: none; color: #17251c; font-family: "Noto Sans SC Variable", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif; }
.product-guide-spotlight {
  position: fixed;
  left: var(--guide-left, 12px);
  top: var(--guide-top, 12px);
  width: var(--guide-width, 40px);
  height: var(--guide-height, 40px);
  border: 1px solid rgba(116, 181, 137, .92);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(10, 18, 14, .64), 0 0 0 5px rgba(116, 181, 137, .16), 0 18px 55px rgba(7, 24, 14, .3);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
  animation: product-guide-focus .52s ease-out 2;
}
.product-guide-card {
  position: fixed;
  top: 0;
  left: 0;
  width: min(380px, calc(100vw - 24px));
  padding: 20px;
  border: 1px solid rgba(41, 64, 49, .14);
  border-radius: 18px;
  background: rgba(252, 253, 250, .96);
  box-shadow: 0 28px 80px -24px rgba(4, 22, 12, .52), inset 0 1px rgba(255, 255, 255, .92);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  pointer-events: auto;
  animation: product-guide-enter .22s cubic-bezier(.2, .8, .2, 1) both;
  will-change: transform;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
}
.product-guide-card header, .product-guide-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-guide-card header small { color: #2d7650; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.product-guide-card header button { padding: 7px 3px; border: 0; background: transparent; color: #69736c; font: inherit; font-size: 12px; cursor: pointer; }
.product-guide-card h2 { margin: 18px 0 0; color: #17251c; font-size: 21px; line-height: 1.25; }
.product-guide-card p { margin: 8px 0 20px; color: #59665d; font-size: 13px; line-height: 1.65; }
.product-guide-card footer { padding-top: 15px; border-top: 1px solid rgba(41, 64, 49, .1); }
.product-guide-card footer span { color: #7a857d; font-size: 11px; font-variant-numeric: tabular-nums; }
.product-guide-card footer button { min-height: 38px; padding: 8px 15px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.product-guide-back { border: 1px solid rgba(41, 64, 49, .14); background: transparent; color: #435048; }
.product-guide-next { border: 1px solid #245f40; background: #245f40; color: #fff; box-shadow: 0 12px 24px -16px rgba(23, 82, 48, .9); }
.product-guide-card button:focus-visible { outline: 3px solid rgba(70, 135, 91, .25); outline-offset: 2px; }
html.product-guide-open { overscroll-behavior: none; }
@keyframes product-guide-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes product-guide-focus {
  50% { border-color: rgba(134, 206, 157, 1); }
}
@media (max-width: 620px) {
  .product-guide-card { width: calc(100vw - 24px); padding: 18px; border-radius: 16px; }
  .product-guide-card h2 { font-size: 19px; }
  .product-guide-card p { font-size: 12px; }
  .product-guide-card footer { position: sticky; bottom: -18px; margin-inline: -4px; padding: 14px 4px 4px; background: linear-gradient(180deg, rgba(252,253,250,0), rgba(252,253,250,.98) 24%); }
  .product-guide-card footer button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-guide-spotlight { transition: none !important; animation: none !important; }
  .product-guide-card { animation: none !important; }
}