:root {
  --ivory: #f4f0e6;
  --green: #123c34;
  --green-soft: #2c6256;
  --copper: #a66f3f;
  --ink: #20251f;
  --muted: #8b887f;
  --edge: rgba(244, 240, 230, 0.2);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0c2924;
  color: var(--ivory);
  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

button { font: inherit; }

.app {
  width: 100%;
  height: var(--viewport-height, 100svh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(166, 111, 63, 0.16), transparent 35%),
    radial-gradient(circle at 82% 90%, rgba(44, 98, 86, 0.18), transparent 35%),
    #0c2924;
  user-select: none;
}

.topbar {
  min-height: 72px;
  padding: calc(14px + var(--safe-top)) calc(24px + var(--safe-right)) 12px calc(24px + var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--edge);
}

.brand { display: flex; align-items: baseline; gap: 16px; min-width: 0; color: inherit; text-decoration: none; }
.brand:focus-visible { outline: 2px solid var(--ivory); outline-offset: 5px; }
.brand-title { font-family: "Noto Serif SC", "Source Han Serif SC", serif; font-size: 22px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.brand-subtitle { color: #d1a073; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.counter { min-width: 64px; color: rgba(244,240,230,.78); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-align: right; }

.text-button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(244,240,230,.28);
  border-radius: 999px;
  color: var(--ivory);
  background: rgba(244,240,230,.06);
  cursor: pointer;
}
.text-button:hover, .text-button:focus-visible { background: rgba(244,240,230,.14); outline: none; }

.stage {
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 12px;
  padding: 18px max(10px, var(--safe-right)) 10px max(10px, var(--safe-left));
}

.slide-frame {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc((var(--viewport-height, 100svh) - 174px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ivory);
  box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.1);
  touch-action: pan-y;
}

.slide-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity 160ms ease;
  will-change: transform, opacity;
}
.slide-frame.is-loading img { opacity: .22; }

#slide-image {
  z-index: 1;
}

#slide-image.slide-enter-next,
#slide-image.slide-enter-prev {
  z-index: 3;
  opacity: .18;
  filter: blur(1px);
  transition:
    transform 320ms cubic-bezier(.22, .74, .18, 1),
    opacity 260ms ease,
    filter 260ms ease;
}

#slide-image.slide-enter-next { transform: translateX(8%) scale(.988); }
#slide-image.slide-enter-prev { transform: translateX(-8%) scale(.988); }

#slide-image.slide-enter-next.is-active,
#slide-image.slide-enter-prev.is-active {
  opacity: 1;
  filter: none;
  transform: translateX(0) scale(1);
}

.slide-out {
  z-index: 2;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(.22, .74, .18, 1),
    opacity 260ms ease,
    filter 260ms ease;
}

.slide-out-next.is-active {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(-8%) scale(.988);
}

.slide-out-prev.is-active {
  opacity: 0;
  filter: blur(1px);
  transform: translateX(8%) scale(.988);
}

