/* 设计史地图 · 全局样式。时代/地域颜色由 main.js 写到 body 的 CSS 变量上。 */
:root {
  --paper: #f2ebdd; --paper-2: #e6dcc8; --ink: #1f1a17; --ink-soft: #4d443b; --accent: #b3282d; --accent-2: #1f4e8c; --accent-3: #e0a526; --accent-4: #1f4e8c; --rule: #1f1a1755;
  --font-display: "Old Standard TT", "Noto Serif SC", serif; --font-body: "Noto Serif SC", serif;
  --font-title: "Noto Serif SC", serif; --w-title: 900; --font-year: "Abril Fatface", serif; --font-kick: "Old Standard TT", "Noto Serif SC", serif;
  --stripe-e1: repeating-linear-gradient(90deg, #1f4e8c 0 22px, #f2ebdd 22px 26px, #b3282d 26px 34px, #f2ebdd 34px 38px, #e0a526 38px 44px, #f2ebdd 44px 48px);
  --checker: repeating-conic-gradient(#0e0e0e 0 25%, #f7f6f2 0 50%);
  --vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M118 2 C80 10 70 40 40 52 S6 90 2 118'/%3E%3Cpath d='M78 22c-10-14-26-12-30-2 10 8 22 8 30 2z' fill='%23000'/%3E%3Cpath d='M52 50c4-16-8-26-18-24 0 12 8 22 18 24z' fill='%23000'/%3E%3Cpath d='M30 74c-12-6-22 0-22 8 10 4 18 0 22-8z' fill='%23000'/%3E%3Ccircle cx='96' cy='12' r='6' fill='%23000'/%3E%3Ccircle cx='24' cy='96' r='5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --whip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C120 60 140 10 230 22 S330 70 400 40 S520 0 600 30' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M0 68 C150 66 180 30 260 36 S380 68 460 50 S560 30 600 44' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  --tl-h: 92px; --ease: cubic-bezier(.4,.0,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease); }
button { font: inherit; color: inherit; }
.sp { flex: 1; }
#grain { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- globe ---------- */
#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#globe.dragging { cursor: grabbing; }
#markers { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.mk { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; transform-origin: 0 0; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; font-family: var(--font-display); font-size: 13px; color: var(--ink); transition: opacity .4s; }
.mk .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); flex: none; margin-left: -6px; }
.mk .lbl { background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 1px 6px; border: 1px solid var(--rule); line-height: 1.35; }
.mk .lbl small { color: var(--ink-soft); margin-right: 4px; font-variant-numeric: oldstyle-nums; }
.mk.dim { opacity: .38; } .mk.dim .lbl { display: none; } .mk.dim .dot { width: 8px; height: 8px; background: var(--ink-soft); }
.mk.cur .dot { background: var(--accent-2); animation: pulse 1.8s infinite; }
.mk.hidden { opacity: 0; pointer-events: none; }
.mk .count { font-family: var(--font-body); font-size: 11px; background: var(--ink); color: var(--paper); border-radius: 9px; padding: 0 6px; margin-left: 2px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 1px var(--ink), 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent); } 100% { box-shadow: 0 0 0 1px var(--ink), 0 0 0 14px transparent; } }

/* ---------- masthead (ornament changes by era) ---------- */
#masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; pointer-events: none; }
#masthead > * { pointer-events: auto; }
.mast-title { padding: 10px 18px 12px; background: color-mix(in srgb, var(--paper) 86%, transparent); position: relative; }
.mast-title h1 { margin: 0; font-family: var(--font-title); font-weight: var(--w-title); font-size: 34px; letter-spacing: .04em; line-height: 1.1; }
.mast-kicker { font-size: 12px; letter-spacing: .25em; color: var(--accent); }
.mast-years { font-family: var(--font-year); font-size: 15px; color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }
body[data-era="e1"] .mast-title { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; padding-top: 18px; }
body[data-era="e1"] .mast-title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--stripe-e1); }
body[data-era="e2"] .mast-title { border: 3px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ink); }
body[data-era="e2"] .mast-title h1::before { content: "❦ "; color: var(--accent-2); font-family: var(--font-body); }
body[data-era="e3"] .mast-title { border: 1.5px solid var(--accent); border-radius: 46px 6px 46px 6px; padding: 12px 28px 14px; }
body[data-era="e4"] .mast-title { border: 8px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--checker) 0 0 / 16px 16px border-box; }
body[data-era="e4"] .mast-title h1 { letter-spacing: .08em; }
.mast-tools { display: flex; gap: 8px; }
.tool { background: var(--paper); border: 1px solid var(--ink); padding: 6px 14px; cursor: pointer; font-family: var(--font-body); font-size: 14px; letter-spacing: .05em; transition: background .2s, color .2s; }
.tool:hover, .tool.on { background: var(--ink); color: var(--paper); }
body[data-era="e3"] .tool { border-radius: 999px; border-color: var(--accent); }
body[data-era="e4"] .tool { border-width: 2px; }

/* ---------- peek card ---------- */
#peek[hidden], #clusterMenu[hidden] { display: none; }
#peek { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); width: min(360px, calc(100vw - 32px)); z-index: 22; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 6px 8px 0 color-mix(in srgb, var(--ink) 18%, transparent); display: flex; flex-direction: column; animation: peekIn .35s var(--ease); }
@keyframes peekIn { from { opacity: 0; transform: translate(20px, -50%); } }
.peek-img { aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--paper-2); }
.peek-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) contrast(1.02); }
.peek-body { padding: 14px 18px 18px; }
.peek-year { font-family: var(--font-kick); color: var(--accent); font-size: 15px; }
.peek-title { margin: 2px 0 4px; font-family: var(--font-title); font-weight: var(--w-title); font-size: 24px; line-height: 1.25; }
.peek-place { font-size: 13px; color: var(--ink-soft); }
.peek-key { font-size: 15px; line-height: 1.7; margin: 10px 0 14px; }
.peek-go { background: var(--ink); color: var(--paper); border: 0; padding: 8px 22px; cursor: pointer; letter-spacing: .2em; }
.peek-close { position: absolute; top: 6px; right: 6px; background: var(--paper); border: 1px solid var(--ink); width: 28px; height: 28px; cursor: pointer; line-height: 1; }
#clusterMenu { position: fixed; z-index: 23; background: var(--paper); border: 1px solid var(--ink); min-width: 240px; max-width: 320px; box-shadow: 4px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent); }
#clusterMenu .cm-h { padding: 8px 12px; font-size: 12px; letter-spacing: .15em; color: var(--accent); border-bottom: 1px solid var(--rule); }
#clusterMenu button { display: flex; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 8px 12px; cursor: pointer; font-size: 14px; }
#clusterMenu button:hover { background: var(--paper-2); }
#clusterMenu button small { color: var(--ink-soft); font-family: var(--font-display); min-width: 64px; }

