/* Skin B · Studio Console — hardware-panel feel: condensed caps, mono labels,
   glowing orange accents. Dark is the native mode; light is a daylight panel. */

:root[data-skin="console"] {
  --bg: #eceef0;
  --surface: #f7f8f9;
  --text: #2a3139;
  --lede: #11171d;
  --muted: #6a737d;
  --heading: #11171d;
  --accent: #f05a22;
  --accent-deep: #c9400f;
  --cream: #f1e4b7;
  --ui: #11171d;
  --nav-bg: #1d242b;
  --nav-text: #b6bec7;
  --nav-muted: #6b7682;
  --top-bg: #161c22;
  --top-text: #f1e4b7;
  --top-border: rgba(255, 255, 255, .14);
  --popup-bg: #f7f8f9;
  --rule: rgba(17, 23, 29, .12);
  --code-bg: #dfe3e7;
  --code-text: #9a3208;
  --note-bg: rgba(240, 90, 34, .07);
  --kbd-bg: #ffffff;
  --kbd-text: #2a3139;
  --kbd-border: #c5cbd1;
  --glow: rgba(240, 90, 34, .18);
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Avenir Next Condensed", "Avenir Next", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 6px;
}

:root[data-skin="console"][data-mode="dark"] {
  --bg: #0d1116;
  --surface: #141a21;
  --text: #c9d1d9;
  --lede: #e6ebf0;
  --muted: #7d8793;
  --heading: #f1e4b7;
  --accent: #ff6a1d;
  --accent-deep: #ff8a54;
  --ui: #ffffff;
  --nav-bg: #0a0d11;
  --nav-text: #aab3bd;
  --nav-muted: #5f6975;
  --top-bg: #0a0d11;
  --top-border: rgba(255, 255, 255, .09);
  --popup-bg: #141a21;
  --rule: rgba(255, 255, 255, .09);
  --code-bg: #1d252e;
  --code-text: #ffd7a8;
  --note-bg: rgba(255, 106, 29, .08);
  --warn: #ff6b6b;
  --warn-bg: rgba(255, 107, 107, .08);
  --kbd-bg: #1d252e;
  --kbd-text: #ffd7a8;
  --kbd-border: #36414d;
  --glow: rgba(255, 106, 29, .3);
}

:root[data-skin="console"] .top { border-bottom: 1px solid var(--top-border); }
:root[data-skin="console"] .sidenav { border-right: 1px solid var(--rule); }
:root[data-skin="console"] .sidenav > a.active { background: rgba(255, 106, 29, .12); color: #fff; }
:root[data-skin="console"] .crumbs { font-family: var(--mono); letter-spacing: .08em; color: var(--accent); }
:root[data-skin="console"] .doc h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
:root[data-skin="console"] .doc h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); padding-top: 22px; border-top: 1px solid var(--rule); }
:root[data-skin="console"] .doc h2::before { content: "// "; color: var(--muted); font-family: var(--mono); }
:root[data-skin="console"] .doc h3 { text-transform: uppercase; letter-spacing: .05em; }
:root[data-skin="console"] figure { padding: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px rgba(0, 0, 0, .18); }
:root[data-skin="console"][data-mode="dark"] figure { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px rgba(0, 0, 0, .4); }
:root[data-skin="console"] figcaption { font-family: var(--mono); font-size: 12px; padding: 0 4px; }
:root[data-skin="console"] .flow .n { font-family: var(--mono); font-weight: 600; background: var(--surface); box-shadow: 0 0 0 1px var(--glow), 0 0 14px var(--glow); }
:root[data-skin="console"] .markdown-body > ol > li::before { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); font-family: var(--mono); box-shadow: 0 0 10px var(--glow); }
:root[data-skin="console"] .ui { font-family: var(--mono); font-size: .85em; font-weight: 600; }
:root[data-skin="console"] th { font-family: var(--mono); color: var(--accent); }
:root[data-skin="console"] .toc { border-left: 1px solid var(--rule); padding-left: 18px; }
:root[data-skin="console"] .note-label { font-family: var(--mono); letter-spacing: .1em; }
:root[data-skin="console"] .markdown-body a.pin-num { background: transparent; color: var(--pin) !important; border: 1.5px solid var(--pin); font-family: var(--mono); box-shadow: 0 0 10px color-mix(in srgb, var(--pin) 45%, transparent); }