:root {
  --bg: #05060a; --bg2: #0a0c12; --panel: #0e1118; --line: #1b2030; --line2: #2a3142;
  --text: #e9ebf0; --dim: #9aa0b2; --dim2: #666d7e; --amber: #2e7bff;
  --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --body: #cfd2dc; --bar-bg: rgba(5,6,10,0.85); --notice-bg: #1a1305; --notice-line: #4a3510; --notice-text: #f5c066;
  --accent: #2e7bff; --cur: #00d9ff;
}
[data-theme="light"] {
  --bg: #f4f7fd; --bg2: #e9eef9; --panel: #ffffff; --line: #d9e1f1; --line2: #c2cee6;
  --text: #0d1324; --dim: #4b5672; --dim2: #6b7591; --amber: #1e6bff;
  --body: #2b3550; --bar-bg: rgba(244,247,253,0.85); --notice-bg: #fff6e0; --notice-line: #f0d28a; --notice-text: #7a4b00;
  --cur: #1e6bff; --cur-ring: rgba(30,107,255,.7); --cur-hot: #0d1324;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: transparent; color: var(--text); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
#fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.wrap { max-width: 820px; margin: 0 auto; padding: 36px 22px 90px; }
header.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 11px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--bar-bg); backdrop-filter: blur(10px); }
header.bar .name { font-weight: 700; letter-spacing: 2px; font-size: 15px; }
header.bar .sub { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--dim2); text-transform: uppercase; }
a { color: var(--amber); }
h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.5px; }
h2 { font-size: 19px; font-weight: 700; margin: 36px 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }
h2::before { content: "// "; color: var(--amber); font-family: var(--mono); font-weight: 400; }
h3 { font-size: 15px; font-weight: 600; margin: 22px 0 6px; }
p, li { color: var(--body); }
.meta { font-family: var(--mono); color: var(--dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 26px; }
.notice { background: var(--notice-bg); border: 1px solid var(--notice-line); color: var(--notice-text); border-radius: 6px; padding: 14px 16px; font-size: 13px; margin: 22px 0; }
.toc { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--panel); margin-bottom: 8px; }
.toc a { display: inline-block; margin: 3px 12px 3px 0; font-size: 13px; font-family: var(--mono); color: var(--dim); }
.toc a:hover { color: var(--amber); }
table { width: 100%; border-collapse: collapse; margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim2); font-weight: 500; background: var(--bg2); }
tr:last-child td { border-bottom: 0; }
footer { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 18px; color: var(--dim2); font-size: 13px; font-family: var(--mono); letter-spacing: 0.5px; }
code { background: var(--bg2); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 13px; color: var(--amber); }