/* 채용을 위한 AI 엔지니어 기술 면접 노트 : 마크다운 뷰어
   바깥 테두리(헤더, 차례, 푸터)는 항상 어둡게 두고 본문만 밝기를 바꾼다.
   종이를 책상 위에 올려 둔 모양을 유지하려는 것이다. */

:root {
  --topbar-h: 58px;
  --footer-h: 34px;
  --side-w: 300px;
  --mini-w: 210px;

  --fs: 17px;
  --paper-w: 1080px;

  --sans: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
}

/* 본문 영역의 밝기 두 벌 */
html[data-theme="light"] {
  /* 바깥 테두리 */
  --chrome: #e9ebef;
  --chrome-deep: #fbfbfc;
  --chrome-hi: #dde1e7;
  --chrome-line: #d2d7de;
  --chrome-fg: #1b1e23;
  --chrome-mute: #5c6672;
  --chrome-mute2: #79818d;
  --chrome-item: #3b434f;
  --chrome-rule: rgba(120, 130, 145, .28);
  --accent: #1f6a9a;
  --accent-hi: #2b85bd;
  --on-accent: #fff;
  --scrim: rgba(40, 46, 56, .4);

  /* 본문 */
  --bg: #f4f5f7;
  --bg2: #e9ebef;
  --fg: #1b1e23;
  --fg-mute: #5e6773;
  --rule: #d9dce2;
  --link: #1f6a9a;
  --code-bg: #eceef2;
  --code-fg: #22262c;
  --quote-bg: #eaeef3;
  --mark: #ffe9a8;
  --tok-key: #a128a1;
  --tok-str: #1a7f4b;
  --tok-num: #b1541a;
  --tok-com: #7d8590;
  --tok-fn: #1f5fbf;
  --shadow: 0 1px 2px rgba(20, 24, 30, .06);
}
html[data-theme="dark"] {
  /* 바깥 테두리 */
  --chrome: #24272e;
  --chrome-deep: #1b1e23;
  --chrome-hi: #2b2f37;
  --chrome-line: #363a44;
  --chrome-fg: #f4f5f7;
  --chrome-mute: #99a0ab;
  --chrome-mute2: #727a86;
  --chrome-item: #c3c9d2;
  --chrome-rule: rgba(54, 58, 68, .55);
  --accent: #7fb2d4;
  --accent-hi: #9dc7e2;
  --on-accent: #11222c;
  --scrim: rgba(10, 12, 15, .5);

  /* 본문 */
  --bg: #15181d;
  --bg2: #1d2128;
  --fg: #dfe3e9;
  --fg-mute: #98a0ac;
  --rule: #2d323b;
  --link: #8cc0e2;
  --code-bg: #1f242b;
  --code-fg: #d6dbe2;
  --quote-bg: #1c2027;
  --mark: #6a5516;
  --tok-key: #d2a8ff;
  --tok-str: #8ddb9f;
  --tok-num: #ffab70;
  --tok-com: #7d8590;
  --tok-fn: #8cc0e2;
  --shadow: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--chrome-deep);
  color: var(--chrome-fg);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
/* 아이콘 전용 규칙이다. 본문까지 먹으면 mermaid 가 그린 그림이 1em 으로 찌그러진다.
   머리말과 차례 안으로만 한정한다. */
.topbar svg, #sidebar svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ───────── 머리말 ───────── */
.topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}
.mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 7px;
  background: var(--chrome-hi);
  border: 1px solid var(--chrome-line);
  color: var(--accent);
  text-decoration: none;
}
.mark svg { width: 19px; height: 19px; }
.mark:hover { border-color: var(--accent); }