#hint { position: fixed; left: 50%; bottom: calc(var(--tl-h) + 14px); transform: translateX(-50%); z-index: 19; font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 4px 12px; border: 1px solid var(--rule); white-space: nowrap; transition: opacity 1s; pointer-events: none; }
#hint.gone { opacity: 0; }
@media (max-width: 760px) { #hint { white-space: normal; width: calc(100% - 32px); text-align: center; font-size: 12px; } }

/* ---------- timeline ---------- */
#timeline { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tl-h); z-index: 21; background: color-mix(in srgb, var(--paper) 92%, transparent); border-top: 1px solid var(--ink);
  padding: 0 28px env(safe-area-inset-bottom); user-select: none; }
.tl-eras { position: relative; height: 22px; }
.tl-era { position: absolute; top: 0; height: 22px; font-size: 11px; letter-spacing: .12em; line-height: 22px; padding-left: 6px; border-left: 1px solid var(--ink); color: var(--ink-soft); overflow: hidden; white-space: nowrap; cursor: pointer; }
.tl-era.on { color: var(--paper); background: var(--ink); }
.tl-track { position: relative; height: calc(var(--tl-h) - 22px); cursor: pointer; touch-action: none; }
.tl-ticks { position: absolute; inset: 0; }
.tl-tick { position: absolute; bottom: 0; width: 1px; background: var(--ink); height: 6px; }
.tl-tick.big { height: 12px; }
.tl-tick span { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 12px; color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }
.tl-nodes { position: absolute; left: 0; right: 0; top: 4px; height: 30px; }
.tl-n { position: absolute; width: 8px; height: 8px; margin-left: -4px; padding: 0; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; transition: transform .15s; }
.tl-n:hover, .tl-n.cur { transform: scale(1.5); background: var(--accent); }
.tl-n.visited { background: var(--ink-soft); }
.tl-n[data-region="qing"], .tl-n[data-region="meiji"], .tl-n[data-region="india"], .tl-n[data-region="americas"] { border-radius: 1px; transform: rotate(45deg); }
.tl-tip { position: fixed; z-index: 30; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 13px; padding: 4px 8px; white-space: nowrap; }
.tl-head { position: absolute; top: -2px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); cursor: ew-resize; }
.tl-head span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--paper); font-family: var(--font-display); font-size: 13px; padding: 0 6px; }

.tl-head.back span { background: var(--ink); }
.tl-n[data-act="7"] { border-radius: 1px; transform: rotate(45deg); }

