/* Layout corrections and motion layer. Kept separate from the compact base sheet. */
.hero,
.library-head,
.template-callout,
.feature-strip,
.template-grid { width: 100%; }

.hero-copy,
.library-head > div,
.template-info > div { min-width: 0; }

.viewfinder { width: min(100%, 560px); justify-self: center; }

.template-stage {
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--ratio) / 1;
  isolation: isolate;
}

.template-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: inherit;
  pointer-events: none;
}

.template-stage span { line-height: 1.12; transform: translateZ(0); }
.template-item { overflow: hidden; }
.template-info h2,
.template-info p { overflow-wrap: anywhere; }

/* Motion is enabled only after JS is ready, so content never stays hidden. */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0,24px,0);
  transition: opacity .65s cubic-bezier(.2,.75,.2,1), transform .65s cubic-bezier(.2,.75,.2,1);
}
.motion-ready .reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.motion-ready .reveal-delay-1 { transition-delay: .08s; }
.motion-ready .reveal-delay-2 { transition-delay: .16s; }

.viewfinder {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  transform: perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
}
.viewfinder.is-tilting { transition: box-shadow .45s ease; }
.viewfinder:hover { box-shadow: 0 42px 100px rgba(30,41,33,.3); }
.vf-focus { animation: focus-breathe 2.8s ease-in-out infinite; }
.watermark-demo { animation: watermark-arrive .8s .2s cubic-bezier(.2,.8,.2,1) both; }

