* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "JetBrains Mono", "Cascadia Mono", "Fira Code", Menlo, Consolas, monospace; font-size: 12px; }
  .top-left { position: static; padding: 64px 16px 16px 16px; }
  .crumbs { display: block; font-size: 10px; color: var(--text-secondary); margin-bottom: 8px; }
  .crumbs a { color: var(--link); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs .sep { color: var(--text-secondary); }
  .crumbs .cur { color: var(--text); font-weight: 700; }
  h1 { display: block; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0 0 8px; }
  .top-right { position: fixed; top: 12px; left: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .theme-switch { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 0; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: none; box-sizing: border-box; }
  .tbtn { cursor: pointer; color: var(--text-secondary); }
  .tbtn:hover { color: var(--accent); }
  .tbtn-active { color: var(--text); }
  .tsep { color: var(--sep); }
  h2 { font-size: 13px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; color: var(--text); }
  h3 { font-size: 13px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; color: var(--text); }
  p, li { font-size: 12px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 8px; }
  ul { margin: 0 0 8px; padding-left: 18px; }
  li { margin: 0 0 4px; }
  b { color: var(--text); }
  code { font-family: inherit; font-size: 12px; background: var(--code-bg, rgba(0,0,0,0.05)); padding: 1px 5px; }
  table { border-collapse: collapse; margin: 0 0 8px; font-size: 12px; width: 100%; max-width: 900px; }
  th, td { border: 1px solid var(--border, #e5e5e5); padding: 6px 10px; text-align: left; vertical-align: top; }
  th { font-weight: 700; color: var(--text); }
  td { color: var(--text-secondary); }
  a { color: var(--link); text-decoration: none; }
  a:hover { color: var(--link-hover); }
  .gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 0 0 8px; }
  figure { margin: 0; border: 1px solid var(--border, #e5e5e5); }
  figure img { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--code-bg, rgba(0,0,0,0.04)); }
  figcaption { padding: 5px 6px 6px; font-size: 12px; line-height: 1.4; color: var(--text); }
  figcaption .cr { display: block; margin-top: 3px; color: var(--text-secondary); }
  figcaption .cr a { color: var(--text-secondary); }
  .back { display: block; margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
  .note { display: block; margin: 0; font-size: 10px; line-height: 1.5; color: var(--text-secondary); max-width: 760px; }
  .links { margin: 0 0 8px; font-size: 11px; }
  .links a { color: var(--link); text-decoration: none; }
  .links a:hover { text-decoration: underline; }
  .links .lsep { color: var(--text-secondary); margin: 0 4px; }
  .addr { margin: 0 0 8px; font-size: 11px; }
  .addr a { color: var(--link); text-decoration: none; }
  .addr a:hover { text-decoration: underline; }

  figure.lb { cursor: zoom-in; }
  figure.lb:hover { border-color: var(--accent, #e9b32d); }
  dialog.lb { border: 1px solid var(--border, #e5e5e5); background: var(--bg, #fff); color: var(--text);
    padding: 0; max-width: 96vw; max-height: 94vh; margin: auto; }
  dialog.lb::backdrop { background: rgba(0,0,0,0.82); }
  dialog.lb .lbwrap { display: flex; flex-direction: column; align-items: flex-start; }
  dialog.lb img { display: block; max-width: 94vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
  dialog.lb .lbbar { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; font-size: 12px; line-height: 1.4; }
  dialog.lb .lbbar .lbnav { cursor: pointer; color: var(--text-secondary); font-size: 10px; }
  dialog.lb .lbbar .lbnav:hover { color: var(--accent, #e9b32d); }
  dialog.lb .lbcap { color: var(--text); font-size: 12px; }
  dialog.lb .lbcr { color: var(--text-secondary); font-size: 10px; }
  dialog.lb .lbclose { margin-left: auto; cursor: pointer; color: var(--text-secondary); font-size: 10px; }
  dialog.lb .lbclose:hover { color: var(--accent, #e9b32d); }