/* ---------- story: 上边框 / 中间画面 + 阅读卡 / 下边框 ---------- */
#story { position: fixed; inset: 0; z-index: 30; background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; --card-w: clamp(320px, 26vw, 400px); }
#story[hidden] { display: none; }
.sf-top { position: relative; display: flex; align-items: center; gap: 18px; min-height: 56px; padding: 8px 18px; background: var(--paper); border-bottom: 1px solid var(--ink); }
.sf-home { display: flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--ink); padding: 5px 11px 5px 8px; cursor: pointer; font: 13px var(--font-body); }
.sf-home:hover { background: var(--ink); color: var(--paper); }
.sf-home .gl { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; background: radial-gradient(circle at 50% 50%, transparent 46%, currentColor 47% 53%, transparent 54%) , linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat; }
.sf-act { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sf-act b { font: 600 13px var(--font-kick); letter-spacing: .2em; color: var(--accent); white-space: nowrap; }
.sf-act span { font-family: var(--font-title); font-weight: var(--w-title); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.sf-when { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--rule); }
.sf-when b { font-family: var(--font-year); font-weight: 400; font-size: 22px; color: var(--accent); white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.sf-when span { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
.sf-q { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; cursor: help; }
.sf-q span { padding: 2px 8px; color: var(--ink-soft); border: 1px solid transparent; }
.sf-q span.on { color: var(--paper); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.sf-q i { font-style: normal; color: var(--rule); }
.sf-tool { background: none; border: 1px solid var(--ink); padding: 4px 10px; cursor: pointer; font: 13px var(--font-body); }
.sf-tool:hover { background: var(--ink); color: var(--paper); }

.st-mid { position: relative; min-height: 0; background: var(--paper-2); overflow: hidden; }
.st-stage { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--card-w) + 30px); overflow: hidden; transition: left .45s var(--ease); }
#story.card-closed .st-stage { left: 58px; }
.st-mod { position: absolute; inset: 0; overflow: hidden; }
.st-pending { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); font-size: 14px; letter-spacing: .2em; }
.st-pending span { animation: pend 1.6s ease-in-out infinite; }
@keyframes pend { 50% { opacity: .35; } }

.st-card { position: absolute; z-index: 8; left: 14px; top: 14px; bottom: 14px; width: var(--card-w); display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: 0 10px 30px -14px #0006; transition: width .45s var(--ease), height .45s var(--ease); }
.st-text { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 26px 30px; scrollbar-width: thin; overscroll-behavior: contain; }
.sh-grab { display: none; }
.st-tog { position: absolute; z-index: 3; right: 8px; top: 8px; background: var(--paper); border: 1px solid var(--rule); padding: 2px 8px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.st-tog:hover { color: var(--ink); border-color: var(--ink); }
.st-tog .c { display: none; }
#story.card-closed .st-card { width: 40px; bottom: auto; height: 132px; overflow: hidden; }
#story.card-closed .st-text { display: none; }
#story.card-closed .st-tog { inset: 0; border: 0; writing-mode: vertical-rl; letter-spacing: .3em; font-size: 13px; color: var(--ink); background: var(--paper); }
#story.card-closed .st-tog .o { display: none; } #story.card-closed .st-tog .c { display: inline; }

/* 阅读卡内容 */
.rc-kick { font: 12.5px var(--font-kick); letter-spacing: .14em; color: var(--accent); margin: 0 60px 10px 0; line-height: 1.6; }
.rc-region { color: var(--ink-soft); letter-spacing: .05em; }
.rc-year { font-family: var(--font-year); font-size: 46px; line-height: 1; color: var(--accent); font-variant-numeric: oldstyle-nums; }
.rc-title { font-family: var(--font-title); font-weight: var(--w-title); font-size: 30px; line-height: 1.3; margin: 10px 0 10px; }
.rc-place { font-size: 12.5px; color: var(--ink-soft); padding: 6px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); line-height: 1.6; }
.rc-lede { font-size: 17px; line-height: 1.7; font-weight: 600; margin: 18px 0 14px; }
.rc-bridge { font-size: 14px; line-height: 1.85; color: var(--ink-soft); margin: 0 0 18px; padding: 8px 12px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); border-left: 3px solid var(--accent-2); }
.rc-bridge span { display: inline-block; font-size: 11px; letter-spacing: .15em; color: var(--paper); background: var(--accent-2); padding: 0 5px; margin-right: 8px; vertical-align: 1px; }
.rc-rewind { font-size: 13px; color: var(--accent); border: 1px dashed var(--accent); padding: 5px 10px; margin: 0 60px 12px 0; line-height: 1.6; }
.rw-i { font-size: 16px; margin-right: 6px; }
.rc-sidebar { font-size: 13px; color: var(--ink-soft); margin: 0 60px 12px 0; padding: 5px 10px; background: var(--paper-2); }
.rc-sidebar button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 13px; }
.rc-body p { font-size: 15px; line-height: 1.95; margin: 0 0 1em; }
.rc-body .dc { float: left; font-family: var(--font-title); font-weight: var(--w-title); font-size: 2.9em; line-height: 1; padding: 6px 10px 0 0; color: var(--accent); }
.rc-quote { margin: 20px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.rc-quote p { margin: 0; font-size: 15.5px; line-height: 1.8; }
.rc-quote .orig { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-size: 15px; margin-top: 8px; }
.rc-quote cite { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); font-style: normal; }
.st-text h3 { font: 600 12px var(--font-kick); letter-spacing: .18em; color: var(--accent); margin: 24px 0 8px; }
.rc-people .pp { display: flex; flex-direction: column; padding: 7px 10px; margin-bottom: 6px; border-left: 3px solid var(--accent-3); background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.rc-people .pp b { font-family: var(--font-display); font-size: 15px; }
.rc-people .pp span { font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.rc-cb .cb, .rc-side .sd { display: flex; gap: 10px; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--rule); padding: 6px; margin-bottom: 8px; cursor: pointer; font-size: 13.5px; line-height: 1.6; color: var(--ink); transition: border-color .2s, transform .2s; }
.rc-cb .cb:hover, .rc-side .sd:hover { border-color: var(--ink); transform: translateX(2px); }
.rc-cb img, .rc-side img, .rc-cb .ph, .rc-side .ph { flex: none; width: 58px; height: 58px; object-fit: cover; background: var(--paper-2); filter: sepia(.15); }
.rc-cb small, .rc-side small { display: block; font-size: 11.5px; color: var(--accent); letter-spacing: .05em; }
.rc-side b { display: block; font-family: var(--font-title); font-weight: var(--w-title); font-size: 15px; }
.rc-side .sd { border-style: dashed; }
.rc-notes { margin-top: 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.75; }
.rc-notes summary { cursor: pointer; letter-spacing: .1em; color: var(--ink); }
.rc-notes li { margin: 6px 0; }
.rc-next { display: none; width: 100%; margin-top: 26px; text-align: left; background: var(--paper); border: 1.5px solid var(--ink); padding: 10px 12px; cursor: pointer; line-height: 1.6; color: var(--ink); }
.rc-next small { display: block; color: var(--accent); font-size: 12px; letter-spacing: .1em; }
.rc-next b { display: block; font-family: var(--font-title); font-weight: var(--w-title); font-size: 17px; }
.rc-next span { font-size: 13px; color: var(--ink-soft); }

/* 下边框：唯一的进度条 */
.sf-bot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 8px 18px 7px; background: var(--paper); border-top: 1px solid var(--ink); padding-bottom: max(7px, env(safe-area-inset-bottom)); }
.sf-nav { background: var(--paper); border: 1px solid var(--ink); padding: 6px 14px; cursor: pointer; font: 14px var(--font-body); white-space: nowrap; }
.sf-nav.pri { background: var(--ink); color: var(--paper); }
.sf-nav:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.sf-nav:disabled { opacity: .35; cursor: default; }
.sf-lead { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.sf-lead b { font-weight: 600; color: var(--accent); margin-right: 8px; letter-spacing: .1em; }
.ab { display: flex; align-items: center; gap: 3px; height: 34px; min-width: 0; }
.ab-seg { position: relative; display: flex; align-items: center; height: 100%; min-width: 20px; flex-basis: 0; }
.ab-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--rule); }
.ab-seg.done .ab-line { background: var(--ink-soft); }
.ab-seg.on .ab-line { background: var(--ink); }
.ab-lab { position: relative; z-index: 1; flex: none; height: 22px; padding: 0 6px; background: var(--paper); border: 1px solid var(--ink-soft); color: var(--ink-soft); cursor: pointer; font: 12px/20px var(--font-kick); white-space: nowrap; }
.ab-lab .s { display: none; }
.ab-seg.done .ab-lab { border-color: var(--ink); color: var(--ink); }
.ab-seg.on .ab-lab { background: var(--accent); border-color: var(--accent); color: var(--paper); font-weight: 600; letter-spacing: .1em; }
.ab-lab:hover { border-color: var(--ink); color: var(--ink); }
.ab-stops { position: relative; z-index: 1; flex: 1; display: flex; justify-content: space-around; align-items: center; height: 100%; padding: 0 4px; }
.ab-stop { flex: none; width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; transition: transform .2s; }
.ab-stop.seen { background: var(--ink-soft); }
.ab-stop:hover { transform: scale(1.3); }
.ab-stop.cur { background: var(--accent); border-color: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent); }
.ab-stop.side { width: 8px; height: 8px; border-width: 1.5px; align-self: flex-start; margin-top: 2px; }
.ab-stop.side.cur { transform: scale(1.4); }

