/* RenaSci · 主题网络 — one visual world per essay. The scroll structure (bar, rail, hero, screens, deeper, footer)
   is shared; each theme swaps tokens, type, surfaces and a few ornaments. Selectors hang off html[data-style]. */

/* =====================================================================
   E1 · scroll · 古典书卷风 — ink on laid paper, vermilion seals, Garamond & Song
   ===================================================================== */
html[data-style="scroll"] {
  --void: #efe6d0; --void-rgb: 239, 230, 208; --panel: #e7dcc0; --paper: #f7f1e3;
  --acid: #b3321b; --acid-rgb: 179, 50, 27; --acid-ink: #f7f1e3;
  --fg: #2b2118; --fg-rgb: 43, 33, 24; --fg-2: #3b2e22; --fg-3: #5a4a3a; --dim: #7a6a55; --faint: #b8a88c;
  --line: rgba(43, 33, 24, .35); --line-soft: rgba(43, 33, 24, .14); --mag: #8a6d2a; --alt2: #8a6d2a;
  --hover-bg: #e7dcc0; --card-bg: rgba(247, 241, 227, .96);
  --f-sans: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-disp: "EB Garamond", "Noto Serif SC", "Songti SC", serif;
  --f-mono: "EB Garamond", "Noto Serif SC", serif;
  --bg: #efe6d0; --muted: #6f5f4c; --card: #e7dcc0; --link: #8a2814; --hl: rgba(179, 50, 27, .18); --on: #b3321b;
  --night: #2b2118; --night-fg: #efe6d0; --night-muted: #b8a88c; --night-fg-rgb: 239, 230, 208;
  color-scheme: light;
}
html[data-style="scroll"] body::after { 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"); opacity: 1; mix-blend-mode: multiply; }
html[data-style="scroll"] .nl .hero { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(43, 33, 24, .07) 46px 47px); }
html[data-style="scroll"] .hero h1, html[data-style="scroll"] .deeper h2, html[data-style="scroll"] .card h2, html[data-style="scroll"] .cover h1, html[data-style="scroll"] .sec h2 { font-family: var(--f-serif); font-weight: 900; letter-spacing: .02em; text-shadow: none; }
html[data-style="scroll"] .hero h1 { line-height: 1.08; font-family: "Ma Shan Zheng", var(--f-serif); font-weight: 400; letter-spacing: .04em; }
html[data-style="scroll"] .cover h1 { font-family: "Ma Shan Zheng", var(--f-serif); font-weight: 400; letter-spacing: .04em; }
html[data-style="scroll"] .hero h1::after { content: attr(data-seal); display: inline-grid; place-items: center; vertical-align: .3em; margin-left: .18em; width: 2.1em; height: 2.1em; font-family: var(--f-disp); font-size: .26em; font-weight: 700; line-height: 1; color: var(--acid-ink); background: var(--acid); border: .12em solid var(--acid); box-shadow: inset 0 0 0 .1em var(--acid-ink); transform: rotate(-5deg); letter-spacing: 0; }
html[data-style="scroll"] .tag b { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
html[data-style="scroll"] .hero__sub { font-weight: 600; font-style: normal; color: var(--fg-2); }
html[data-style="scroll"] .tag { font-variant-caps: small-caps; letter-spacing: .12em; font-size: 12px; }
html[data-style="scroll"] .tag > * { background: var(--paper); }
html[data-style="scroll"] .btn { font-variant-caps: small-caps; font-size: 13px; letter-spacing: .12em; font-weight: 600; }
html[data-style="scroll"] .card { border: 1px solid var(--fg); outline: 1px solid var(--fg); outline-offset: -6px; box-shadow: 8px 8px 0 rgba(43, 33, 24, .12); }
html[data-style="scroll"] .card::before, html[data-style="scroll"] .card::after { display: none; }
html[data-style="scroll"] .card__idx b { font-family: var(--f-serif); font-stretch: normal; font-size: 30px; }
html[data-style="scroll"] .card__idx em { border-color: var(--acid); color: var(--acid); }
html[data-style="scroll"] .card p { color: var(--fg); font-size: 17.5px; line-height: 2.05; }
html[data-style="scroll"] .scr__hud, html[data-style="scroll"] .scr__cap, html[data-style="scroll"] .hero__hint, html[data-style="scroll"] .nbar__brand, html[data-style="scroll"] .nbar__nav a { font-variant-caps: small-caps; letter-spacing: .1em; font-size: 12px; }
html[data-style="scroll"] .scr__bg canvas.fx { opacity: .92; }
html[data-style="scroll"] a.x { color: var(--acid); background-image: linear-gradient(var(--acid), var(--acid)); }
html[data-style="scroll"] a.x:hover { color: var(--acid-ink); }
html[data-style="scroll"] .x__t { border-style: solid; }
html[data-style="scroll"] .nbar { background: rgba(239, 230, 208, .94); border-bottom: 2px solid var(--fg); }
html[data-style="scroll"] .nbar__logo { background: var(--fg); color: var(--void); }
html[data-style="scroll"] .prog i { box-shadow: none; }
html[data-style="scroll"] .cta { background: var(--fg); color: var(--void); border-color: var(--fg); }
html[data-style="scroll"] .cta:hover { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
html[data-style="scroll"] .toc2 a { background: var(--paper); }
html[data-style="scroll"] .seq a { background: var(--paper); }
html[data-style="scroll"] .nfoot { background: var(--panel); border-top: 2px solid var(--fg); }
html[data-style="scroll"] .pv { border-color: var(--fg); }
html[data-style="scroll"] .nl-lab { text-shadow: 0 0 6px var(--void), 0 0 12px var(--void); }
/* reading page */
html[data-style="scroll"] .rd { font-family: var(--f-serif); }
html[data-style="scroll"] .rbar { background: var(--fg); color: var(--void); border-bottom-color: var(--acid); }
html[data-style="scroll"] .cover { background: var(--panel); color: var(--fg); border-bottom: 3px double var(--fg); }
html[data-style="scroll"] .cover__img { filter: sepia(.9) contrast(1.05) brightness(1.05); mix-blend-mode: multiply; border-left: 1px solid var(--fg); }
html[data-style="scroll"] .cover__sub { color: var(--fg-2); font-weight: 600; }
html[data-style="scroll"] .cover__by { color: var(--fg); }
html[data-style="scroll"] .rdoc p, html[data-style="scroll"] .lede p { font-family: var(--f-serif); }
html[data-style="scroll"] .sec h2 { border-bottom: 1px solid var(--fg); padding-bottom: .3em; }
html[data-style="scroll"] .sec__n { color: var(--acid); }

/* =====================================================================
   E2 · collage · 立体主义拼贴 — newsprint, torn paper, primary shards, typewriter and poster type
   ===================================================================== */
html[data-style="collage"] {
  --void: #e9e2d3; --void-rgb: 233, 226, 211; --panel: #dfd6c2; --paper: #fbf7ec;
  --acid: #d62828; --acid-rgb: 214, 40, 40; --acid-ink: #fbf7ec;
  --fg: #141414; --fg-rgb: 20, 20, 20; --fg-2: #1f1f1f; --fg-3: #3a3a3a; --dim: #5f5a50; --faint: #a89f8c;
  --line: rgba(20, 20, 20, .8); --line-soft: rgba(20, 20, 20, .18); --mag: #1b4bd6; --alt2: #f4c430;
  --hover-bg: #f4c430; --card-bg: rgba(251, 247, 236, .97);
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Serif SC", "Songti SC", serif;
  --f-disp: "Anton", "ZCOOL QingKe HuangYou", "Noto Sans SC", "Arial Narrow", sans-serif;
  --f-mono: "Special Elite", "Courier New", "Noto Sans SC", monospace;
  --bg: #e9e2d3; --muted: #5f5a50; --card: #fbf7ec; --link: #1b4bd6; --hl: rgba(244, 196, 48, .6); --on: #d62828;
  --night: #141414; --night-fg: #fbf7ec; --night-muted: #a89f8c; --night-fg-rgb: 251, 247, 236;
  color-scheme: light;
}
html[data-style="collage"] body::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
html[data-style="collage"] .hero { background:
  linear-gradient(112deg, transparent 0 49%, rgba(27, 75, 214, .85) 49% 54%, transparent 54%),
  linear-gradient(-24deg, transparent 0 74%, rgba(214, 40, 40, .9) 74% 100%),
  linear-gradient(0deg, transparent 0 30%, rgba(244, 196, 48, .55) 30% 42%, transparent 42%);
  background-repeat: no-repeat; background-size: 100% 100%, 42% 60%, 60% 100%; background-position: 0 0, 100% 0, 0 100%; }
html[data-style="collage"] .hero h1 { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92; text-shadow: none; -webkit-text-stroke: 0; position: relative; display: inline-block; padding: .04em .1em; background: var(--paper); transform: rotate(-1.2deg); box-shadow: 8px 8px 0 var(--fg); }
html[data-style="collage"] .hero__sub { font-family: var(--f-mono); font-weight: 400; font-size: clamp(18px, 2.1vw, 28px); background: var(--fg); color: var(--paper); display: inline-block; padding: 4px 12px; transform: rotate(.6deg); }
html[data-style="collage"] .hero__meta { border-color: var(--fg); background: var(--paper); padding: 0 12px; transform: rotate(-.4deg); }
html[data-style="collage"] .hero__toc a { background: var(--paper); border: 1px solid var(--fg); }
html[data-style="collage"] .hero__toc li:nth-child(odd) a { transform: rotate(-1deg); }
html[data-style="collage"] .hero__toc li:nth-child(even) a { transform: rotate(.8deg); }
html[data-style="collage"] .tag > * { background: var(--paper); border-color: var(--fg); }
html[data-style="collage"] .tag b { background: var(--fg); color: var(--paper); border-color: var(--fg); }
html[data-style="collage"] .btn { border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--fg); font-weight: 700; }
html[data-style="collage"] .btn--acid { background: var(--acid); color: var(--paper); }
html[data-style="collage"] .btn--acid:hover { background: var(--alt2); color: var(--fg); border-color: var(--fg); }
html[data-style="collage"] .btn--line { background: var(--paper); color: var(--fg); }
html[data-style="collage"] .btn--line:hover { background: var(--mag); color: var(--paper); }
html[data-style="collage"] .card { border: 3px solid var(--fg); box-shadow: 10px 10px 0 var(--fg); transform: rotate(-.7deg); }
html[data-style="collage"] .scr--r .card { transform: rotate(.6deg); }
html[data-style="collage"] .card::before { display: block; width: 46%; height: 18px; top: -12px; left: 26%; border: 0; background: rgba(244, 196, 48, .85); transform: rotate(-2deg); mix-blend-mode: multiply; }
html[data-style="collage"] .card::after { display: block; width: 90px; height: 90px; right: -34px; bottom: -34px; border: 0; background: var(--mag); z-index: -1; transform: rotate(12deg); }
html[data-style="collage"] .card h2 { font-family: "ZCOOL QingKe HuangYou", var(--f-sans); font-weight: 400; letter-spacing: .02em; text-transform: none; }
html[data-style="collage"] .card h2::before { content: "▮"; color: var(--acid); margin-right: .2em; }
html[data-style="collage"] .card__idx b { font-family: var(--f-disp); font-stretch: normal; font-size: 34px; color: var(--paper); background: var(--acid); padding: 0 8px; line-height: 1.2; border-radius: 50%; }
html[data-style="collage"] .card__idx em { background: var(--alt2); border-color: var(--fg); font-family: var(--f-mono); }
html[data-style="collage"] .card p { color: var(--fg); font-family: var(--f-serif); }
html[data-style="collage"] .scr__hud { color: var(--fg); text-transform: uppercase; }
html[data-style="collage"] .scr__hud span:nth-child(2) { background: var(--fg); color: var(--paper); padding: 2px 8px; }
html[data-style="collage"] .scr__cap { color: var(--fg-3); }
html[data-style="collage"] .scr__bg canvas.fx { opacity: 1; }
html[data-style="collage"] a.x { color: var(--fg); background-image: linear-gradient(var(--alt2), var(--alt2)); background-size: 100% 45%; }
html[data-style="collage"] a.x:hover { background-size: 100% 100%; color: var(--fg); }
html[data-style="collage"] .x__t { color: var(--acid); border-color: var(--acid); }
html[data-style="collage"] .nbar { background: var(--paper); border-bottom: 3px solid var(--fg); }
html[data-style="collage"] .nbar__logo { background: var(--fg); color: var(--paper); }
html[data-style="collage"] .nbar__nav a[aria-current="page"] { background: var(--alt2); color: var(--fg); box-shadow: inset 0 -3px 0 var(--fg); }
html[data-style="collage"] .prog i { background: var(--acid); box-shadow: none; }
html[data-style="collage"] .deeper h2 { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; background: var(--fg); color: var(--paper); display: inline-block; padding: 0 .15em; transform: rotate(-1deg); }
html[data-style="collage"] .cta { background: var(--fg); color: var(--paper); border-color: var(--fg); box-shadow: 8px 8px 0 var(--acid); }
html[data-style="collage"] .cta:hover { background: var(--acid); }
html[data-style="collage"] .toc2 a, html[data-style="collage"] .seq a { background: var(--paper); }
html[data-style="collage"] .paths h3 i { background: var(--fg); color: var(--paper); }
html[data-style="collage"] .nfoot { background: var(--panel); border-top: 3px solid var(--fg); }
html[data-style="collage"] .pv { border: 2px solid var(--fg); box-shadow: 8px 8px 0 var(--fg); }
html[data-style="collage"] .nl-lab { text-shadow: 0 0 6px var(--void), 0 0 12px var(--void); }
html[data-style="collage"] .rbar { background: var(--fg); color: var(--paper); border-bottom-color: var(--acid); }
html[data-style="collage"] .cover { background: var(--panel); color: var(--fg); border-bottom: 3px solid var(--fg); }
html[data-style="collage"] .cover h1 { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; background: var(--paper); display: inline-block; padding: 0 .1em; box-shadow: 8px 8px 0 var(--fg); }
html[data-style="collage"] .cover__img { filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; border-left: 3px solid var(--fg); clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%, 0 12%); }
html[data-style="collage"] .cover__sub { color: var(--fg); background: var(--alt2); display: inline-block; padding: 2px 10px; }
html[data-style="collage"] .cover__by { color: var(--fg); }
html[data-style="collage"] .sec h2 { font-weight: 900; }
html[data-style="collage"] .sec__n { color: var(--acid); }