.loading {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(18,60,52,.18);
  border-top-color: var(--copper);
  border-radius: 50%;
  opacity: 0;
  animation: spin 700ms linear infinite;
}
.slide-frame.is-loading .loading { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.nav-button {
  width: 54px;
  height: 84px;
  justify-self: center;
  border: 1px solid rgba(244,240,230,.18);
  border-radius: 999px;
  color: rgba(244,240,230,.88);
  background: rgba(244,240,230,.06);
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.nav-button span { display: block; margin-top: -7px; font: 300 54px/1 Georgia, serif; }
.nav-button:hover, .nav-button:focus-visible { background: rgba(244,240,230,.16); outline: none; transform: scale(1.04); }
.nav-button:disabled { opacity: .25; cursor: default; transform: none; }

.controls {
  min-height: 78px;
  padding: 10px calc(24px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(24px + var(--safe-left));
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
}
.progress-track { width: min(720px, 76vw); height: 2px; overflow: hidden; background: rgba(244,240,230,.16); }
.progress-track span { display: block; height: 100%; width: 10%; background: var(--copper); transition: width 220ms ease; }
.dots { display: flex; gap: 12px; align-items: center; }
.dot { width: 24px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(244,240,230,.38); transition: width 140ms ease, border-radius 140ms ease, background 140ms ease; }
.dot[aria-current="true"]::after { width: 22px; margin-left: -11px; border-radius: 999px; background: var(--copper); }
.dot:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
.help { margin: 0; color: rgba(244,240,230,.52); font-size: 12px; letter-spacing: .03em; }

.orientation-hint { display: none; }
noscript { position: fixed; inset: auto 16px 16px; z-index: 20; padding: 12px; background: #fff; color: #111; }

body.app-immersive .app {
  grid-template-rows: minmax(0, 1fr);
}

body.app-immersive .topbar {
  position: fixed;
  z-index: 30;
  top: calc(8px + var(--safe-top));
  right: calc(8px + var(--safe-right));
  min-height: 0;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 30, 26, .72);
  backdrop-filter: blur(12px);
}

body.app-immersive .brand,
body.app-immersive .controls {
  display: none;
}

body.app-immersive .stage {
  grid-row: 1;
  padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
}

body.app-immersive .slide-frame {
  width: min(100%, calc((var(--viewport-height, 100svh) - 16px - var(--safe-top) - var(--safe-bottom)) * 16 / 9));
}

@media (max-width: 820px) {
  .topbar {
    min-height: 52px;
    padding: calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));
    gap: 10px;
  }
  .brand-title { font-size: 17px; }
  .brand-subtitle { display: none; }
  .top-actions {
    position: fixed;
    z-index: 35;
    top: calc(9px + var(--safe-top));
    right: calc(8px + var(--safe-right));
    gap: 8px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(7,30,26,.58);
    backdrop-filter: blur(10px);
  }
  .counter { min-width: 52px; font-size: 12px; letter-spacing: .04em; }
  .text-button { height: 32px; padding: 0 12px; font-size: 13px; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px max(8px, var(--safe-right)) 8px max(8px, var(--safe-left)); }
  .nav-button {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 64px;
    border: 1px solid rgba(244,240,230,.12);
    background: rgba(7,30,26,.28);
    backdrop-filter: blur(8px);
  }
  .nav-button:hover, .nav-button:focus-visible { transform: translateY(-50%) scale(1.04); }
  .nav-button:disabled { transform: translateY(-50%); }
  .nav-prev { left: max(6px, var(--safe-left)); }
  .nav-next { right: max(6px, var(--safe-right)); }
  .nav-button span { font-size: 46px; }
  .slide-frame { width: min(100%, calc((var(--viewport-height, 100svh) - 126px) * 16 / 9)); }
  .controls { min-height: 58px; padding-top: 6px; gap: 6px; }
  .help { display: none; }
  .dots { gap: 5px; }
  .dot { width: 18px; }
}

@media (orientation: portrait) and (max-width: 820px) {
  body:not(.orientation-dismissed) .orientation-hint {
    display: none;
  }
  .orientation-card { max-width: 310px; text-align: center; }
  .orientation-card h1 { margin: 22px 0 8px; font: 700 28px/1.3 "Noto Serif SC", serif; }
  .orientation-card p { margin: 0; color: rgba(244,240,230,.7); font-size: 15px; }
  .orientation-card button { margin-top: 28px; padding: 11px 22px; border: 1px solid rgba(244,240,230,.3); border-radius: 999px; color: var(--ivory); background: transparent; }
  .phone-icon { width: 78px; height: 120px; margin: auto; border: 4px solid var(--copper); border-radius: 14px; transform: rotate(90deg); animation: breathe 1600ms ease-in-out infinite; }
  .phone-icon span { display: block; width: 24px; height: 4px; margin: 7px auto 0; border-radius: 8px; background: var(--copper); }
  @keyframes breathe { 50% { transform: rotate(90deg) scale(1.06); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}