/* 幕首回顾卡 / 幕末答案卡 */
.st-screen { position: absolute; inset: 0; z-index: 20; display: flex; overflow-y: auto; padding: 24px; background: color-mix(in srgb, var(--paper-2) 82%, transparent); backdrop-filter: blur(3px); }
.st-screen[hidden] { display: none; }
.st-screen.in .scr { animation: scrIn .5s var(--ease); }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px); } }
.scr { position: relative; margin: auto; width: min(680px, 100%); padding: 34px 40px 30px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 18px 50px -24px #0008; text-align: center; }
.scr-k { font: 600 13px var(--font-kick); letter-spacing: .4em; color: var(--accent); }
.scr h2 { font-family: var(--font-title); font-weight: var(--w-title); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25; margin: 10px 0 18px; }
.scr-prev, .scr-q, .scr-recap-t, .scr-ans { text-align: left; }
.scr-prev { padding: 10px 14px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); border-left: 3px solid var(--ink-soft); margin-bottom: 12px; }
.scr small { display: block; font-size: 12px; letter-spacing: .15em; color: var(--ink-soft); margin-bottom: 2px; }
.scr-prev p, .scr-q p { margin: 0; font-size: 15.5px; line-height: 1.8; }
.scr-recap-t { font-size: 15px; line-height: 1.9; margin: 0 0 12px; }
.scr-q { padding: 10px 14px; border-left: 3px solid var(--accent); margin-bottom: 12px; }
.scr-q p { font-weight: 600; font-size: 17px; }
.scr-q.main { border-left-color: var(--accent-2); }
.scr-parts { display: flex; gap: 8px; margin-top: 8px; } .scr-parts span { border: 1px solid var(--ink); padding: 1px 10px; font-size: 13px; }
.scr-ans { font-size: 19px; line-height: 1.8; font-weight: 600; margin: 0 0 18px; padding: 14px 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.scr-rw { margin: 0 0 16px; text-align: left; }
.scr-rw p { margin: 8px 0 0; color: var(--accent); font-size: 14.5px; line-height: 1.7; }
.rw-ruler { position: relative; height: 34px; border-bottom: 2px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 14.28%) 0 100% / 100% 8px no-repeat; }
.rw-ruler > span { position: absolute; bottom: 10px; font: 11px var(--font-year); color: var(--ink-soft); } .rw-ruler > span:first-child { left: 0; } .rw-ruler > span:nth-child(2) { right: 0; }
.rw-needle { position: absolute; bottom: -2px; width: 3px; height: 26px; margin-left: -1.5px; background: var(--accent); transition: left 1.8s cubic-bezier(.6, 0, .25, 1); }
.rw-needle b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 600 12px var(--font-year); color: var(--paper); background: var(--accent); padding: 0 5px; }
.scr-th { display: flex; gap: 10px; margin: 14px 0 4px; }
.scr-th figure { flex: 1; margin: 0; min-width: 0; }
.scr-th img { width: 100%; height: 92px; object-fit: cover; border: 1px solid var(--rule); filter: sepia(.1); }
.scr-th figcaption { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.scr-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.scr-go { background: var(--paper); border: 1px solid var(--ink); padding: 8px 20px; cursor: pointer; font: 15px var(--font-body); }
.scr-go.pri { background: var(--ink); color: var(--paper); }
.scr-go:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* 转场提示 */
#transit { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 56; pointer-events: none; text-align: center; padding: 14px 26px 16px; max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--paper) 88%, transparent); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); animation: trIn .4s var(--ease); }
#transit[hidden] { display: none; }
@keyframes trIn { from { opacity: 0; } }
.tr-k { font-size: 12px; letter-spacing: .5em; color: var(--ink-soft); }
.tr-k::after { content: "……"; letter-spacing: 0; }
.tr-t { font-family: var(--font-title); font-weight: var(--w-title); font-size: 24px; margin-top: 4px; }
.tr-r { color: var(--accent); font-size: 14px; margin-top: 6px; } .tr-r:empty { display: none; }

/* 尾声：地球露出来，幕末卡排成一列 */
#story.see-globe { background: transparent; pointer-events: none; }
#story.see-globe .st-mid { background: transparent; }
#story.see-globe .sf-top, #story.see-globe .sf-bot, #story.see-globe .st-card, #story.see-globe .st-screen, #story.see-globe .epi-row { pointer-events: auto; }
body:has(#story.see-globe:not([hidden])) .mk { pointer-events: none; }
.epi { position: absolute; left: 0; right: 0; bottom: 12px; }
.epi-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 14px 8px; scrollbar-width: thin; }
.epi-card { flex: 0 0 196px; text-align: left; background: color-mix(in srgb, var(--paper) 94%, transparent); border: 1px solid var(--ink); padding: 10px 12px; cursor: pointer; color: var(--ink); line-height: 1.6; }
.epi-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.epi-card small { display: block; font-size: 11.5px; letter-spacing: .2em; color: var(--accent); }
.epi-card b { display: block; font-family: var(--font-title); font-weight: var(--w-title); font-size: 15px; margin: 2px 0 4px; }
.epi-card p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 时代装饰（桌面版阅读卡与上边框） ---------- */
/* e1：Owen Jones 三色条 + 双线框 */
body[data-era="e1"] .sf-top { padding-top: 14px; }
body[data-era="e1"] .sf-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stripe-e1); }
body[data-era="e1"] .st-card { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--ink), 0 10px 30px -14px #0006; }
body[data-era="e1"] .st-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--stripe-e1); z-index: 2; }
body[data-era="e1"] .st-text { padding-top: 30px; }
body[data-era="e1"] .rc-lede::first-letter { color: var(--accent-2); }
body[data-era="e1"] .scr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--stripe-e1); }
/* e2：枝叶 + 方形首字 + 亚麻纸 */
body[data-era="e2"] .sf-top { border-bottom: 3px double var(--accent); }
body[data-era="e2"] .st-card, body[data-era="e2"] .scr { border: 2px solid var(--accent); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--accent), 0 10px 30px -14px #0006;
  background-image: radial-gradient(circle at 1px 1px, #1c243012 1px, transparent 1.2px); background-size: 5px 5px; }
body[data-era="e2"] .st-card::after { content: ""; position: absolute; right: 12px; top: 34px; width: 96px; height: 96px; pointer-events: none; opacity: .8; background: var(--accent-3);
  -webkit-mask: var(--vine) center / contain no-repeat; mask: var(--vine) center / contain no-repeat; }
body[data-era="e2"] .rc-body p.first .dc { font-family: "Ma Shan Zheng", var(--font-title); font-weight: 400; font-size: 44px; line-height: 1; padding: 6px 8px; margin: 4px 10px 0 0; background: var(--accent); color: var(--paper); }
body[data-era="e2"] .rc-year { font-weight: 700; }
body[data-era="e2"] .rc-title { font-size: 34px; }
/* e3：拱形框 + 鞭绳曲线 */
body[data-era="e3"] .st-card { border: 2px solid var(--accent); border-radius: 150px 150px 6px 6px / 56px 56px 6px 6px; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--accent-3), 0 10px 30px -14px #0006; overflow: hidden; }
body[data-era="e3"] .st-text { padding: 46px 30px 74px; }
body[data-era="e3"] .st-card::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 56px; pointer-events: none; opacity: .6; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-mask: var(--whip) center / 100% 100% no-repeat; mask: var(--whip) center / 100% 100% no-repeat; }
body[data-era="e3"] .st-tog { top: 18px; right: 50%; transform: translateX(50%); border-radius: 99px; }
body[data-era="e3"] .rc-kick, body[data-era="e3"] .rc-rewind, body[data-era="e3"] .rc-sidebar { margin-right: 0; text-align: center; }
body[data-era="e3"] .rc-kick { font-style: italic; letter-spacing: .1em; }
body[data-era="e3"] .rc-year, body[data-era="e3"] .rc-title { text-align: center; }
body[data-era="e3"] .sf-top { border-bottom: 1.5px solid var(--accent); }
body[data-era="e3"] .sf-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 12px; pointer-events: none; opacity: .5; background: var(--accent-2); -webkit-mask: var(--whip) center / 100% 100% no-repeat; mask: var(--whip) center / 100% 100% no-repeat; }
body[data-era="e3"] .scr { border: 2px solid var(--accent); border-radius: 220px 220px 6px 6px / 70px 70px 6px 6px; padding-top: 52px; }
body[data-era="e3"] .sf-nav, body[data-era="e3"] .sf-home, body[data-era="e3"] .scr-go, body[data-era="e3"] .sf-tool { border-radius: 99px; border-color: var(--accent); }
/* e4：黑白方格 */
body[data-era="e4"] .sf-top { padding-top: 16px; }
body[data-era="e4"] .sf-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--checker) 0 0 / 16px 16px; }
body[data-era="e4"] .st-card, body[data-era="e4"] .scr { border: 12px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--checker) 0 0 / 24px 24px border-box; }
body[data-era="e4"] .st-card::after { content: ""; position: absolute; right: 14px; top: 40px; width: 42px; height: 42px; pointer-events: none;
  background: linear-gradient(var(--accent-3), var(--accent-3)) 50% 50% / 12px 12px no-repeat, var(--checker) 0 0 / 28px 28px; opacity: .9; }
