/* Syatr-specific refinements. Shared navigation lives outside .syatr-shell. */
.syatr-skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 1000;
  padding: 12px 20px;
  background: #d51f32;
  color: #fff8ed;
}
.syatr-skip-link:focus { top: 12px; }
.syatr-shell { width: 100%; }
.syatr-shell .hero-intro {
  margin: 0 0 28px;
  max-width: 430px;
  color: #ddd4c5;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.95;
  letter-spacing: .03em;
  text-shadow: 0 2px 16px #0009;
}
.syatr-shell .hero-image {
  transition: opacity .35s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.syatr-shell .hero { touch-action: pan-y; }
.syatr-shell .syatr-carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-left: auto;
  padding: 5px;
  color: #f1eee5;
  background: #09090b80;
  border: 1px solid #f1eee533;
  backdrop-filter: blur(16px);
}
.syatr-shell .syatr-carousel-controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #f1eee5;
  font-size: 21px;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease;
}
.syatr-shell .syatr-carousel-controls button:hover { background: #db2336; color: white; }
.syatr-shell .syatr-carousel-controls button:focus-visible { outline-offset: -3px; }
.syatr-shell .syatr-carousel-controls [data-counter] {
  min-width: 54px;
  text-align: center;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.syatr-shell .edition-action { margin-top: auto; }
.syatr-shell .edition-action-button {
  width: 100%;
  min-height: 46px;
  border-color: #635c53;
  background: #222022;
  color: #eee6d9;
}
.syatr-shell .edition-action-button:hover { border-color: #d52b3b; background: #501a25; }
.syatr-shell .edition-action-button.primary { background: #d51f32; border-color: #d51f32; color: #fff3e7; }
.syatr-shell .edition-action-button.primary:hover { background: #f0263a; border-color: #f0263a; }
.syatr-shell .feature-list button {
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #ffffff55;
  text-underline-offset: 4px;
}
.syatr-shell .feature-list button:hover { color: #f1eee5; }
.syatr-shell .story-copy .story-link { padding-inline: 0; text-align: left; }
.syatr-shell .comparison-table-scroll { scrollbar-color: #8c3640 #151517; }
.syatr-shell .feature-menu-panel { max-height: min(470px, 70vh); overflow-y: auto; }
.syatr-noscript { margin: 0; padding: 16px 24px; text-align: center; background: #29151a; color: #f1eee5; font-size: 13px; }
@media (max-width: 1050px) {
  .syatr-shell .section-navigation-inner { flex-wrap: wrap; gap: 0; padding-bottom: 12px; }
  .syatr-shell .section-links { width: 100%; justify-content: space-between; }
  .syatr-shell .section-actions { margin-left: auto; }
}
@media (max-width: 680px) {
  .syatr-shell .hero { min-height: 650px; height: auto; padding-block: 95px 140px; }
  .syatr-shell .hero-content { padding-block: 0; }
  .syatr-shell .hero-intro { max-width: 340px; margin-bottom: 25px; font-size: 13px; }
  .syatr-shell .hero-bottom { flex-wrap: wrap; row-gap: 16px; bottom: 22px; align-items: center; }
  .syatr-shell .hero-bottom > a { position: static; transform: none; margin-left: auto; }
  .syatr-shell .syatr-carousel-controls { flex-basis: auto; margin-left: auto; }
  .syatr-shell .hero-bottom > span:first-child { flex-basis: calc(100% - 140px); }
  .syatr-shell .hero-bottom > a { order: 3; margin-left: 0; }
  .syatr-shell .hero-bottom .syatr-carousel-controls { order: 4; }
  .syatr-shell .section-actions { width: 100%; margin-left: 0; }
  .syatr-shell .section-actions .button { flex: 1; justify-content: center; }
  .syatr-shell .hero-actions .button { min-height: 48px; }
  .syatr-shell .story-copy { padding-inline: 0; }
}
@media (max-width: 420px) {
  .syatr-shell .hero h1 { font-size: clamp(52px, 15vw, 63px); }
  .syatr-shell .hero { min-height: 630px; padding-top: 75px; }
  .syatr-shell .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; max-width: 250px; }
  .syatr-shell .hero-actions .button { max-width: none; width: 100%; justify-content: space-between; padding-inline: 18px; font-size: 12px; }
  .syatr-shell .product-signature { flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
  .syatr-shell .product-signature > span:first-child { font-size: 17px; }
  .syatr-shell .micro { font-size: 8px; }
  .syatr-shell .section-links { gap: 10px; }
  .syatr-shell .section-links > a,
  .syatr-shell .feature-menu > summary { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .syatr-shell .hero-image { transition: none; }
}


/* 粒子位于照片和遮罩之上，文字与轮播控件之下。 */
.syatr-shell .syatr-embers
{
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce)
{
    .syatr-shell .syatr-embers
    {
        display: none;
    }
}