.titles { min-width: 0; flex: 1 1 auto; }
.titles h1 {
  margin: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titles p {
  margin: 2px 0 0;
  font-size: 12px; color: var(--chrome-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fontsize { display: flex; gap: 2px; }

.icon-btn {
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 7px;
  background: transparent;
  border: 1px solid var(--chrome-line);
  border-radius: 6px;
  color: var(--chrome-fg);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.with-label { gap: 6px; grid-auto-flow: column; padding: 0 9px; }
.icon-btn.with-label span { font-size: 12px; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

#theme .ic-moon { display: none; }
html[data-theme="dark"] #theme .ic-sun { display: none; }
html[data-theme="dark"] #theme .ic-moon { display: block; }

.btn {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--chrome-line);
  border-radius: 6px;
  color: var(--chrome-fg);
  font-size: 13px; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn.primary:hover { background: var(--accent-hi); color: var(--on-accent); }

/* 별 주기 — 왼쪽은 저장소로, 오른쪽은 별을 준 사람 목록으로 간다 */
.star { display: flex; flex: 0 0 auto; }
.star a {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--accent);
  color: var(--on-accent); font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.star-act {
  background: var(--accent);
  border-radius: 6px 0 0 6px;
}
.star-act:hover { background: var(--accent-hi); }
.star-act svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
/* .star a 보다 선택자가 약하면 글자색이 덮여 숫자가 배경에 묻는다 */
.star a.star-n {
  background: var(--chrome-deep);
  color: var(--accent);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.star a.star-n:hover { background: var(--chrome-hi); color: var(--chrome-fg); }
.star-n[hidden] { display: none; }
.star-act:only-child { border-radius: 6px; }

/* ───────── 뼈대 ───────── */
.shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
}

/* ───────── 차례 ───────── */
#sidebar {
  flex: 0 0 var(--side-w);
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--chrome);
  border-right: 1px solid var(--chrome-line);
}

.side-search { flex: 0 0 auto; padding: 11px 12px 9px; border-bottom: 1px solid var(--chrome-line); }
.field {
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px;
  height: 34px;
  background: var(--chrome-deep);
  border: 1px solid var(--chrome-line);
  border-radius: 7px;
}
.field:focus-within { border-color: var(--accent); }
.field svg { width: 15px; height: 15px; color: var(--chrome-mute2); flex: 0 0 auto; }
.field input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--chrome-fg); font: inherit; font-size: 13.5px;
}
.field input::placeholder { color: var(--chrome-mute2); }
.field input::-webkit-search-cancel-button { display: none; }
.field .icon-btn { border: 0; min-width: 20px; height: 20px; font-size: 16px; color: var(--chrome-mute); }

.wide-btn {
  display: block; width: 100%;
  margin-top: 8px; padding: 7px 9px;
  background: var(--chrome-hi); border: 1px solid var(--chrome-line); border-radius: 6px;
  color: var(--chrome-fg); font: inherit; font-size: 12.5px; text-align: left;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wide-btn:hover { border-color: var(--accent); color: var(--accent); }
.hint { margin: 7px 2px 0; font-size: 11.5px; color: var(--chrome-mute2); line-height: 1.5; }

.toc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 20px;
}
.toc .loading { padding: 14px; color: var(--chrome-mute2); font-size: 13px; }

.toc .part { border-bottom: 1px solid var(--chrome-rule); }
.toc .part:last-child { border-bottom: 0; }
.toc .part-h {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 12px;
  background: none; border: 0;
  color: var(--chrome-fg); font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: -.2px; text-align: left;
  cursor: pointer;
}
.toc .part-h:hover { color: var(--accent); }
.toc .part-h .caret { flex: 0 0 auto; width: 13px; height: 13px; color: var(--chrome-mute2); transition: transform .12s ease; }
.toc .part[data-open="0"] .caret { transform: rotate(-90deg); }
.toc .part[data-open="0"] ul { display: none; }
.toc .part-h .n { color: var(--chrome-mute2); font-weight: 600; }

.toc ul { list-style: none; margin: 0; padding: 0 0 7px; }
.toc li a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px 6px 28px;
  color: var(--chrome-item); font-size: 13px; line-height: 1.45;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.toc li a:hover { background: var(--chrome-hi); color: var(--chrome-fg); }
.toc li a .num { flex: 0 0 auto; min-width: 28px; color: var(--chrome-mute2); font-size: 12px; font-variant-numeric: tabular-nums; }
.toc li a .t { min-width: 0; }
.toc li a.active {
  background: var(--chrome-hi);
  border-left-color: var(--accent);
  color: var(--chrome-fg); font-weight: 700;
}
.toc li a.active .num { color: var(--accent); }
.toc li a.read .num::after {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; margin-left: 5px;
  border-radius: 50%; background: var(--chrome-mute2);
}
.toc li a.active.read .num::after { background: var(--accent); }
.toc li.hidden, .toc .part.hidden { display: none; }
.toc mark { background: none; color: var(--accent); font-weight: 700; }

.side-foot {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-top: 1px solid var(--chrome-line);
}
.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--chrome-mute2); font: inherit; font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent); }

.toc .resume { border-bottom: 1px solid var(--chrome-rule); background: rgba(127, 178, 212, .1); }
.toc .resume .num { color: var(--accent); font-weight: 700; }
.toc .resume a { padding-left: 12px; }

/* ───────── 본문 ───────── */
#main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  scroll-behavior: smooth;
}
.progress {
  position: sticky; top: 0; left: 0; right: 0;
  height: 2px; z-index: 5;
  background: transparent;
}
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

.paper {
  max-width: var(--paper-w);
  margin: 0 auto;
  padding: 26px 40px 72px;
}