body[data-era="e4"] .rc-kick, body[data-era="e4"] .scr-k { text-transform: uppercase; letter-spacing: .3em; }
body[data-era="e4"] .rc-year { letter-spacing: .12em; font-weight: 700; color: var(--ink); }
body[data-era="e4"] .rc-title { letter-spacing: .04em; }
body[data-era="e4"] .rc-body .dc { font-family: var(--font-body); font-weight: 700; border: 2px solid var(--ink); padding: 6px 10px; margin: 4px 10px 0 0; color: var(--ink); }
body[data-era="e4"] .sf-q span.on { background: var(--accent-3); border-color: var(--accent-3); }
body[data-era="e4"] .ab-seg.on .ab-lab, body[data-era="e4"] .ab-stop.cur { background: var(--accent-3); border-color: var(--accent-3); }
body[data-era="e4"] .ab-stop.cur { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent-3); }
/* 第七幕：地域皮肤（盖在时代装饰上面） */
body[data-region="qing"] .sf-top { border-bottom: 3px solid var(--accent); }
body[data-region="qing"] .sf-act b { border: 1.5px solid var(--accent); padding: 1px 4px 1px 6px; }
body[data-region="qing"] .st-card, body[data-region="qing"] .scr { border: 1px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: inset 5px 0 0 var(--accent), inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--ink), 0 10px 30px -14px #0006; }
body[data-region="qing"] .st-card::after { display: none; }
body[data-region="qing"] .rc-year { color: var(--accent); }
body[data-region="meiji"] .sf-top { box-shadow: inset 0 -5px 0 var(--accent); }
body[data-region="meiji"] .st-card, body[data-region="meiji"] .scr { border: 1px solid var(--ink); border-top: 8px solid var(--accent); border-radius: 0; background: var(--paper); box-shadow: 0 10px 30px -14px #0006; }
body[data-region="meiji"] .st-card::after { display: none; }
body[data-region="india"] .st-card, body[data-region="india"] .scr { border: 1px solid var(--ink); border-radius: 0; box-shadow: 0 10px 30px -14px #0006;
  background: radial-gradient(circle, var(--accent-3) 1.5px, transparent 1.8px) 0 0 / 14px 14px repeat-y, var(--paper); }
body[data-region="india"] .st-text { margin-left: 12px; background: var(--paper); }
body[data-region="india"] .st-card::after { display: none; }
body[data-region="india"] .sf-top { border-bottom: 3px dotted var(--accent-3); }
body[data-region="qing"] .sf-top::before, body[data-region="meiji"] .sf-top::before, body[data-region="india"] .sf-top::before,
body[data-region="qing"] .sf-top::after, body[data-region="meiji"] .sf-top::after, body[data-region="india"] .sf-top::after { display: none; }

/* ---------- original viewer ---------- */
.ov { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ov-view { flex: 1; min-height: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.ov-view.dragging { cursor: grabbing; }
.ov-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; box-shadow: 0 2px 0 #0002, 0 20px 50px -20px #0006; }
.ov-ctrl { position: absolute; z-index: 7; right: 12px; bottom: 6px; display: flex; gap: 5px; }
.ov-ctrl button { background: var(--paper); border: 1px solid var(--ink); width: 30px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; }
.ov-ctrl button:hover { background: var(--ink); color: var(--paper); }
.ov-cap { position: absolute; z-index: 7; left: 12px; bottom: 8px; max-width: calc(100% - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 85%, transparent); padding: 2px 8px; }
.ov-cap a { color: inherit; }
.ov-strip { flex: none; height: 96px; display: flex; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ink); background: var(--paper); overflow-x: auto; scrollbar-width: thin; }
.ov-th { position: relative; flex: none; height: 100%; display: flex; gap: 8px; cursor: pointer; opacity: .65; border: 1px solid transparent; padding: 2px; max-width: 260px; background: none; text-align: left; }
.ov-th.on, .ov-th:hover { opacity: 1; border-color: var(--ink); }
.ov-th img { height: 100%; width: auto; max-width: 110px; object-fit: cover; }
.ov-th span { font-size: 12px; line-height: 1.45; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-width: 140px; }
.ov-th em, .gal figure em { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--paper); font: normal 600 11px/18px var(--font-body); text-align: center; padding: 0 4px; }
.ov-plate { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; background: radial-gradient(ellipse at 50% 40%, var(--paper), var(--paper-2)); }
.pl-in { max-width: 560px; text-align: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 26px 10px; }
.pl-y { font-family: var(--font-year); font-size: 40px; color: var(--accent); }
.pl-t { font-family: var(--font-title); font-weight: var(--w-title); font-size: 34px; margin: 6px 0 12px; }
.pl-in p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); margin: 0; }
/* gallery */
.gal { position: absolute; inset: 0; overflow-y: auto; padding: 18px 22px 22px; columns: 3 220px; column-gap: 18px; }
.gal-hint { column-span: all; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; letter-spacing: .05em; }
.gal figure { position: relative; break-inside: avoid; margin: 0 0 18px; background: var(--paper); border: 1px solid var(--ink); padding: 8px; cursor: zoom-in; transition: transform .2s; }
.gal figure:hover { transform: translateY(-2px) rotate(-.3deg); }
.gal img { width: 100%; display: block; }
.gal figcaption { font-size: 13px; line-height: 1.6; padding-top: 8px; }
.gal figcaption small { display: block; color: var(--ink-soft); font-size: 11.5px; }
.gal figure em { left: 12px; top: 12px; }