/* =====================================================================
   E3 · cyber · 赛博科幻 — arena black, cyan/magenta neon, chamfers, scanlines, LIVE
   ===================================================================== */
html[data-style="cyber"] {
  --void: #04060f; --void-rgb: 4, 6, 15; --panel: #0a1020; --paper: #e4f3ff;
  --acid: #22e0ff; --acid-rgb: 34, 224, 255; --acid-ink: #03111a;
  --fg: #e4f3ff; --fg-rgb: 228, 243, 255; --fg-2: #cfe4f6; --fg-3: #a9c4dc; --dim: #6f86a3; --faint: #2a3a55;
  --line: rgba(34, 224, 255, .35); --line-soft: rgba(228, 243, 255, .12); --mag: #ff2fbf; --alt2: #7a5cff;
  --hover-bg: #0d1a33; --card-bg: rgba(6, 12, 28, .9);
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Sans SC", "PingFang SC", sans-serif;
  --f-disp: "Orbitron", "Noto Sans SC", sans-serif;
  --f-mono: "Share Tech Mono", "Noto Sans SC", ui-monospace, monospace;
  --bg: #04060f; --fg: #e4f3ff; --muted: #8aa3c0; --card: #0a1020; --link: #22e0ff; --hl: rgba(34, 224, 255, .25); --on: #22e0ff;
  --night: #04060f; --night-fg: #e4f3ff; --night-muted: #8aa3c0; --night-fg-rgb: 228, 243, 255;
  color-scheme: dark;
}
html[data-style="cyber"] body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }
html[data-style="cyber"] .hero { background: linear-gradient(180deg, transparent 62%, rgba(34, 224, 255, .06)), repeating-linear-gradient(90deg, rgba(34, 224, 255, .07) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(34, 224, 255, .07) 0 1px, transparent 1px 80px); }
html[data-style="cyber"] .hero h1 { font-family: var(--f-disp); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px rgba(34, 224, 255, .9), 0 0 24px rgba(34, 224, 255, .55), 0 0 60px rgba(255, 47, 191, .35); }
html[data-style="cyber"] .hero__sub { font-family: var(--f-mono); font-weight: 400; color: var(--acid); letter-spacing: .08em; }
html[data-style="cyber"] .hero__sub::before { content: "● LIVE  "; color: var(--mag); font-size: .7em; vertical-align: .12em; animation: cyblink 1.2s steps(2, end) infinite; }
@keyframes cyblink { 50% { opacity: .25; } }
html[data-style="cyber"] .tag > * { background: rgba(4, 6, 15, .8); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
html[data-style="cyber"] .tag b { background: var(--mag); color: #fff; border-color: var(--mag); }
html[data-style="cyber"] .btn { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 0 18px rgba(34, 224, 255, .25); }
html[data-style="cyber"] .btn--acid:hover { background: var(--mag); border-color: var(--mag); color: #fff; }
html[data-style="cyber"] .card { border: 1px solid var(--acid); background: linear-gradient(160deg, rgba(34, 224, 255, .08), rgba(6, 12, 28, .92) 40%); box-shadow: 0 0 0 1px rgba(255, 47, 191, .25), 0 0 40px rgba(34, 224, 255, .18), 0 30px 80px rgba(0, 0, 0, .7); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); backdrop-filter: blur(4px); }
html[data-style="cyber"] .card::before, html[data-style="cyber"] .card::after { border-color: var(--mag); }
html[data-style="cyber"] .card::before { top: 0; left: 0; border-width: 0; border-top: 3px solid var(--acid); width: 40%; height: 0; }
html[data-style="cyber"] .card::after { bottom: 0; right: 0; border-width: 0; border-bottom: 3px solid var(--mag); width: 40%; height: 0; }
html[data-style="cyber"] .card h2 { font-weight: 900; text-shadow: 0 0 12px rgba(34, 224, 255, .35); }
html[data-style="cyber"] .card__idx b { font-family: var(--f-disp); font-stretch: normal; color: var(--acid); }
html[data-style="cyber"] .card__idx em { border-color: var(--mag); color: var(--mag); font-family: var(--f-mono); text-transform: uppercase; }
html[data-style="cyber"] .card p { color: var(--fg-2); }
html[data-style="cyber"] .scr__hud { color: var(--acid); text-transform: uppercase; text-shadow: 0 0 8px rgba(34, 224, 255, .6); }
html[data-style="cyber"] .scr__hud span:nth-child(2) { color: var(--mag); }
html[data-style="cyber"] .scr__hud span:first-child::before { content: "▶ "; }
html[data-style="cyber"] .scr__bg canvas.fx { opacity: .95; }
html[data-style="cyber"] .scr { border-bottom: 1px solid rgba(34, 224, 255, .25); }
html[data-style="cyber"] a.x { color: var(--acid); text-shadow: 0 0 8px rgba(34, 224, 255, .5); }
html[data-style="cyber"] a.x:hover { background-image: linear-gradient(var(--mag), var(--mag)); color: #fff; }
html[data-style="cyber"] .x__t { color: var(--mag); border-color: var(--mag); }
html[data-style="cyber"] .nbar { background: rgba(4, 6, 15, .92); border-bottom: 1px solid var(--acid); box-shadow: 0 0 24px rgba(34, 224, 255, .18); }
html[data-style="cyber"] .nbar__logo { background: var(--mag); color: #fff; }
html[data-style="cyber"] .prog i { background: linear-gradient(90deg, var(--acid), var(--mag)); box-shadow: 0 0 12px rgba(255, 47, 191, .7); }
html[data-style="cyber"] .rail a.on { color: var(--mag); }
html[data-style="cyber"] .deeper h2 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 20px rgba(34, 224, 255, .45); }
html[data-style="cyber"] .cta { background: linear-gradient(90deg, var(--acid), var(--mag)); color: #03111a; border: 0; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
html[data-style="cyber"] .cta:hover { filter: brightness(1.15); }
html[data-style="cyber"] .paths h3 i { background: var(--mag); color: #fff; }
html[data-style="cyber"] .nfoot { border-top: 1px solid var(--acid); background: linear-gradient(180deg, #04060f, #070c1c); }
html[data-style="cyber"] .pv { box-shadow: 0 0 30px rgba(34, 224, 255, .35), 0 18px 60px rgba(0, 0, 0, .7); }
html[data-style="cyber"] .rbar { background: #04060f; border-bottom-color: var(--acid); }
html[data-style="cyber"] .cover { background: radial-gradient(ellipse at 20% 30%, rgba(255, 47, 191, .22), transparent 50%), #04060f; border-bottom-color: var(--acid); }
html[data-style="cyber"] .cover h1 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 0 20px rgba(34, 224, 255, .6); }
html[data-style="cyber"] .cover__img { filter: contrast(1.2) hue-rotate(160deg) saturate(1.6); mix-blend-mode: screen; }
html[data-style="cyber"] .cover__sub { color: var(--acid); font-family: var(--f-mono); font-weight: 400; }
html[data-style="cyber"] .rd .sec h2 { text-shadow: 0 0 14px rgba(34, 224, 255, .25); }
html[data-style="cyber"] .rd .sec__n { color: var(--mag); }

/* =====================================================================
   E4 · pixel · 电子游戏 — 8-bit windows, PICO palette, stage numbers, hearts
   ===================================================================== */
html[data-style="pixel"] {
  --void: #12112a; --void-rgb: 18, 17, 42; --panel: #1c1b3a; --paper: #fff1e8;
  --acid: #ffec27; --acid-rgb: 255, 236, 39; --acid-ink: #1d2b53;
  --fg: #fff1e8; --fg-rgb: 255, 241, 232; --fg-2: #f2e6dc; --fg-3: #d9cdc4; --dim: #9a93b8; --faint: #3d3a63;
  --line: rgba(255, 236, 39, .5); --line-soft: rgba(255, 241, 232, .14); --mag: #ff004d; --alt2: #29adff;
  --hover-bg: #29316d; --card-bg: #1d2b53;
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Sans SC", "PingFang SC", sans-serif;
  --f-disp: "Press Start 2P", "Noto Sans SC", monospace;
  --f-mono: "VT323", "Noto Sans SC", ui-monospace, monospace;
  --bg: #12112a; --fg: #fff1e8; --muted: #b3acd0; --card: #1d2b53; --link: #ffec27; --hl: rgba(255, 236, 39, .3); --on: #00e436;
  --night: #12112a; --night-fg: #fff1e8; --night-muted: #b3acd0; --night-fg-rgb: 255, 241, 232;
  color-scheme: dark;
}
html[data-style="pixel"] body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px); }
html[data-style="pixel"] .nl .hero { background: linear-gradient(180deg, transparent 0 91%, #00e436 91% 92.5%, #1d2b53 92.5% 94%, #7e2553 94%); }
html[data-style="pixel"] .hero h1 { font-weight: 900; color: var(--acid); text-shadow: 4px 4px 0 #ff004d, 8px 8px 0 #1d2b53; letter-spacing: 0; -webkit-font-smoothing: none; }
html[data-style="pixel"] .hero__sub { font-family: var(--f-mono); font-weight: 400; font-size: clamp(24px, 2.8vw, 40px); color: var(--fg); }
html[data-style="pixel"] .hero__sub::before { content: "► "; color: #00e436; }
html[data-style="pixel"] .hero__hint::before { content: "PRESS START"; font-family: var(--f-disp); font-size: 10px; color: var(--acid); margin-right: 14px; animation: pxblink 1s steps(2, end) infinite; }
@keyframes pxblink { 50% { opacity: 0; } }
html[data-style="pixel"] .tag, html[data-style="pixel"] .btn, html[data-style="pixel"] .hero__meta dt, html[data-style="pixel"] .scr__hud, html[data-style="pixel"] .card__idx, html[data-style="pixel"] .nbar__brand, html[data-style="pixel"] .nbar__nav a, html[data-style="pixel"] .rail a, html[data-style="pixel"] .hero__hint, html[data-style="pixel"] .cta__k, html[data-style="pixel"] .cta__m, html[data-style="pixel"] .pl__n b, html[data-style="pixel"] .seq b, html[data-style="pixel"] .nfoot__h, html[data-style="pixel"] .nfoot__by { font-family: var(--f-disp); font-size: 9px; letter-spacing: 0; line-height: 1.6; }
html[data-style="pixel"] .hero__meta dd { font-family: var(--f-mono); font-size: 19px; font-weight: 400; line-height: 1; }
html[data-style="pixel"] .tag > * { padding: 7px 9px; border: 2px solid var(--fg); background: var(--card-bg); }
html[data-style="pixel"] .tag b { background: var(--acid); color: var(--acid-ink); border-color: var(--fg); }
html[data-style="pixel"] .btn { border: 3px solid var(--fg); box-shadow: 0 0 0 3px #1d2b53, 6px 6px 0 3px #000; transition: none; }
html[data-style="pixel"] .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px #1d2b53; }
html[data-style="pixel"] .btn--line { background: #1d2b53; color: var(--fg); }
html[data-style="pixel"] .btn--line:hover { background: #29adff; color: #1d2b53; }
html[data-style="pixel"] .btn--acid:hover { background: #00e436; color: #1d2b53; border-color: var(--fg); }
html[data-style="pixel"] .card { background: var(--card-bg); border: 4px solid var(--fg); box-shadow: 0 0 0 4px #000, 12px 12px 0 4px #000; padding-top: 44px; }
html[data-style="pixel"] .card::before { display: block; content: ""; inset: 0 0 auto 0; width: auto; height: 28px; border: 0; border-bottom: 4px solid var(--fg); background: repeating-linear-gradient(90deg, #ff004d 0 12px, #ffec27 12px 24px, #29adff 24px 36px, #00e436 36px 48px); }
html[data-style="pixel"] .card::after { display: none; }
html[data-style="pixel"] .card__idx { position: absolute; top: 4px; left: 12px; right: 12px; margin: 0; align-items: center; color: #1d2b53; height: 24px; }
html[data-style="pixel"] .card__idx b { font-family: var(--f-disp); font-size: 11px; color: #1d2b53; background: var(--fg); padding: 2px 6px; margin-right: 6px; }
html[data-style="pixel"] .card__idx span { display: none; }
html[data-style="pixel"] .card__idx em { background: var(--fg); color: #1d2b53; border: 0; font-family: var(--f-disp); font-size: 9px; padding: 4px 6px; }
html[data-style="pixel"] .card h2 { color: var(--acid); text-shadow: 3px 3px 0 #000; }
html[data-style="pixel"] .card p { color: var(--fg); }
html[data-style="pixel"] .scr__hud { color: var(--fg); }
html[data-style="pixel"] .scr__hud span:nth-child(2) { color: var(--acid); }
html[data-style="pixel"] .scr__hud span:last-child::after { content: "  ♥♥♥"; color: #ff004d; }
html[data-style="pixel"] .scr__bg canvas.fx { opacity: 1; }
html[data-style="pixel"] .scr__cap { font-family: var(--f-mono); font-size: 16px; }
html[data-style="pixel"] a.x { color: var(--acid); background-image: linear-gradient(var(--acid), var(--acid)); background-size: 100% 3px; }
html[data-style="pixel"] a.x:hover { color: #1d2b53; }
html[data-style="pixel"] .x__t { color: #00e436; border-color: #00e436; }
html[data-style="pixel"] .nbar { background: #1d2b53; border-bottom: 4px solid var(--fg); }
html[data-style="pixel"] .nbar__logo { background: #ff004d; color: #fff; }
html[data-style="pixel"] .nbar__nav a[aria-current="page"] { background: var(--acid); color: #1d2b53; box-shadow: none; }
html[data-style="pixel"] .prog { height: 6px; }
html[data-style="pixel"] .prog i { background: repeating-linear-gradient(90deg, #00e436 0 8px, #ffec27 8px 16px); box-shadow: none; }
html[data-style="pixel"] .rail a { width: 40px; }
html[data-style="pixel"] .rail a.on { color: #00e436; }
html[data-style="pixel"] .deeper h2 { color: var(--acid); text-shadow: 6px 6px 0 #ff004d; }
html[data-style="pixel"] .deeper canvas.fx { opacity: .45; }
html[data-style="pixel"] .cta { background: #00e436; color: #1d2b53; border: 4px solid var(--fg); box-shadow: 0 0 0 4px #000, 10px 10px 0 4px #000; }
html[data-style="pixel"] .cta:hover { background: var(--acid); }
html[data-style="pixel"] .cta b { font-weight: 900; }
html[data-style="pixel"] .toc2 { border: 3px solid var(--fg); }
html[data-style="pixel"] .toc2 b { font-family: var(--f-mono); font-size: 20px; color: #00e436; }
html[data-style="pixel"] .paths h3 i { background: #ff004d; color: #fff; }
html[data-style="pixel"] .pl__n b { background: #29adff; color: #1d2b53; }
html[data-style="pixel"] .seq { border: 3px solid var(--fg); }
html[data-style="pixel"] .nfoot { border-top: 4px solid var(--fg); background: #0b0a1c; }
html[data-style="pixel"] .pv { border: 3px solid var(--fg); box-shadow: 8px 8px 0 #000; }
html[data-style="pixel"] .pv__k b { background: #ff004d; color: #fff; }
html[data-style="pixel"] .nl-lab b { color: #00e436; }
html[data-style="pixel"] .rbar { background: #1d2b53; border-bottom: 4px solid var(--fg); }
html[data-style="pixel"] .rbar__logo { background: #ff004d; color: #fff; }
html[data-style="pixel"] .cover { background: #12112a; border-bottom: 6px solid var(--acid); }
html[data-style="pixel"] .cover h1 { color: var(--acid); text-shadow: 4px 4px 0 #ff004d, 8px 8px 0 #1d2b53; }
html[data-style="pixel"] .cover__img { filter: contrast(1.3) saturate(1.4); image-rendering: pixelated; }
html[data-style="pixel"] .cover__sub { font-family: var(--f-mono); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); color: #00e436; }
html[data-style="pixel"] .cover__by, html[data-style="pixel"] .cover__meta { font-family: var(--f-mono); font-size: 16px; }
html[data-style="pixel"] .rd .sec h2 { color: var(--acid); }
html[data-style="pixel"] .rd .sec__n { color: #00e436; }
html[data-style="pixel"] .rtoc__h { font-family: var(--f-disp); font-size: 9px; }
html[data-style="pixel"] .rd a { text-decoration-thickness: 2px; }

/* =====================================================================
   E5 · lab · 冷酷科研 — cold white, graph paper, register marks, Plex, one signal blue
   ===================================================================== */
html[data-style="lab"] {
  --void: #f4f6f7; --void-rgb: 244, 246, 247; --panel: #e9edef; --paper: #ffffff;
  --acid: #0047ff; --acid-rgb: 0, 71, 255; --acid-ink: #ffffff;
  --fg: #0f1720; --fg-rgb: 15, 23, 32; --fg-2: #1b2530; --fg-3: #3a4652; --dim: #5c6670; --faint: #aeb8c0;
  --line: rgba(15, 23, 32, .55); --line-soft: rgba(15, 23, 32, .14); --mag: #e5322d; --alt2: #00a3a3;
  --hover-bg: #e3ebff; --card-bg: rgba(255, 255, 255, .97);
  --f-sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  --f-disp: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  --f-mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, monospace;
  --bg: #f4f6f7; --muted: #5c6670; --card: #ffffff; --link: #0047ff; --hl: rgba(0, 71, 255, .12); --on: #0047ff;
  --night: #0f1720; --night-fg: #f4f6f7; --night-muted: #aeb8c0; --night-fg-rgb: 244, 246, 247;
  color-scheme: light;
}
html[data-style="lab"] body::after { background: none; }
html[data-style="lab"] .nl body, html[data-style="lab"] .nl { background-image: repeating-linear-gradient(0deg, rgba(15, 23, 32, .06) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(15, 23, 32, .06) 0 1px, transparent 1px 24px); }
html[data-style="lab"] .hero h1 { font-weight: 700; letter-spacing: -.03em; text-shadow: none; font-feature-settings: "tnum"; }
html[data-style="lab"] .hero h1::before { content: "FIG. 0"; display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--acid); margin-bottom: 14px; }
html[data-style="lab"] .hero__sub { font-family: var(--f-sans); font-weight: 500; color: var(--fg-3); }
html[data-style="lab"] .hero__meta { border-color: var(--fg); }
html[data-style="lab"] .hero__meta dd { font-family: var(--f-mono); font-weight: 500; font-feature-settings: "tnum"; }
html[data-style="lab"] .tag { text-transform: uppercase; }
html[data-style="lab"] .tag > * { background: var(--paper); border-color: var(--fg); }
html[data-style="lab"] .tag b { background: var(--fg); color: var(--paper); border-color: var(--fg); }
html[data-style="lab"] .btn { border: 1px solid var(--fg); text-transform: uppercase; font-weight: 500; }
html[data-style="lab"] .btn--acid { background: var(--acid); color: #fff; border-color: var(--acid); }
html[data-style="lab"] .btn--acid:hover { background: var(--fg); border-color: var(--fg); color: #fff; }
html[data-style="lab"] .btn--line { background: var(--paper); color: var(--fg); }
html[data-style="lab"] .btn--line:hover { background: var(--fg); color: #fff; }
html[data-style="lab"] .hero__toc a { background: var(--paper); border-color: var(--line-soft); }
html[data-style="lab"] .hero__toc b { color: var(--acid); }
html[data-style="lab"] .card { border: 1px solid var(--fg); box-shadow: none; padding-top: 52px; }
html[data-style="lab"] .card::before { display: block; content: ""; inset: 0 0 auto 0; width: auto; height: 30px; border: 0; border-bottom: 1px solid var(--fg); background: var(--panel); }
html[data-style="lab"] .card::after { display: block; content: "+"; width: auto; height: auto; border: 0; top: 4px; right: 12px; bottom: auto; left: auto; font-family: var(--f-mono); font-size: 14px; color: var(--acid); }
html[data-style="lab"] .card__idx { position: absolute; top: 0; left: 0; right: 0; height: 30px; margin: 0; padding: 0 14px; align-items: center; text-transform: uppercase; color: var(--fg); }
html[data-style="lab"] .card__idx b { font-family: var(--f-mono); font-stretch: normal; font-size: 12px; font-weight: 600; color: var(--fg); }
html[data-style="lab"] .card__idx b::before { content: "FIG. "; }
html[data-style="lab"] .card__idx span { font-size: 12px; }
html[data-style="lab"] .card__idx em { border: 0; padding: 0; margin-left: auto; margin-right: 22px; color: var(--acid); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; }
html[data-style="lab"] .card h2 { font-weight: 700; letter-spacing: -.02em; }
html[data-style="lab"] .card p { color: var(--fg-2); font-size: 16.5px; line-height: 1.9; }
html[data-style="lab"] .scr__hud { color: var(--fg); text-transform: uppercase; }
html[data-style="lab"] .scr__hud span:nth-child(2) { color: var(--acid); }
html[data-style="lab"] .scr__cap { color: var(--fg-3); }
html[data-style="lab"] .scr__bg canvas.fx { opacity: 1; }
html[data-style="lab"] a.x { color: var(--acid); background-image: linear-gradient(var(--acid), var(--acid)); }
html[data-style="lab"] a.x:hover { color: #fff; }
html[data-style="lab"] .x__t { color: var(--mag); border-color: var(--mag); }
html[data-style="lab"] .nbar { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--fg); }
html[data-style="lab"] .nbar__logo { background: var(--fg); color: #fff; }
html[data-style="lab"] .nbar__nav a[aria-current="page"] { background: var(--hover-bg); box-shadow: inset 0 -2px 0 var(--acid); }
html[data-style="lab"] .prog i { box-shadow: none; }
html[data-style="lab"] .deeper { background: var(--paper); }
html[data-style="lab"] .deeper h2 { font-weight: 700; letter-spacing: -.03em; }
html[data-style="lab"] .deeper__lede { font-family: var(--f-sans); color: var(--fg-2); }
html[data-style="lab"] .cta { background: var(--acid); color: #fff; border-color: var(--acid); }
html[data-style="lab"] .cta:hover { background: var(--fg); border-color: var(--fg); }
html[data-style="lab"] .toc2 a, html[data-style="lab"] .seq a { background: var(--paper); }
html[data-style="lab"] .toc2 b { font-family: var(--f-mono); }
html[data-style="lab"] .paths h3 i { background: var(--fg); color: #fff; }
html[data-style="lab"] .nfoot { background: var(--panel); border-top: 1px solid var(--fg); }
html[data-style="lab"] .pv { border-color: var(--fg); box-shadow: 0 12px 40px rgba(15, 23, 32, .18); }
html[data-style="lab"] .nl-lab { text-shadow: 0 0 6px var(--void), 0 0 12px var(--void); }
html[data-style="lab"] .rbar { background: var(--fg); color: #fff; border-bottom-color: var(--acid); }
html[data-style="lab"] .cover { background: var(--paper); color: var(--fg); border-bottom: 1px solid var(--fg); }
html[data-style="lab"] .cover h1 { font-weight: 700; letter-spacing: -.03em; }
html[data-style="lab"] .cover__img { filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; border-left: 1px solid var(--fg); }
html[data-style="lab"] .cover__sub { color: var(--fg-3); font-family: var(--f-sans); font-weight: 500; }
html[data-style="lab"] .cover__by { color: var(--fg); }
html[data-style="lab"] .rd .sec h2 { font-weight: 700; letter-spacing: -.02em; }
html[data-style="lab"] .rd .sec__n { color: var(--acid); font-family: var(--f-mono); }

/* =====================================================================
   E6 · fractal · 混沌分形 — deep violet, iridescent gradients, Fraunces, nested frames
   ===================================================================== */
html[data-style="fractal"] {
  --void: #07040f; --void-rgb: 7, 4, 15; --panel: #120a24; --paper: #efe9ff;
  --acid: #19f0c8; --acid-rgb: 25, 240, 200; --acid-ink: #06110f;
  --fg: #efe9ff; --fg-rgb: 239, 233, 255; --fg-2: #dcd3f5; --fg-3: #b9adde; --dim: #8b7fb3; --faint: #2c2050;
  --line: rgba(25, 240, 200, .32); --line-soft: rgba(239, 233, 255, .12); --mag: #ff5ea8; --alt2: #a26bff;
  --hover-bg: #1a0f33; --card-bg: rgba(14, 8, 30, .9);
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  --f-disp: "Fraunces", "Noto Serif SC", serif;
  --f-mono: "Space Mono", "Noto Sans SC", ui-monospace, monospace;
  --bg: #07040f; --fg: #efe9ff; --muted: #a79bd0; --card: #120a24; --link: #19f0c8; --hl: rgba(25, 240, 200, .22); --on: #19f0c8;
  --night: #07040f; --night-fg: #efe9ff; --night-muted: #a79bd0; --night-fg-rgb: 239, 233, 255;
  color-scheme: dark;
}
html[data-style="fractal"] body::after { background: radial-gradient(ellipse at 70% 20%, rgba(162, 107, 255, .12), transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(25, 240, 200, .08), transparent 50%); }
html[data-style="fractal"] .hero h1, html[data-style="fractal"] .deeper h2, html[data-style="fractal"] .cover h1 { font-family: var(--f-serif); font-weight: 900; font-variation-settings: "opsz" 144; letter-spacing: -.01em; background: linear-gradient(100deg, #19f0c8, #a26bff 45%, #ffcf5a 80%, #ff5ea8); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html[data-style="fractal"] .hero__sub { font-family: var(--f-serif); font-weight: 700; font-style: italic; color: var(--fg-2); }
html[data-style="fractal"] .tag > * { background: rgba(7, 4, 15, .8); border-color: rgba(162, 107, 255, .5); }
html[data-style="fractal"] .tag b { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; border-color: transparent; }
html[data-style="fractal"] .btn { border: 1px solid transparent; background: linear-gradient(var(--void), var(--void)) padding-box, linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8) border-box; color: var(--fg); }
html[data-style="fractal"] .btn--acid { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }
html[data-style="fractal"] .btn--acid:hover { background: linear-gradient(90deg, #ffcf5a, #ff5ea8); }
html[data-style="fractal"] .btn--line:hover { background: linear-gradient(90deg, #19f0c8, #a26bff); color: #06110f; }
html[data-style="fractal"] .card { border: 1px solid transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, #19f0c8, #a26bff 50%, #ff5ea8) border-box; box-shadow: 0 0 0 6px rgba(162, 107, 255, .12), 0 0 0 12px rgba(25, 240, 200, .06), 0 30px 80px rgba(0, 0, 0, .6); }
html[data-style="fractal"] .card::before, html[data-style="fractal"] .card::after { width: 26px; height: 26px; border-color: var(--acid); box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 5px var(--alt2), inset 0 0 0 9px var(--card-bg), inset 0 0 0 10px var(--mag); }
html[data-style="fractal"] .card h2 { font-family: var(--f-serif); font-weight: 900; font-variation-settings: "opsz" 72; }
html[data-style="fractal"] .card__idx b { font-family: var(--f-serif); font-stretch: normal; font-weight: 900; background: linear-gradient(90deg, #19f0c8, #a26bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-style="fractal"] .card__idx em { border-color: rgba(162, 107, 255, .6); }
html[data-style="fractal"] .card p { color: var(--fg-2); }
html[data-style="fractal"] .scr__hud span:nth-child(2) { color: var(--alt2); }
html[data-style="fractal"] .scr__bg canvas.fx { opacity: .95; }
html[data-style="fractal"] a.x { color: var(--acid); background-image: linear-gradient(90deg, #19f0c8, #a26bff); }
html[data-style="fractal"] a.x:hover { color: #06110f; }
html[data-style="fractal"] .x__t { color: var(--alt2); border-color: var(--alt2); }
html[data-style="fractal"] .nbar { background: rgba(7, 4, 15, .9); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8) 1; }
html[data-style="fractal"] .nbar__logo { background: linear-gradient(135deg, #19f0c8, #a26bff); color: #06110f; }
html[data-style="fractal"] .prog i { background: linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8, #ffcf5a); box-shadow: 0 0 10px rgba(162, 107, 255, .7); }
html[data-style="fractal"] .rail a.on { color: var(--alt2); }
html[data-style="fractal"] .cta { background: linear-gradient(90deg, #19f0c8, #a26bff 55%, #ff5ea8); color: #06110f; border: 0; }
html[data-style="fractal"] .cta:hover { filter: brightness(1.12); }
html[data-style="fractal"] .toc2 b { font-family: var(--f-serif); color: var(--alt2); }
html[data-style="fractal"] .paths h3 i { background: var(--alt2); color: #fff; }
html[data-style="fractal"] .nfoot { border-top: 1px solid transparent; border-image: linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8) 1; background: linear-gradient(180deg, #07040f, #0d0720); }
html[data-style="fractal"] .pv { border: 1px solid var(--alt2); box-shadow: 0 0 30px rgba(162, 107, 255, .3), 0 18px 60px rgba(0, 0, 0, .7); }
html[data-style="fractal"] .rbar { background: #07040f; border-bottom-color: var(--alt2); }
html[data-style="fractal"] .cover { background: radial-gradient(ellipse at 30% 40%, rgba(162, 107, 255, .25), transparent 55%), #07040f; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #19f0c8, #a26bff, #ff5ea8) 1; }
html[data-style="fractal"] .cover__img { filter: hue-rotate(200deg) saturate(1.5) contrast(1.1); mix-blend-mode: screen; }
html[data-style="fractal"] .cover__sub { font-family: var(--f-serif); font-style: italic; color: var(--fg-2); }
html[data-style="fractal"] .rd .sec h2 { font-family: var(--f-serif); font-weight: 900; }
html[data-style="fractal"] .rd .sec__n { color: var(--alt2); font-family: var(--f-serif); }

/* E6 hero: a Julia set breathes under the network */
html[data-style="fractal"] .hero canvas.fx--under { opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 60%); mask-image: linear-gradient(90deg, transparent 30%, #000 60%); }
@media (max-width: 900px) { html[data-style="fractal"] .hero canvas.fx--under { -webkit-mask-image: none; mask-image: none; opacity: .4; } }

/* sans-based themes: the lede is set in weight 500, not the serif's 600 */
html[data-style="cyber"] .lede p, html[data-style="pixel"] .lede p, html[data-style="lab"] .lede p { font-weight: 500; }

/* #####################################################################
   v2 (v0.8) — the question network. Each world gets its own way of asking:
   marginalia, clippings, live chat, dialogue choices, hypotheses, branches, work orders.
   ##################################################################### */

/* ---------- E1 · scroll: marginalia, and one medium per screen ---------- */
html[data-style="scroll"] .hero__q { font-family: var(--f-serif); color: var(--fg); }
html[data-style="scroll"] .hero__q i, html[data-style="scroll"] .more__q i, html[data-style="scroll"] .nc__l i { background: none; color: var(--acid); border: 1px solid var(--acid); border-radius: 50%; font-family: var(--f-serif); }
html[data-style="scroll"] .hero__toc a { border-top: 0; border-bottom: 1px dotted var(--faint); font-family: var(--f-serif); }
html[data-style="scroll"] .hero__toc b { font-family: var(--f-disp); font-size: 13px; color: var(--acid); font-variant-numeric: oldstyle-nums; }
html[data-style="scroll"] .card .card__q { font-family: var(--f-serif); font-weight: 600; color: var(--acid); font-size: 15.5px; }
html[data-style="scroll"] .card .card__q::before { content: "問"; font-family: "Ma Shan Zheng", var(--f-serif); font-size: 15px; font-weight: 400; background: var(--acid); color: var(--acid-ink); padding: 0 5px; vertical-align: 0; }
html[data-style="scroll"] .qs { border-top: 3px double var(--fg); }
html[data-style="scroll"] .card .qs__h { font-family: var(--f-serif); font-variant-caps: small-caps; letter-spacing: .3em; color: var(--acid); }
html[data-style="scroll"] .qa { border: 0; border-bottom: 1px dotted var(--faint); background: transparent; padding: 7px 4px; }
html[data-style="scroll"] .qa::before { content: "☞"; font-family: var(--f-serif); font-size: 17px; color: var(--acid); }
html[data-style="scroll"] .qa--back::before { content: "☜"; }
html[data-style="scroll"] .qa__q { font-family: var(--f-serif); font-weight: 600; font-style: normal; }
html[data-style="scroll"] .qa__to { font-family: var(--f-disp); font-style: italic; font-size: 12.5px; letter-spacing: .02em; }
html[data-style="scroll"] .qa__to b { font-style: normal; color: var(--acid); }
html[data-style="scroll"] .qa:hover, html[data-style="scroll"] .qa:focus-visible { background: rgba(179, 50, 27, .1); }
html[data-style="scroll"] .qa:hover .qa__q, html[data-style="scroll"] .qa:hover .qa__to, html[data-style="scroll"] .qa:hover::before, html[data-style="scroll"] .qa:hover .qa__to b { color: var(--acid); }
html[data-style="scroll"] .qs__deep { font-family: var(--f-serif); border-top-color: var(--faint); }
html[data-style="scroll"] .qs__deep span { font-family: var(--f-serif); font-variant-caps: small-caps; }
html[data-style="scroll"] .card__in a b { color: var(--acid); }
/* one medium per screen */
html[data-style="scroll"] [data-variant] .card { --grain: rgba(43, 33, 24, .06); }
html[data-style="scroll"] [data-variant="papyrus"] .card { background:
  repeating-linear-gradient(90deg, rgba(120, 90, 40, .07) 0 2px, transparent 2px 7px),
  repeating-linear-gradient(0deg, rgba(120, 90, 40, .09) 0 3px, transparent 3px 11px),
  linear-gradient(180deg, #eadba9, #e2cf97); border-color: #8a6d2a; outline-color: rgba(138, 109, 42, .45); border-radius: 2px 14px 3px 10px / 10px 3px 14px 2px; }
html[data-style="scroll"] [data-variant="papyrus"] .card__idx em::after { content: " · 纸草"; }
html[data-style="scroll"] [data-variant="xianzhuang"] .card { padding-left: clamp(46px, 5vw, 64px); background: linear-gradient(90deg, transparent 0 30px, rgba(43, 33, 24, .5) 30px 31px, transparent 31px), #f4ecd8; }
html[data-style="scroll"] [data-variant="xianzhuang"] .card::before { display: block; content: ""; position: absolute; left: 10px; top: 14%; bottom: 14%; width: 10px; height: auto; border: 0; background: radial-gradient(circle at 5px 5px, var(--fg) 0 2.5px, transparent 3px) 0 0 / 10px 25% repeat-y; }
html[data-style="scroll"] [data-variant="xianzhuang"] .card__idx em { writing-mode: vertical-rl; letter-spacing: .3em; padding: 10px 4px; position: absolute; right: 12px; top: 40px; border: 1px solid var(--acid); }
html[data-style="scroll"] [data-variant="xianzhuang"] .card__idx em::before { content: "◆"; display: block; color: var(--acid); margin-bottom: 4px; }
/* 竖排的签条压在右上角：问题行给它让出位置（英文问题较长时曾钻到签条底下） */
html[data-style="scroll"] [data-variant="xianzhuang"] .card__q { padding-right: 58px; }
html[data-style="scroll"] [data-variant="xianzhuang"] .card h2 { padding-right: 40px; }
html[data-style="scroll"] [data-variant="letterpress"] .card { background: #faf5e8; border: 3px double var(--fg); outline: 0; }
html[data-style="scroll"] [data-variant="letterpress"] .card > p:not([class])::first-letter { float: left; font-size: 3.1em; line-height: .9; margin: .06em .12em 0 0; color: var(--acid); font-weight: 900; font-family: var(--f-serif); }
html[data-style="scroll"] [data-variant="letterpress"] .card h2 { text-align: center; font-variant-caps: small-caps; }
html[data-style="scroll"] [data-variant="letterpress"] .card h2::after { content: "❦"; display: block; font-size: .55em; color: var(--acid); margin-top: .25em; }
html[data-style="scroll"] [data-variant="letter"] .card { background: repeating-linear-gradient(0deg, transparent 0 33px, rgba(27, 60, 120, .12) 33px 34px), #fbf6ea; outline: 0; border: 1px solid rgba(43, 33, 24, .4); transform: rotate(-.6deg); }
html[data-style="scroll"] [data-variant="letter"] .card::after { display: grid; place-items: center; content: "E1"; position: absolute; right: -18px; bottom: -18px; left: auto; top: auto; width: 64px; height: 64px; border: 0; border-radius: 47% 53% 50% 50%; background: radial-gradient(circle at 40% 35%, #d0503a, #8f2211 70%); color: #f7d9c8; font-family: var(--f-disp); font-size: 15px; font-weight: 700; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
html[data-style="scroll"] [data-variant="letter"] .card h2 { font-family: "Ma Shan Zheng", var(--f-serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); }
html[data-style="scroll"] [data-variant="journal"] .card { width: min(720px, 100%); background: #fbf7ec; outline-offset: -4px; }
html[data-style="scroll"] [data-variant="journal"] .card::before { display: block; content: "PHILOSOPHICAL · TRANSACTIONS · 学者杂志"; position: static; width: auto; height: auto; border: 0; border-bottom: 3px double var(--fg); margin: -6px 0 16px; padding-bottom: 6px; font-family: var(--f-disp); font-variant-caps: small-caps; letter-spacing: .28em; font-size: 12px; text-align: center; color: var(--fg); }
@media (min-width: 900px) { html[data-style="scroll"] [data-variant="journal"] .card > p:not([class]) { column-count: 2; column-gap: 28px; column-rule: 1px solid var(--line-soft); } }
html[data-style="scroll"] [data-variant="card"] .card { background: linear-gradient(180deg, transparent 0 58px, #c0392b 58px 60px, transparent 60px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(41, 98, 160, .28) 31px 32px), #fffdf6; outline: 0; border: 1px solid rgba(43, 33, 24, .35); box-shadow: 6px 6px 0 rgba(43, 33, 24, .15); }
html[data-style="scroll"] [data-variant="card"] .card::after { display: block; content: ""; left: 50%; right: auto; top: auto; bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border: 0; border-radius: 50%; background: var(--void); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
html[data-style="scroll"] [data-variant="card"] .card h2 { font-family: var(--f-mono); font-variant-caps: small-caps; }
html[data-style="scroll"] [data-variant="hyper"] .card { background: #fffdf6; outline: 0; border: 1px solid var(--fg); box-shadow: 0 0 0 6px rgba(26, 13, 171, .08), 8px 8px 0 rgba(26, 13, 171, .15); }
html[data-style="scroll"] [data-variant="hyper"] .card h2 { font-family: "Times New Roman", var(--f-serif); color: #1a0dab; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
html[data-style="scroll"] [data-variant="hyper"] .card h2::after { content: "▍"; color: var(--acid); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html[data-style="scroll"] [data-variant="hyper"] .qa__q { color: #1a0dab; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* deep read */
html[data-style="scroll"] .cover__q { color: var(--fg); font-family: var(--f-serif); }
html[data-style="scroll"] .cover__q i { background: none; border: 1px solid var(--acid); color: var(--acid); border-radius: 50%; }
html[data-style="scroll"] .sn .qa::before, html[data-style="scroll"] .np .qa::before { content: "☞"; color: var(--acid); font-family: var(--f-serif); font-size: 14px; }
html[data-style="scroll"] .sn .qa--back::before, html[data-style="scroll"] .np .qa--back::before { content: "☜"; }
html[data-style="scroll"] .sn .qa, html[data-style="scroll"] .np .qa { border: 0; border-bottom: 1px dotted var(--faint); background: transparent; }

/* ---------- E2 · collage: questions as clippings; newsprint, wallpaper, faux bois ---------- */
html[data-style="collage"] .hero__in::before, html[data-style="collage"] .hero__in::after { position: absolute; z-index: -1; font-family: "Anton", var(--f-disp); line-height: .8; pointer-events: none; }
html[data-style="collage"] .hero__in::before { content: "JOU"; top: -40px; right: -12%; font-size: clamp(90px, 13vw, 220px); color: rgba(20, 20, 20, .09); transform: rotate(-8deg); }
html[data-style="collage"] .hero__in::after { content: "RNAL"; bottom: 8%; right: -30%; font-size: clamp(70px, 9vw, 160px); color: rgba(214, 40, 40, .16); transform: rotate(6deg); }
html[data-style="collage"] .hero__q { display: inline-flex; background: var(--paper); padding: 8px 14px; border: 2px solid var(--fg); transform: rotate(-.8deg); box-shadow: 5px 5px 0 var(--acid); font-family: var(--f-serif); }
html[data-style="collage"] .hero__q i { background: var(--fg); color: var(--paper); }
html[data-style="collage"] .hero__toc a { font-family: var(--f-mono); }
html[data-style="collage"] .card .card__q { display: inline-block; background: var(--fg); color: var(--paper); padding: 3px 10px; font-family: var(--f-mono); transform: rotate(-1deg); }
html[data-style="collage"] .card .card__q::before { content: "?"; background: var(--acid); color: var(--paper); font-family: "Anton", var(--f-disp); font-size: 13px; }
html[data-style="collage"] .qs { border-top: 3px solid var(--fg); }
html[data-style="collage"] .card .qs__h { font-family: "Anton", var(--f-disp); font-size: 16px; letter-spacing: .06em; color: var(--acid); text-transform: uppercase; }
html[data-style="collage"] .card .qs__h::after { content: " · CLIPPINGS"; font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); }
html[data-style="collage"] .qs ul { gap: 10px; }
html[data-style="collage"] .qa { background: var(--paper); border: 1px solid var(--fg); padding: 10px 14px 10px 12px; clip-path: polygon(0 4%, 3% 0, 22% 3%, 41% 0, 63% 4%, 84% 0, 100% 3%, 99% 34%, 100% 67%, 98% 100%, 76% 97%, 55% 100%, 33% 96%, 12% 100%, 0 97%, 1% 62%, 0 30%); box-shadow: none; }
html[data-style="collage"] .qs li:nth-child(odd) .qa { transform: rotate(-.9deg); }
html[data-style="collage"] .qs li:nth-child(even) .qa { transform: rotate(.7deg); margin-left: 10px; background: #fff7d6; }
html[data-style="collage"] .qs li:nth-child(3n) .qa { background: #e4ecff; }
html[data-style="collage"] .qa::before { content: "✂"; color: var(--acid); font-size: 14px; }
html[data-style="collage"] .qa__q { font-family: var(--f-serif); font-weight: 900; }
html[data-style="collage"] .qa__to { font-family: var(--f-mono); color: var(--fg-3); }
html[data-style="collage"] .qa__to b { background: var(--acid); color: var(--paper); padding: 0 4px; }
html[data-style="collage"] .qa:hover, html[data-style="collage"] .qa:focus-visible { background: var(--alt2); transform: rotate(0) scale(1.02); }
html[data-style="collage"] .qa:hover .qa__q, html[data-style="collage"] .qa:hover .qa__to, html[data-style="collage"] .qa:hover::before { color: var(--fg); }
html[data-style="collage"] .qa:hover .qa__to b { color: var(--paper); }
html[data-style="collage"] .qs__deep { font-family: var(--f-mono); border-top: 2px dashed var(--fg); color: var(--fg); }
html[data-style="collage"] .qs__deep i { color: var(--acid); }
html[data-style="collage"] .card__in a { border-color: var(--fg); background: var(--paper); }
/* surfaces */
html[data-style="collage"] [data-variant="news"] .card { background: repeating-linear-gradient(90deg, transparent 0 calc(33.3% - 1px), rgba(20, 20, 20, .08) calc(33.3% - 1px) 33.3%), #f3eee0; }
html[data-style="collage"] [data-variant="news"] .card h2 { font-family: "ZCOOL QingKe HuangYou", var(--f-sans); font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; border-top: 4px solid var(--fg); border-bottom: 1px solid var(--fg); padding: 6px 0; }
html[data-style="collage"] [data-variant="news"] .card__idx em::after { content: " · 号外"; }
html[data-style="collage"] [data-variant="wallpaper"] .card { border-width: 14px; border-style: solid; border-image: repeating-linear-gradient(45deg, #d62828 0 6px, #fbf7ec 6px 12px, #1b4bd6 12px 18px, #fbf7ec 18px 24px) 14; }
html[data-style="collage"] [data-variant="bois"] .card { box-shadow: 10px 10px 0 var(--fg), inset 16px 0 0 #7a4a24, inset 20px 0 0 #a8703c; padding-left: calc(clamp(22px, 2.6vw, 38px) + 22px); background: var(--card-bg); }
html[data-style="collage"] [data-variant="bois"] .card::after { background: repeating-radial-gradient(ellipse at 20% 50%, #8a5a2b 0 3px, #b07a45 3px 7px, #6e4420 7px 9px); }
/* deep read */
html[data-style="collage"] .cover__q { background: var(--paper); color: var(--fg); padding: 8px 12px; border: 2px solid var(--fg); transform: rotate(-.6deg); display: inline-flex; }
html[data-style="collage"] .cover__q i { background: var(--acid); color: var(--paper); }
html[data-style="collage"] .sn .qa::before, html[data-style="collage"] .np .qa::before { content: "✂"; color: var(--acid); }
html[data-style="collage"] .sn .qa, html[data-style="collage"] .np .qa { background: var(--paper); border-color: var(--fg); }

/* ---------- E3 · cyber: a live broadcast — danmaku, chat questions, synthwave floor ---------- */
html[data-style="cyber"] .hero { background: linear-gradient(180deg, transparent 0 58%, rgba(255, 47, 191, .1) 58%, transparent 60%), radial-gradient(ellipse 70% 40% at 70% 100%, rgba(122, 92, 255, .35), transparent 70%); }
html[data-style="cyber"] .hero::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; z-index: 0; pointer-events: none; background:
  repeating-linear-gradient(90deg, rgba(34, 224, 255, .45) 0 1px, transparent 1px 60px),
  repeating-linear-gradient(0deg, rgba(255, 47, 191, .5) 0 1px, transparent 1px 34px);
  transform: perspective(360px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); animation: floor 2.4s linear infinite; }
@keyframes floor { to { background-position: 0 0, 0 34px; } }
@media (prefers-reduced-motion: reduce) { html[data-style="cyber"] .hero::after { animation: none; } }
/* 弹幕只在右半边的网络图上飘，左边的标题和导语不被压字；左缘渐隐 */
html[data-style="cyber"] .dm { display: block; position: absolute; top: calc(var(--bar) + 10px); bottom: 30%; right: 0; left: calc(var(--gut) + min(640px, 52vw) + 32px); z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 88px); mask-image: linear-gradient(90deg, transparent, #000 88px); }
html[data-style="cyber"] .dm span { position: absolute; left: 100%; white-space: nowrap; font-size: clamp(13px, 1.2vw, 17px); font-weight: 700; color: rgba(228, 243, 255, .8); text-shadow: 0 0 6px rgba(34, 224, 255, .8), 1px 1px 0 #000; animation: dm 14s linear forwards; }
html[data-style="cyber"] .dm span.hot { color: var(--mag); text-shadow: 0 0 8px rgba(255, 47, 191, .9), 1px 1px 0 #000; }
@keyframes dm { from { transform: translateX(0); } to { transform: translateX(var(--dx, calc(-100vw - 100%))); } }
html[data-style="cyber"] .hero__in { z-index: 3; }
html[data-style="cyber"] .tag span:last-child::before { content: "● "; color: #ff3b3b; animation: blink 1.2s steps(1) infinite; }
html[data-style="cyber"] .hero__q { font-family: var(--f-sans); text-shadow: 0 0 12px rgba(34, 224, 255, .5); }
html[data-style="cyber"] .hero__q i, html[data-style="cyber"] .more__q i, html[data-style="cyber"] .nc__l i { background: var(--mag); color: #fff; clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%); }
html[data-style="cyber"] .hero__toc a { font-family: var(--f-mono); border-top-color: rgba(34, 224, 255, .2); }
html[data-style="cyber"] .card { clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
html[data-style="cyber"] .card .card__q { font-family: var(--f-mono); color: var(--acid); text-shadow: 0 0 8px rgba(34, 224, 255, .6); }
html[data-style="cyber"] .card .card__q::before { content: "Q&A"; background: var(--mag); color: #fff; }
html[data-style="cyber"] .qs { border: 1px solid rgba(34, 224, 255, .35); background: rgba(4, 6, 15, .75); padding: 0; margin-top: 20px; }
html[data-style="cyber"] .card .qs__h { display: flex; justify-content: space-between; margin: 0; padding: 7px 12px; background: linear-gradient(90deg, rgba(34, 224, 255, .18), transparent); color: var(--acid); font-family: var(--f-mono); letter-spacing: .1em; }
html[data-style="cyber"] .card .qs__h::before { content: "● LIVE CHAT · 观众提问"; color: #ff5c7a; }
html[data-style="cyber"] .card .qs__h { font-size: 0; }
html[data-style="cyber"] .card .qs__h::before { font-size: 10.5px; }
html[data-style="cyber"] .qs ul { gap: 0; padding: 6px 8px 8px; }
html[data-style="cyber"] .qa { border: 0; border-left: 2px solid var(--mag); background: transparent; padding: 7px 10px; margin: 4px 0; grid-template-columns: minmax(0, 1fr); }
html[data-style="cyber"] .qa::before { display: none; }
html[data-style="cyber"] .qa__to { order: -1; font-family: var(--f-mono); color: var(--mag); }
html[data-style="cyber"] .qa__to b { color: #fff; background: var(--alt2); padding: 0 4px; }
html[data-style="cyber"] .qa__to::after { content: " ▸"; color: var(--dim); }
html[data-style="cyber"] .qa__q { font-weight: 500; color: var(--fg); }
html[data-style="cyber"] .qa:hover, html[data-style="cyber"] .qa:focus-visible { background: rgba(34, 224, 255, .12); border-left-color: var(--acid); }
html[data-style="cyber"] .qa:hover .qa__q, html[data-style="cyber"] .qa:focus-visible .qa__q { color: #fff; }
html[data-style="cyber"] .qa:hover .qa__to, html[data-style="cyber"] .qa:focus-visible .qa__to { color: var(--acid); }
html[data-style="cyber"] .qa:hover .qa__to b { color: #fff; }
html[data-style="cyber"] .qs__deep { margin: 0; padding: 8px 12px; border-top: 1px solid rgba(34, 224, 255, .25); font-family: var(--f-mono); }
html[data-style="cyber"] .card__in a { border-color: rgba(34, 224, 255, .3); }
html[data-style="cyber"] .scr__hud span:first-child { color: #ff5c7a; }
html[data-style="cyber"] .scr__hud span:first-child::before { content: "● "; animation: blink 1.2s steps(1) infinite; }
html[data-style="cyber"] .cover__q i { background: var(--mag); color: #fff; }
html[data-style="cyber"] .sn .qa, html[data-style="cyber"] .np .qa { border: 0; border-left: 2px solid var(--mag); background: rgba(34, 224, 255, .05); }

/* ---------- E4 · pixel: title screen, level select, dialogue choices, achievements, XP ---------- */
html[data-style="pixel"] .hero__btns::after { content: "▶ PRESS START"; flex-basis: 100%; margin-top: 6px; font-family: "Press Start 2P", var(--f-mono); font-size: 11px; color: var(--acid); animation: blink 1s steps(1) infinite; }
html[data-style="pixel"] .hero__q { font-family: var(--f-sans); color: var(--fg); }
html[data-style="pixel"] .hero__q i, html[data-style="pixel"] .more__q i, html[data-style="pixel"] .nc__l i { background: #ff004d; color: #fff; font-family: "Press Start 2P", monospace; font-size: 11px; }
html[data-style="pixel"] .hero__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html[data-style="pixel"] .hero__toc a { border: 3px solid var(--fg); background: #1d2b53; padding: 6px 8px; box-shadow: 3px 3px 0 #000; }
html[data-style="pixel"] .hero__toc a:hover { border-color: var(--acid); background: #29316d; }
html[data-style="pixel"] .hero__toc b { font-family: "Press Start 2P", monospace; font-size: 9px; color: #00e436; }
html[data-style="pixel"] .hero__toc b::before { content: "1-"; }
html[data-style="pixel"] .card .card__q { font-family: var(--f-sans); color: #00e436; }
html[data-style="pixel"] .card .card__q::before { content: "QUEST"; font-family: "Press Start 2P", monospace; font-size: 8px; background: #00e436; color: #1d2b53; }
html[data-style="pixel"] .qs { border: 4px solid var(--fg); background: #000; padding: 10px 12px 12px; box-shadow: inset 0 0 0 2px #29adff; }
html[data-style="pixel"] .card .qs__h { font-family: "Press Start 2P", monospace; font-size: 9px; color: #29adff; letter-spacing: .06em; }
html[data-style="pixel"] .card .qs__h::after { content: " · 你要问什么？"; font-family: var(--f-sans); font-size: 12px; color: var(--fg-3); letter-spacing: 0; }
html[data-style="pixel"] .qs ul { gap: 2px; }
html[data-style="pixel"] .qa { border: 0; background: transparent; padding: 6px 6px 6px 4px; }
html[data-style="pixel"] .qa::before { content: "▶"; color: transparent; font-size: 11px; }
html[data-style="pixel"] .qa:hover::before, html[data-style="pixel"] .qa:focus-visible::before { color: var(--acid); animation: blink .6s steps(1) infinite; }
html[data-style="pixel"] .qa__q { font-weight: 700; color: var(--fg); }
html[data-style="pixel"] .qa__to { font-family: "VT323", monospace; font-size: 15px; color: var(--dim); }
html[data-style="pixel"] .qa__to b { color: #ff77a8; }
html[data-style="pixel"] .qa__to::before { content: "→ WORLD "; }
html[data-style="pixel"] .qa:hover, html[data-style="pixel"] .qa:focus-visible { background: #29316d; }
html[data-style="pixel"] .qa:hover .qa__q, html[data-style="pixel"] .qa:focus-visible .qa__q { color: var(--acid); }
html[data-style="pixel"] .qa:hover .qa__to, html[data-style="pixel"] .qa:focus-visible .qa__to { color: var(--fg); }
html[data-style="pixel"] .qa:hover .qa__to b { color: #ff77a8; }
html[data-style="pixel"] .qs__deep { font-family: "VT323", monospace; font-size: 17px; border-top: 2px dashed #29adff; }
html[data-style="pixel"] .qs__deep span::before { content: "⬇ "; }
html[data-style="pixel"] .card__in a { border: 2px solid var(--fg); }
html[data-style="pixel"] .prog { height: 8px; background: #000; border-bottom: 2px solid var(--fg); }
html[data-style="pixel"] .prog i { background: repeating-linear-gradient(90deg, #00e436 0 6px, #008751 6px 8px); box-shadow: none; }
html[data-style="pixel"] .prog::after { content: "XP"; position: absolute; right: 8px; top: 10px; font-family: "Press Start 2P", monospace; font-size: 8px; color: #00e436; text-shadow: 1px 1px 0 #000; }
html[data-style="pixel"] .toasts { position: fixed; z-index: 95; right: 16px; bottom: 16px; display: grid; gap: 8px; pointer-events: none; }
html[data-style="pixel"] .toast { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-width: 260px; padding: 10px 12px; background: #000; color: var(--fg); border: 3px solid var(--acid); box-shadow: 4px 4px 0 #ff004d; font-size: 13px; animation: toast-in .35s steps(4); }
html[data-style="pixel"] .toast b { font-family: "Press Start 2P", monospace; font-size: 9px; color: var(--acid); }
html[data-style="pixel"] .toast i { font-style: normal; font-family: "VT323", monospace; font-size: 16px; color: #00e436; }
html[data-style="pixel"] .toast.out { opacity: 0; transform: translateY(8px); transition: opacity .5s steps(4), transform .5s steps(4); }
@keyframes toast-in { from { transform: translateX(120%); } to { transform: none; } }
html[data-style="pixel"] .cover__q i { background: #ff004d; color: #fff; }
html[data-style="pixel"] .sn .qa, html[data-style="pixel"] .np .qa { border: 2px solid var(--fg); background: #000; }

/* ---------- E5 · lab: figures, hypotheses, instrument readouts ---------- */
html[data-style="lab"] .hero__q { font-family: var(--f-sans); font-weight: 600; }
html[data-style="lab"] .hero__q i, html[data-style="lab"] .more__q i, html[data-style="lab"] .nc__l i { background: var(--fg); color: #fff; font-family: var(--f-mono); }
html[data-style="lab"] .hero__toc a { font-family: var(--f-sans); }
html[data-style="lab"] .hero__toc b { font-family: var(--f-mono); color: var(--acid); }
html[data-style="lab"] .hero__toc b::before { content: "§"; }
html[data-style="lab"] .hero__hint::after { content: "  FIG. 0 — 问题网络的邻接矩阵：行＝提问的论题，列＝回答的论题。"; color: var(--fg-3); }
html[data-style="lab"] .card { 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%, #fff; }
html[data-style="lab"] .card .card__q { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--acid); }
html[data-style="lab"] .card .card__q::before { content: "RQ"; background: var(--acid); }
html[data-style="lab"] .qs { border-top: 2px solid var(--fg); counter-reset: hyp; }
html[data-style="lab"] .card .qs__h { color: var(--fg); font-weight: 600; }
html[data-style="lab"] .card .qs__h::after { content: " / HYPOTHESES → NEXT EXPERIMENTS"; color: var(--dim); }
html[data-style="lab"] .qa { border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; padding: 7px 2px; grid-template-columns: 2.6em minmax(0, 1fr); }
html[data-style="lab"] .qa::before { counter-increment: hyp; content: "H" counter(hyp); font-family: var(--f-mono); font-weight: 600; font-size: 12px; color: var(--acid); }
html[data-style="lab"] .qa__q { font-weight: 600; }
html[data-style="lab"] .qa__to { font-family: var(--f-mono); }
html[data-style="lab"] .qa__to::before { content: "TEST @ "; color: var(--faint); }
html[data-style="lab"] .qa:hover, html[data-style="lab"] .qa:focus-visible { background: #e3ebff; border-color: var(--acid); }
html[data-style="lab"] .qa:hover .qa__q, html[data-style="lab"] .qa:hover .qa__to, html[data-style="lab"] .qa:hover::before { color: var(--acid); }
html[data-style="lab"] .qa:hover .qa__to b { color: var(--acid); }
html[data-style="lab"] .scr__hud span:last-child { background: var(--fg); color: #fff; padding: 2px 8px; font-weight: 500; }
html[data-style="lab"] .cover__q i { background: var(--acid); color: #fff; }

/* ---------- E6 · fractal: questions branch like a tree ---------- */
html[data-style="fractal"] .hero__q { font-family: "Fraunces", var(--f-serif); font-style: italic; }
html[data-style="fractal"] .hero__q i, html[data-style="fractal"] .more__q i, html[data-style="fractal"] .nc__l i { background: linear-gradient(135deg, var(--acid), var(--alt2)); color: #06110f; }
html[data-style="fractal"] .card .card__q { font-family: "Fraunces", var(--f-serif); font-style: italic; font-weight: 700; color: var(--acid); }
html[data-style="fractal"] .card .card__q::before { content: "∞"; background: linear-gradient(135deg, var(--acid), var(--alt2)); color: #06110f; font-style: normal; }
html[data-style="fractal"] .qs { border-top: 0; padding-top: 6px; }
html[data-style="fractal"] .card .qs__h::before { content: "┬ "; color: var(--acid); }
html[data-style="fractal"] .qs ul { gap: 0; margin-left: 5px; border-left: 1px solid var(--acid); }
html[data-style="fractal"] .qs li { position: relative; padding: 5px 0 5px 22px; }
html[data-style="fractal"] .qs li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 1px solid var(--acid); }
html[data-style="fractal"] .qs li:last-child::after { content: ""; position: absolute; left: -1px; top: calc(50% + 1px); bottom: 0; border-left: 3px solid var(--card-bg); }
html[data-style="fractal"] .qa { border: 1px solid rgba(162, 107, 255, .45); background: rgba(162, 107, 255, .06); border-radius: 2px; }
html[data-style="fractal"] .qa::before { content: "◇"; color: var(--alt2); }
html[data-style="fractal"] .qa__q { font-family: var(--f-sans); }
html[data-style="fractal"] .qa:hover, html[data-style="fractal"] .qa:focus-visible { background: linear-gradient(135deg, var(--acid), var(--alt2)); border-color: transparent; }
html[data-style="fractal"] .qa:hover::before { content: "◆"; }
html[data-style="fractal"] .qs__deep b { font-family: "Fraunces", var(--f-serif); font-style: italic; }
html[data-style="fractal"] .cover__q { font-family: "Fraunces", var(--f-serif); font-style: italic; }
html[data-style="fractal"] .cover__q i { background: linear-gradient(135deg, var(--acid), var(--alt2)); color: #06110f; }

/* =====================================================================
   E7 · line · 工业流水线 — kraft paper, work orders, rubber stamps, a conveyor
   ===================================================================== */
html[data-style="line"] {
  --void: #d7c49b; --void-rgb: 215, 196, 155; --panel: #cbb68a; --paper: #f5efdf;
  --acid: #c8321e; --acid-rgb: 200, 50, 30; --acid-ink: #f5efdf;
  --fg: #1f1a14; --fg-rgb: 31, 26, 20; --fg-2: #2b241b; --fg-3: #4a3f31; --dim: #6b5c45; --faint: #a8946d;
  --line: rgba(31, 26, 20, .55); --line-soft: rgba(31, 26, 20, .16); --mag: #1f4e8c; --alt2: #1f4e8c;
  --hover-bg: #cbb68a; --card-bg: #f5efdf;
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Serif SC", "Songti SC", serif;
  --f-disp: "Big Shoulders Stencil Display", "Noto Sans SC", "Arial Narrow", sans-serif;
  --f-mono: "Courier Prime", "Courier New", "Noto Sans SC", monospace;
  --bg: #e9e0c9; --muted: #6b5c45; --card: #f5efdf; --link: #1f4e8c; --hl: rgba(200, 50, 30, .16); --on: #c8321e;
  --night: #1f1a14; --night-fg: #f5efdf; --night-muted: #b8a27a; --night-fg-rgb: 245, 239, 223;
  color-scheme: light;
}
html[data-style="line"] body::after { 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"); mix-blend-mode: multiply; }
html[data-style="line"] .nbar { background: rgba(215, 196, 155, .96); border-bottom: 3px solid var(--fg); color: var(--fg); }
html[data-style="line"] .nbar__logo { background: var(--acid); color: var(--acid-ink); }
html[data-style="line"] .nbar__brand span, html[data-style="line"] .nbar__nav a { color: var(--fg-3); }
html[data-style="line"] .nbar__nav a:hover { color: var(--acid); }
html[data-style="line"] .nbar__nav a[aria-current="page"] { background: var(--fg); color: var(--paper); box-shadow: none; }
html[data-style="line"] .nbar__node b, html[data-style="line"] .tag b { background: var(--fg); color: var(--paper); border-color: var(--fg); }
html[data-style="line"] .prog i { background: var(--acid); box-shadow: none; }
html[data-style="line"] .rail a { color: var(--faint); font-family: var(--f-mono); }
html[data-style="line"] .rail a.on, html[data-style="line"] .rail a:hover { color: var(--acid); }
html[data-style="line"] .hero { background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(31, 26, 20, .05) 22px 24px); }
html[data-style="line"] .hero h1 { font-family: var(--f-disp); font-weight: 900; letter-spacing: .02em; color: var(--fg); text-shadow: 4px 4px 0 rgba(200, 50, 30, .25); }
html[data-style="line"] .hero h1::before { content: "WORK ORDER · 工单"; display: block; font-family: var(--f-mono); font-size: 13px; letter-spacing: .3em; color: var(--acid); text-shadow: none; margin-bottom: 8px; }
html[data-style="line"] .hero__sub { font-family: var(--f-mono); font-weight: 700; color: var(--fg-2); }
html[data-style="line"] .hero__q { background: var(--paper); border: 2px solid var(--fg); padding: 10px 14px; box-shadow: 6px 6px 0 rgba(31, 26, 20, .2); font-family: var(--f-serif); }
html[data-style="line"] .hero__q i, html[data-style="line"] .more__q i, html[data-style="line"] .nc__l i { background: var(--acid); color: var(--paper); }
html[data-style="line"] .hero__meta { border-color: var(--fg); background: var(--paper); padding: 0 12px; }
html[data-style="line"] .hero__meta dt { font-family: var(--f-mono); color: var(--dim); }
html[data-style="line"] .hero__toc { gap: 0 14px; }
html[data-style="line"] .hero__toc a { font-family: var(--f-sans); border-top: 1px dashed var(--line); }
html[data-style="line"] .hero__toc a::before { content: "☐"; color: var(--acid); }
html[data-style="line"] .hero__toc a:hover::before { content: "☑"; }
html[data-style="line"] .hero__toc b { font-family: var(--f-mono); color: var(--fg-3); }
html[data-style="line"] .hero__hint { color: var(--fg-3); font-family: var(--f-mono); }
html[data-style="line"] .btn { font-family: var(--f-mono); font-weight: 700; border: 2px solid var(--fg); }
html[data-style="line"] .btn--acid { background: var(--acid); color: var(--paper); }
html[data-style="line"] .btn--acid:hover { background: var(--fg); border-color: var(--fg); color: var(--paper); }
html[data-style="line"] .btn--line { background: var(--paper); color: var(--fg); }
html[data-style="line"] .btn--line:hover { background: var(--fg); color: var(--paper); }
html[data-style="line"] .nl-lab { color: var(--fg); text-shadow: 0 0 5px var(--void), 0 0 10px var(--void); }
html[data-style="line"] .nl-lab b { color: var(--acid); }
html[data-style="line"] .scr { border-bottom: 2px dashed var(--line); }
html[data-style="line"] .scr__hud { color: var(--fg-3); font-family: var(--f-mono); }
html[data-style="line"] .scr__hud span:nth-child(2) { background: var(--fg); color: var(--paper); padding: 1px 8px; }
html[data-style="line"] .scr__cap, html[data-style="line"] .scr__cap a { color: var(--fg-3); }
html[data-style="line"] .scr__bg canvas.fx { opacity: 1; }
html[data-style="line"] .card { background: var(--paper); border: 2px solid var(--fg); box-shadow: 10px 10px 0 rgba(31, 26, 20, .22); padding-top: 0; }
html[data-style="line"] .card::before, html[data-style="line"] .card::after { display: none; }
html[data-style="line"] .card__idx { margin: 0 calc(-1 * clamp(22px, 2.6vw, 38px)) 18px; padding: 8px clamp(22px, 2.6vw, 38px); border-bottom: 2px solid var(--fg); background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(31, 26, 20, .05) 8px 9px), #efe4c8; font-family: var(--f-mono); color: var(--fg-3); }
html[data-style="line"] .card__idx::before { content: "NO."; font-size: 11px; margin-right: 4px; color: var(--dim); }
html[data-style="line"] .card__idx b { font-family: var(--f-disp); font-stretch: normal; font-size: 30px; color: var(--fg); }
html[data-style="line"] .card__idx em { font-family: var(--f-mono); border: 1px solid var(--fg); background: var(--paper); color: var(--fg); letter-spacing: .12em; }
html[data-style="line"] .card__idx em::before { content: "工序："; color: var(--dim); letter-spacing: 0; }
html[data-style="line"] .card h2 { font-family: var(--f-sans); font-weight: 900; color: var(--fg); }
html[data-style="line"] .card p { color: var(--fg); font-family: var(--f-serif); }
html[data-style="line"] .card .card__q { font-family: var(--f-mono); font-weight: 700; color: var(--acid); }
html[data-style="line"] .card .card__q::before { content: "问题单"; background: var(--acid); color: var(--paper); font-family: var(--f-sans); }
html[data-style="line"] .stamp { display: block; position: absolute; z-index: 2; right: 22px; top: 54px; padding: 6px 12px 4px; border: 3px solid var(--acid); border-radius: 4px; color: var(--acid); font-family: var(--f-sans); font-weight: 900; font-size: 22px; letter-spacing: .2em; line-height: 1.1; transform: rotate(-12deg) scale(1.6); opacity: 0; mix-blend-mode: multiply; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(200, 50, 30, .25); }
html[data-style="line"] .scr.is-in .stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .5, 1) .5s forwards; }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.9); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .88; } }
@media (prefers-reduced-motion: reduce) { html[data-style="line"] .stamp { opacity: .88; transform: rotate(-12deg); animation: none !important; } }
html[data-style="line"] .qs { border-top: 2px solid var(--fg); background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(31, 26, 20, .12) 35px 36px); }
html[data-style="line"] .card .qs__h { font-family: var(--f-mono); color: var(--fg); letter-spacing: .12em; }
html[data-style="line"] .card .qs__h::after { content: " · 待转交（勾选即转）"; color: var(--dim); letter-spacing: 0; }
html[data-style="line"] .qa { border: 0; border-bottom: 1px dashed var(--line); background: transparent; padding: 7px 2px; }
html[data-style="line"] .qa::before { content: "☐"; font-size: 16px; color: var(--fg); font-family: var(--f-sans); }
html[data-style="line"] .qa--back::before { content: "↩"; }
html[data-style="line"] .qa__q { font-family: var(--f-sans); font-weight: 700; }
html[data-style="line"] .qa__to { font-family: var(--f-mono); color: var(--fg-3); }
html[data-style="line"] .qa__to::before { content: "转交 → "; color: var(--dim); }
html[data-style="line"] .qa__to b { background: var(--fg); color: var(--paper); padding: 0 4px; }
html[data-style="line"] .qa:hover, html[data-style="line"] .qa:focus-visible { background: rgba(200, 50, 30, .08); }
html[data-style="line"] .qa:hover::before, html[data-style="line"] .qa:focus-visible::before { content: "☑"; color: var(--acid); }
html[data-style="line"] .qa:hover .qa__q, html[data-style="line"] .qa:focus-visible .qa__q { color: var(--acid); }
html[data-style="line"] .qa:hover .qa__to, html[data-style="line"] .qa:focus-visible .qa__to { color: var(--fg); }
html[data-style="line"] .qa:hover .qa__to b { color: var(--paper); }
html[data-style="line"] .qs__deep { font-family: var(--f-mono); color: var(--fg); border-top: 2px solid var(--fg); }
html[data-style="line"] .qs__deep i { color: var(--acid); }
html[data-style="line"] .card__in a { border-color: var(--fg); color: var(--fg); background: #efe4c8; }
html[data-style="line"] .card__in a b { color: var(--acid); }
html[data-style="line"] .deeper { background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(31, 26, 20, .05) 22px 24px); }
html[data-style="line"] .deeper h2 { font-family: var(--f-disp); font-weight: 900; }
html[data-style="line"] .deeper__lede { color: var(--fg-2); }
html[data-style="line"] .cta { background: var(--fg); color: var(--paper); border: 0; box-shadow: 8px 8px 0 var(--acid); }
html[data-style="line"] .cta:hover { background: var(--acid); }
html[data-style="line"] .toc2 { border-color: var(--line); }
html[data-style="line"] .toc2 a { background: var(--paper); border-color: var(--line); }
html[data-style="line"] .toc2 b { color: var(--acid); font-family: var(--f-mono); }
html[data-style="line"] .paths h3 i { background: var(--fg); color: var(--paper); }
html[data-style="line"] .pl { border-top-color: var(--fg); }
html[data-style="line"] .pl__n b, html[data-style="line"] .seq b { background: var(--fg); color: var(--paper); padding: 0 5px; }
html[data-style="line"] .seq { background: var(--line); border-color: var(--fg); }
html[data-style="line"] .seq a { background: var(--paper); }
html[data-style="line"] .seq a:hover { background: #efe4c8; color: var(--acid); }
html[data-style="line"] .nfoot { background: var(--panel); border-top: 3px solid var(--fg); }
html[data-style="line"] .nfoot__h { color: var(--acid); }
html[data-style="line"] .nfoot__cell > a b { color: var(--acid); }
html[data-style="line"] .pv { background: var(--paper); border: 2px solid var(--fg); color: var(--fg); }
html[data-style="line"] .pv__img { filter: sepia(.7) contrast(1.1); mix-blend-mode: multiply; }
html[data-style="line"] .pv__k b { background: var(--fg); color: var(--paper); }
html[data-style="line"] .pv__s { color: var(--acid); }
/* reading page */
html[data-style="line"] .rbar { background: var(--fg); color: var(--paper); border-bottom: 3px solid var(--acid); }
html[data-style="line"] .rbar__logo { background: var(--acid); color: var(--paper); }
html[data-style="line"] .cover { background: #cbb68a; color: var(--fg); border-bottom: 3px solid var(--fg); }
html[data-style="line"] .cover h1 { font-family: var(--f-disp); font-weight: 900; }
html[data-style="line"] .cover__sub { color: var(--fg-2); font-family: var(--f-mono); }
html[data-style="line"] .cover__by { color: var(--fg); }
html[data-style="line"] .cover__meta { color: var(--fg-3); background: transparent; }
html[data-style="line"] .cover__cap { color: var(--fg-3); background: rgba(245, 239, 223, .92); border: 1px solid var(--line-soft); }
html[data-style="line"] .cover__img { filter: sepia(.8) contrast(1.1); mix-blend-mode: multiply; border-left: 2px solid var(--fg); }
html[data-style="line"] .cover__q { color: var(--fg); background: var(--paper); border: 2px solid var(--fg); padding: 8px 12px; display: inline-flex; }
html[data-style="line"] .cover__q i { background: var(--acid); color: var(--paper); }
html[data-style="line"] .cover__layers a { color: var(--acid); }
html[data-style="line"] .cover__layers b { background: var(--fg); color: var(--paper); }
html[data-style="line"] .tag > * { border-color: var(--fg); }
html[data-style="line"] .sec h2 { font-family: var(--f-sans); border-bottom: 2px solid var(--fg); padding-bottom: .3em; }
html[data-style="line"] .sec__n { color: var(--acid); font-family: var(--f-mono); }
html[data-style="line"] .sn { background: var(--paper); border-left-color: var(--acid); }
html[data-style="line"] .sn .qa::before, html[data-style="line"] .np .qa::before { content: "☐"; color: var(--fg); }
html[data-style="line"] .sn .qa--back::before, html[data-style="line"] .np .qa--back::before { content: "↩"; }
html[data-style="line"] .theses li > span, html[data-style="line"] .ref__n { color: var(--acid); }
@media (min-width: 1400px) { html[data-style="line"] .sn { background: transparent; } }
html[data-style="line"] a.x { color: var(--fg); background-image: linear-gradient(rgba(200, 50, 30, .3), rgba(200, 50, 30, .3)); }

html[data-style="collage"] .hero__toc a { padding: 5px 9px; }
html[data-style="lab"] .hero .fx--under { opacity: .5; }
html[data-style="pixel"] .hero .fx--under, html[data-style="collage"] .hero .fx--under { opacity: .9; }

/* v0.8 deep reads: side-note badges keep their contrast in every theme */
html[data-style] .sn .qa__to b, html[data-style] .np .qa__to b,
html[data-style] .sn .qa:hover .qa__to b, html[data-style] .np .qa:hover .qa__to b,
html[data-style] .sn .qa:focus-visible .qa__to b, html[data-style] .np .qa:focus-visible .qa__to b { background: var(--acid); color: var(--acid-ink); padding: 0 4px; font-style: normal; }
html[data-style="collage"] .sn__to b, html[data-style="collage"] .sn .qa__to b, html[data-style="collage"] .np .qa__to b { font-family: var(--f-sans); font-weight: 700; font-size: 10px; letter-spacing: .02em; }
html[data-style="scroll"] .cover__meta, html[data-style="collage"] .cover__meta, html[data-style="lab"] .cover__meta { color: var(--muted); }
html[data-style="lab"] .cover__q { color: var(--fg); }
html[data-style="lab"] .sn ul, html[data-style="lab"] .np ul { counter-reset: hyp; }
html[data-style="lab"] .sn .qa--back::before, html[data-style="lab"] .np .qa--back::before { content: "Q" counter(hyp); color: var(--fg-3); }
html[data-style="pixel"] .sn .qa__to, html[data-style="pixel"] .np .qa__to { font-size: 13px; line-height: 1.35; }
@media (max-width: 760px) {
  html[data-style="line"] .stamp { position: relative; display: inline-block; right: auto; top: auto; margin: 0 0 10px; padding: 3px 8px 1px; border-width: 2px; font-size: 14px; }
}
/* 窄屏上网络图在标题上方：弹幕只占那一块 */
@media (max-width: 900px) {
  html[data-style="cyber"] .dm { left: 0; bottom: auto; height: calc(42vh - 24px); -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) {
  html[data-style="cyber"] .dm span { font-size: 12px; }
}