.totop {
  position: sticky; float: right; right: 0;
  bottom: 18px; margin-right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg2); color: var(--fg);
  font-size: 15px; cursor: pointer;
  box-shadow: var(--shadow);
}
.totop:hover { border-color: var(--accent); color: var(--accent); }

/* 이전 다음 */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.pg {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 9px;
  color: var(--fg); text-decoration: none;
  background: var(--bg2);
  min-width: 0;
}
.pg:hover { border-color: var(--accent); }
.pg.next { text-align: right; }
.pg .dir { font-size: 11.5px; color: var(--fg-mute); }
.pg .t { font-size: 13.5px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg[hidden] { display: none; }

/* ───────── 오른쪽 소제목 ───────── */
#minitoc {
  flex: 0 0 var(--mini-w);
  width: var(--mini-w);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 16px 40px 4px;
  background: var(--bg);
  border-left: 1px solid var(--rule);
}
#minitoc.empty { display: none; }
.minitoc-h { margin: 0 0 9px 10px; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--fg-mute); }
#minitoc nav a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid var(--rule);
  color: var(--fg-mute);
  font-size: 12.5px; line-height: 1.45;
  text-decoration: none;
}
#minitoc nav a.lv3 { padding-left: 20px; font-size: 12px; }
#minitoc nav a:hover { color: var(--fg); }
#minitoc nav a.active { border-left-color: var(--accent); color: var(--link); font-weight: 700; }

/* ───────── 푸터 ───────── */
.bottombar {
  flex: 0 0 auto;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 16px;
  background: var(--chrome);
  border-top: 1px solid var(--chrome-line);
  font-size: 11.5px; color: var(--chrome-mute2);
}
.bottombar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottombar code { font-family: var(--mono); font-size: 11px; }
.bottombar .keys { flex: 0 0 auto; color: var(--chrome-mute2); }