/* ---------- overlay (network, lightbox) ---------- */
#overlay { position: fixed; inset: 0; z-index: 35; background: var(--paper); display: flex; flex-direction: column; }
#overlay[hidden] { display: none; }
.ov-bar { height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-size: 18px; }
.ov-stage { flex: 1; position: relative; min-height: 0; }
#about { max-width: 560px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 24px 28px; font-size: 15px; line-height: 1.85; }
#about::backdrop { background: #0005; }
#about h2 { font-family: var(--font-display); font-weight: 400; margin-top: 0; }

/* ---------- clouds + loading ---------- */
#clouds { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; opacity: 0; }
#loading { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: grid; place-items: center; transition: opacity 1s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-title { font-family: var(--font-display); font-size: 40px; text-align: center; }
.ld-sub { text-align: center; color: var(--ink-soft); margin-top: 8px; font-size: 14px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  :root { --tl-h: 84px; }
  #masthead { padding: 10px 12px; flex-direction: column; gap: 8px; }
  .mast-title { padding: 6px 12px 8px; } .mast-title h1 { font-size: 24px; }
  body[data-era="e1"] .mast-title { padding-top: 14px; }
  .mast-tools .tool { padding: 4px 10px; font-size: 13px; }
  #timeline { padding: 0 14px; }
  .tl-era { font-size: 10px; letter-spacing: 0; }
  #peek { top: auto; bottom: calc(var(--tl-h) + 10px); transform: none; right: 16px; left: 16px; width: auto; flex-direction: row; animation: none; }
  .peek-img { width: 34%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--ink); }
  .peek-title { font-size: 18px; } .peek-key { font-size: 13px; margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* 上下边框各一行；中间画面约 55vh；下面只有一个文字区 */
  .sf-top { min-height: 42px; gap: 8px; padding: 5px 10px; }
  body[data-era="e1"] .sf-top, body[data-era="e4"] .sf-top { padding-top: 9px; }
  body[data-era="e1"] .sf-top::before { height: 4px; } body[data-era="e4"] .sf-top::before { height: 5px; background-size: 10px 10px; }
  .sf-home { padding: 4px 7px; } .sf-home .t { display: none; }
  .sf-act span, .sf-when, .sf-tool { display: none; }
  .sf-act b { font-size: 12.5px; letter-spacing: .08em; }
  .sf-q { font-size: 12.5px; gap: 2px; } .sf-q span { padding: 1px 6px; }
  /* 画面占满中间；文字收进底部 sheet（js/sheet.js 控制高度：收起 / 半开 / 全开） */
  .st-stage, #story.card-closed .st-stage { left: 0; right: 0; top: 0; bottom: var(--sheet-peek, 76px); }
  .st-card, #story.card-closed .st-card { position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: auto; z-index: 9; overflow: hidden;
    border: 0 !important; border-radius: 16px 16px 0 0 !important; background: var(--paper) !important;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 35%, transparent), 0 -10px 28px -12px #0007 !important; will-change: transform; touch-action: none; }
  .st-card.sh-anim { transition: transform .42s cubic-bezier(.2, .9, .25, 1.04); }
  .st-card::before, .st-card::after { display: none !important; }
  .st-tog { display: none; }
  #story.card-closed .st-text { display: block; }
  .sh-grab { display: block !important; flex: none; position: relative; padding: 8px 16px 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    border-bottom: 1px solid var(--rule); }
  .sh-bar { display: block; width: 40px; height: 5px; border-radius: 3px; margin: 0 auto 8px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
  .sh-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
  .sh-t b { flex: none; font-family: var(--font-year); font-weight: 400; font-size: 20px; color: var(--accent); line-height: 1.1; font-variant-numeric: oldstyle-nums; }
  .sh-t span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-title); font-weight: var(--w-title); font-size: 16px; }
  .sh-t em { flex: none; font-style: normal; font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); }
  .st-card[data-det="mid"] .sh-t em, .st-card[data-det="max"] .sh-t em { visibility: hidden; }
  .st-card[data-det="min"] .st-text { overflow: hidden; }
  .st-text { touch-action: pan-y; }
  /* 时代装饰：sheet 顶边一条 */
  body[data-era="e1"] .sh-grab { border-top: 4px solid transparent; border-image: var(--stripe-e1) 1; border-bottom: 1px solid var(--rule); }
  body[data-era="e2"] .sh-grab { border-bottom: 3px double var(--accent); }
  body[data-era="e3"] .sh-grab { border-bottom: 1.5px solid var(--accent); }
  body[data-era="e3"] .sh-t span { font-style: normal; }
  body[data-era="e4"] .sh-grab { border-bottom: 0; padding-bottom: 14px; }
  body[data-era="e4"] .sh-grab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--checker) 0 0 / 10px 10px; }
  body[data-region="qing"] .sh-grab, body[data-region="meiji"] .sh-grab { border-bottom: 3px solid var(--accent); }
  body[data-region="india"] .sh-grab { border-bottom: 3px dotted var(--accent-3); }
  .st-text, body[data-era="e3"] .st-text, body[data-era="e1"] .st-text, body[data-region="india"] .st-text { padding: 14px 16px 26px; margin: 0 !important; }
  .rc-year, .rc-title { display: none; }
  body[data-era="e3"] .rc-kick, body[data-era="e3"] .rc-year, body[data-era="e3"] .rc-title { text-align: left; }
  .rc-kick, .rc-rewind, .rc-sidebar { margin-right: 0; }
  .rc-lede { font-size: 15.5px; margin: 12px 0 10px; }
  .rc-body p { font-size: 14.5px; line-height: 1.9; }
  .rc-next { display: block; }
  .sf-bot { grid-template-columns: auto minmax(0, 1fr) auto; padding: 5px 8px; padding-bottom: max(5px, env(safe-area-inset-bottom)); gap: 0 6px; }
  .sf-nav { padding: 5px 11px; font-size: 16px; } .sf-nav span { display: none; }
  .sf-lead { display: none; }
  .ab { gap: 2px; height: 30px; }
  .ab-seg { min-width: 14px; }
  .ab-lab { padding: 0 3px; font-size: 11px; height: 20px; line-height: 18px; }
  .ab-lab .l { display: none; } .ab-lab .s { display: inline; }
  .ab-stop { width: 10px; height: 10px; border-width: 1.5px; }
  .ab-stop.side { width: 6px; height: 6px; }
  .st-screen { padding: 10px; }
  .scr { padding: 22px 18px 20px; }
  body[data-era="e3"] .scr { border-radius: 120px 120px 6px 6px / 40px 40px 6px 6px; padding-top: 34px; }
  body[data-era="e4"] .scr { border-width: 8px; }
  .scr h2 { margin-bottom: 12px; }
  .scr-th img { height: 64px; }
  .scr-prev p, .scr-q p, .scr-recap-t { font-size: 14px; } .scr-ans { font-size: 16px; }
  #transit { padding: 10px 16px; } .tr-t { font-size: 19px; }
  .ov-strip { height: 62px; padding: 5px 8px; gap: 6px; } .ov-th span { display: none; }
  .ov-cap { display: none; }
  .ov-ctrl { bottom: auto; top: 8px; right: 8px; }
  .ov-ctrl button { width: 32px; height: 30px; }
  .gal { padding: 10px; columns: 2 140px; column-gap: 10px; }
  .gal figure { padding: 5px; margin-bottom: 10px; } .gal figcaption { font-size: 11.5px; } .gal figcaption small { display: none; }
  .epi { bottom: 6px; } .epi-card { flex-basis: 160px; padding: 8px 10px; }
  .epi-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .pl-t { font-size: 24px; } .pl-y { font-size: 30px; } .pl-in p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- “从头开始”：高迪碎瓷片（trencadís）按钮，阳光掠过时闪光 ---------- */
