/* RenaSci question network — preview skins.
   A preview of a link's target wears the target topic's own world: the topic cards on the map, the hover card,
   the map tooltip and the small ID badge that every cross-link carries. Around them the host page keeps its own
   look, so a page and its previews blend rather than all looking the same. Loaded last, after net.css / read.css /
   themes.css / en.css; the rules are scoped by [data-skin] and start with "html" so that they outrank the page theme. */

/* ---------- the eight worlds, as scoped tokens ---------- */
[data-skin="hub"] {
  --s-bg: #060607; --s-panel: #0d0e0f; --s-paper: #ecede6; --s-fg: #e9ebe3; --s-fg2: #cfd3c7; --s-dim: #8f9486;
  --s-acc: #d4ff26; --s-ink: #0b0c05; --s-alt: #ff3d7f; --s-line: rgba(212, 255, 38, .3); --s-soft: rgba(233, 235, 227, .12);
  --s-head: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --s-serif: "Noto Serif SC", "Songti SC", serif;
  --s-body: "Noto Sans SC", "PingFang SC", sans-serif; --s-mono: "Martian Mono", "Noto Sans SC", ui-monospace, monospace;
  --s-img: none; --s-blend: normal; --s-imgbg: #000;
}
[data-skin="scroll"] {
  --s-bg: #efe6d0; --s-panel: #e7dcc0; --s-paper: #f7f1e3; --s-fg: #2b2118; --s-fg2: #3b2e22; --s-dim: #7a6a55;
  --s-acc: #b3321b; --s-ink: #f7f1e3; --s-alt: #8a6d2a; --s-line: rgba(43, 33, 24, .38); --s-soft: rgba(43, 33, 24, .14);
  --s-head: "Ma Shan Zheng", "Noto Serif SC", "Songti SC", serif; --s-serif: "Noto Serif SC", "Songti SC", serif;
  --s-body: "Noto Serif SC", "Songti SC", serif; --s-mono: "EB Garamond", "Noto Serif SC", serif;
  --s-img: sepia(.9) contrast(1.05) brightness(1.05); --s-blend: multiply; --s-imgbg: #e7dcc0;
}
[data-skin="collage"] {
  --s-bg: #e9e2d3; --s-panel: #dfd6c2; --s-paper: #fbf7ec; --s-fg: #141414; --s-fg2: #1f1f1f; --s-dim: #5f5a50;
  --s-acc: #d62828; --s-ink: #fbf7ec; --s-alt: #1b4bd6; --s-yel: #f4c430; --s-line: rgba(20, 20, 20, .85); --s-soft: rgba(20, 20, 20, .18);
  --s-head: "ZCOOL QingKe HuangYou", "Anton", "Noto Sans SC", sans-serif; --s-serif: "Noto Serif SC", "Songti SC", serif;
  --s-body: "Noto Serif SC", "Songti SC", serif; --s-mono: "Special Elite", "Courier New", "Noto Sans SC", monospace;
  --s-img: grayscale(1) contrast(1.4); --s-blend: multiply; --s-imgbg: #dfd6c2;
}
[data-skin="cyber"] {
  --s-bg: #04060f; --s-panel: #0a1020; --s-paper: #e4f3ff; --s-fg: #e4f3ff; --s-fg2: #cfe4f6; --s-dim: #7f97b5;
  --s-acc: #22e0ff; --s-ink: #03111a; --s-alt: #ff2fbf; --s-line: rgba(34, 224, 255, .4); --s-soft: rgba(228, 243, 255, .12);
  --s-head: "Orbitron", "Noto Sans SC", sans-serif; --s-serif: "Noto Sans SC", "PingFang SC", sans-serif;
  --s-body: "Noto Sans SC", "PingFang SC", sans-serif; --s-mono: "Share Tech Mono", "Noto Sans SC", ui-monospace, monospace;
  --s-img: contrast(1.2) hue-rotate(160deg) saturate(1.6); --s-blend: screen; --s-imgbg: #04060f;
}
[data-skin="pixel"] {
  --s-bg: #12112a; --s-panel: #1d2b53; --s-paper: #fff1e8; --s-fg: #fff1e8; --s-fg2: #f2e6dc; --s-dim: #a9a2c7;
  --s-acc: #ffec27; --s-ink: #1d2b53; --s-alt: #ff004d; --s-line: rgba(255, 241, 232, .9); --s-soft: rgba(255, 241, 232, .14);
  --s-head: "Noto Sans SC", "PingFang SC", sans-serif; --s-serif: "Noto Sans SC", "PingFang SC", sans-serif;
  --s-body: "Noto Sans SC", "PingFang SC", sans-serif; --s-mono: "VT323", "Noto Sans SC", ui-monospace, monospace; --s-px: "Press Start 2P", "VT323", monospace;
  --s-img: contrast(1.3) saturate(1.4); --s-blend: normal; --s-imgbg: #12112a;
}
[data-skin="lab"] {
  --s-bg: #ffffff; --s-panel: #e9edef; --s-paper: #ffffff; --s-fg: #0f1720; --s-fg2: #1b2530; --s-dim: #5c6670;
  --s-acc: #0047ff; --s-ink: #ffffff; --s-alt: #e5322d; --s-line: rgba(15, 23, 32, .6); --s-soft: rgba(15, 23, 32, .14);
  --s-head: "IBM Plex Sans", "Noto Sans SC", sans-serif; --s-serif: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  --s-body: "IBM Plex Sans", "Noto Sans SC", sans-serif; --s-mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, monospace;
  --s-img: grayscale(1) contrast(1.35); --s-blend: multiply; --s-imgbg: #ffffff;
}
[data-skin="fractal"] {
  --s-bg: #07040f; --s-panel: #120a24; --s-paper: #efe9ff; --s-fg: #efe9ff; --s-fg2: #dcd3f5; --s-dim: #9a8fc2;
  --s-acc: #19f0c8; --s-ink: #06110f; --s-alt: #a26bff; --s-mag: #ff5ea8; --s-line: rgba(162, 107, 255, .55); --s-soft: rgba(239, 233, 255, .12);
  --s-grad: linear-gradient(100deg, #19f0c8, #a26bff 45%, #ffcf5a 80%, #ff5ea8);
  --s-head: "Fraunces", "Noto Serif SC", "Songti SC", serif; --s-serif: "Fraunces", "Noto Serif SC", serif;
  --s-body: "Noto Sans SC", "PingFang SC", sans-serif; --s-mono: "Space Mono", "Noto Sans SC", ui-monospace, monospace;
  --s-img: hue-rotate(200deg) saturate(1.5) contrast(1.1); --s-blend: screen; --s-imgbg: #07040f;
}
[data-skin="line"] {
  --s-bg: #d7c49b; --s-panel: #cbb68a; --s-paper: #f5efdf; --s-fg: #1f1a14; --s-fg2: #2b241b; --s-dim: #5e5040;
  --s-acc: #c8321e; --s-ink: #f5efdf; --s-alt: #1f4e8c; --s-line: rgba(31, 26, 20, .7); --s-soft: rgba(31, 26, 20, .18);
  --s-head: "Big Shoulders Stencil Display", "Noto Sans SC", "Arial Narrow", sans-serif; --s-serif: "Noto Serif SC", "Songti SC", serif;
  --s-body: "Noto Sans SC", "PingFang SC", sans-serif; --s-mono: "Courier Prime", "Courier New", "Noto Sans SC", monospace;
  --s-img: sepia(.8) contrast(1.1); --s-blend: multiply; --s-imgbg: #cbb68a;
}
/* English: Latin faces first, as on the English topic pages */
html[lang="en"] [data-skin="hub"] { --s-head: "Archivo", "Helvetica Neue", Arial, sans-serif; --s-serif: "Source Serif 4", Georgia, serif; --s-body: "Archivo", Arial, sans-serif; }
html[lang="en"] [data-skin="scroll"] { --s-head: "EB Garamond", Georgia, serif; --s-serif: "EB Garamond", Georgia, serif; --s-body: "EB Garamond", Georgia, serif; }
html[lang="en"] [data-skin="collage"] { --s-head: "Anton", "Archivo", sans-serif; --s-serif: "Source Serif 4", Georgia, serif; --s-body: "Source Serif 4", Georgia, serif; }
html[lang="en"] [data-skin="cyber"], html[lang="en"] [data-skin="pixel"] { --s-serif: "Archivo", Arial, sans-serif; --s-body: "Archivo", Arial, sans-serif; }
html[lang="en"] [data-skin="pixel"] { --s-head: "Archivo", Arial, sans-serif; }
html[lang="en"] [data-skin="fractal"] { --s-body: "Archivo", Arial, sans-serif; }
html[lang="en"] [data-skin="line"] { --s-serif: "Source Serif 4", Georgia, serif; --s-body: "Archivo", Arial, sans-serif; }

/* =====================================================================
   1. ID badges on cross-links (questions, side notes, sequence, footer, routes)
   ===================================================================== */
html b.tid[data-skin] {
  display: inline-block; padding: 0 .42em !important; line-height: 1.55; text-align: center; vertical-align: baseline;
  font-family: var(--s-mono) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: .02em !important;
  background: var(--s-acc) !important; color: var(--s-ink) !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
html b.tid[data-skin="scroll"] { transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(247, 241, 227, .6) !important; border-radius: 1px; }
html b.tid[data-skin="collage"] { background: #141414 !important; color: #fbf7ec !important; box-shadow: 2px 2px 0 #d62828 !important; transform: rotate(-2deg); }
html b.tid[data-skin="cyber"] { background: #04060f !important; color: #22e0ff !important; border: 1px solid #22e0ff !important; text-shadow: 0 0 6px rgba(34, 224, 255, .85) !important; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
html b.tid[data-skin="pixel"] { font-family: var(--s-px) !important; font-size: .74em !important; line-height: 2 !important; letter-spacing: 0 !important; background: #1d2b53 !important; color: #ffec27 !important; box-shadow: 2px 2px 0 #ff004d !important; -webkit-font-smoothing: none; }
html b.tid[data-skin="lab"] { background: #ffffff !important; color: #0047ff !important; border: 1px solid #0f1720 !important; font-weight: 600 !important; }
html b.tid[data-skin="fractal"] { background: linear-gradient(90deg, #19f0c8, #a26bff) !important; color: #06110f !important; }
html b.tid[data-skin="line"] { background: #f5efdf !important; color: #c8321e !important; border: 1.5px solid #c8321e !important; transform: rotate(-3deg); border-radius: 2px; }
html .nfoot__cell > a b.tid { min-width: 2.6em; margin-right: 6px; }
html .route li a b.tid, html .np__n b.tid, html .pl__n b.tid, html .seq b.tid { margin-right: 8px; }
html .seq a:last-child b.tid { margin-right: 0; margin-left: 2px; }

/* =====================================================================
   2. Topic cards on the map: each card is a small window into its topic
   ===================================================================== */
html .nc[data-skin] { position: relative; isolation: isolate; background: var(--s-bg); color: var(--s-fg); }
html .nc[data-skin] .nc__img { background: var(--s-imgbg); border-bottom: 1px solid var(--s-line); }
html .nc[data-skin] .nc__img img { filter: var(--s-img); mix-blend-mode: var(--s-blend); }
html .nc[data-skin] .nc__k { font-family: var(--s-mono); color: var(--s-dim); }
html .nc[data-skin] .nc__k b { background: var(--s-acc); color: var(--s-ink); }
html .nc[data-skin] h3 { font-family: var(--s-head); color: var(--s-fg); }
html .nc[data-skin] h3 a:hover { color: var(--s-acc); }
html .nc[data-skin] .nc__s { font-family: var(--s-serif); color: var(--s-fg2); }
html .nc[data-skin] .nc__l { font-family: var(--s-body); color: var(--s-acc); }
html .nc[data-skin] .nc__l i { background: var(--s-acc); color: var(--s-ink); }
html .nc[data-skin] .nc__m { font-family: var(--s-mono); color: var(--s-dim); }
html .nc[data-skin] .btn { font-family: var(--s-mono); border-color: var(--s-fg); }
html .nc[data-skin] .btn--acid { background: var(--s-acc); color: var(--s-ink); border-color: var(--s-acc); }
html .nc[data-skin] .btn--acid:hover { background: var(--s-fg); color: var(--s-bg); border-color: var(--s-fg); }
html .nc[data-skin] .btn--line { background: transparent; color: var(--s-fg); border-color: var(--s-line); }
html .nc[data-skin] .btn--line:hover { background: var(--s-acc); color: var(--s-ink); border-color: var(--s-acc); }

/* E1 · ink on laid paper, a vermilion seal, brush title */
html .nc[data-skin="scroll"] { background: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .05 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, transparent 0 46px, rgba(43, 33, 24, .05) 46px 47px), #efe6d0; outline: 1px solid rgba(43, 33, 24, .55); outline-offset: -7px; }
html .nc[data-skin="scroll"] .nc__k b { transform: rotate(-5deg); padding: 2px 7px; font-family: "EB Garamond", var(--s-serif); font-size: 13px; box-shadow: inset 0 0 0 1px #f7f1e3, 0 0 0 1px #b3321b; }
html .nc[data-skin="scroll"] .nc__k span { font-variant-caps: small-caps; letter-spacing: .12em; }
html .nc[data-skin="scroll"] h3 { font-weight: 400; font-size: 36px; letter-spacing: .04em; }
html .nc[data-skin="scroll"] .nc__s { font-weight: 600; }
html .nc[data-skin="scroll"] .nc__l { color: #8a2814; font-weight: 600; }
html .nc[data-skin="scroll"] .nc__l i { font-size: 0; width: 19px; height: 19px; background: #b3321b; }
html .nc[data-skin="scroll"] .nc__l i::before { content: "問"; font-family: "Ma Shan Zheng", var(--s-serif); font-size: 13px; font-weight: 400; color: #f7f1e3; }
html .nc[data-skin="scroll"] .nc__m { font-size: 12px; font-variant-numeric: oldstyle-nums; }
html .nc[data-skin="scroll"] .btn { font-variant-caps: small-caps; letter-spacing: .12em; font-weight: 600; font-size: 13px; }
html .nc[data-skin="scroll"] .btn--acid { background: #2b2118; border-color: #2b2118; color: #efe6d0; }
html .nc[data-skin="scroll"] .btn--acid:hover { background: #b3321b; border-color: #b3321b; color: #f7f1e3; }

/* E2 · torn newsprint, primary shards, poster and typewriter type */
html .nc[data-skin="collage"] { background:
  linear-gradient(112deg, transparent 0 84%, rgba(27, 75, 214, .78) 84% 88%, transparent 88%),
  linear-gradient(-24deg, transparent 0 82%, rgba(214, 40, 40, .9) 82% 100%),
  #e9e2d3; }
html .nc[data-skin="collage"] .nc__img { border-bottom: 3px solid #141414; clip-path: polygon(0 0, 100% 0, 100% 92%, 82% 100%, 61% 95%, 38% 100%, 17% 94%, 0 99%); }
html .nc[data-skin="collage"]::after { content: ""; position: absolute; z-index: 2; left: 30%; top: 168px; width: 40%; height: 18px; background: rgba(244, 196, 48, .85); transform: rotate(-3deg); mix-blend-mode: multiply; pointer-events: none; }
html .nc[data-skin="collage"] .nc__k b { background: #141414; color: #fbf7ec; box-shadow: 3px 3px 0 #d62828; }
html .nc[data-skin="collage"] .nc__k span { text-transform: uppercase; }
html .nc[data-skin="collage"] h3 { justify-self: start; align-self: flex-start; display: inline-block; margin-top: 4px; padding: 2px 10px 0; background: #fbf7ec; box-shadow: 6px 6px 0 #141414; transform: rotate(-1.4deg); font-weight: 400; font-size: 32px; }
html .nc[data-skin="collage"] .nc__s { align-self: flex-start; display: inline-block; margin-top: 14px; padding: 2px 10px; background: #141414; color: #fbf7ec; font-family: var(--s-mono); font-weight: 400; transform: rotate(.6deg); }
html .nc[data-skin="collage"] .nc__l { padding: 8px 10px; background: #fbf7ec; border: 1px solid #141414; color: #141414; font-weight: 900; transform: rotate(-.6deg); }
html .nc[data-skin="collage"] .nc__l i { background: #d62828; color: #fbf7ec; font-family: "Anton", var(--s-head); }
html .nc[data-skin="collage"] .nc__m { align-self: flex-start; padding: 2px 6px; background: rgba(251, 247, 236, .88); color: #1f1f1f; }
html .nc[data-skin="collage"] .btn { border: 2px solid #141414; box-shadow: 4px 4px 0 #141414; font-weight: 700; }
html .nc[data-skin="collage"] .btn--line { background: #fbf7ec; color: #141414; border-color: #141414; }
html .nc[data-skin="collage"] .btn--line:hover { background: #1b4bd6; color: #fbf7ec; border-color: #141414; }
html .nc[data-skin="collage"] .btn--acid:hover { background: #f4c430; color: #141414; border-color: #141414; }

/* E3 · a live broadcast: arena black, neon, chamfers, scanlines */
html .nc[data-skin="cyber"] { background: radial-gradient(ellipse 80% 40% at 70% 100%, rgba(122, 92, 255, .28), transparent 70%), repeating-linear-gradient(90deg, rgba(34, 224, 255, .06) 0 1px, transparent 1px 40px), #04060f; clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
html .nc[data-skin="cyber"] .nc__img { position: relative; border-bottom: 1px solid #22e0ff; box-shadow: 0 1px 14px rgba(34, 224, 255, .4); }
html .nc[data-skin="cyber"] .nc__img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); pointer-events: none; }
html .nc[data-skin="cyber"] .nc__k b { background: #ff2fbf; color: #fff; }
html .nc[data-skin="cyber"] .nc__k span::before { content: "● LIVE · "; color: #ff5c7a; animation: sk-blink 1.2s steps(1) infinite; }
html .nc[data-skin="cyber"] h3 { font-weight: 900; color: #fff; text-shadow: 0 0 8px rgba(34, 224, 255, .9), 0 0 26px rgba(34, 224, 255, .45), 0 0 50px rgba(255, 47, 191, .35); }
html .nc[data-skin="cyber"] .nc__s { color: #22e0ff; font-family: var(--s-mono); font-weight: 400; letter-spacing: .06em; }
html .nc[data-skin="cyber"] .nc__l { color: #e4f3ff; font-weight: 500; text-shadow: 0 0 10px rgba(34, 224, 255, .4); }
html .nc[data-skin="cyber"] .nc__l i { background: #ff2fbf; color: #fff; clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%); }
html .nc[data-skin="cyber"] .btn { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
html .nc[data-skin="cyber"] .btn--acid { box-shadow: 0 0 18px rgba(34, 224, 255, .35); }
html .nc[data-skin="cyber"] .btn--acid:hover { background: #ff2fbf; border-color: #ff2fbf; color: #fff; }
html .nc[data-skin="cyber"] .btn--line { color: #22e0ff; border-color: rgba(34, 224, 255, .6); }
@keyframes sk-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { html .nc[data-skin="cyber"] .nc__k span::before { animation: none; } }

/* E4 · an 8-bit window: title bar, PICO palette, chunky borders */
html .nc[data-skin="pixel"] { background: #12112a; box-shadow: inset 0 0 0 4px #fff1e8, inset 0 0 0 6px #000; padding-top: 0; }
html .nc[data-skin="pixel"] .nc__img { margin: 4px 4px 0; border-bottom: 4px solid #fff1e8; image-rendering: pixelated; }
html .nc[data-skin="pixel"]::before { content: ""; position: absolute; z-index: 2; left: 4px; right: 4px; top: 4px; height: 12px; background: repeating-linear-gradient(90deg, #ff004d 0 12px, #ffec27 12px 24px, #29adff 24px 36px, #00e436 36px 48px); border-bottom: 4px solid #fff1e8; }
html .nc[data-skin="pixel"] .nc__k { font-family: var(--s-mono); font-size: 17px; line-height: 1.1; color: #a9a2c7; }
html .nc[data-skin="pixel"] .nc__k b { font-family: var(--s-px); font-size: 10px; line-height: 1.9; background: #ffec27; color: #1d2b53; box-shadow: 3px 3px 0 #ff004d; }
html .nc[data-skin="pixel"] h3 { font-weight: 900; color: #ffec27; text-shadow: 3px 3px 0 #ff004d, 6px 6px 0 #1d2b53; letter-spacing: 0; }
html .nc[data-skin="pixel"] .nc__s { color: #00e436; font-family: var(--s-mono); font-size: 22px; font-weight: 400; line-height: 1.1; }
html .nc[data-skin="pixel"] .nc__s::before { content: "► "; }
html .nc[data-skin="pixel"] .nc__l { color: #fff1e8; }
html .nc[data-skin="pixel"] .nc__l i { background: #ff004d; color: #fff; font-family: var(--s-px); font-size: 9px; }
html .nc[data-skin="pixel"] .nc__m { font-size: 16px; line-height: 1.25; color: #c2bbe0; }
html .nc[data-skin="pixel"] .btn { border: 3px solid #fff1e8; box-shadow: 4px 4px 0 #000; transition: none; }
html .nc[data-skin="pixel"] .btn--acid:hover { background: #00e436; color: #1d2b53; border-color: #fff1e8; }
html .nc[data-skin="pixel"] .btn--line { background: #1d2b53; color: #fff1e8; border-color: #fff1e8; }
html .nc[data-skin="pixel"] .btn--line:hover { background: #29adff; color: #1d2b53; }
html .nc[data-skin="pixel"] > :not(.nc__img) { margin-left: 26px; margin-right: 26px; }

/* E5 · cold white graph paper, a figure label, one signal blue */
html .nc[data-skin="lab"] { background: linear-gradient(rgba(0, 71, 255, .07) 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(90deg, rgba(0, 71, 255, .07) 1px, transparent 1px) 0 0 / 18px 100%, #ffffff; }
html .nc[data-skin="lab"]::after { content: "+"; position: absolute; top: 196px; right: 14px; font-family: var(--s-mono); font-size: 16px; color: #0047ff; }
html .nc[data-skin="lab"] .nc__img { border-bottom: 1px solid #0f1720; }
html .nc[data-skin="lab"] .nc__k { text-transform: uppercase; color: #0f1720; }
html .nc[data-skin="lab"] .nc__k b { background: #0f1720; color: #fff; }
html .nc[data-skin="lab"] .nc__k b::before { content: "FIG. "; font-weight: 500; }
html .nc[data-skin="lab"] h3 { font-weight: 700; letter-spacing: -.02em; }
html .nc[data-skin="lab"] .nc__s { font-weight: 500; color: #3a4652; }
html .nc[data-skin="lab"] .nc__l { color: #0047ff; font-family: var(--s-mono); font-weight: 500; font-size: 13.5px; }
html .nc[data-skin="lab"] .nc__l i { font-size: 0; width: auto; height: 17px; padding: 0 4px; background: #0047ff; }
html .nc[data-skin="lab"] .nc__l i::before { content: "RQ"; font-family: var(--s-mono); font-size: 10px; color: #fff; }
html .nc[data-skin="lab"] .btn { text-transform: uppercase; font-weight: 500; border-color: #0f1720; }
html .nc[data-skin="lab"] .btn--acid:hover { background: #0f1720; border-color: #0f1720; color: #fff; }
html .nc[data-skin="lab"] .btn--line { color: #0f1720; border-color: #0f1720; background: #fff; }
html .nc[data-skin="lab"] .btn--line:hover { background: #0f1720; color: #fff; }

/* E6 · deep violet, iridescent gradients, nested frames */
html .nc[data-skin="fractal"] { background: radial-gradient(ellipse at 80% 30%, rgba(162, 107, 255, .2), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(25, 240, 200, .1), transparent 50%), #07040f; box-shadow: inset 0 0 0 1px rgba(162, 107, 255, .5), inset 0 0 0 7px #07040f, inset 0 0 0 8px rgba(25, 240, 200, .28), inset 0 0 0 14px #07040f, inset 0 0 0 15px rgba(255, 94, 168, .2); }
html .nc[data-skin="fractal"] .nc__img { margin: 15px 15px 0; border-bottom: 1px solid #a26bff; }
html .nc[data-skin="fractal"] > :not(.nc__img) { margin-left: 30px; margin-right: 30px; }
html .nc[data-skin="fractal"] .nc__k b { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }
html .nc[data-skin="fractal"] h3 { font-weight: 900; font-variation-settings: "opsz" 144; background: var(--s-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html .nc[data-skin="fractal"] h3 a:hover { color: transparent; text-decoration: underline; text-decoration-color: #19f0c8; }
html .nc[data-skin="fractal"] .nc__s { font-style: italic; font-weight: 700; }
html .nc[data-skin="fractal"] .nc__l { color: #19f0c8; font-family: "Fraunces", var(--s-serif); font-style: italic; }
html .nc[data-skin="fractal"] .nc__l i { background: linear-gradient(135deg, #19f0c8, #a26bff); color: #06110f; font-style: normal; }
html .nc[data-skin="fractal"] .btn { border: 1px solid transparent; background: linear-gradient(#07040f, #07040f) padding-box, linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8) border-box; color: #efe9ff; }
html .nc[data-skin="fractal"] .btn--acid { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }
html .nc[data-skin="fractal"] .btn--acid:hover { background: linear-gradient(90deg, #ffcf5a, #ff5ea8); color: #06110f; }
html .nc[data-skin="fractal"] .btn--line:hover { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }

/* E7 · kraft paper, a work order, stencil type, a rubber stamp */
html .nc[data-skin="line"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"), #d7c49b; }
html .nc[data-skin="line"] .nc__img { border-bottom: 2px solid #1f1a14; }
html .nc[data-skin="line"] .nc__k { margin: 0 0 10px; padding: 7px 22px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(31, 26, 20, .06) 8px 9px), #efe4c8; border-bottom: 2px solid #1f1a14; color: #4a3f31; }
html .nc[data-skin="line"] > .nc__k { margin-left: 0; margin-right: 0; }
html .nc[data-skin="line"] .nc__k::before { content: "NO."; font-size: 10px; color: #6b5c45; align-self: center; }
html .nc[data-skin="line"] .nc__k b { background: #1f1a14; color: #f5efdf; }
html .nc[data-skin="line"] h3 { font-weight: 900; letter-spacing: .02em; text-shadow: 3px 3px 0 rgba(200, 50, 30, .25); }
html .nc[data-skin="line"] .nc__s { font-family: var(--s-mono); font-weight: 700; color: #2b241b; }
html .nc[data-skin="line"] .nc__l { color: #c8321e; font-family: var(--s-mono); font-weight: 700; }
html .nc[data-skin="line"] .nc__l i { background: #c8321e; color: #f5efdf; }
html .nc[data-skin="line"] .nc__m { color: #4a3f31; }
html .nc[data-skin="line"]::after { content: "工序合格"; position: absolute; z-index: 2; top: 128px; right: 16px; padding: 5px 10px 3px; border: 3px solid #c8321e; border-radius: 4px; color: #c8321e; background: rgba(245, 239, 223, .55); font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 17px; letter-spacing: .18em; line-height: 1.1; transform: rotate(-12deg); opacity: .9; box-shadow: inset 0 0 0 2px rgba(200, 50, 30, .25); pointer-events: none; }
html[lang="en"] .nc[data-skin="line"]::after { content: "PASSED QC"; font-family: "Courier Prime", monospace; letter-spacing: .12em; font-size: 15px; }
html .nc[data-skin="line"] .btn { border: 2px solid #1f1a14; font-weight: 700; }
html .nc[data-skin="line"] .btn--acid:hover { background: #1f1a14; color: #f5efdf; border-color: #1f1a14; }
html .nc[data-skin="line"] .btn--line { background: #f5efdf; color: #1f1a14; border-color: #1f1a14; }
html .nc[data-skin="line"] .btn--line:hover { background: #1f1a14; color: #f5efdf; }

/* English card titles */
html[lang="en"] .nc[data-skin="scroll"] h3 { font-style: italic; font-weight: 500; font-size: 32px; letter-spacing: 0; }
html[lang="en"] .nc[data-skin="scroll"] .nc__l i::before { content: "Q"; font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 13px; }
html[lang="en"] .nc[data-skin="collage"] h3 { text-transform: uppercase; letter-spacing: .01em; font-size: 30px; line-height: 1.05; }
html[lang="en"] .nc[data-skin="cyber"] h3 { text-transform: uppercase; letter-spacing: .03em; font-size: 24px; }
html[lang="en"] .nc[data-skin="pixel"] h3 { font-family: var(--s-px); font-size: 17px; line-height: 1.5; text-shadow: 2px 2px 0 #ff004d, 4px 4px 0 #1d2b53; }
html[lang="en"] .nc[data-skin="line"] h3 { font-size: 34px; line-height: 1.05; }

/* =====================================================================
   3. Hover cards (.pv) and the map tooltip (.map__tip)
   ===================================================================== */
html .pv[data-skin], html .map__tip[data-skin] { background: var(--s-bg); color: var(--s-fg); border: 1px solid var(--s-line); font-family: var(--s-body); }
html .pv[data-skin] .pv__img { background-color: var(--s-imgbg); filter: var(--s-img); border-bottom: 1px solid var(--s-line); }
html .pv[data-skin] .pv__k, html .map__tip[data-skin] .pv__k { font-family: var(--s-mono); color: var(--s-dim); }
html .pv[data-skin] .pv__k b, html .map__tip[data-skin] .pv__k b { background: var(--s-acc); color: var(--s-ink); }
html .pv[data-skin] .pv__t, html .map__tip[data-skin] .pv__t { color: var(--s-fg); font-family: var(--s-head); }
html .pv[data-skin] .pv__t--q, html .map__tip[data-skin] .pv__t--q { font-family: var(--s-serif); }
html .pv[data-skin] .pv__t span, html .map__tip[data-skin] .pv__t span { font-family: var(--s-serif); color: var(--s-fg2); }
html .pv[data-skin] .pv__s, html .map__tip[data-skin] .pv__s { color: var(--s-acc); font-family: var(--s-mono); }
html .pv[data-skin] .pv__x, html .map__tip[data-skin] .pv__x { color: var(--s-fg2); font-family: var(--s-body); }
html .pv[data-skin] .pv__x b, html .map__tip[data-skin] .pv__x b, html .pv[data-skin] .pv__x--q, html .map__tip[data-skin] .pv__x--q { color: var(--s-fg); }
html .pv[data-skin] .pv__f, html .map__tip[data-skin] .pv__f { font-family: var(--s-mono); color: var(--s-dim); border-top-color: var(--s-soft); }

html .pv[data-skin="hub"], html .map__tip[data-skin="hub"] { border-color: #d4ff26; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
html .pv[data-skin="scroll"], html .map__tip[data-skin="scroll"] { border: 1px solid #2b2118; outline: 1px solid rgba(43, 33, 24, .5); outline-offset: -5px; box-shadow: 8px 8px 0 rgba(43, 33, 24, .18); }
html .pv[data-skin="scroll"] .pv__t:not(.pv__t--q) { font-weight: 400; letter-spacing: .04em; font-size: 22px; }
html .pv[data-skin="scroll"] .pv__k b, html .map__tip[data-skin="scroll"] .pv__k b { transform: rotate(-4deg); box-shadow: inset 0 0 0 1px #f7f1e3; }
html .pv[data-skin="collage"], html .map__tip[data-skin="collage"] { border: 2px solid #141414; box-shadow: 8px 8px 0 #141414; background: linear-gradient(156deg, transparent 0 88%, rgba(214, 40, 40, .9) 88%), #fbf7ec; }
html .pv[data-skin="collage"] .pv__img { border-bottom: 2px solid #141414; }
html .pv[data-skin="collage"] .pv__t:not(.pv__t--q), html .map__tip[data-skin="collage"] .pv__t:not(.pv__t--q) { display: inline-block; padding: 0 6px; background: #f4c430; font-weight: 400; transform: rotate(-1deg); }
html .pv[data-skin="collage"] .pv__k b, html .map__tip[data-skin="collage"] .pv__k b { background: #141414; color: #fbf7ec; box-shadow: 2px 2px 0 #d62828; }
html .pv[data-skin="cyber"], html .map__tip[data-skin="cyber"] { border-color: #22e0ff; box-shadow: 0 0 30px rgba(34, 224, 255, .35), 0 18px 60px rgba(0, 0, 0, .7); clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
html .pv[data-skin="cyber"] .pv__t, html .map__tip[data-skin="cyber"] .pv__t { color: #fff; text-shadow: 0 0 10px rgba(34, 224, 255, .6); }
html .pv[data-skin="cyber"] .pv__k b, html .map__tip[data-skin="cyber"] .pv__k b { background: #ff2fbf; color: #fff; }
html .pv[data-skin="cyber"] .pv__k span::before, html .map__tip[data-skin="cyber"] .pv__k span::before { content: "● LIVE · "; color: #ff5c7a; }
html .pv[data-skin="pixel"], html .map__tip[data-skin="pixel"] { border: 3px solid #fff1e8; box-shadow: 0 0 0 3px #000, 8px 8px 0 3px #000; background: #1d2b53; }
html .map__tip[data-skin="pixel"]::before { margin: -12px -14px 10px; }
html .pv[data-skin="pixel"]::before, html .map__tip[data-skin="pixel"]::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(90deg, #ff004d 0 10px, #ffec27 10px 20px, #29adff 20px 30px, #00e436 30px 40px); border-bottom: 3px solid #fff1e8; }
html .pv[data-skin="pixel"] .pv__img { image-rendering: pixelated; border-bottom: 3px solid #fff1e8; }
html .pv[data-skin="pixel"] .pv__t, html .map__tip[data-skin="pixel"] .pv__t { color: #ffec27; text-shadow: 2px 2px 0 #ff004d; }
html .pv[data-skin="pixel"] .pv__k b, html .map__tip[data-skin="pixel"] .pv__k b { font-family: var(--s-px); font-size: 8px; line-height: 2; background: #ff004d; color: #fff; }
html .pv[data-skin="pixel"] .pv__k, html .map__tip[data-skin="pixel"] .pv__k, html .pv[data-skin="pixel"] .pv__f, html .map__tip[data-skin="pixel"] .pv__f { font-size: 14px; letter-spacing: 0; }
html .pv[data-skin="lab"], html .map__tip[data-skin="lab"] { border-color: #0f1720; background: linear-gradient(rgba(0, 71, 255, .07) 1px, transparent 1px) 0 0 / 100% 16px, linear-gradient(90deg, rgba(0, 71, 255, .07) 1px, transparent 1px) 0 0 / 16px 100%, #fff; box-shadow: 0 12px 40px rgba(15, 23, 32, .25); }
html .pv[data-skin="lab"] .pv__img { border-bottom-color: #0f1720; }
html .pv[data-skin="lab"] .pv__k b::before, html .map__tip[data-skin="lab"] .pv__k b::before { content: "FIG. "; font-weight: 400; }
html .pv[data-skin="lab"] .pv__k b, html .map__tip[data-skin="lab"] .pv__k b { background: #0f1720; color: #fff; }
html .pv[data-skin="lab"] .pv__t, html .map__tip[data-skin="lab"] .pv__t { font-weight: 700; letter-spacing: -.01em; }
html .pv[data-skin="fractal"], html .map__tip[data-skin="fractal"] { border: 1px solid transparent; background: linear-gradient(#0d0820, #0d0820) padding-box, linear-gradient(135deg, #19f0c8, #a26bff 50%, #ff5ea8) border-box; box-shadow: 0 0 0 5px rgba(162, 107, 255, .14), 0 0 30px rgba(162, 107, 255, .3), 0 18px 60px rgba(0, 0, 0, .7); }
html .pv[data-skin="fractal"] .pv__t:not(.pv__t--q), html .map__tip[data-skin="fractal"] .pv__t:not(.pv__t--q) { background: var(--s-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
html .pv[data-skin="fractal"] .pv__t:not(.pv__t--q) span, html .map__tip[data-skin="fractal"] .pv__t:not(.pv__t--q) span { -webkit-text-fill-color: var(--s-fg2); color: var(--s-fg2); font-style: italic; }
html .pv[data-skin="fractal"] .pv__k b, html .map__tip[data-skin="fractal"] .pv__k b { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }
html .pv[data-skin="line"], html .map__tip[data-skin="line"] { border: 2px solid #1f1a14; background: #f5efdf; box-shadow: 8px 8px 0 rgba(31, 26, 20, .25); }
html .pv[data-skin="line"] .pv__img { border-bottom: 2px solid #1f1a14; }
html .pv[data-skin="line"] .pv__k, html .map__tip[data-skin="line"] .pv__k { margin: -12px -16px 8px; padding: 6px 16px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(31, 26, 20, .06) 8px 9px), #efe4c8; border-bottom: 2px solid #1f1a14; color: #4a3f31; }
html .map__tip[data-skin="line"] .pv__k { margin: -12px -14px 8px; padding: 6px 14px; }
html .pv[data-skin="line"] .pv__k::before, html .map__tip[data-skin="line"] .pv__k::before { content: "NO."; font-size: 9px; color: #6b5c45; align-self: center; }
html .pv[data-skin="line"] .pv__k b, html .map__tip[data-skin="line"] .pv__k b { background: #1f1a14; color: #f5efdf; }
html .pv[data-skin="line"] .pv__t, html .map__tip[data-skin="line"] .pv__t { font-weight: 900; }
html .pv[data-skin="line"] .pv__s, html .map__tip[data-skin="line"] .pv__s { color: #c8321e; }
html[lang="en"] .pv[data-skin="scroll"] .pv__t:not(.pv__t--q), html[lang="en"] .map__tip[data-skin="scroll"] .pv__t:not(.pv__t--q) { font-style: italic; font-weight: 500; letter-spacing: 0; }
html[lang="en"] .pv[data-skin="collage"] .pv__t:not(.pv__t--q), html[lang="en"] .map__tip[data-skin="collage"] .pv__t:not(.pv__t--q) { text-transform: uppercase; }
html[lang="en"] .pv[data-skin="cyber"] .pv__t:not(.pv__t--q), html[lang="en"] .map__tip[data-skin="cyber"] .pv__t:not(.pv__t--q) { text-transform: uppercase; letter-spacing: .02em; }
html[lang="en"] .pv[data-skin="pixel"] .pv__t:not(.pv__t--q), html[lang="en"] .map__tip[data-skin="pixel"] .pv__t:not(.pv__t--q) { font-family: var(--s-px); font-size: 12px; line-height: 1.6; }