/* ───────── 표지 ───────── */
.hero {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 0 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}
.hero-cover {
  flex: 0 0 auto;
  width: 300px;
  max-width: 54%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(20, 24, 30, .18);
}
html[data-theme="dark"] .hero-cover { box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.hero-act { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; }
.hero-meta { margin: 0 0 14px; color: var(--fg-mute); font-size: 13.5px; line-height: 1.7; }
.hero-meta b { color: var(--fg); font-weight: 700; }
.hero-btn {
  display: inline-block;
  max-width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg2);
  color: var(--fg); font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hero-btn:hover { border-color: var(--accent); }
.hero-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hero-btn.primary:hover { background: var(--accent-hi); }

@media (max-width: 640px) {
  .hero { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-cover { width: 100%; max-width: 100%; }

}

/* ───────── 마크다운 ───────── */
.md {
  font-size: var(--fs);
  line-height: 1.78;
  letter-spacing: -.1px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.md > *:first-child { margin-top: 0; }
.md p { margin: 0 0 1.05em; }
.md h1, .md h2, .md h3, .md h4 {
  line-height: 1.4; letter-spacing: -.4px;
  scroll-margin-top: 22px;
  position: relative;
}
.md h1 { font-size: 1.72em; margin: 0 0 .7em; padding-bottom: .35em; border-bottom: 1px solid var(--rule); }
.md h2 { font-size: 1.3em; margin: 2.1em 0 .75em; }
.md h3 { font-size: 1.08em; margin: 1.7em 0 .6em; }
.md h4 { font-size: 1em; margin: 1.4em 0 .5em; color: var(--fg-mute); }

.md .anchor {
  position: absolute; left: -.85em; top: 0;
  width: .8em;
  color: var(--fg-mute); opacity: 0;
  font-size: .78em; font-weight: 400; text-decoration: none;
}
.md h1:hover .anchor, .md h2:hover .anchor, .md h3:hover .anchor { opacity: .55; }
.md .anchor:hover { opacity: 1 !important; color: var(--link); }

.md a { color: var(--link); text-underline-offset: 2.5px; text-decoration-thickness: 1px; }
.md a.ext::after {
  content: "↗"; font-size: .72em; vertical-align: .25em;
  margin-left: 1px; opacity: .6; text-decoration: none;
}
.md strong { font-weight: 700; }

.md ul, .md ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.md li { margin: .25em 0; }
.md li > ul, .md li > ol { margin: .25em 0; }

.md blockquote {
  margin: 1.2em 0; padding: .6em 1.1em;
  background: var(--quote-bg);
  border-left: 3px solid var(--rule);
  border-radius: 0 6px 6px 0;
  color: var(--fg-mute);
}
.md blockquote p:last-child { margin-bottom: 0; }

.md hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--rule); }

.md img { max-width: min(100%, 440px); height: auto; border-radius: 8px; display: block;
          margin-left: auto; margin-right: auto; }
.md p > img { margin: .4em auto 1.1em; }

.md code {
  font-family: var(--mono);
  font-size: .855em;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: .14em .36em;
  border-radius: 4px;
  word-break: break-all;
}
.md pre {
  position: relative;
  margin: 1.2em 0;
  padding: 14px 16px;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow-x: auto;
  line-height: 1.62;
}
.md pre code {
  background: none; padding: 0; border-radius: 0;
  font-size: .845em; color: var(--code-fg);
  word-break: normal; white-space: pre;
}
.copy {
  position: absolute; top: 7px; right: 7px;
  padding: 3px 8px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 5px;
  color: var(--fg-mute); font: inherit; font-size: 11px; font-family: var(--sans);
  opacity: 0; cursor: pointer; transition: opacity .12s;
}
.md pre:hover .copy, .copy:focus { opacity: 1; }
.copy:hover { color: var(--accent); border-color: var(--accent); }

.md .table-wrap { overflow-x: auto; margin: 1.3em 0; }
.md table { border-collapse: collapse; width: 100%; font-size: .9em; }
.md th, .md td {
  border: 1px solid var(--rule);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.md th { background: var(--bg2); font-weight: 700; white-space: nowrap; }
/* 표 안에서는 낱말 가운데를 끊지 않는다. 33,430 이 두 줄로 갈라지면 숫자가 아니라 그림이 된다.
   칸이 넘치면 표를 가로로 굴린다. */
.md td, .md th { overflow-wrap: normal; word-break: keep-all; }
.md td code, .md th code { white-space: nowrap; word-break: normal; }
.md tbody tr:nth-child(2n) { background: color-mix(in srgb, var(--bg2) 55%, transparent); }

.md .mermaid {
  margin: 1.4em 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow-x: auto;
  text-align: center;
}
.md .mermaid svg { max-width: 100%; height: auto; }
/* 본문 조판이 그림 안으로 새지 않게 막는다 */
.md .mermaid { font-size: 15px; line-height: normal; letter-spacing: normal; word-break: normal; }

/* 저장소 링크. 1500번 나오므로 ↗ 는 붙이지 않는다. 글자색만 바꾸고 밑줄은 올렸을 때 */
.md a.repo { text-decoration: none; }
.md a.repo code { color: var(--link); }
.md a.repo:hover code { text-decoration: underline; text-underline-offset: 2px; }

.md mark { background: var(--mark); color: var(--fg); padding: 0 2px; border-radius: 2px; }

.loading, .md .loading { color: var(--fg-mute); font-size: .95em; }
.err {
  margin: 2em 0; padding: 16px 18px;
  border: 1px solid var(--rule); border-left: 3px solid #c75b5b;
  border-radius: 0 8px 8px 0; background: var(--bg2);
}
.err h2 { margin-top: 0; }

/* 본문 검색 결과 */
.results { }
.results .rhead { margin: 0 0 1.4em; color: var(--fg-mute); font-size: .92em; }
.results .hit {
  display: block;
  margin: 0 0 10px;
  padding: 13px 15px;
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--bg2);
  color: inherit; text-decoration: none;
}
.results .hit:hover { border-color: var(--accent); }
.results .hit b { display: block; font-size: .96em; margin-bottom: 5px; }
.results .hit .where { font-size: .76em; color: var(--fg-mute); font-family: var(--mono); }
.results .hit .snip { font-size: .85em; color: var(--fg-mute); line-height: 1.65; margin-top: 5px; }

/* 코드 토큰 */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: var(--tok-key); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: var(--tok-str); }
.hljs-number, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-params, .hljs-built_in { color: var(--tok-num); }
.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--tok-com); font-style: italic; }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-function .hljs-title { color: var(--tok-fn); }
.hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--tok-fn); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ───────── 좁은 화면 ───────── */
.only-narrow { display: none; }

#scrim {
  position: absolute; inset: 0; z-index: 18;
  background: var(--scrim);
  border: 0;
}

@media (max-width: 1180px) {
  #minitoc { display: none; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 52px; --side-w: 290px; }
  .only-narrow { display: grid; }
  .titles p { display: none; }
  .titles h1 { font-size: 14.5px; }
  .fontsize, #gh-section, #width { display: none; }
  .star a { padding: 0 9px; font-size: 12px; }
  .bottombar { display: none; }

  #sidebar {
    position: absolute; z-index: 19;
    top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 26px rgba(0, 0, 0, .45);
  }
  body.nav-open #sidebar { transform: none; }
  .paper { padding: 20px 18px 64px; }
  .pager { grid-template-columns: 1fr; }
  .md { font-size: calc(var(--fs) - 1px); line-height: 1.75; }
  .md h1 { font-size: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}