:root { --trencadis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Crect width='240' height='64' fill='%23efe6d2'/%3E%3Cpath d='M0.0 0.0 L17.5 0.0 L18.9 19.9Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M0.0 0.0 L18.9 19.9 L0.0 11.1Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='4.3' cy='8.3' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 6.3 10.3%29'/%3E%3Cpath d='M17.5 0.0 L35.1 0.0 L18.9 19.9Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='21.9' cy='4.6' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 23.9 6.6%29'/%3E%3Cpath d='M35.1 0.0 L34.7 12.7 L18.9 19.9Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M35.1 0.0 L62.1 0.0 L34.7 12.7Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='42.0' cy='2.2' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 44.0 4.2%29'/%3E%3Cpath d='M62.1 0.0 L61.8 21.4 L34.7 12.7Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='50.9' cy='9.4' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 52.9 11.4%29'/%3E%3Cpath d='M62.1 0.0 L74.0 0.0 L81.1 14.8 L61.8 21.4Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='67.7' cy='7.0' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 69.7 9.0%29'/%3E%3Cpath d='M74.0 0.0 L100.5 0.0 L106.7 10.6 L81.1 14.8Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='88.6' cy='4.3' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 90.6 6.3%29'/%3E%3Cpath d='M100.5 0.0 L118.1 0.0 L125.0 13.5Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M100.5 0.0 L125.0 13.5 L106.7 10.6Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M118.1 0.0 L133.8 0.0 L135.0 11.4Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M118.1 0.0 L135.0 11.4 L125.0 13.5Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M133.8 0.0 L160.1 0.0 L157.3 19.8Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M133.8 0.0 L157.3 19.8 L135.0 11.4Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='140.1' cy='8.4' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 142.1 10.4%29'/%3E%3Cpath d='M160.1 0.0 L173.5 0.0 L175.5 17.0Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M160.1 0.0 L175.5 17.0 L157.3 19.8Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='162.3' cy='10.3' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 164.3 12.3%29'/%3E%3Cpath d='M173.5 0.0 L199.1 0.0 L175.5 17.0Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M199.1 0.0 L201.9 14.5 L175.5 17.0Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M199.1 0.0 L214.0 0.0 L201.9 14.5Z' fill='%23e07a3f' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M214.0 0.0 L220.7 10.8 L201.9 14.5Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='210.2' cy='6.4' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 212.2 8.4%29'/%3E%3Cpath d='M214.0 0.0 L240.0 0.0 L240.0 10.7Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='229.3' cy='1.6' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 231.3 3.6%29'/%3E%3Cpath d='M214.0 0.0 L240.0 10.7 L220.7 10.8Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M0.0 11.1 L18.9 19.9 L22.5 31.1Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='11.8' cy='18.7' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 13.8 20.7%29'/%3E%3Cpath d='M0.0 11.1 L22.5 31.1 L0.0 28.5Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M18.9 19.9 L34.7 12.7 L22.5 31.1Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='23.4' cy='19.2' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 25.4 21.2%29'/%3E%3Cpath d='M34.7 12.7 L37.4 33.0 L22.5 31.1Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M34.7 12.7 L61.8 21.4 L37.4 33.0Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='42.6' cy='20.4' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 44.6 22.4%29'/%3E%3Cpath d='M61.8 21.4 L59.3 29.6 L37.4 33.0Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='50.8' cy='26.0' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 52.8 28.0%29'/%3E%3Cpath d='M61.8 21.4 L81.1 14.8 L59.3 29.6Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='65.4' cy='19.9' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 67.4 21.9%29'/%3E%3Cpath d='M81.1 14.8 L84.1 34.4 L59.3 29.6Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M81.1 14.8 L106.7 10.6 L96.4 32.9 L84.1 34.4Z' fill='%238fc1d9' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M106.7 10.6 L125.0 13.5 L96.4 32.9Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M125.0 13.5 L120.4 36.5 L96.4 32.9Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M125.0 13.5 L135.0 11.4 L120.4 36.5Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M135.0 11.4 L143.2 29.5 L120.4 36.5Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M135.0 11.4 L157.3 19.8 L143.2 29.5Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M157.3 19.8 L166.7 27.4 L143.2 29.5Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M157.3 19.8 L175.5 17.0 L166.7 27.4Z' fill='%23e07a3f' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M175.5 17.0 L178.9 35.1 L166.7 27.4Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='171.7' cy='24.5' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 173.7 26.5%29'/%3E%3Cpath d='M175.5 17.0 L201.9 14.5 L195.1 31.9Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='188.9' cy='19.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 190.9 21.1%29'/%3E%3Cpath d='M175.5 17.0 L195.1 31.9 L178.9 35.1Z' fill='%23e07a3f' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M201.9 14.5 L220.7 10.8 L213.5 34.0 L195.1 31.9Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M220.7 10.8 L240.0 10.7 L240.0 35.2 L213.5 34.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M0.0 28.5 L22.5 31.1 L25.3 45.8 L0.0 48.9Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='9.9' cy='36.6' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 11.9 38.6%29'/%3E%3Cpath d='M22.5 31.1 L37.4 33.0 L42.7 49.1 L25.3 45.8Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M37.4 33.0 L59.3 29.6 L42.7 49.1Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M59.3 29.6 L61.1 47.5 L42.7 49.1Z' fill='%238fc1d9' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M59.3 29.6 L84.1 34.4 L61.1 47.5Z' fill='%23d9483b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M84.1 34.4 L84.8 53.3 L61.1 47.5Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M84.1 34.4 L96.4 32.9 L99.6 50.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='91.4' cy='37.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 93.4 39.1%29'/%3E%3Cpath d='M84.1 34.4 L99.6 50.0 L84.8 53.3Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M96.4 32.9 L120.4 36.5 L99.6 50.0Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M120.4 36.5 L113.8 50.4 L99.6 50.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='109.3' cy='43.6' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 111.3 45.6%29'/%3E%3Cpath d='M120.4 36.5 L143.2 29.5 L142.1 53.9Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M120.4 36.5 L142.1 53.9 L113.8 50.4Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='123.4' cy='44.9' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 125.4 46.9%29'/%3E%3Cpath d='M143.2 29.5 L166.7 27.4 L164.5 45.4Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='156.1' cy='32.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 158.1 34.1%29'/%3E%3Cpath d='M143.2 29.5 L164.5 45.4 L142.1 53.9Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M166.7 27.4 L178.9 35.1 L178.4 50.0Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='172.7' cy='35.5' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 174.7 37.5%29'/%3E%3Cpath d='M166.7 27.4 L178.4 50.0 L164.5 45.4Z' fill='%23e07a3f' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M178.9 35.1 L195.1 31.9 L193.3 47.5Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M178.9 35.1 L193.3 47.5 L178.4 50.0Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M195.1 31.9 L213.5 34.0 L215.4 43.4Z' fill='%23d9483b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M195.1 31.9 L215.4 43.4 L193.3 47.5Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='199.3' cy='38.9' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 201.3 40.9%29'/%3E%3Cpath d='M213.5 34.0 L240.0 35.2 L240.0 42.7Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='229.2' cy='35.3' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 231.2 37.3%29'/%3E%3Cpath d='M213.5 34.0 L240.0 42.7 L215.4 43.4Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M0.0 48.9 L25.3 45.8 L23.8 64.0Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M0.0 48.9 L23.8 64.0 L0.0 64.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M25.3 45.8 L42.7 49.1 L34.8 64.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='32.3' cy='51.0' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 34.3 53.0%29'/%3E%3Cpath d='M25.3 45.8 L34.8 64.0 L23.8 64.0Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M42.7 49.1 L61.1 47.5 L56.5 64.0Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M42.7 49.1 L56.5 64.0 L34.8 64.0Z' fill='%23c8553d' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M61.1 47.5 L84.8 53.3 L56.5 64.0Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M84.8 53.3 L78.5 64.0 L56.5 64.0Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M84.8 53.3 L99.6 50.0 L105.2 64.0Z' fill='%231f5fa8' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='94.5' cy='53.8' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 96.5 55.8%29'/%3E%3Cpath d='M84.8 53.3 L105.2 64.0 L78.5 64.0Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='87.5' cy='58.4' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 89.5 60.4%29'/%3E%3Cpath d='M99.6 50.0 L113.8 50.4 L114.1 64.0 L105.2 64.0Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M113.8 50.4 L142.1 53.9 L114.1 64.0Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='121.3' cy='54.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 123.3 56.1%29'/%3E%3Cpath d='M142.1 53.9 L139.3 64.0 L114.1 64.0Z' fill='%232b8fbf' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='129.8' cy='58.6' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 131.8 60.6%29'/%3E%3Cpath d='M142.1 53.9 L164.5 45.4 L160.7 64.0Z' fill='%238fc1d9' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M142.1 53.9 L160.7 64.0 L139.3 64.0Z' fill='%238fc1d9' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M164.5 45.4 L178.4 50.0 L185.4 64.0Z' fill='%23ffffff' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='174.1' cy='51.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 176.1 53.1%29'/%3E%3Cpath d='M164.5 45.4 L185.4 64.0 L160.7 64.0Z' fill='%235b8c3a' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M178.4 50.0 L193.3 47.5 L204.5 64.0Z' fill='%23f4efe4' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M178.4 50.0 L204.5 64.0 L185.4 64.0Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M193.3 47.5 L215.4 43.4 L204.5 64.0Z' fill='%23f2d06b' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M215.4 43.4 L225.1 64.0 L204.5 64.0Z' fill='%23e3b23c' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M215.4 43.4 L240.0 42.7 L240.0 64.0Z' fill='%233fa7a0' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='229.8' cy='48.0' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 231.8 50.0%29'/%3E%3Cpath d='M215.4 43.4 L240.0 64.0 L225.1 64.0Z' fill='%23e07a3f' stroke='%23efe6d2' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cellipse cx='224.8' cy='55.1' rx='3.2' ry='1.4' fill='%23fff' opacity='.45' transform='rotate%28-25 226.8 57.1%29'/%3E%3C/svg%3E"); }
#btnTour.tour-cta { position: relative; overflow: hidden; isolation: isolate; border: 2px solid #2a2118; border-radius: 999px; padding: 9px 22px 10px 18px;
  background: var(--trencadis) center / cover; color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .14em;
  text-shadow: 0 1px 0 #000a, 0 0 6px #000c; animation: tcGlow 4.2s ease-in-out infinite; transition: transform .2s; }
#btnTour.tour-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(ellipse 58% 70% at 52% 50%, #1b130c99, #1b130c33 75%, transparent); }
#btnTour.tour-cta::after { content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, #fff3c480 45%, #ffffffe0 50%, #bfe7ff80 55%, transparent 62%);
  transform: translateX(-70%); animation: tcSweep 4.2s ease-in-out infinite; }
