/* Paper correspondence: paired with the App's peach and garden themes.
   Deliberately last in the cascade; PHP/download behavior stays unchanged. */
:root {
  --paper:#faf2ed; --ink:#44332f; --muted:#766058; --accent:#944e61;
  --line:#dac5bc; --surface:#fffaf5; --surface-soft:#f1e3d9;
  --edge:#ddc9be; --halo:#eedbd0; --button:#885064; --button-text:#fffaf5;
  --glass-fill:#fffaf5f5; --soft-shadow:0 10px 32px #6646360b;
  --paper-highlight:#ffffff80; --night:#343e35;
}
:root[data-theme=dark] {
  --paper:#172820; --ink:#f2edda; --muted:#bac8b8; --accent:#d2d6a9;
  --line:#4b6150; --surface:#22382d; --surface-soft:#2a4134;
  --edge:#536b56; --halo:#354735; --button:#ced4a6; --button-text:#203125;
  --glass-fill:#22382df5; --soft-shadow:0 10px 32px #0002;
  --paper-highlight:#cddbbb0b; --night:#182b21;
}
body {
  background:radial-gradient(ellipse at 100% 0,var(--halo),transparent 65%),var(--paper);
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.13;
  background:url('../ornaments/paper.png') repeat; background-size:360px;
  mix-blend-mode:multiply;
}
.site-header {
  border-radius:8px; border-color:var(--line); background:var(--glass-fill);
  box-shadow:0 4px 0 var(--paper),0 5px 0 var(--line); backdrop-filter:blur(16px);
}
.brand span,h1,h2,.journey-track h3 {font-family:"Songti SC","Noto Serif CJK SC",serif;letter-spacing:.015em}
.header-cta,.download-button,.dialog-primary,.mobile-dock a,.zoom-trigger {
  border-radius:7px; border:1px solid var(--button); background:var(--button);
  color:var(--button-text); box-shadow:inset 0 0 0 3px var(--button),inset 0 0 0 4px #ffffff38;
}
.theme-toggle {border-radius:7px;border-style:dashed}
.hero {gap:64px;padding-block:64px 56px}
.hero h1 {font-size:clamp(38px,4.5vw,62px);line-height:1.3;letter-spacing:.02em}
.hero h1 span {color:var(--accent)}
.hero .eyebrow {display:inline-flex;align-items:center;border-block:1px dashed var(--line);padding:9px 0}
.hero-visual,.gallery-stage {
  position:relative; height:auto; max-height:none; overflow:visible; border:1px solid var(--edge);
  border-radius:3px; background:linear-gradient(145deg,var(--paper-highlight),transparent),var(--surface-soft);
  box-shadow:var(--soft-shadow); outline:1px dashed var(--edge); outline-offset:-10px;
}
.hero-visual {padding:28px 24px 52px;display:flex;align-items:center;justify-content:center}
.hero-visual::before {display:none}
.hero-visual::after,.gallery-stage::after {
  content:"";position:absolute;inset:0 -5px;pointer-events:none;
  background:radial-gradient(circle at 0 50%,var(--paper) 4px,transparent 4.6px) left top/10px 16px repeat-y,
             radial-gradient(circle at 100% 50%,var(--paper) 4px,transparent 4.6px) right top/10px 16px repeat-y;
}
.hero-phone {width:230px;max-width:100%;margin:0;transform:none}
.phone {border-color:var(--ink);box-shadow:0 14px 32px #0002}
.phone img {display:block;width:100%;height:auto;object-fit:contain}
.feature-chip,.orbit {display:none}
.visual-label {font-size:10px;letter-spacing:.06em;bottom:18px}
.trust-strip {margin-bottom:72px;border-block-style:dashed}
.journey-track article {border-top-style:dashed}
.journey-track h3 {font-size:23px}
.feature-primary,.guide-card,.faq-list details,.final-cta,.safety-panel {
  border-radius:5px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--soft-shadow);
}
.feature-primary {outline:1px dashed var(--line);outline-offset:-9px}
.feature-card {border-bottom-style:dashed}
.feature-index {color:var(--accent)}
.nfc-visual span {border-color:var(--accent)}
.nfc-visual i {background:var(--button)}
.screen-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;background:transparent;border:0;border-radius:0;overflow:visible}
.screen-tab,.screen-tab.is-active {border-radius:4px;border:1px dashed var(--line);min-height:44px;background:var(--surface);box-shadow:none}
.screen-tab.is-active {background:var(--button);color:var(--button-text);border-style:solid;border-color:var(--button)}
.appearance-switch {gap:6px}
.appearance-switch button {border-radius:5px;border:1px solid var(--line);padding-inline:12px}
.appearance-switch button[aria-pressed=true] {border-color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.screenshot-source {font-size:12px!important;line-height:1.85!important;margin-top:14px}
.screen-caption {padding:18px;border:1px dashed var(--line);background:var(--surface);border-radius:3px;margin-top:18px}
.gallery-stage {display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px 20px}
.gallery-halo {display:none}
.gallery-phone {width:250px;max-width:100%;margin:0}
.zoom-trigger {min-height:44px;padding:10px 20px;font:inherit;font-size:13px;cursor:pointer;position:relative;z-index:1}
.zoom-trigger span {margin-left:14px}
.zoom-trigger:disabled {opacity:.55;cursor:not-allowed}
.step-number,.guide-tip {border-radius:4px}
.step-number {border:1px dashed var(--line)}
.safety-panel {background:var(--surface-soft);color:var(--ink);border-style:dashed}
.safety-panel .eyebrow,.safety-panel a {color:var(--accent)}
.safety-copy p {color:var(--muted)}
.mobile-dock {border-radius:7px;background:var(--glass-fill);border:1px solid var(--line)}
dialog {border-radius:6px;border:1px solid var(--line);background:var(--surface)}
body:has(dialog[open]) {overflow:hidden}
.image-dialog {width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:16px}
.image-dialog[open] {display:flex;flex-direction:column}
.image-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.image-dialog h2 {font-size:20px;margin:0}
[data-close-image] {width:44px;height:44px;flex-shrink:0;font-size:25px;border:1px solid var(--line);border-radius:5px;background:var(--surface-soft);color:var(--ink);cursor:pointer}
#zoom-description {font-size:12px;margin:4px 0 12px;flex-shrink:0}
.image-dialog-scroll {overflow:auto;min-height:0;overscroll-behavior:contain;border-radius:3px}
#zoom-image {display:block;width:100%;height:auto}
:focus-visible {outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:760px) {
  .site-header {border-radius:7px}
  .hero {padding-block:36px 28px;gap:24px}
  .hero h1 {font-size:38px}
  .hero-visual {height:auto;padding:24px 18px 46px;max-width:400px}
  .hero-phone {width:195px;margin:0;transform:none}
  .gallery-stage {padding:24px 20px;border-radius:3px}
  .gallery-phone {width:240px}
  .trust-strip {margin-bottom:52px}
  .guide-card,.faq-list details,.final-cta {border-radius:5px}
  .mobile-dock {border-radius:7px;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(max-width:350px) {
  .hero h1 {font-size:33px}
  .hero-visual {height:auto}
  .screen-tab {font-size:12px;padding-inline:6px}
  .visual-label {font-size:9px}
}
@media(prefers-reduced-transparency:reduce) {
  .site-header,.mobile-dock {background:var(--surface);backdrop-filter:none}
}