/* ═════════════════ 数学笔记本 note ═════════════════
   跟知径「手账笔记」同一套语言：方格纸 + 墨线描边 + 错位实影；和纸胶带、便利贴、荧光笔；
   楷体只做批注。背景页边有会自己画出来的数学草图（.bgfx 里的 .dd，core.js 注入）。 */
html[data-theme="note"] {
  --bg: #fbfaf5;
  --bg-img: linear-gradient(rgba(90,120,170,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(90,120,170,.11) 1px, transparent 1px);
  --paper: #ffffff; --paper2: #fdfbf4; --paper3: #f4f1e6;
  --line: #23283b; --bw: 2px; --rule: #ebe6d6; --rule2: #dcd5c0;
  --ink: #23283b; --ink2: #434a62; --muted: #6c7189; --faint: #a7abbb;
  --accent: #3d6af2; --accent2: #2a50cf; --accent-ink: #fff; --accent-grad: #3d6af2; --accent-soft: #e3ecff;
  --link: #2a50cf; --hl: #fff27a;
  --hl-y: #fff27a; --hl-p: #ffc2dc; --hl-g: #b8f0d2; --hl-b: #bfe1ff; --hl-o: #ffd5a8; --hl-v: #dcd0ff;
  --note-y: #fff6b8; --note-p: #ffe0ea; --note-g: #dcf7e8; --note-b: #e0efff; --note-o: #ffe9d4; --note-v: #ece6ff;
  --green: #1fa774; --red: #ef4f5f; --blue: #3d6af2; --violet: #8a5cf5; --gold: #e8a30c; --teal: #14a39a;
  --hp: #ef4f5f; --mana: #3d6af2;
  --ji: #16915f; --jin: #2f5fe6; --da: #e5414f; --bei: #737891; --tong: #b8730a;
  --ji-bg: #dcf7e8; --jin-bg: #e0efff; --da-bg: #ffe0ea; --bei-bg: #eef0f4; --tong-bg: #fff6b8;
  --r: 18px; --r-sm: 14px; --r-xs: 10px; --pill: 999px;
  --sh1: 3px 3px 0 #23283b; --sh2: 5px 5px 0 #23283b; --sh3: 8px 8px 0 #23283b;
  --f-ui: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --f-title: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; --title-w: 900;
  --f-hand: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  --nav-bg: rgba(251,250,245,.92); --nav-ink: #434a62; --nav-line: #23283b; --nav-on-bg: #fff27a; --nav-on-ink: #23283b; --nav-hover: #f4f0e2;
  --btn-bg: #fff; --btn-ink: #23283b; --btn-line: #23283b; --btn-r: 12px; --btn-bw: 2px;
  --btn-sh: 2px 2px 0 #23283b; --btn-sh-h: 4px 4px 0 #23283b;
  --btn-pri-bg: #3d6af2; --btn-pri-ink: #fff; --btn-pri-line: #23283b;
  --tab-on-bg: #fff27a; --tab-on-ink: #23283b; --seg-on-bg: #fff27a; --seg-on-ink: #23283b; --focus: rgba(61,106,242,.22);
  --card-bg: #fff; --card-line: #23283b; --card-bw: 2px; --card-r: .75em;
  --card-sh: .2em .2em 0 #23283b; --card-sh-h: .38em .38em 0 #23283b;
  --card-name-f: "Noto Sans SC", "Microsoft YaHei UI", sans-serif; --card-name-w: 900; --card-art-r: .45em;
  --back-bg: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px) 0 0 / 9px 9px #3d6af2;
  --back-line: rgba(255,255,255,.75); --back-ink: #fff;
  --cover-bg: #fff;
}
html[data-theme="note"] body { background-size: 24px 24px; font-size: 16px; }
html[data-theme="note"] ::selection { background: #fff27a; }
html[data-theme="note"] ::-webkit-scrollbar-thumb { background: #d6cfb8; }
html[data-theme="note"] h1, html[data-theme="note"] h2, html[data-theme="note"] h3 { letter-spacing: .5px; }

/* ───── 通用小件：和纸胶带 / 荧光笔 / 便利贴 ───── */
html[data-theme="note"] .tape { display: block; position: absolute; z-index: 6; top: -13px; left: 44px; width: 104px; height: 26px; pointer-events: none;
  background: rgba(255,194,220,.88); transform: rotate(-4deg);
  -webkit-mask: linear-gradient(90deg, transparent 0 4px, #000 4px calc(100% - 4px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
  mask: linear-gradient(90deg, transparent 0 4px, #000 4px calc(100% - 4px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); }
html[data-theme="note"] .tape.tr, html[data-theme="note"] .tape.tb { left: auto; right: 56px; width: 86px; background: rgba(184,240,210,.95); transform: rotate(5deg); }
html[data-theme="note"] .tape.ty { background: rgba(255,242,122,.92); }
html[data-theme="note"] .tape.tbl { background: rgba(191,225,255,.95); }
html[data-theme="note"] .deco { display: block; }
html[data-theme="note"] .ribbon { position: relative; background: #fff27a; color: #23283b; border-radius: 2px; padding: 3px 14px; transform: rotate(-1.5deg); font-family: var(--f-ui); font-weight: 900; letter-spacing: 1px;
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, rgba(0,0,0,.85) 3px 5px); }
html[data-theme="note"] .ribbon.red { background: #ffc2dc; color: #23283b; }
html[data-theme="note"] .ribbon.green { background: #b8f0d2; color: #23283b; }
html[data-theme="note"] .ribbon.gold { background: #ffd5a8; color: #23283b; }
html[data-theme="note"] .ribbon.violet { background: #dcd0ff; color: #23283b; }
/* 荧光笔会“划”出来：.hlx 进场画一次；.vol.seen 的标题滚到才画 */
html[data-theme="note"] .hlx { background: linear-gradient(100deg, transparent 2%, var(--h, #fff27a) 4%, var(--h, #fff27a) 96%, transparent 98%) no-repeat 0 88% / 0 52%;
  animation: nb-hl .9s .45s var(--ease) forwards; padding: 0 5px; }
@keyframes nb-hl { to { background-size: 100% 52%; } }
@keyframes nb-drop { from { opacity: 0; transform: translateY(-22px) rotate(-2deg); } }
@keyframes nb-swing { 0%, 100% { transform: rotate(var(--rot, 2deg)); } 50% { transform: rotate(calc(var(--rot, 2deg) - 1.6deg)) translateY(-2px); } }
@keyframes nb-bob { 50% { margin-top: -9px; } }
@keyframes nb-wiggle { 0%, 100% { transform: rotate(-5deg); } 30% { transform: rotate(4deg) scale(1.08); } 60% { transform: rotate(-8deg); } }
@keyframes nb-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 滚到视口才掉下来的块（TP.reveal 给 .rv 加 .seen） */
html[data-theme="note"] .rv:not(.seen) { opacity: 0; }
html[data-theme="note"] .rv.seen { animation: nb-drop .6s var(--spring) backwards; animation-delay: calc(var(--k, 0) * 60ms); }

/* ───── 顶栏 ───── */
html[data-theme="note"] .topnav { border-bottom: none; border-right: 2px solid #23283b; box-shadow: 3px 0 0 rgba(35,40,59,.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme="note"] .brand-mark i { border-width: 2px; border-color: #23283b; }
html[data-theme="note"] .brand-mark i:nth-child(1) { background: #ffc2dc; }
html[data-theme="note"] .brand-mark i:nth-child(2) { background: #fff27a; }
html[data-theme="note"] .brand-mark b { color: #23283b; }
html[data-theme="note"] .brand:hover .brand-mark { animation: nb-wiggle .6s; }
html[data-theme="note"] .brand-text b { font-weight: 900; letter-spacing: 2px; }
html[data-theme="note"] .brand-text i { font-family: var(--f-hand); font-size: 13px; letter-spacing: 1px; }
html[data-theme="note"] .navlinks a { font-weight: 700; font-size: 16px; border: 2px solid transparent; transition: background .15s, transform .15s, box-shadow .15s; }
html[data-theme="note"] .navlinks a:hover { background: #f4f0e2; }
html[data-theme="note"] .navlinks a.on { border-color: #23283b; box-shadow: 2px 2px 0 #23283b; }
html[data-theme="note"] .themepick { background: #fff; border: 2px solid #23283b; }
html[data-theme="note"] .themepick button.on { background: #fff27a; box-shadow: none; font-weight: 700; }
html[data-theme="note"] .me .stat { border: 2px solid #23283b; background: #fff; font-weight: 700; }
html[data-theme="note"] .me .avatar, html[data-theme="note"] .profile .av { background: #fff27a; color: #23283b; border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; font-family: var(--f-hand); transform: rotate(-4deg); }

/* ───── 按钮：墨线 + 错位实影，按下去会“压扁” ───── */
html[data-theme="note"] .btn { font-weight: 700; }
html[data-theme="note"] .btn:hover { transform: translate(-1px, -1px); }
html[data-theme="note"] .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #23283b; }
html[data-theme="note"] .btn.gold, html[data-theme="note"] .btn.primary { box-shadow: 3px 3px 0 #23283b; }
html[data-theme="note"] .btn.gold:hover, html[data-theme="note"] .btn.primary:hover { box-shadow: 5px 5px 0 #23283b; filter: none; background: #3260ea; }
html[data-theme="note"] .btn.mana, html[data-theme="note"] .btn.blue, html[data-theme="note"] .btn.red, html[data-theme="note"] .btn.danger, html[data-theme="note"] .btn.green { border-color: #23283b; }
html[data-theme="note"] .btn.ghost { border-color: transparent; box-shadow: none; }
html[data-theme="note"] .btn.ghost:hover { background: #fff27a; transform: none; }
html[data-theme="note"] .btn.sm { box-shadow: 2px 2px 0 #23283b; }
html[data-theme="note"] .btn.lg { box-shadow: 4px 4px 0 #23283b; }
html[data-theme="note"] .btn.lg:hover { box-shadow: 6px 6px 0 #23283b; }
html[data-theme="note"] .chip { border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent); font-weight: 700; }
html[data-theme="note"] .pill { border: 1.5px solid color-mix(in srgb, var(--tc, #23283b) 40%, transparent); }
html[data-theme="note"] .ai-tag { background: #ece6ff; color: #6a3fd6; border: 1.5px solid #cbb8ff; }
html[data-theme="note"] .field, html[data-theme="note"] .lined-input { border: 2px solid #c9c1a8; border-radius: 12px; }
html[data-theme="note"] .field:hover, html[data-theme="note"] .lined-input:hover { border-color: #23283b; }
html[data-theme="note"] .field:focus, html[data-theme="note"] .lined-input:focus { border-color: #23283b; box-shadow: 3px 3px 0 #3d6af2; }
html[data-theme="note"] .lined-input { font-family: var(--f-hand); font-size: 17px; }
html[data-theme="note"] .tabs, html[data-theme="note"] .seg { background: #fff; border: 2px solid #23283b; }
html[data-theme="note"] .tabs button.on, html[data-theme="note"] .seg button.on { box-shadow: none; font-weight: 800; }
html[data-theme="note"] .meter { height: 12px; border: 2px solid #23283b; background: #fff; border-radius: 7px; }
html[data-theme="note"] .meter i { border-radius: 0; background: #3d6af2; }
html[data-theme="note"] .stamp { color: #ef4f5f; }

/* ───── 面板：白纸 + 墨线 + 错位影 ───── */
html[data-theme="note"] .sheet, html[data-theme="note"] .panel { border-radius: 16px; }
html[data-theme="note"] .sheet .sheet-title { border-bottom: 2px dashed #dcd5c0; }
html[data-theme="note"] .modal { border-radius: 18px; }
html[data-theme="note"] .modal .x { border: 2px solid #23283b; }
html[data-theme="note"] .usermenu { box-shadow: 5px 5px 0 #23283b; }
html[data-theme="note"] .usermenu button:hover, html[data-theme="note"] .usermenu a:hover { background: #fff27a; }
html[data-theme="note"] .toast { background: #fff; color: #23283b; border: 2px solid #23283b; box-shadow: 4px 4px 0 #23283b; border-radius: 12px; font-weight: 700; }
html[data-theme="note"] .score-table th, html[data-theme="note"] .ptable th { background: #fff6b8; color: #23283b; border-bottom: 2px solid #23283b; }
html[data-theme="note"] .score-table td, html[data-theme="note"] .ptable td { border-bottom: 1.5px dashed #ebe6d6; }
html[data-theme="note"] .ptable tbody tr:hover td { background: #fffbe3; }
html[data-theme="note"] .qcard, html[data-theme="note"] .kd, html[data-theme="note"] .final { border-radius: 14px; }
html[data-theme="note"] .qcard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #23283b; }
html[data-theme="note"] .qcard .qside { border-left: 2px dashed #dcd5c0; }
html[data-theme="note"] .qcard .shot, html[data-theme="note"] .prose figure.orig, html[data-theme="note"] .orig-frame { border-color: #dcd5c0; }
html[data-theme="note"] .rules .r { border-radius: 14px; box-shadow: 3px 3px 0 #23283b; }
html[data-theme="note"] .rules .r:nth-child(4n+1) { background: #fff6b8; } html[data-theme="note"] .rules .r:nth-child(4n+2) { background: #e0efff; }
html[data-theme="note"] .rules .r:nth-child(4n+3) { background: #ffe0ea; } html[data-theme="note"] .rules .r:nth-child(4n+4) { background: #dcf7e8; }
html[data-theme="note"] .reveal-blk .veil { border: 2px dashed #dcd5c0; }
html[data-theme="note"] .blk h6 { border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); }
html[data-theme="note"] .prose mark, html[data-theme="note"] .prose .hl { background: #fff27a; }
html[data-theme="note"] .redfb { border: 1.5px dashed currentColor; font-size: 16px; }
html[data-theme="note"] .mentor { border-left-width: 6px; border-left-color: #ef4f5f; }
html[data-theme="note"] .exbook { overflow: visible; }
html[data-theme="note"] .shell .sh-head .tier { border: 1.5px solid #23283b; }
html[data-theme="note"] .shell .row > .lab { background: #fdfbf4; }
html[data-theme="note"] .learn-steps { background: #fff; border: 2px solid #23283b; }
html[data-theme="note"] .learn-steps .ls.on { background: #fff27a; }
html[data-theme="note"] .learn-steps .ls.on i { background: #23283b; color: #fff; }
html[data-theme="note"] .ex-tabs button, html[data-theme="note"] .sib a { border: 2px solid #23283b; font-weight: 700; }
html[data-theme="note"] .ex-tabs button.on, html[data-theme="note"] .sib a.on { border-color: #23283b; box-shadow: 2px 2px 0 #23283b; }
html[data-theme="note"] .step-row .n, html[data-theme="note"] .drow .no { background: #fff27a; border: 1.5px solid #23283b; }
html[data-theme="note"] .kd-tip { background: #fff6b8; font-family: var(--f-hand); font-size: 16px; }
html[data-theme="note"] .deckbar { box-shadow: 4px 4px 0 #23283b; }
html[data-theme="note"] .pick.on::after { border: 2px solid #23283b; }

/* ═════════ 卡牌：白卡 + 墨线 + 方格卡图 ═════════ */
html[data-theme="note"] .card:hover { box-shadow: var(--card-sh-h); }
html[data-theme="note"] .card .pc-art { border: .1em solid #23283b;
  background: linear-gradient(rgba(35,40,59,.08) 1px, transparent 1px) 0 0 / .78em .78em, linear-gradient(90deg, rgba(35,40,59,.08) 1px, transparent 1px) 0 0 / .78em .78em, var(--tbg); }
html[data-theme="note"] .card .pc-name { font-size: 1.05em; }
html[data-theme="note"] .card .pc-band { font-weight: 700; }
html[data-theme="note"] .card .pc-role { border-top: .1em dashed #dcd5c0; }
html[data-theme="note"] .card .cost { border: .12em solid #23283b; box-shadow: .1em .1em 0 #23283b; }
html[data-theme="note"] .card .badge { background: #fff27a; color: #23283b; border: .1em solid #23283b; box-shadow: .08em .08em 0 #23283b; }
html[data-theme="note"] .card.t-da { box-shadow: inset 0 0 0 .14em #fff, inset 0 0 0 .27em var(--da), var(--card-sh); }
html[data-theme="note"] .card.t-da:hover { box-shadow: inset 0 0 0 .14em #fff, inset 0 0 0 .27em var(--da), var(--card-sh-h); }
html[data-theme="note"] .card.t-da::after { content: ''; position: absolute; z-index: 6; top: -.55em; left: 50%; width: 3.6em; height: 1.05em; margin-left: -1.8em; transform: rotate(-4deg); pointer-events: none;
  background: rgba(255,194,220,.92);
  -webkit-mask: linear-gradient(90deg, transparent 0 .2em, #000 .2em calc(100% - .2em), transparent 0), repeating-linear-gradient(0deg, #000 0 .16em, transparent .16em .26em);
  mask: linear-gradient(90deg, transparent 0 .2em, #000 .2em calc(100% - .2em), transparent 0), repeating-linear-gradient(0deg, #000 0 .16em, transparent .16em .26em); }
html[data-theme="note"] .card.locked::before { background: #23283b; }
html[data-theme="note"] .card-back { border: 2px solid #23283b; box-shadow: 3px 3px 0 #23283b; }
html[data-theme="note"] .card-back::after { font-family: "KaTeX_Main", serif; }

/* ═════════ 首页封面：一页活页本 ═════════ */
html[data-theme="note"] .cover { overflow: visible; border-radius: 20px; box-shadow: 6px 6px 0 #23283b; padding: 50px 56px 46px 84px; margin-top: 16px; }
html[data-theme="note"] .cover.rise { animation-name: nb-drop; animation-duration: .75s; animation-timing-function: var(--spring); }
/* 左边：打孔 + 红色页边线 */
html[data-theme="note"] .cover::before { content: ''; position: absolute; left: 54px; top: 0; bottom: 0; width: 2px; background: rgba(239,79,95,.45); pointer-events: none; }
html[data-theme="note"] .cover::after { content: ''; position: absolute; left: 16px; top: 30px; bottom: 30px; width: 20px; pointer-events: none;
  background: radial-gradient(circle at 10px 10px, #fbfaf5 5px, #23283b 5.5px, #23283b 6.6px, transparent 7.2px) 0 0 / 20px 42px repeat-y; }
html[data-theme="note"] .cover > .tape.ta { left: 110px; top: -14px; }
html[data-theme="note"] .cover > .tape.tb { right: 90px; top: -12px; }
html[data-theme="note"] .cv-mark { background: #fff27a; color: #23283b; border: 2px solid #23283b; border-radius: 12px; transform: rotate(-5deg); box-shadow: 3px 3px 0 #23283b;
  font: 700 31px var(--f-hand); transition: transform .3s var(--spring); }
html[data-theme="note"] .cv-mark:hover { animation: nb-wiggle .6s; }
html[data-theme="note"] .cv-title { font-size: 60px; font-weight: 900; letter-spacing: 5px; }
html[data-theme="note"] .cv-title em { font-style: normal; }
html[data-theme="note"] .cv-sub { font: 19.5px var(--f-hand); color: #434a62; letter-spacing: 2px; }
html[data-theme="note"] .cv-pitch { font-size: 17px; }
html[data-theme="note"] .cv-pitch b { --h: #ffc2dc; }
html[data-theme="note"] .cv-pitch .hlx { animation-delay: 1.1s; }
html[data-theme="note"] .cv-menu a, html[data-theme="note"] .cv-menu button { font-weight: 700; font-size: 17px; box-shadow: 2px 2px 0 #23283b; border-radius: 12px; }
html[data-theme="note"] .cv-menu a:hover, html[data-theme="note"] .cv-menu button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #23283b; background: #fffbe3; }
html[data-theme="note"] .cv-menu a:active, html[data-theme="note"] .cv-menu button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #23283b; }
html[data-theme="note"] .cv-menu em { font-family: var(--f-hand); font-size: 15px; color: #6c7189; }
html[data-theme="note"] .cv-menu .go { font-size: 19.5px; font-weight: 900; box-shadow: 4px 4px 0 #23283b; letter-spacing: 1px; }
html[data-theme="note"] .cv-menu .go:hover { background: #3260ea; box-shadow: 6px 6px 0 #23283b; }
html[data-theme="note"] .cv-menu .go em { color: #fff; opacity: .9; font-size: 16px; }
html[data-theme="note"] .cv-fan .card { animation: fanin .8s var(--ease) both, nb-bob 6.5s ease-in-out 1s infinite; }
html[data-theme="note"] .cv-fan .card:nth-child(2) { animation-delay: .25s, 1.8s; }
html[data-theme="note"] .cv-fan .card:nth-child(3) { animation-delay: .35s, 2.6s; }
/* 便利贴：我的牌库 */
html[data-theme="note"] .cv-sticky { position: absolute; right: 4px; top: -6px; z-index: 3; width: 176px; padding: 24px 18px 16px; border-radius: 4px 4px 4px 22px;
  background: #fff6b8; box-shadow: 0 16px 22px -16px rgba(80,60,0,.55); --rot: 3deg; transform: rotate(3deg); animation: nb-drop .7s .3s var(--spring) backwards, nb-swing 5s ease-in-out 1.2s infinite; transition: transform .3s; }
html[data-theme="note"] .cv-sticky:hover { animation: none; transform: rotate(0) scale(1.04); }
html[data-theme="note"] .cv-sticky .pin { position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9aa8, #ef4f5f); box-shadow: 0 3px 4px rgba(0,0,0,.28); }
html[data-theme="note"] .cv-sticky .l { font: 17px var(--f-hand); color: #434a62; }
html[data-theme="note"] .cv-sticky .big { margin: 2px 0 2px; font: 900 50px/1 var(--f-ui); color: #ef4f5f; font-variant-numeric: tabular-nums; }
html[data-theme="note"] .cv-sticky .big small { font: 700 16px var(--f-ui); color: #23283b; margin-left: 4px; }
html[data-theme="note"] .cv-sticky .s { font-size: 13.5px; color: #434a62; line-height: 1.5; }
/* 红笔批注 + 箭头 */
html[data-theme="note"] .cv-scribble { position: absolute; left: -6px; top: -22px; z-index: 4; font: 18px/1.35 var(--f-hand); color: #ef4f5f; transform: rotate(-6deg); pointer-events: none; }
html[data-theme="note"] .cv-scribble svg { position: absolute; left: 112px; top: 6px; width: 92px; height: 62px; fill: none; stroke: #ef4f5f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
html[data-theme="note"] .cv-scribble path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: nb-ink .7s 1.1s ease-out forwards; }
html[data-theme="note"] .cv-scribble path + path { animation-delay: 1.75s; animation-duration: .3s; }
html[data-theme="note"] .cv-scribble span { opacity: 0; animation: nb-show .5s .8s forwards; }
@keyframes nb-show { to { opacity: 1; } }

/* ═════════ 首页：分册标题 / 章节牌盒 ═════════ */
html[data-theme="note"] .volnav { width: max-content; max-width: 100%; gap: 2px; padding: 4px; background: #fff; border: 2px solid #23283b; border-radius: 14px; box-shadow: 3px 3px 0 #23283b; }
html[data-theme="note"] .volnav a { border: 0; border-radius: 10px; font-weight: 700; background: transparent; padding: 5px 13px; }
html[data-theme="note"] .volnav a:hover, html[data-theme="note"] .volnav a.on { background: #fff27a; color: #23283b; }
html[data-theme="note"] .vol { --h: #fff27a; }
html[data-theme="note"] .vol:nth-child(6n+2) { --h: #ffc2dc; } html[data-theme="note"] .vol:nth-child(6n+3) { --h: #b8f0d2; }
html[data-theme="note"] .vol:nth-child(6n+4) { --h: #bfe1ff; } html[data-theme="note"] .vol:nth-child(6n+5) { --h: #ffd5a8; } html[data-theme="note"] .vol:nth-child(6n) { --h: #dcd0ff; }
html[data-theme="note"] .vol-head { border-bottom: 2px dashed #dcd5c0; }
html[data-theme="note"] .vol-head h2 { font-size: 28px; padding: 0 6px; margin-left: -6px;
  background: linear-gradient(100deg, transparent 2%, var(--h) 4%, var(--h) 96%, transparent 98%) no-repeat 0 88% / 100% 50%; transition: background-size .9s var(--ease) .15s; }
html[data-theme="note"] .vol.rvh:not(.seen) .vol-head h2 { background-size: 0 50%; transition: none; }
html[data-theme="note"] .vol-head small { font: 16px var(--f-hand); color: #6c7189; }
html[data-theme="note"] .chgrid { gap: 20px 18px; padding: 6px 4px 0 0; }
html[data-theme="note"] .chbox { border-radius: 16px; padding-top: 20px; transition: transform .25s var(--spring), box-shadow .25s; }
html[data-theme="note"] .chbox::before { content: ''; position: absolute; top: -2px; left: 18px; width: 62px; height: 10px; background: var(--c); border: 2px solid #23283b; border-top: 0; border-radius: 0 0 7px 7px; }
html[data-theme="note"] .chbox:hover { transform: translate(-3px, -4px); box-shadow: 6px 7px 0 #23283b; }
html[data-theme="note"] .cb-glyph { background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 82%, #23283b); border: 2px solid #23283b; border-radius: 12px;
  box-shadow: 2px 2px 0 #23283b; transform: rotate(-6deg); transition: transform .35s var(--spring); }
html[data-theme="note"] .chbox:hover .cb-glyph { transform: rotate(5deg) scale(1.08); }
html[data-theme="note"] .cb-no { font: 16px var(--f-hand); color: #434a62; }
html[data-theme="note"] .chbox h3 { font-size: 20px; font-weight: 900; }
html[data-theme="note"] .cb-motto { font: 15.5px/1.5 var(--f-hand); color: #434a62; }
html[data-theme="note"] .cb-stars { font-size: 16px; color: #dcd5c0; }
html[data-theme="note"] .cb-stars .on { color: #e8a30c; text-shadow: 1px 1px 0 #23283b; }
html[data-theme="note"] .cb-prog .meter { height: 11px; }
html[data-theme="note"] .cb-prog .meter i { background: var(--c); }
html[data-theme="note"] .cb-kv { color: #6c7189; }
html[data-theme="note"] .cb-kv b { font-weight: 900; color: #23283b; }
html[data-theme="note"] .cb-flag { top: 14px; right: 12px; border: 1.5px solid #23283b; background: #fff; color: #23283b; font-weight: 700; border-radius: 6px; transform: rotate(4deg); }
html[data-theme="note"] .cb-flag.book { background: #fff27a; }
html[data-theme="note"] .chbox.gen .cb-glyph { font-family: var(--f-hand); font-size: 24.5px; }

/* ═════════ 首页侧栏 ═════════ */
html[data-theme="note"] .side h3 { display: inline-block; font-size: 20.5px; padding: 0 4px; margin-left: -4px; background: linear-gradient(transparent 58%, #bfe1ff 58%, #bfe1ff 90%, transparent 90%); }
html[data-theme="note"] .side .sheet:nth-child(3) h3 { background: linear-gradient(transparent 58%, #b8f0d2 58%, #b8f0d2 90%, transparent 90%); }
html[data-theme="note"] .side .profile::before, html[data-theme="note"] .side .sheet:nth-child(3)::before { content: ''; position: absolute; z-index: 3; top: -12px; right: 38px; width: 92px; height: 24px; transform: rotate(5deg); pointer-events: none;
  background: rgba(255,242,122,.92);
  -webkit-mask: linear-gradient(90deg, transparent 0 4px, #000 4px calc(100% - 4px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
  mask: linear-gradient(90deg, transparent 0 4px, #000 4px calc(100% - 4px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); }
html[data-theme="note"] .side .sheet:nth-child(3)::before { left: 30px; right: auto; background: rgba(255,194,220,.9); transform: rotate(-4deg); }
html[data-theme="note"] .profile .nm { font-weight: 900; }
html[data-theme="note"] .profile .sub { font: 14.5px var(--f-hand); color: #6c7189; }
html[data-theme="note"] .profile .lv { background: #fff27a; color: #23283b; border: 1.5px solid #23283b; transform: rotate(5deg); box-shadow: 2px 2px 0 #23283b; }
html[data-theme="note"] .profile .kv { gap: 14px 12px; margin-top: 6px; }
html[data-theme="note"] .profile .kv div { --nt: #fff6b8; --rot: -1.5deg; background: var(--nt); border-radius: 3px 3px 3px 16px; padding: 10px 12px 8px; transform: rotate(var(--rot));
  box-shadow: 0 12px 16px -12px rgba(80,60,0,.55); transition: transform .3s var(--spring), box-shadow .3s; }
html[data-theme="note"] .profile .kv div:nth-child(2) { --nt: #ffe0ea; --rot: 1.6deg; }
html[data-theme="note"] .profile .kv div:nth-child(3) { --nt: #e0efff; --rot: 1deg; }
html[data-theme="note"] .profile .kv div:nth-child(4) { --nt: #dcf7e8; --rot: -1.2deg; }
html[data-theme="note"] .profile .kv div:hover { transform: rotate(0) scale(1.06); box-shadow: 0 18px 20px -12px rgba(80,60,0,.55); }
html[data-theme="note"] .profile .kv b { font-size: 28px; font-weight: 900; }
html[data-theme="note"] .profile .kv span { font: 15px var(--f-hand); color: #434a62; }
html[data-theme="note"] .guest-cta { background: #fffbe3; border: 2px dashed #dcd5c0; font: 16px/1.6 var(--f-hand); color: #434a62; }
html[data-theme="note"] .recent { gap: 0; }
html[data-theme="note"] .recent a { background: none; border-radius: 0; border-bottom: 2px dotted #ebe6d6; padding: 9px 4px; }
html[data-theme="note"] .recent a:last-child { border-bottom: 0; }
html[data-theme="note"] .recent a:hover { background: #fffbe3; }
html[data-theme="note"] .recent a .tt { font-family: var(--f-hand); font-size: 14.5px; }
html[data-theme="note"] .recent a .r { border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); }
html[data-theme="note"] .howto div { font-size: 14.5px; }
html[data-theme="note"] .howto div::before { width: 25px; height: 25px; background: #fff27a; border: 2px solid #23283b; font: 700 15px var(--f-hand); transform: rotate(-6deg); }
html[data-theme="note"] .howto div:nth-child(2)::before { background: #ffc2dc; } html[data-theme="note"] .howto div:nth-child(3)::before { background: #b8f0d2; }
html[data-theme="note"] .howto div:nth-child(4)::before { background: #bfe1ff; } html[data-theme="note"] .howto div:nth-child(5)::before { background: #ffd5a8; }
html[data-theme="note"] .pilelink:hover { background: #fffbe3; }

/* ═════════ 章节页 ═════════ */
html[data-theme="note"] .box-head { overflow: visible; box-shadow: 5px 5px 0 #23283b; }
html[data-theme="note"] .box-head::before { left: 26px; top: -2px; bottom: auto; width: 80px; height: 11px; border: 2px solid #23283b; border-top: 0; border-radius: 0 0 8px 8px; }
html[data-theme="note"] .box-lid { background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 82%, #23283b); border: 2px solid #23283b; border-radius: 20px; transform: rotate(-5deg); box-shadow: 4px 4px 0 #23283b; }
html[data-theme="note"] .box-head .motto { font: 17px var(--f-hand); }
html[data-theme="note"] .box-stats div { background: #fff6b8; border-radius: 3px 3px 3px 14px; box-shadow: 0 10px 14px -10px rgba(80,60,0,.5); transform: rotate(-1.5deg); }
html[data-theme="note"] .box-stats div:nth-child(2) { background: #ffe0ea; transform: rotate(1.4deg); }
html[data-theme="note"] .box-stats div:nth-child(3) { background: #e0efff; transform: rotate(-.8deg); }
html[data-theme="note"] .box-stats div:nth-child(4) { background: #dcf7e8; transform: rotate(1deg); }
html[data-theme="note"] .box-stats b { font-weight: 900; }
html[data-theme="note"] .box-stats span { font: 14px var(--f-hand); color: #434a62; }
html[data-theme="note"] .unit { border-bottom: 2px dashed #dcd5c0; }
html[data-theme="note"] .tier-sec > h3 { border-bottom: 2px solid #23283b; }

/* ═════════ 登录 ═════════ */
html[data-theme="note"] .logo-big h1 { font-weight: 900; }
html[data-theme="note"] .logo-big h1 em { font-style: normal; color: inherit; background: linear-gradient(100deg, transparent 2%, #fff27a 4%, #fff27a 96%, transparent 98%) no-repeat 0 88% / 0 52%; animation: nb-hl .9s .45s var(--ease) forwards; padding: 0 5px; }
html[data-theme="note"] .auth-hero .tagline { font: 19.5px/1.9 var(--f-hand); }
html[data-theme="note"] .auth-hero .feats span { border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; font-weight: 700; }
html[data-theme="note"] .auth-hero .feats i { background: #fff27a; color: #23283b; border: 1.5px solid #23283b; }
html[data-theme="note"] .auth-card { border-radius: 20px; }
html[data-theme="note"] .grade-pick button { border: 2px solid #23283b; font-weight: 700; }
html[data-theme="note"] .grade-pick button.on { box-shadow: 2px 2px 0 #23283b; }

/* ═════════ 背景页边草图：会自己画出来、画完淡掉、再重画 ═════════ */
.bgfx .dd { display: none; }
html[data-theme="note"] .bgfx { overflow: hidden; contain: strict; }
html[data-theme="note"] .bgfx .dd { display: block; position: absolute; color: rgba(61,106,242,.5); animation: dd-float var(--F, 13s) ease-in-out infinite alternate; }
html[data-theme="note"] .bgfx .dd.red { color: rgba(239,79,95,.48); }
html[data-theme="note"] .bgfx .dd.ink { color: rgba(35,40,59,.28); }
.bgfx .dd svg { display: block; width: 100%; height: auto; overflow: visible; }
.bgfx .dd .s { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: dd-draw var(--T, 26s) cubic-bezier(.45,.05,.3,1) infinite; animation-delay: var(--d, 0s); }
.bgfx .dd .t { fill: currentColor; font-family: "LXGW WenKai", "KaiTi", serif; opacity: 0; animation: dd-text var(--T, 26s) ease infinite; animation-delay: var(--d, 0s); }
.bgfx .dd .dot { fill: currentColor; stroke: none; opacity: 0; animation: dd-text var(--T, 26s) ease infinite; animation-delay: var(--d, 0s); }
.bgfx .dd .s.h { stroke-opacity: .45; stroke-width: 1.8; }
@keyframes dd-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 13% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dd-text { 0%, 6% { opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes dd-float { from { transform: translate(0, 0) rotate(var(--r0, -2deg)); } to { transform: translate(var(--fx, 6px), var(--fy, -14px)) rotate(var(--r1, 2deg)); } }
@media (max-width: 760px) {
  html[data-theme="note"] .bgfx .dd { scale: .72; transform-origin: 0 0; }
  html[data-theme="note"] .bgfx .dd.wide { display: none; }
}

/* ═════════ 窄屏 ═════════ */
@media (max-width: 1180px) {
  html[data-theme="note"] .cover { padding: 40px 34px 38px 70px; }
}
@media (max-width: 760px) {
  html[data-theme="note"] .cover { padding: 30px 18px 30px 46px; }
  html[data-theme="note"] .cover::before { left: 36px; }
  html[data-theme="note"] .cover::after { left: 6px; width: 20px; background-size: 20px 38px; }
  html[data-theme="note"] .cover > .tape.ta { left: 64px; }
  html[data-theme="note"] .cover > .tape.tb { right: 40px; }
  html[data-theme="note"] .cv-title { font-size: 40px; letter-spacing: 2px; }
  html[data-theme="note"] .cv-sticky { width: 118px; padding: 18px 10px 10px; right: -6px; top: -8px; }
  html[data-theme="note"] .cv-sticky .big { font-size: 34px; }
  html[data-theme="note"] .cv-sticky .big small { font-size: 13px; }
  html[data-theme="note"] .cv-sticky .s { display: none; }
  html[data-theme="note"] .cv-scribble { display: none; }
  html[data-theme="note"] .profile .kv b { font-size: 23.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="note"] .bgfx .dd .s { stroke-dashoffset: 0; }
  html[data-theme="note"] .bgfx .dd .t, html[data-theme="note"] .bgfx .dd .dot { opacity: 1; }
}
/* 对战桌面信息很密，背景草图不出来抢戏 */
html[data-theme="note"] .page-battle .bgfx .dd { display: none; }