* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); background: var(--bg-0); }
body { margin: var(--sp-0); color: var(--fg-0); font-family: var(--font-sans); font-size: var(--fs-5); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; text-underline-offset: var(--sp-1); }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
::selection { background: var(--accent-weak); color: var(--fg-0); }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: var(--sp-0); }
h1, h2, h3, h4 { line-height: var(--lh-tight); word-break: keep-all; overflow-wrap: anywhere; }
p, li, td, th, div { overflow-wrap: anywhere; }
ul, ol { padding-left: var(--sp-6); }
svg { flex-shrink: 0; }
code { font-family: var(--font-mono); font-size: .91em; color: var(--fg-1); overflow-wrap: anywhere; }
strong { font-weight: 650; }
[hidden] { display: none !important; }
.skip { position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 100; transform: translateY(-200%); padding: var(--sp-3) var(--sp-5); background: var(--bg-2); border: var(--border) solid var(--accent-text); }
.skip:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: var(--border); height: var(--border); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.layout { max-width: var(--w-site); margin: var(--sp-0) auto; display: grid; grid-template-columns: var(--w-sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--h-header)); }
main { min-width: 0; width: 100%; max-width: calc(var(--w-content) + var(--sp-8) * 2); padding: var(--sp-7) var(--sp-8) var(--sp-6); }
section { margin-top: var(--sp-9); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (max-width: 1200px) {
  main { padding-right: var(--sp-7); padding-left: var(--sp-7); }
}
@media (max-width: 1020px) {
  .layout { display: block; }
  main { margin: var(--sp-0) auto; padding-top: var(--sp-6); }
}
@media (max-width: 600px) {
  body { font-size: var(--fs-4); }
  main { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  section { margin-top: var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s !important; }
}