/* PIVArena docs: IBM terminal look in PIVX purple. No inline styles (CSP style-src 'self'). */
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/themes/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/themes/plexmono-600.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('/fonts/themes/vt323.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { --bg: #130d1e; --panel: #1b1229; --panel2: #2a1b42; --line: #4d3077; --pv: #662d91; --text: #ece4ff; --muted: #a090c2; --lav: #c4a1ff; --ph: #33ff66; --gold: #ffd84a; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 15px/1.6 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; }
body { margin: 0; background: radial-gradient(1200px 500px at 50% -200px, rgba(102, 45, 145, .35), transparent), repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px); min-height: 100vh; }
a { color: var(--lav); }
a:hover { color: #fff; }
.bar { display: flex; align-items: center; gap: 18px; padding: 10px 22px; border-bottom: 2px solid var(--pv); background: var(--panel); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.brand { font-family: 'VT323', monospace; font-size: 30px; color: var(--text); text-decoration: none; letter-spacing: 1px; }
.brand b { color: var(--lav); font-weight: 400; }
.path { color: var(--ph); font-size: 13px; }
.cur { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }
.bar nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }
main { max-width: 1060px; margin: 0 auto; padding: 26px 22px 60px; }
h1 { font-family: 'VT323', monospace; font-weight: 400; font-size: 56px; line-height: 1; margin: 10px 0 8px; color: var(--lav); text-shadow: 0 0 10px rgba(196, 161, 255, .35); }
h2 { font-family: 'VT323', monospace; font-weight: 400; font-size: 32px; margin: 40px 0 10px; padding-bottom: 4px; border-bottom: 1px dashed var(--line); color: var(--text); }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 6px; }
.lead { font-size: 16px; max-width: 760px; color: #d8ccef; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 0 6px; border: 1px solid #7cc4ff; color: #7cc4ff; background: rgba(124, 196, 255, .1); vertical-align: 1px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 6px; }
.toc a { border: 1px solid var(--line); background: var(--panel2); padding: 3px 10px; text-decoration: none; font-size: 13px; }
.toc a:hover { background: var(--pv); }
code { font-family: inherit; color: var(--ph); background: rgba(51, 255, 102, .06); padding: 0 3px; word-break: break-word; }
pre { background: #0e0918; border: 1px solid var(--line); border-left: 3px solid var(--pv); padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
pre code { background: none; padding: 0; color: #d6ffe0; word-break: normal; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 7px 9px; border: 1px solid var(--line); }
th { background: var(--panel2); color: var(--lav); font-weight: 600; }
td { background: rgba(27, 18, 41, .6); }
td.m { font-weight: 700; white-space: nowrap; }
.m-get { color: var(--ph); }
.m-post { color: var(--gold); }
.m-ws { color: #7cc4ff; }
td .body { margin-top: 4px; }
td .body code { color: #9a74d6; background: none; }
ol, ul { padding-left: 22px; }
li { margin: 4px 0; }
footer { margin-top: 50px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
td:first-child code { white-space: nowrap; }