/* Skin A · Quickstart — from the printed Quickstart PDF: stone pages, near-black
   panels, cream display type, orange wedges, all-caps hierarchy. */

:root[data-skin="quickstart"] {
  --bg: #cec5b7;
  --surface: #e8e2d7;
  --text: #182028;
  --lede: #182028;
  --muted: #687078;
  --heading: #0e1419;
  --accent: #f05a22;
  --accent-deep: #d94118;
  --cream: #f1e4b7;
  --ui: #0e1419;
  --nav-bg: #1a242d;
  --nav-text: #dce0e2;
  --nav-muted: #aeb4b8;
  --top-bg: #111a22;
  --top-text: #f1e4b7;
  --top-border: rgba(255, 255, 255, .2);
  --popup-bg: #f4f0e8;
  --rule: rgba(17, 26, 34, .18);
  --code-bg: #1a242d;
  --code-text: #fff;
  --note-bg: rgba(241, 228, 183, .75);
  --kbd-bg: #111a22;
  --kbd-text: #f1e4b7;
  --kbd-border: #111a22;
  --panel: #111a22;
  --panel-text: #f1e4b7;
  --font: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 3px;
}

:root[data-skin="quickstart"][data-mode="dark"] {
  --bg: #0f161d;
  --surface: #17212a;
  --text: #d6d0c4;
  --lede: #e6e0d4;
  --muted: #8d949a;
  --heading: #f1e4b7;
  --accent-deep: #ff7a45;
  --ui: #f1e4b7;
  --nav-bg: #0b1117;
  --top-bg: #0b1117;
  --popup-bg: #1d2832;
  --rule: rgba(241, 228, 183, .14);
  --code-bg: #26323d;
  --code-text: #ffd9b0;
  --note-bg: rgba(241, 228, 183, .08);
  --warn: #ff6b6b;
  --warn-bg: rgba(255, 107, 107, .08);
  --kbd-bg: #f1e4b7;
  --kbd-text: #111a22;
  --kbd-border: #f1e4b7;
  --panel: #f1e4b7;
  --panel-text: #111a22;
}

:root[data-skin="quickstart"] .top { height: calc(var(--top-h) + 4px); border-bottom: 5px solid var(--accent); }
:root[data-skin="quickstart"] .search { border-color: var(--top-border); }
:root[data-skin="quickstart"] .layout { grid-template-columns: 280px minmax(0, 1fr); }
:root[data-skin="quickstart"] .toc { display: none; }
:root[data-skin="quickstart"] .sidenav > a.active { color: #fff; background: rgba(255, 255, 255, .07); }
:root[data-skin="quickstart"] .doc { position: relative; background: var(--surface); overflow: hidden; }
:root[data-skin="quickstart"] .doc::before { content: ""; position: absolute; right: 0; top: 36px; width: 68px; height: 240px; background: var(--accent); clip-path: polygon(64% 0, 100% 0, 100% 100%, 0 100%, 60% 72%); }
:root[data-skin="quickstart"] .doc h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); line-height: .94; letter-spacing: -.045em; text-transform: uppercase; max-width: 13ch; }
:root[data-skin="quickstart"] .doc h2 { text-transform: uppercase; letter-spacing: -.02em; padding: 14px 18px; color: var(--panel-text); background: var(--panel); border-left: 6px solid var(--accent); font-size: 1.5rem; }
:root[data-skin="quickstart"] figure img { padding: 8px; background: #111a22; box-shadow: 0 18px 36px rgba(17, 26, 34, .2); }
:root[data-skin="quickstart"] th { color: var(--panel-text); background: var(--panel); }
:root[data-skin="quickstart"] td { border: 1px solid var(--rule); }
:root[data-skin="quickstart"] .flow .n { background: var(--panel); color: var(--panel-text); border: 0; text-transform: uppercase; }
:root[data-skin="quickstart"] .pager a { background: var(--bg); }
:root[data-skin="quickstart"][data-mode="dark"] figure img { box-shadow: 0 18px 36px rgba(0, 0, 0, .45); }

@media (max-width: 1180px) {
  :root[data-skin="quickstart"] .layout { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  :root[data-skin="quickstart"] .layout { grid-template-columns: minmax(0, 1fr); }
  :root[data-skin="quickstart"] .doc::before { width: 28px; opacity: .7; }
  :root[data-skin="quickstart"] .doc h2 { font-size: 1.2rem; }
}
/* Annotated screenshots can't take the image padding (pins are placed on the bare image), so the frame is drawn outside it. */
:root[data-skin="quickstart"] .annot-stage { margin: 8px; border-radius: var(--radius); box-shadow: 0 0 0 8px #111a22, 0 18px 36px rgba(17, 26, 34, .2); }
:root[data-skin="quickstart"] .annot-stage img { box-shadow: none; }