:root[data-design="bbs"] {
  --sans: var(--mono);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}
:root[data-design="bbs"] {
  --c-black: #000000; --c-blue: #0000aa; --c-cyan: #00aaaa; --c-gray: #aaaaaa; --c-dgray: #555555;
  --c-lblue: #5555ff; --c-lcyan: #55ffff; --c-lgreen: #55ff55; --c-lred: #ff5555; --c-lmagenta: #ff55ff;
  --c-yellow: #ffff55; --c-white: #ffffff;
}
:root[data-design="bbs"] {
  --bg: var(--c-black);
  --surface: color-mix(in srgb, var(--c-blue) 12%, var(--c-black));
  --raised: color-mix(in srgb, var(--c-blue) 22%, var(--c-black));
  --sunken: var(--c-black);
  --line: color-mix(in srgb, var(--c-blue) 45%, var(--c-dgray));
  --line-strong: var(--c-cyan);
  --text: var(--c-gray); --text-2: color-mix(in srgb, var(--c-gray) 70%, var(--c-white));
  --muted: color-mix(in srgb, var(--c-gray) 70%, var(--c-black)); --faint: color-mix(in srgb, var(--c-gray) 50%, var(--c-black));
  --accent: var(--c-yellow); --link: var(--c-lcyan);
  --allow: var(--c-lgreen); --red: var(--c-lred);
  --wire: var(--c-cyan);
  --chip: color-mix(in srgb, var(--c-blue) 35%, var(--c-black));
  --hover: color-mix(in srgb, var(--c-blue) 50%, var(--c-black));
  scrollbar-color: var(--c-dgray) var(--c-black);
}
:root[data-design="bbs"] * { border-radius: 0 !important; }
:root[data-design="bbs"] body { font-size: 15px; line-height: 1.55; }
:root[data-design="bbs"] ::selection { background: var(--c-cyan); color: var(--c-black); }
:root[data-design="bbs"] a { text-decoration: none; }
:root[data-design="bbs"] a:hover { color: var(--c-black); background: var(--c-lcyan); }
:root[data-design="bbs"] :focus-visible { outline: 1px dashed var(--c-yellow); outline-offset: 2px; }
:root[data-design="bbs"] .bar { background: var(--c-blue); border-bottom: 0; }
:root[data-design="bbs"] .bar .wrap { padding-top: 10px; padding-bottom: 10px; align-items: center; }
:root[data-design="bbs"] .brand { color: var(--c-white); font-weight: 700; letter-spacing: 0.08em; }
:root[data-design="bbs"] .brand::before { content: "■ "; color: var(--c-yellow); }
:root[data-design="bbs"] .brand:hover { color: var(--c-white); background: none; }
:root[data-design="bbs"] .nav { gap: 4px 6px; font-size: 14px; }
:root[data-design="bbs"] .nav a { color: var(--c-gray); border: 0; padding: 0 4px; }
:root[data-design="bbs"] .nav a::before { content: "["; color: var(--c-lblue); }
:root[data-design="bbs"] .nav a::after { content: "]"; color: var(--c-lblue); }
:root[data-design="bbs"] .nav a .hk { color: var(--c-yellow); }
:root[data-design="bbs"] .nav a:hover { background: var(--c-cyan); color: var(--c-black); }
:root[data-design="bbs"] .nav a:hover .hk, :root[data-design="bbs"] .nav a:hover::before, :root[data-design="bbs"] .nav a:hover::after { color: var(--c-black); }
:root[data-design="bbs"] .nav a[aria-current] { background: var(--c-gray); color: var(--c-blue); border: 0; }
:root[data-design="bbs"] .nav a[aria-current] .hk, :root[data-design="bbs"] .nav a[aria-current]::before, :root[data-design="bbs"] .nav a[aria-current]::after { color: var(--c-blue); }
:root[data-design="bbs"] .crumbs { background: var(--c-black); border-bottom: 1px solid var(--c-dgray); }
:root[data-design="bbs"] .crumbs .wrap { font-size: 13.5px; }
:root[data-design="bbs"] .crumbs .ps1-user { color: var(--c-lgreen); font-weight: 700; }
:root[data-design="bbs"] .crumbs .ps1-path { color: var(--c-lblue); font-weight: 700; }
:root[data-design="bbs"] .crumbs .ps1-path a { color: var(--c-lblue); }
:root[data-design="bbs"] .crumbs .ps1-path .here { color: var(--c-lblue); }
:root[data-design="bbs"] .crumbs .ps1-end { color: var(--c-gray); margin-right: 6px; }
:root[data-design="bbs"] .crumbs a { color: var(--c-cyan); }
:root[data-design="bbs"] .crumbs a:hover { color: var(--c-black); background: var(--c-cyan); }
:root[data-design="bbs"] .crumbs .sep { color: var(--c-dgray); padding: 0 2px; }
:root[data-design="bbs"] .crumbs .here { color: var(--c-white); }
:root[data-design="bbs"] .crumbs .aside { color: var(--c-dgray); }
:root[data-design="bbs"] h1 { color: var(--c-yellow); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-design="bbs"] .page-head h1 { padding-bottom: 8px; border-bottom: 3px double var(--c-cyan); display: inline-block; }
:root[data-design="bbs"] h2 { color: var(--c-white); font-size: 17px; font-weight: 700; }
:root[data-design="bbs"] h2::before { content: "▓▒░ "; color: var(--c-lblue); font-weight: 400; }
:root[data-design="bbs"] .lead { color: var(--c-gray); font-size: 16px; line-height: 1.55; }
:root[data-design="bbs"] code { background: var(--c-blue); color: var(--c-white); padding: 0 4px; }
:root[data-design="bbs"] strong, :root[data-design="bbs"] b { color: var(--c-white); }
:root[data-design="bbs"] kbd { border-color: var(--c-cyan); color: var(--c-lcyan); }
:root[data-design="bbs"] .diagram-frame, :root[data-design="bbs"] figure.fig .fig-frame, :root[data-design="bbs"] .facts, :root[data-design="bbs"] .toc, :root[data-design="bbs"] .stack { border: 3px double var(--c-cyan); background: var(--c-black); }
:root[data-design="bbs"] .facts dt { color: var(--c-cyan); }
:root[data-design="bbs"] .facts dd { color: var(--c-white); }
:root[data-design="bbs"] table { font-size: 14px; }
:root[data-design="bbs"] th { color: var(--c-yellow); border-bottom: 3px double var(--c-cyan); }
:root[data-design="bbs"] td { border-bottom: 1px dashed var(--c-dgray); }
:root[data-design="bbs"] figure.code { border: 3px double var(--c-gray); background: var(--c-black); }
:root[data-design="bbs"] figure.code figcaption { background: var(--c-blue); color: var(--c-white); border-bottom: 0; }
:root[data-design="bbs"] figure.code.cmd figcaption { color: var(--c-white); }
:root[data-design="bbs"] figure.code figcaption > span:first-child::before { content: "≡ "; color: var(--c-yellow); }
:root[data-design="bbs"] figure.code .cap-note { color: var(--c-lcyan); }
:root[data-design="bbs"] figure.code button { color: var(--c-white); border: 0; padding: 0 2px; font-size: 13px; }
:root[data-design="bbs"] figure.code button::before { content: "["; color: var(--c-lblue); }
:root[data-design="bbs"] figure.code button::after { content: "]"; color: var(--c-lblue); }
:root[data-design="bbs"] figure.code button:hover { background: var(--c-cyan); color: var(--c-black); }
:root[data-design="bbs"] figure.code .dl { color: var(--c-lcyan); }
:root[data-design="bbs"] figure.code pre { color: var(--c-lgreen); }
:root[data-design="bbs"] figure.code pre .c { color: var(--c-dgray); }
:root[data-design="bbs"] figure.code .notes { color: var(--c-gray); border-top: 1px dashed var(--c-dgray); }
:root[data-design="bbs"] .check { border-left: 0; padding-left: 0; }
:root[data-design="bbs"] .check .check-k { color: var(--c-lgreen); }
:root[data-design="bbs"] .check .check-k::before { content: "[ OK ] "; }
:root[data-design="bbs"] .callout { border-left: 0; background: var(--c-blue); color: var(--c-white); }
:root[data-design="bbs"] .callout::before { content: "!! "; color: var(--c-yellow); }
:root[data-design="bbs"] .guide-ch .tested .t-k { border: 0; padding: 0; min-width: 0; text-align: left; color: var(--c-lgreen); font: 700 12px var(--mono); }
:root[data-design="bbs"] .guide-ch .tested .t-k::before { content: "["; color: var(--c-dgray); }
:root[data-design="bbs"] .guide-ch .tested .t-k::after { content: "]"; color: var(--c-dgray); }
:root[data-design="bbs"] .ph, :root[data-design="bbs"] code.ph { background: var(--c-lred); color: var(--c-black); }
:root[data-design="bbs"] mark.todo { background: var(--c-yellow); color: var(--c-black); border: 0; }
:root[data-design="bbs"] .toc summary { color: var(--c-white); }
:root[data-design="bbs"] .toc a { color: var(--c-lcyan); }
:root[data-design="bbs"] .chapters .c-n { color: var(--c-yellow); }
:root[data-design="bbs"] .chapters .c-n::before { content: "0"; }
:root[data-design="bbs"] .chapters a:hover, :root[data-design="bbs"] .posts a:hover, :root[data-design="bbs"] .areas a:hover, :root[data-design="bbs"] .deeper a:hover, :root[data-design="bbs"] .pager a:hover { background: var(--c-blue); color: var(--c-white); }
:root[data-design="bbs"] .chapters a:hover .c-t, :root[data-design="bbs"] .posts a:hover .p-title, :root[data-design="bbs"] .areas a:hover .a-name, :root[data-design="bbs"] .pager a:hover .p-t { color: var(--c-yellow); }
:root[data-design="bbs"] .chapters li, :root[data-design="bbs"] .posts li, :root[data-design="bbs"] .areas li { border-bottom: 1px dashed var(--c-dgray); }
:root[data-design="bbs"] .chapters li:first-child, :root[data-design="bbs"] .posts li:first-child { border-top: 1px dashed var(--c-dgray); }
:root[data-design="bbs"] .deeper a { border: 1px solid var(--c-cyan); background: var(--c-black); }
:root[data-design="bbs"] .pager { border-top: 3px double var(--c-cyan); }
:root[data-design="bbs"] .pager .prev .p-k::before { content: "<< "; }
:root[data-design="bbs"] .pager .next .p-k::after { content: " >>"; }
:root[data-design="bbs"] .d-box { fill: var(--c-black); stroke: var(--c-cyan); stroke-width: 1.4; }
:root[data-design="bbs"] .d-group { fill: none; stroke: var(--c-dgray); stroke-dasharray: 4 3; }
:root[data-design="bbs"] .d-chip { fill: var(--c-blue); }
:root[data-design="bbs"] .d-name { fill: var(--c-white); font: 700 12.5px var(--mono); }
:root[data-design="bbs"] .d-sub { fill: var(--c-gray); font: 10.5px var(--mono); }
:root[data-design="bbs"] .d-port, :root[data-design="bbs"] .d-label { font: 11px var(--mono); }
:root[data-design="bbs"] .d-port { fill: var(--c-lblue); }
:root[data-design="bbs"] .d-cable { stroke: var(--c-dgray); }
:root[data-design="bbs"] .d-cable.tunnel { stroke: var(--c-yellow); }
:root[data-design="bbs"] .node:hover > .d-box, :root[data-design="bbs"] .node:focus-visible > .d-box, :root[data-design="bbs"] .node:hover > .d-group { stroke: var(--c-lcyan); }
:root[data-design="bbs"] .net:hover > .d-box { fill: var(--c-blue); }
:root[data-design="bbs"] .sel > .d-box, :root[data-design="bbs"] .sel > .d-group { fill: color-mix(in srgb, var(--c-yellow) 14%, transparent); stroke: var(--c-yellow); stroke-dasharray: none; }
:root[data-design="bbs"] .fig .box { fill: var(--c-black); stroke: var(--c-cyan); }
:root[data-design="bbs"] .fig .name { fill: var(--c-white); font: 700 12.5px var(--mono); }
:root[data-design="bbs"] .fig .sub { fill: var(--c-gray); font: 10.5px var(--mono); }
:root[data-design="bbs"] .toggle, :root[data-design="bbs"] .flow { background: var(--c-black); border: 1px solid var(--c-cyan); }
:root[data-design="bbs"] .toggle:hover { background: var(--c-blue); }
:root[data-design="bbs"] .badge { border-color: var(--c-dgray); }
:root[data-design="bbs"] .legend { font-size: 13px; }
:root[data-design="bbs"] .landing { gap: 10px; }
:root[data-design="bbs"] .ansi-logo { margin: 0; font: 400 clamp(9px, 2.2vw, 22px)/1 var(--mono); letter-spacing: 0; white-space: pre; }
:root[data-design="bbs"] .ansi-logo span { display: inline-block; line-height: 1; }
:root[data-design="bbs"] .ansi-logo .r0 { color: var(--c-lcyan); }
:root[data-design="bbs"] .ansi-logo .r1 { color: var(--c-lcyan); }
:root[data-design="bbs"] .ansi-logo .r2 { color: var(--c-cyan); }
:root[data-design="bbs"] .ansi-logo .r3 { color: var(--c-lblue); }
:root[data-design="bbs"] .ansi-logo .r4 { color: var(--c-lblue); }
:root[data-design="bbs"] .ansi-logo .r5 { color: var(--c-blue); }
:root[data-design="bbs"] footer { border-top: 3px double var(--c-blue); color: var(--c-dgray); font-size: 13px; }
:root[data-design="bbs"] .sel > .d-name { fill: var(--c-yellow); }
:root[data-design="bbs"] .design-toggle { color: var(--c-white); border: 0; border-radius: 0; padding: 0 4px; font-size: 14px; }
:root[data-design="bbs"] .design-toggle::before { content: "["; color: var(--c-lblue); }
:root[data-design="bbs"] .design-toggle::after { content: "]"; color: var(--c-lblue); }
:root[data-design="bbs"] .design-toggle[aria-pressed="true"] { background: var(--c-gray); color: var(--c-blue); }
:root[data-design="bbs"] .design-toggle:hover { background: var(--c-cyan); color: var(--c-black); }
:root[data-design="bbs"] .crumbs .t-path { display: none; }
:root[data-design="bbs"] .crumbs .t-prompt { display: inline; }
:root[data-design="bbs"] .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-design="bbs"] .ansi-logo { display: block; }
:root[data-design="bbs"] rect { rx: 0; ry: 0; }