/* V5 visual reference, scoped to the active home screen. */
body:has(#v3-home.active) {
  background:#eee5db;
}
.app:has(#v3-home.active) {

      --bg: #faf6ef; --paper: #fffdf9; --ink: #46352f; --muted: #8d7b70;
      --wine: #873a4c; --wine-dark:#702b3e; --rose: #f1d1c8; --line: #eadbd0;
      --mustard: #ae7840; --mint: #e9eee1; --lavender: #ebe4ef;
      --shadow: 0 17px 43px rgba(92,60,48,.09); --serif:"Songti SC","Noto Serif CJK SC","STSong","SimSun",serif;
      --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
      width:100%;
  max-width:480px;
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:var(--bg);
  color:var(--ink);
  font:16px/normal var(--sans);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.app:has(#v3-home.active)::before,
.app:has(#v3-home.active)::after {
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  z-index:-1;
}
.app:has(#v3-home.active)::before {
  top:90px;right:-143px;width:305px;height:285px;
  background:#f8e7d8;filter:blur(18px);opacity:.8;
}
.app:has(#v3-home.active)::after {
  top:480px;left:-95px;width:225px;height:250px;
  background:#f4e7e3;filter:blur(32px);opacity:.55;
}
.app:has(#v3-home.active) > .topbar {display:none}
.app:has(#v3-home.active) > .v3-main {padding:0;flex:1 0 auto}
.v5-desktop-accent,.v5-nav-icon,.v5-nav-caption {display:none}
.v5-content button {
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.v5-content button:focus-visible,
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) button:focus-visible {
  outline:3px solid #c68d87;outline-offset:3px;
}
.v5-content { padding:calc(25px + env(safe-area-inset-top, 0px)) 24px 35px; }
.v5-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:33px; }
.v5-brand { display:flex; gap:10px; align-items:center; min-width:0; }
.v5-brand-emblem { width:43px; height:43px; flex:none; border-radius:15px; color:#fff; background:var(--wine); display:grid; place-items:center; box-shadow:0 4px 0 #eed8cf; transform:rotate(-5deg); }
.v5-brand-emblem svg { width:25px; transform:rotate(5deg); }
.v5-brand-name { font-size:19px; font-weight:850; letter-spacing:.075em; line-height:1.25; }
.v5-brand-sub { font-size:10px; letter-spacing:.06em; color:var(--muted); margin-top:5px; white-space:nowrap; }
.v5-top-action { border:1px solid #e5d5c8; color:#8a5553; background:#fffaf4; height:36px; padding:0 12px; border-radius:22px; font-size:11px; font-weight:720; white-space:nowrap; display:flex; align-items:center; gap:5px; box-shadow:0 3px 7px #6f4e3210; }
.v5-top-action svg { width:15px; height:15px; stroke-width:1.9; flex-shrink:0; }
.v5-top-action:hover { background:#fff3ed; border-color:#d8bcb2; }
.v5-top-action:active { transform:translateY(1px); }
.v5-intro { position:relative; padding-left:3px; }
.v5-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:780; letter-spacing:.12em; color:#a56848; margin-bottom:12px; }
.v5-eyebrow::before { content:""; height:1px; width:25px; background:#c69a75; }
.v5-intro h1 { margin:0; font-size:clamp(31px,8.6vw,39px); letter-spacing:.005em; line-height:1.37; font-weight:900; }
.v5-accent { color:var(--wine); position:relative; white-space:nowrap; }
.v5-accent::after { content:""; position:absolute; width:97%; height:6px; bottom:0px; left:2%; background:#efc0b0; opacity:.65; z-index:-1; border-radius:5px; transform:rotate(-1.9deg); }
.v5-intro-sub { color:#8f7d71; font-size:12px; line-height:1.8; margin:11px 0 25px; }
.v5-scribble { position:absolute; right:8px; top:23px; transform:rotate(14deg); width:60px; height:70px; opacity:.95; }
.v5-scribble path { stroke:#ca9d75; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.v5-hero { position:relative; border-radius:25px; background:linear-gradient(145deg,#f6d9cf 0%,#f7d5c7 54%,#f3c9bd 100%); border:1px solid #eac0b4; min-height:345px; overflow:hidden; box-shadow:0 15px 25px #a6614d1c,0 3px 1px #d6aa9f42; }
.v5-hero::before { content:""; width:270px; height:270px; border:1px solid #ffffff67; border-radius:50%; position:absolute; right:-52px; top:56px; }
.v5-hero::after { content:""; width:210px; height:210px; border:1px solid #ffffff69; border-radius:50%; position:absolute; right:-20px; top:85px; }
.v5-hero-inner { position:relative; z-index:2; padding:24px 21px 22px; }
.v5-hero-top { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.v5-hero-tag { display:inline-flex; background:#fffaf3; color:#9b5e54; border:1px solid #eac4b7; border-radius:30px; padding:6px 10px; font-size:10px; font-weight:800; }
.v5-hero-no { font:italic 11px Georgia,serif; letter-spacing:.06em; color:#a67b6e; }
.v5-hero-kicker { font-size:10px; font-weight:750; color:#a0655e; letter-spacing:.13em; margin:0 0 8px; }
#v3-home .v5-hero-title { font:900 29px/1.34 var(--serif); letter-spacing:.06em; margin:0; color:#623d3a; text-shadow:0 1px #ffffff99; }
#v3-home .v5-hero-desc { max-width:170px; margin:12px 0 30px; line-height:1.85; font-size:11px; color:#9d6e63; }
.v5-hero-actions { width:160px; display:grid; gap:12px; }
.v5-primary-cta { border:0; border-radius:12px; padding:13px 14px; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--wine); color:white; box-shadow:0 6px 0 #743044,0 13px 18px #8c405025; font-size:13px; font-weight:800; transition:.2s transform,.2s box-shadow }
.v5-primary-cta:hover { background:var(--wine-dark) }
.v5-primary-cta:active { transform:translateY(4px); box-shadow:0 2px 0 #743044,0 5px 10px #8c405024 }
.v5-secondary-cta { border:1.5px solid #c98f83; background:#fff8f2e8; color:#7c3f44; font-weight:820; font-size:12px; padding:11px 9px; min-height:42px; border-radius:12px; display:flex; justify-content:center; gap:8px; align-items:center; box-shadow:0 3px 10px #9e66501c; transition:.2s background,.2s transform; }
.v5-secondary-cta svg { width:15px; height:15px; stroke-width:1.9; flex:none; }
.v5-secondary-cta:hover { color:#6a2d3b; background:#fffdf9; }
.v5-secondary-cta:active { transform:translateY(1px); }
.v5-doc-art { position:absolute; width:181px; height:247px; right:9px; top:77px; transform:rotate(8deg); z-index:1; transform-origin: center; filter:drop-shadow(2px 9px 9px #99665836); pointer-events:none }
.v5-doc-art .v5-sheet { position:absolute; inset:0; border:1px solid #e5c9ad; background:linear-gradient(135deg,#fffdf5,#fff5e9); box-shadow: 0 2px 3px #c08f7920; border-radius:4px; }
.v5-sheet::before { content:""; position:absolute; inset:8px; border:1px solid #eee0ce; }
.v5-sheet-top { font-size:7px; font-family:var(--serif); color:#6f5142; position:absolute; left:0; right:0; top:25px; text-align:center; letter-spacing:.35em; }
.v5-sheet-title { position:absolute; top:43px; left:0; right:0; text-align:center; font-family:var(--serif); font-weight:bold; color:#3f2928; font-size:15px; letter-spacing:.16em; }
.v5-sheet-no { position:absolute; top:70px; left:0; right:0; text-align:center; color:#997d70; font-size:5.5px; }
.v5-sheet-rule { position:absolute; top:91px; left:20px; right:20px; height:1px; background:#e0c5b4; }
.v5-doc-line { position:absolute; left:20px; right:20px; height:3px; border-radius:2px; background:#bda99b80; }
.v5-doc-line.v5-short { right:62px; }
.v5-doc-line.v5-med { right:41px; }
.v5-seal { position:absolute; width:77px; height:77px; border:3px double #b85658; border-radius:50%; right:18px; bottom:22px; color:#b85658; display:grid; place-items:center; transform:rotate(-15deg); opacity:.9; }
.v5-seal::before { content:""; position:absolute; inset:5px; border:1px solid #b85658; border-radius:50%; }
.v5-seal svg { width:29px; height:29px; }
.v5-seal-top { position:absolute; top:7px; font-size:7px; font-family:var(--serif); font-weight:bold; letter-spacing:.1em; }
.v5-seal-bottom { position:absolute; bottom:6px; font-size:7px; font-family:var(--serif); font-weight:bold; }
.v5-doc-spark { position:absolute; font-size:30px; z-index:3; right:6px; top:47px; color:#fff8f0; text-shadow:0 2px #d69e83; transform:rotate(12deg); pointer-events:none; }
.v5-section-head { display:flex; justify-content:space-between; gap:12px; align-items:end; margin:31px 2px 16px; }
.v5-section-title { margin:0; font-size:17px; font-weight:840; letter-spacing:.02em; }
.v5-section-sub { color:#a69a8f; font-size:10px; white-space:nowrap; padding-bottom:2px; }
.v5-templates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.v5-template { position:relative; overflow:hidden; min-width:0; border:1px solid #e8d8cc; border-radius:19px; height:171px; padding:13px 10px 11px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition: transform .2s ease, box-shadow .2s ease; box-shadow:0 6px 15px #9a735e0b; color:var(--ink); }
.v5-template:hover { transform:translateY(-3px); box-shadow:0 10px 22px #9a735e22; }
.v5-template:active { transform:translateY(0px) }
.v5-template .v5-num { font:italic 10px Georgia,serif; opacity:.65; letter-spacing:.05em }
.v5-template-title { position:relative; z-index:3; margin:auto 0 5px; font-size:clamp(13px,4vw,16px); font-weight:850; white-space:nowrap; letter-spacing:-.015em; }
.v5-template-desc { position:relative; z-index:3; font-size:9px; margin:0; white-space:nowrap; color:#806f68; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.v5-imperial { background:#efe8d8; }
.v5-imperial .v5-template-title { color:#826132; }
.v5-wanted { background:#f5ded8; }
.v5-wanted .v5-template-title { color:#87444b; }
.v5-ticket { background:#e7e9e1; }
.v5-ticket .v5-template-title { color:#536960; }
.v5-illu { width:90%; position:absolute; top:23px; left:5%; height:89px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.v5-illu svg { max-width:100%; max-height:95px; overflow:visible; }
.v5-note { margin:24px 3px 3px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:10px; color:#a49787; }
.v5-note::before,.v5-note::after { content:""; width:34px; height:1px; background:#dfcec0; }
.v5-px-svg{display:block;width:100%;height:100%}
.v5-px-home{display:inline-flex;width:20px;height:20px;color:#b05f72;vertical-align:middle;margin-left:6px}

#v3-home .v5-top-action {min-height:44px}
#v3-home .v5-hero {display:block;padding:0}
#v3-home .v5-hero-actions {display:grid;gap:12px;margin:0}
#v3-home .v5-primary-cta,#v3-home .v5-secondary-cta {min-height:44px}
#v3-home .v5-templates {grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.v5-section-title .v5-section-spark {color:#c17c74;font-size:15px}

.app:has(#v3-home.active) > .bottom-nav,
.app:has(#v3-home.active) > .topbar > .desktop-nav {
  position:sticky;
  inset:auto 0 0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  height:auto;
  padding:8px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background:#fffdf9ee;
  border-top:1px solid #eaded4;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 -6px 18px #bda99e16;
  z-index:4;
}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) button {
  height:auto;
  min-height:44px;
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:3px 6px;
  color:#786a60;
  background:transparent;
  border:0;
  font:650 11px/1.3 var(--sans);
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) button.active {color:#943a50}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) button.active::after {
  content:"";position:absolute;bottom:-4px;width:4px;height:4px;border-radius:50%;background:#aa5061;
}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) .v5-nav-icon {display:block;width:21px;height:21px;stroke-width:1.8}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) .v5-nav-caption {display:block}
.app:has(#v3-home.active) :is(.desktop-nav,.bottom-nav) .v5-nav-original {display:none}

@media (min-width:768px) {
  body:has(#v3-home.active) {
    background:radial-gradient(circle at 24% 22%,#f5dcd4 0%,transparent 26%),radial-gradient(circle at 77% 68%,#eaded5 0%,transparent 30%),#eee9e2;
    min-height:100vh;
    padding:42px 25px;
  }
  .app:has(#v3-home.active) {
    width:430px;min-height:840px;margin:0 auto;
    border-radius:30px;border:7px solid #fdf9f4;
    box-shadow:0 26px 75px #76574a35,0 0 0 1px #d9cbc1;
  }
  .app:has(#v3-home.active) > .topbar {display:contents}
  .app:has(#v3-home.active) > .topbar > :not(.desktop-nav) {display:none}
  .app:has(#v3-home.active) > .topbar > .desktop-nav {display:grid;order:1}
  .app:has(#v3-home.active) > .bottom-nav {display:none}
  body:has(#v3-home.active) .v5-desktop-accent {
    display:block;position:fixed;top:54px;left:max(28px,calc(50% - 485px));color:#8e6c5f;pointer-events:none;
  }
  .v5-desktop-accent div {font:700 51px/.98 Georgia,serif;opacity:.45;letter-spacing:-.025em}
  .v5-desktop-accent p {margin:18px 0;color:#ac9285;font-size:11px;letter-spacing:.28em}
}
@media (max-width:900px) {
  body:has(#v3-home.active) .v5-desktop-accent {display:none}
}
@media (max-width:767px) {
  .app:has(#v3-home.active) > .bottom-nav {display:grid}
}
@media (max-width:420px) {
  .v5-content {padding:calc(22px + env(safe-area-inset-top,0px)) 18px 26px}
  .v5-topbar {margin-bottom:29px}
  .v5-brand-name {font-size:18px}
  .v5-top-action {padding:0 9px;font-size:10px}
  .v5-hero {min-height:341px}
  .v5-hero-inner {padding:22px 17px}
  #v3-home .v5-hero-title {font-size:27px}
  #v3-home .v5-hero-desc {max-width:154px}
  .v5-doc-art {right:-6px;transform:rotate(8deg) scale(.94)}
  .v5-template {height:160px;padding:12px 8px}
  .v5-template-title {font-size:15px}
  .v5-illu {top:20px}
}
@media (max-width:350px) {
  #v3-home .v5-hero-title {font-size:24px;letter-spacing:0}
  #v3-home .v5-hero-desc {max-width:137px}
  #v3-home .v5-hero-actions {width:130px}
  .v5-doc-art {right:-21px;top:82px;transform:rotate(8deg) scale(.70);transform-origin:top right}
  .v5-section-sub {display:none}
  .v5-template-title {font-size:13px}
  .v5-template-desc {white-space:normal;overflow-wrap:anywhere;line-height:1.35}
  #v3-home .v5-templates {gap:8px}
  .v5-scribble {right:4px;width:50px}
}
@media (prefers-reduced-motion:reduce) {
  #v3-home.active,.v5-content button {animation:none;transition:none}
}