#btnTour.tour-cta .tc-i { display: inline-block; margin-right: 8px; font-size: 12px; transform: translateY(-1px); }
#btnTour.tour-cta:hover { transform: translateY(-1px) scale(1.04); color: #fff; }
body[data-era] #btnTour.tour-cta { border-radius: 999px; border-color: #2a2118; border-width: 2px; }
@keyframes tcSweep { 0%, 35% { transform: translateX(-70%); } 70%, 100% { transform: translateX(70%); } }
@keyframes tcGlow {
  0%, 100% { box-shadow: 0 0 0 2px #f4efe4, 0 0 14px 3px #2b8fbfaa, 0 0 32px 8px #e3b23c55; }
  33% { box-shadow: 0 0 0 2px #f4efe4, 0 0 18px 4px #e3b23cbb, 0 0 38px 10px #c8553d55; }
  66% { box-shadow: 0 0 0 2px #f4efe4, 0 0 18px 4px #3fa7a0bb, 0 0 38px 10px #1f5fa855; } }
#btnTour .tc-spark { position: absolute; z-index: 2; width: 9px; height: 9px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(#fff, #fff) 50% 50% / 1.5px 100% no-repeat, linear-gradient(#fff, #fff) 50% 50% / 100% 1.5px no-repeat;
  filter: drop-shadow(0 0 3px #fff); animation: tcSpark 4.2s ease-in-out infinite; }
#btnTour .tc-spark.s1 { left: 22%; top: 18%; animation-delay: 1.9s; }
#btnTour .tc-spark.s2 { left: 62%; top: 58%; animation-delay: 2.4s; }
#btnTour .tc-spark.s3 { left: 86%; top: 22%; animation-delay: 2.8s; }
@keyframes tcSpark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 6% { opacity: 1; transform: scale(1.15) rotate(45deg); } 14% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (max-width: 760px) { #btnTour.tour-cta { padding: 7px 16px 8px 13px; font-size: 14px; } }