.template-item {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.template-item:hover {
  transform: translate3d(0,-7px,0);
  border-color: rgba(111,142,46,.28);
  box-shadow: 0 22px 48px rgba(39,52,42,.12);
}
.template-item .template-stage { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.template-item:hover .template-stage { transform: scale(1.012); }
.template-item button,
.template-item a,
.primary,
.nav-cta { transition: transform .12s ease-out, opacity .12s ease-out, box-shadow .2s ease; }
.template-item button:active,
.template-item a:active,
.primary:active,
.nav-cta:active { transform: scale(.965); opacity: .78; }

dialog[open] { animation: dialog-materialize .28s cubic-bezier(.2,.8,.2,1) both; }
dialog[open]::backdrop { animation: backdrop-arrive .22s ease-out both; }

@keyframes focus-breathe {
  0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes watermark-arrive {
  from { opacity: 0; transform: translate3d(-18px,10px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes dialog-materialize {
  from { opacity: 0; transform: translate3d(0,14px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero { grid-template-columns: minmax(0,1fr) minmax(340px,460px); gap: 5vw; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .template-stage { min-height: 0; }
  .viewfinder { justify-self: center; }
}

@media (max-width: 520px) {
  .nav { height: 68px; }
  .nav-cta { padding: 10px 14px; font-size: 13px; }
  .brand { font-size: 15px; }
  .hero { min-height: auto; padding-left: 20px; padding-right: 20px; }
  .library-head h1 { overflow-wrap: anywhere; }
  .template-item { padding: 10px; border-radius: 20px; }
  .template-info { align-items: flex-start; }
  .template-info .qr-button { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .viewfinder { transform: none !important; }
}

/* Apple-inspired visual system: calm hierarchy, optical type and tactile materials. */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(29,29,31,.10);
  --paper: #f5f5f7;
  --card: rgba(255,255,255,.82);
  --lime: #b9f33d;
  --apple-blue: #0071e3;
  --apple-ease: cubic-bezier(.25,.1,.25,1);
  color-scheme: light;
}

html { background: #f5f5f7; }
body {
  min-width: 320px;
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 78% 9%, rgba(185,243,61,.10), transparent 28rem),
    linear-gradient(180deg,#fbfbfd 0,#f5f5f7 38rem);
}

::selection { color: #111; background: rgba(185,243,61,.65); }

.nav {
  height: 64px;
  padding-inline: max(22px,calc((100vw - 1280px)/2));
  border: 0;
  background: rgba(250,250,252,.72);
  box-shadow: inset 0 -1px rgba(29,29,31,.07);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.brand { gap: 10px; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.brand-icon {
  width: 32px; height: 32px; display: block; object-fit: cover;
  border: 1px solid rgba(29,29,31,.08); border-radius: 9px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.brand-lens {
  width: 29px; height: 29px; border: 0;
  background: radial-gradient(circle at 45% 40%,#8dffda 0 7%,#17392e 9% 25%,#0b0b0c 27% 42%,#fff 44% 50%,#1d1d1f 52%);
  box-shadow: 0 0 0 1px rgba(29,29,31,.08), 0 3px 9px rgba(29,29,31,.12);
}
.nav nav { gap: 8px; }
.nav nav a {
  position: relative; padding: 22px 14px; color: #515154;
  font-size: 13px; font-weight: 500; border: 0;
  transition: color .18s ease;
}
.nav nav a:hover,.nav nav a.active { color: #000; border: 0; }
.nav nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px;
  border-radius: 2px; background: #1d1d1f;
}
.nav-cta,.primary {
  border-radius: 999px; letter-spacing: -.01em;
  transition: transform .14s ease-out, filter .14s ease-out, box-shadow .22s ease;
}
.nav-cta { padding: 9px 16px; color: #fff; font-size: 13px; font-weight: 600; background: var(--apple-blue); }
.nav-cta:hover { filter: brightness(1.08); }
.nav-cta:active,.primary:active { transform: scale(.96); }

.hero { min-height: min(820px,calc(100svh - 64px)); max-width: 1440px; margin: auto; padding-top: clamp(64px,8vw,118px); }
.hero-copy { max-width: 690px; }
.eyebrow { margin-bottom: 14px; color: #66772a; font-size: 12px; font-weight: 650; letter-spacing: .11em; }
.hero h1,.library-head h1 {
  font-weight: 700; letter-spacing: -.055em; line-height: .98;
  text-wrap: balance;
}
.hero h1 { font-size: clamp(48px,6.5vw,96px); }
.hero h1 em {
  color: transparent;
  background: linear-gradient(110deg,#59790a,#91c61c 55%,#53710b);
  -webkit-background-clip: text; background-clip: text;
}
.lead { max-width: 620px; margin: 30px 0 32px; color: #6e6e73; font-size: clamp(17px,1.5vw,20px); line-height: 1.65; letter-spacing: -.012em; }
.hero-actions { gap: 18px; font-size: 13px; }
.primary { padding: 13px 22px; background: #1d1d1f; box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.primary:hover { box-shadow: 0 11px 30px rgba(0,0,0,.18); }
.mini-program-entry {
  min-height: 52px; padding: 5px 14px 5px 6px; display: inline-flex; align-items: center; gap: 10px;
  color: #1d1d1f; text-align: left; border: 1px solid rgba(29,29,31,.08); border-radius: 999px;
  background: rgba(255,255,255,.72); box-shadow: 0 6px 22px rgba(0,0,0,.045); cursor: pointer;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .14s ease-out, background .18s ease, box-shadow .18s ease;
}
.mini-program-entry:hover { background: #fff; box-shadow: 0 9px 26px rgba(0,0,0,.08); }
.mini-program-entry:active { transform: scale(.97); }
.mini-program-entry img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.mini-program-entry span { display: flex; flex-direction: column; gap: 1px; }
.mini-program-entry b { font-size: 13px; font-weight: 650; }
.mini-program-entry small { color: #86868b; font-size: 11px; }

.viewfinder {
  border-width: 8px; border-color: #18181a; border-radius: 46px;
  background: linear-gradient(145deg,#96aaa9,#3f514e);
  box-shadow: 0 32px 70px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.viewfinder::before { background: linear-gradient(145deg,rgba(255,255,255,.28),transparent 38%,rgba(0,0,0,.12)); }
.vf-top { padding: 21px 24px; font-size: 12px; letter-spacing: .01em; }
.vf-bottom { padding-bottom: 24px; }
.vf-bottom button { width: 68px; height: 68px; border-width: 4px; box-shadow: inset 0 0 0 3px rgba(0,0,0,.15); }
.watermark-demo { border-left-width: 4px; border-radius: 0 10px 10px 0; backdrop-filter: blur(8px); }
.watermark-demo b { font-size: 40px; letter-spacing: -.035em; }

.feature-strip { max-width: 1280px; margin-inline: auto; padding-bottom: 120px; gap: 18px; background: none; }
.feature-strip article {
  min-height: 210px; padding: 30px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 26px;
  background: rgba(255,255,255,.68); box-shadow: 0 14px 40px rgba(0,0,0,.045);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.feature-strip small { color: #85858a; font-size: 12px; font-weight: 600; }
.feature-strip h2 { margin: 45px 0 10px; font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.feature-strip p { font-size: 15px; line-height: 1.65; }

.template-callout {
  width: auto;
  max-width: 1320px; margin: 0 auto 92px; padding: clamp(52px,6vw,82px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 38px;
  background: radial-gradient(circle at 80% 15%,rgba(185,243,61,.16),transparent 30%),#1d1d1f;
  box-shadow: 0 28px 70px rgba(0,0,0,.12);
}
.template-callout h2 { font-weight: 650; letter-spacing: -.045em; }
.template-callout a { color: #b9f33d; }

.library { width: min(100%,1440px); margin: auto; padding-top: clamp(64px,8vw,108px); }
.library-head h1 { font-size: clamp(48px,6.4vw,88px); }
.library-intro { font-size: 16px; }
.search {
  height: 48px; border-color: rgba(29,29,31,.09); border-radius: 14px;
  background: rgba(255,255,255,.78); box-shadow: 0 5px 20px rgba(0,0,0,.035);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search:focus-within { border-color: rgba(0,113,227,.55); background: #fff; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.search input { color: #1d1d1f; }
.search input::placeholder { color: #86868b; }
.library-meta { border-color: rgba(29,29,31,.09); }

.template-grid { gap: 24px; }
.template-item {
  padding: 12px; border: 1px solid rgba(29,29,31,.08); border-radius: 26px;
  background: rgba(255,255,255,.82); box-shadow: 0 12px 32px rgba(0,0,0,.045);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.template-item:hover { transform: translate3d(0,-5px,0); border-color: rgba(29,29,31,.12); box-shadow: 0 22px 50px rgba(0,0,0,.09); }
.template-stage { box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.template-info { padding: 18px 6px 12px; }
.template-info h2 { color: #1d1d1f; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.template-info p { color: #86868b; }
.qr-button,.template-actions button,.template-actions a,.copy-dialog {
  min-height: 40px; border-radius: 12px; color: #1d1d1f; background: #e9e9ed;
  transition: transform .12s ease-out, filter .12s ease-out, background .18s ease;
}
.qr-button { color: #fff; background: #0071e3; }
.qr-button:hover { filter: brightness(1.08); }
.template-actions button:hover,.template-actions a:hover { background: #dedee3; }

dialog {
  padding: 36px; border: 1px solid rgba(255,255,255,.75); border-radius: 28px;
  background: rgba(249,249,251,.88); box-shadow: 0 34px 100px rgba(0,0,0,.27);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
}
dialog::backdrop { background: rgba(0,0,0,.38); backdrop-filter: blur(9px); }
.dialog-close { display:grid; place-items:center; color:#555; background:rgba(118,118,128,.12); cursor:pointer; }
.mini-program-dialog { width: min(90vw,390px); text-align: center; }
.mini-program-dialog img { width: min(100%,260px); display: block; margin: 0 auto 18px; border-radius: 24px; }
.mini-program-dialog h2 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.03em; }
.mini-program-dialog p { margin: 0; color: #86868b; font-size: 14px; }
.help-dialog {
  width:min(calc(100vw - 32px),480px); max-height:min(88svh,760px); padding:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  border-radius:32px; background:rgba(248,248,250,.94);
}
.help-dialog .dialog-close { z-index:5; top:16px; right:16px; color:#fff; background:rgba(20,20,22,.46); backdrop-filter:blur(12px); }
.help-dialog-hero {
  position:relative; padding:34px 32px 28px; text-align:center;
  background:radial-gradient(circle at 16% 5%,rgba(111,169,255,.34),transparent 35%),radial-gradient(circle at 86% 26%,rgba(185,243,61,.27),transparent 36%),linear-gradient(160deg,#f7faff,#eef2f8 65%,#f7f8f5);
  box-shadow:inset 0 -1px rgba(29,29,31,.06);
}
.help-code-frame {
  width:174px; height:174px; margin:0 auto 16px; padding:9px;
  border:1px solid rgba(255,255,255,.94); border-radius:34px; background:rgba(255,255,255,.86);
  box-shadow:0 18px 44px rgba(47,65,86,.16),inset 0 0 0 1px rgba(29,29,31,.04);
  transform:translateZ(0);
}
.help-app-code { width:100%; height:100%; display:block; float:none; margin:0; object-fit:cover; border-radius:26px; }
.help-app-badge {
  width:max-content; max-width:100%; margin:0 auto 18px; padding:5px 12px 5px 5px;
  display:flex; align-items:center; gap:9px; text-align:left; border:1px solid rgba(29,29,31,.07); border-radius:999px;
  background:rgba(255,255,255,.72); box-shadow:0 6px 20px rgba(0,0,0,.05); backdrop-filter:blur(14px);
}
.help-app-badge img { width:36px; height:36px; object-fit:cover; border-radius:50%; }
.help-app-badge span { display:flex; flex-direction:column; }
.help-app-badge b { font-size:12px; font-weight:650; }
.help-app-badge small { color:#86868b; font-size:10px; }
.help-dialog-hero h2 { margin:0 0 8px; font-size:27px; font-weight:700; letter-spacing:-.04em; }
.help-dialog-hero > p { max-width:340px; margin:0 auto; color:#6e6e73; font-size:13px; line-height:1.55; }
.import-steps { margin:0; padding:22px 24px 12px; list-style:none; }
.import-steps li { margin:0; padding:11px 4px; display:flex; align-items:center; gap:13px; border-bottom:1px solid rgba(29,29,31,.07); }
.import-steps li:last-child { border-bottom:0; }
.import-steps i {
  width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; font-size:12px; font-style:normal; font-weight:700; border-radius:50%; background:#1d1d1f;
  box-shadow:0 5px 13px rgba(0,0,0,.14);
}
.import-steps span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.import-steps b { color:#1d1d1f; font-size:13px; font-weight:650; }
.import-steps small { color:#86868b; font-size:11px; line-height:1.45; }
.import-note { margin:0; padding:0 28px 24px; color:#86868b; font-size:11px; line-height:1.55; text-align:center; }

:where(a,button,input):focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 3px; }

.site-footer {
  min-height: 112px; padding: 28px max(24px,calc((100vw - 1280px)/2));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: #86868b; font-size: 12px; line-height: 1.6; border-color: rgba(29,29,31,.08);
  background: rgba(245,245,247,.82);
}
.site-footer p { margin: 0; }
.site-footer a { transition: color .18s ease; }
.site-footer a:hover { color: #1d1d1f; text-decoration: underline; text-underline-offset: 3px; }
.site-footer p a { color: #515154; font-weight: 600; }

@media (max-width: 1380px) {
  .template-callout { margin-inline: max(20px,4vw); }
}
@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 88px; }
  .feature-strip { gap: 14px; }
  .template-callout { gap: 42px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 520px) {
  .nav { height: 60px; padding-inline: 16px; }
  .brand-lens { width: 27px; height: 27px; }
  .brand-icon { width: 29px; height: 29px; border-radius: 8px; }
  .hero { padding-top: 48px; }
  .hero h1,.library-head h1 { font-size: clamp(42px,13vw,54px); }
  .lead { margin-top: 24px; font-size: 17px; }
  .hero-actions { width: 100%; }
  .mini-program-entry { width: 100%; border-radius: 18px; }
  .viewfinder { border-width: 6px; border-radius: 34px; }
  .feature-strip { padding-inline: 16px; }
  .feature-strip article { min-height: 185px; }
  .template-callout { margin-inline: 16px; padding: 40px 24px; border-radius: 30px; }
  .template-item { border-radius: 22px; }
  dialog { padding: 30px 22px; }
  .help-dialog { width:calc(100vw - 24px); padding:0; border-radius:27px; }
  .help-dialog-hero { padding:30px 20px 24px; }
  .help-code-frame { width:158px; height:158px; border-radius:30px; }
  .help-app-code { border-radius:22px; }
  .import-steps { padding-inline:18px; }
  .site-footer { padding: 24px 20px; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav,.feature-strip article,.template-item,dialog,.site-footer { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .nav,.feature-strip article,.template-item,.search { border: 1px solid #4a4a4f; }
  .muted,.lead,.library-intro { color: #3a3a3c; }
}

/* iPhone camera hero — mirrors the mini program's real shooting hierarchy. */
.iphone-camera {
  width: min(100%, 394px);
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  max-height: none;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 58px;
  background: linear-gradient(145deg,#202124,#050506 42%,#2c2c2f);
  overflow: hidden;
  box-shadow: 0 44px 90px rgba(20,26,23,.28), inset 0 0 0 1px rgba(255,255,255,.16);
  contain: layout paint;
}
.iphone-camera::before { display: none; }
.iphone-screen { position: relative; width: 100%; height: 100%; max-width:100%; overflow: hidden; clip-path: inset(0 round 51px); border-radius: 51px; background: #1d2426; isolation: isolate; contain: paint; }

.dynamic-scene,.dynamic-scene > div { position: absolute; inset: 0; }
.dynamic-scene { width:100%; height:100%; max-width:100%; overflow:hidden; clip-path:inset(0); background:#9cc7d8; contain:strict; }
.scene-photo {
  position:absolute; inset:0; width:100%; max-width:none; height:100%; display:block;
  object-fit:cover; object-position:52% 50%;
  transform:scale(1.035); will-change:transform;
  animation:camera-breathe 13s cubic-bezier(.37,0,.2,1) infinite alternate;
}
.scene-vignette {
  z-index:1;
  background:linear-gradient(180deg,rgba(3,8,6,.18),transparent 20% 67%,rgba(1,4,3,.30)),radial-gradient(circle at 50% 43%,transparent 48%,rgba(0,0,0,.14) 100%);
  pointer-events:none;
}
.scene-sun-glow {
  z-index:2; inset:11% auto auto 38%; width:30%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,238,.62) 0 2%,rgba(255,239,168,.20) 16%,rgba(255,230,147,.08) 40%,transparent 70%);
  mix-blend-mode:screen; filter:blur(2px); pointer-events:none;
  animation:sun-shimmer 4.8s ease-in-out infinite alternate;
}
.scene-lens-flare { z-index:2; pointer-events:none; animation:flare-drift 8s ease-in-out infinite alternate; }
.scene-lens-flare i { position:absolute; display:block; border-radius:50%; background:rgba(189,235,174,.14); mix-blend-mode:screen; filter:blur(1px); }
.scene-lens-flare i:nth-child(1) { left:57%; top:31%; width:18px; height:18px; }
.scene-lens-flare i:nth-child(2) { left:64%; top:39%; width:10px; height:10px; background:rgba(120,199,255,.18); }
.scene-lens-flare i:nth-child(3) { left:69%; top:47%; width:28px; height:28px; background:rgba(255,197,131,.09); }
.scene-leaf-shadow {
  z-index:2; inset:-8% -10% auto auto; width:55%; height:34%; opacity:.12;
  background:radial-gradient(ellipse at 20% 50%,#07180b 0 7%,transparent 8%),radial-gradient(ellipse at 52% 36%,#07180b 0 9%,transparent 10%),radial-gradient(ellipse at 78% 70%,#07180b 0 8%,transparent 9%);
  filter:blur(7px); transform-origin:top right; pointer-events:none;
  animation:leaf-sway 6.5s ease-in-out infinite alternate;
}
.scene-sky { background: linear-gradient(180deg,#739dbd 0%,#b9d8d8 35%,#f6d5aa 66%,#788b6e 100%); }
.scene-sun {
  inset: 12% auto auto 12%; width: 28%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,#fffbdc 0 10%,rgba(255,232,172,.88) 28%,rgba(255,213,136,.18) 64%,transparent 70%);
  filter: blur(.2px); animation: sun-pulse 8s ease-in-out infinite alternate;
}
.scene-cloud { height: 13%; inset: 18% auto auto -15%; opacity: .44; filter: blur(8px); background: radial-gradient(ellipse at center,rgba(255,255,255,.96),transparent 68%); }
.cloud-one { width: 68%; animation: cloud-drift 18s linear infinite; }
.cloud-two { width: 52%; top: 27%; left: 48%; opacity: .25; animation: cloud-drift-soft 24s linear infinite; }
.scene-mountain { clip-path: polygon(0 70%,17% 48%,33% 64%,51% 27%,70% 63%,85% 43%,100% 67%,100% 100%,0 100%); }
.mountain-back { top: 25%; background: linear-gradient(180deg,rgba(85,112,105,.42),#526f68); transform: scale(1.08); }
.mountain-front { top: 36%; background: linear-gradient(180deg,#536d60,#263f37); clip-path: polygon(0 69%,18% 42%,38% 67%,56% 39%,78% 68%,92% 52%,100% 61%,100% 100%,0 100%); }
.scene-campus {
  inset: 47% 10% auto; height: 18%; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg,#d6b88f,#a97e5f); box-shadow: 0 13px 28px rgba(17,28,23,.25);
  animation: scene-breathe 10s ease-in-out infinite alternate;
}
.scene-campus::before { content:""; position:absolute; left:37%; bottom:0; width:26%; height:133%; border-radius:7px 7px 0 0; background:linear-gradient(90deg,#9d7354,#d1ad7b 48%,#916647); }
.scene-campus::after { content:""; position:absolute; left:44%; top:-26%; width:12%; height:22%; border-radius:2px 2px 0 0; background:#d2bc8e; box-shadow:0 -8px 0 -3px #d2bc8e; }
.scene-campus i { position:relative; z-index:1; width:7%; height:24%; margin:8% 5.5%; display:inline-block; border-radius:2px; background:rgba(50,82,85,.78); box-shadow:0 22px 0 rgba(50,82,85,.72); }
.scene-lawn { top: 62%; background: linear-gradient(180deg,#56765f,#264838 85%); }
.scene-path { inset: 68% 17% -5%; background: linear-gradient(90deg,transparent 0 25%,rgba(222,208,176,.8) 48% 52%,transparent 75%); clip-path: polygon(43% 0,57% 0,92% 100%,8% 100%); }
.scene-trees { inset: 59% 4% 16%; display:flex; align-items:flex-start; justify-content:space-between; }
.scene-trees i { width:13%; aspect-ratio:.72; border-radius:50% 45% 38% 50%; background:radial-gradient(circle at 35% 25%,#91ad71,#315942 72%); box-shadow:inset -8px -8px 18px rgba(14,45,31,.25),0 14px 0 -11px #493b2d; }
.scene-trees i:nth-child(even) { margin-top:9%; transform:scale(.82); }
.scene-light { background: linear-gradient(115deg,rgba(255,243,196,.30),transparent 32% 72%,rgba(42,88,80,.12)); mix-blend-mode: screen; animation: light-sweep 9s ease-in-out infinite alternate; }

.iphone-status { position:absolute; z-index:8; top:0; left:0; right:0; height:50px; padding:13px 22px 0; display:flex; justify-content:space-between; color:#fff; font-size:11px; font-weight:650; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.dynamic-island { position:absolute; top:8px; left:50%; width:31%; height:28px; border-radius:999px; background:#050505; transform:translateX(-50%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); }
.status-icons { font-size:9px; letter-spacing:2px; }
.camera-topbar { position:absolute; z-index:7; top:50px; left:12px; right:12px; display:grid; grid-template-columns:1fr 38px 38px; gap:7px; }
.camera-topbar button { min-width:0; height:38px; color:#fff; border:1px solid rgba(255,255,255,.14); background:rgba(16,18,18,.54); box-shadow:0 5px 18px rgba(0,0,0,.15); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); }
.location-pill { padding:0 13px; display:flex; align-items:center; gap:8px; overflow:hidden; border-radius:999px; text-align:left; }
.location-pill b { overflow:hidden; font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.location-arrow { color:#b9f33d; font-size:8px; transform:rotate(-35deg); }
.round-control { display:grid; place-items:center; border-radius:50%; font-size:16px; }
.settings-control { font-size:14px; }

.iphone-camera .watermark-demo {
  left:6%; right:18%; bottom:22%; padding:12px 14px;
  border-left:3px solid #b9f33d; border-radius:0 11px 11px 0;
  background:linear-gradient(90deg,rgba(12,18,16,.62),rgba(12,18,16,.28));
  box-shadow:0 8px 24px rgba(0,0,0,.14); backdrop-filter:blur(9px);
}
.iphone-camera .watermark-demo strong { font-size:12px; letter-spacing:.01em; }
.iphone-camera .watermark-demo b { margin:2px 0; font-size:30px; line-height:1; }
.iphone-camera .watermark-demo span { font-size:9px; line-height:1.5; }
.iphone-camera .vf-focus { top:42%; border-color:rgba(255,246,196,.76); border-radius:4px; opacity:.78; }

.camera-dock { position:absolute; z-index:9; left:0; right:0; bottom:0; height:20%; padding:10px 18px 8px; color:#fff; background:linear-gradient(180deg,rgba(5,6,6,.08),rgba(5,6,6,.76) 25%,rgba(5,6,6,.91)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.zoom-strip { height:27px; display:flex; align-items:center; justify-content:center; gap:8px; }
.zoom-strip button { width:29px; height:25px; padding:0; color:rgba(255,255,255,.78); font-size:9px; font-weight:650; border:0; border-radius:50%; background:transparent; }
.zoom-strip button.active { color:#ffe57c; background:rgba(20,20,20,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.shutter-row { height:76px; display:grid; grid-template-columns:1fr 78px 1fr; align-items:center; justify-items:center; }
.shutter-row button { display:grid; place-items:center; border:0; cursor:pointer; transition:transform .1s ease-out,opacity .1s ease-out; }
.shutter-row button:active { transform:scale(.92); opacity:.72; }
.shutter-control { width:62px; height:62px; border:4px solid rgba(255,255,255,.95)!important; border-radius:50%; background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 3px rgba(0,0,0,.28); }
.gallery-control,.flip-control { width:38px; height:38px; color:#fff; border-radius:50%; background:rgba(255,255,255,.13); }
.gallery-control span { width:19px; height:16px; border:1.5px solid #fff; border-radius:3px; background:linear-gradient(145deg,transparent 45%,rgba(255,255,255,.8) 47% 65%,transparent 67%); }
.flip-control { font-size:22px; }
.home-indicator { position:absolute; left:50%; bottom:6px; width:32%; height:4px; border-radius:999px; background:rgba(255,255,255,.92); transform:translateX(-50%); }

@keyframes cloud-drift { from{transform:translate3d(-8%,0,0)} to{transform:translate3d(185%,8%,0)} }
@keyframes cloud-drift-soft { from{transform:translate3d(0,0,0)} to{transform:translate3d(-170%,5%,0)} }
@keyframes sun-pulse { from{transform:scale(.94);opacity:.78} to{transform:scale(1.06);opacity:1} }
@keyframes scene-breathe { from{transform:scale(1) translateY(0)} to{transform:scale(1.015) translateY(-2px)} }
@keyframes light-sweep { from{opacity:.45;transform:translateX(-2%)} to{opacity:.8;transform:translateX(2%)} }
@keyframes camera-breathe { from{transform:scale(1.035) translate3d(0,0,0)} to{transform:scale(1.075) translate3d(-.8%,.45%,0)} }
@keyframes sun-shimmer { from{opacity:.56;transform:scale(.92)} to{opacity:1;transform:scale(1.09)} }
@keyframes flare-drift { from{opacity:.45;transform:translate3d(-3px,-5px,0)} to{opacity:.9;transform:translate3d(5px,8px,0)} }
@keyframes leaf-sway { from{transform:rotate(-1.5deg) translate3d(-2px,0,0)} to{transform:rotate(2deg) translate3d(5px,3px,0)} }

@media (max-width: 1100px) and (min-width: 901px) {
  .iphone-camera { width:min(100%,350px); }
}
@media (max-width: 520px) {
  .iphone-camera { width:min(100%,370px); border-radius:52px; transform:none; }
  .iphone-screen { border-radius:45px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-sun,.scene-cloud,.scene-campus,.scene-light,.scene-photo,.scene-sun-glow,.scene-lens-flare,.scene-leaf-shadow { animation:none!important; }
  .scene-photo { transform:scale(1.045); }
}
@media (prefers-reduced-transparency: reduce) {
  .camera-topbar button,.iphone-camera .watermark-demo,.camera-dock { backdrop-filter:none; -webkit-backdrop-filter:none; background-color:rgba(8,10,10,.88); }
}

/* Voluntary support entry and payment-code material. */
.support-trigger {
  position:fixed; z-index:38; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom));
  min-height:44px; padding:8px 15px 8px 10px; display:flex; align-items:center; gap:8px;
  color:#1d1d1f; font-size:12px; font-weight:650; border:1px solid rgba(255,255,255,.82); border-radius:999px;
  background:rgba(255,255,255,.78); box-shadow:0 12px 34px rgba(0,0,0,.14); cursor:pointer;
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  transition:transform .14s ease-out,box-shadow .2s ease,background .2s ease;
}
.support-trigger:hover{background:#fff;box-shadow:0 16px 42px rgba(0,0,0,.18)}.support-trigger:active{transform:scale(.95)}
.support-trigger svg,.support-heart svg{width:25px;height:25px;fill:#ff375f;stroke:none}.support-trigger span{white-space:nowrap}
.support-dialog{width:min(calc(100vw - 28px),640px);max-height:min(90svh,760px);padding:0;overflow:auto;border-radius:34px;background:rgba(249,249,251,.95)}
.support-dialog>.dialog-close{z-index:4;top:17px;right:17px;background:rgba(118,118,128,.14)}
.support-heading{padding:38px 32px 24px;text-align:center;background:radial-gradient(circle at 22% 0,rgba(255,55,95,.13),transparent 36%),radial-gradient(circle at 82% 12%,rgba(0,113,227,.12),transparent 34%)}
.support-heart{width:50px;height:50px;margin:0 auto 12px;display:grid;place-items:center;border-radius:16px;background:rgba(255,55,95,.10)}.support-heart svg{width:28px;height:28px}
.support-heading .eyebrow{margin-bottom:6px;color:#b12748}.support-heading h2{margin:0 0 8px;font-size:30px;letter-spacing:-.045em}.support-heading>p:last-child{max-width:420px;margin:0 auto;color:#6e6e73;font-size:13px;line-height:1.6}
.support-codes{padding:6px 26px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.support-codes article{padding:14px 14px 17px;text-align:center;border:1px solid rgba(29,29,31,.07);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 10px 28px rgba(0,0,0,.045)}
.support-code-wrap{aspect-ratio:1;padding:8px;overflow:hidden;border-radius:18px;background:#fff}.support-code-wrap img{width:100%;height:100%;display:block;object-fit:contain;border-radius:12px}.support-code-wrap.alipay{box-shadow:inset 0 0 0 1px rgba(22,119,255,.12)}.support-code-wrap.wechat{box-shadow:inset 0 0 0 1px rgba(205,153,51,.18)}
.support-codes h3{margin:13px 0 3px;font-size:15px;letter-spacing:-.02em}.support-codes p{margin:0;color:#86868b;font-size:11px}.support-note{margin:0;padding:0 24px 26px;color:#86868b;font-size:11px;text-align:center}
@media(max-width:520px){.support-trigger{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:44px;padding:0;justify-content:center}.support-trigger span{display:none}.support-dialog{border-radius:28px}.support-heading{padding:32px 20px 20px}.support-codes{padding-inline:14px;gap:10px}.support-codes article{padding:9px 9px 14px;border-radius:19px}.support-code-wrap{padding:5px;border-radius:14px}.support-heading h2{font-size:27px}}
@media(prefers-reduced-transparency:reduce){.support-trigger,.support-dialog{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}