body {
  background-color: #fff;
  padding:50px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:#595959;
  font-weight:400;
}

h1, h2, h3, h4, h5, h6 {
  color:#222;
  margin:0 0 20px;
}

p, ul, ol, table, pre, dl {
  margin:0 0 20px;
}

h1, h2, h3 {
  line-height:1.1;
}

h1 {
  font-size:28px;
  font-weight: 500;
}

h2 {
  color:#393939;
  font-weight: 500;
}

h3, h4, h5, h6 {
  color:#494949;
  font-weight: 500;
}

a {
  color:#39c;
  text-decoration:none;
}

a:hover {
  color:#069;
}

a small {
  font-size:11px;
  color:#777;
  margin-top:-0.3em;
  display:block;
}

a:hover small {
  color:#777;
}

.wrapper {
  width:860px;
  margin:0 auto;
}

blockquote {
  border-left:1px solid #e5e5e5;
  margin:0;
  padding:0 0 0 20px;
  font-style:italic;
}

code, pre {
  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
  color:#333;
}

pre {
  padding:8px 15px;
  background: #f8f8f8;
  border-radius:5px;
  border:1px solid #e5e5e5;
  overflow-x: auto;
}

table {
  width:100%;
  border-collapse:collapse;
}

th, td {
  text-align:left;
  padding:5px 10px;
  border-bottom:1px solid #e5e5e5;
}

dt {
  color:#444;
  font-weight:500;
}

th {
  color:#444;
}

img {
  max-width:100%;
}

.sidebar {
  position:fixed;
  width:270px;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 100px);
  overflow-y:auto;
}

header {
  width:auto;
  -webkit-font-smoothing:subpixel-antialiased;
}

.avatar {
  display:block;
  width:150px;
  height:150px;
  max-width:100%;
  padding:5px;
  margin:0 0 20px;
  border:1px solid #e0e0e0;
  border-radius:50%;
}

/* Neutralise the button-bar styles applied by the generic `header ul` rules. */
header ul.links {
  position:static;
  list-style:none;
  width:auto;
  height:auto;
  margin:0 0 20px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}

header ul.links li {
  display:block;
  float:none;
  width:auto;
  height:auto;
  border-right:0;
}

header ul.links li:first-child a,
header ul.links li:last-child a {
  border-radius:0;
}

header ul.links a {
  display:block;
  height:auto;
  padding:2px 0;
  border-radius:0;
  font-size:15px;
  line-height:1.5;
  text-align:left;
  color:#595959;
}

header ul.links a i {
  font-size:17px;
  vertical-align:-0.05em;
  margin-right:0.3em;
  text-align:center;
}

header ul.links a:hover {
  color:#39c;
}

header ul {
  list-style:none;
  height:40px;
  padding:0;
  background: #f4f4f4;
  border-radius:5px;
  border:1px solid #e0e0e0;
  width:270px;
}

header li {
  width:89px;
  float:left;
  border-right:1px solid #e0e0e0;
  height:40px;
}

header li:first-child a {
  border-radius:5px 0 0 5px;
}

header li:last-child a {
  border-radius:0 5px 5px 0;
}

header ul a {
  line-height:1;
  font-size:11px;
  color:#999;
  display:block;
  text-align:center;
  padding-top:6px;
  height:34px;
}

header ul a:hover {
  color:#999;
}

header ul a:active {
  background-color:#f0f0f0;
}

strong {
  color:#222;
  font-weight:500;
}

header ul li + li + li {
  border-right:none;
  width:89px;
}

header ul a strong {
  font-size:14px;
  display:block;
  color:#222;
}

section {
  width:500px;
  float:right;
  padding-bottom:50px;
}

small {
  font-size:11px;
}

hr {
  border:0;
  background:#e5e5e5;
  height:1px;
  margin:0 0 20px;
}

footer {
  width:auto;
  margin-top:auto;
  -webkit-font-smoothing:subpixel-antialiased;
}

@media print, screen and (max-width: 960px) {

  div.wrapper {
    width:auto;
    margin:0;
    display:flex;
    flex-direction:column;
  }

  /* Single-column layout: dissolve the sidebar wrapper so its children take
     part in the wrapper's flow, then restore document order - header, content,
     footer. Without this the footer would land above the content. */
  .sidebar {
    display:contents;
  }

  header, section, footer {
    float:none;
    position:static;
    width:auto;
  }

  header {
    order:1;
    padding-right:0;
    text-align:center;
  }

  section {
    order:2;
    border:1px solid #e5e5e5;
    border-width:1px 0;
    padding:20px 0;
    margin:0 0 20px;
  }

  footer {
    order:3;
    margin-top:0;
  }

  /* Stacked layout: centre the profile block. The avatar is a fixed-width
     block, so `margin:auto` centres it. The link list becomes a single
     centred row here; on wider screens it stays the vertical column. */
  .avatar {
    margin:0 auto 20px;
  }

  header ul.links {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:1.25em;
    row-gap:0.25em;
    text-align:center;
  }

  header ul.links li {
    width:auto;
  }

  header ul.links a {
    white-space:nowrap;
    text-align:center;
  }

  header a small {
    display:inline;
  }

  header ul {
    position:absolute;
    right:50px;
    top:52px;
  }
}

@media screen and (min-width: 961px) {

  body.post div.wrapper {
    width:auto;
    max-width:1100px;
  }

  body.post section {
    width:calc(100% - 340px);
    max-width:760px;
  }
}

@media print, screen and (max-width: 720px) {
  body {
    word-wrap:break-word;
  }

  header {
    padding:0;
  }

  header ul, header p.view {
    position:static;
  }

  pre, code {
    word-wrap:normal;
  }
}

@media print, screen and (max-width: 480px) {
  body {
    padding:15px;
  }

  header ul {
    width:99%;
  }

  header li, header ul li + li + li {
    width:33%;
  }
}

@media print {
  body {
    padding:0.4in;
    font-size:12pt;
    color:#444;
  }
}

/* ---------------------------------------------------------------------------
   Collapsible sections in post bodies.
   Written in Markdown as `<details markdown="1">` / `<summary>`; the behaviour
   is native HTML, this block is styling only. The theme ships no rules for
   these elements, so without it the summaries stack with no spacing and give
   no hint that they are interactive.
   --------------------------------------------------------------------------- */

details {
  margin:0 0 20px;
  /* Lets ::details-content animate to `auto`. Ignored where unsupported. */
  interpolate-size:allow-keywords;
}

/* Tighten the gap between consecutive expanders, but keep the full vertical
   rhythm after the group so it still reads as one block. */
details:has(+ details) {
  margin-bottom:8px;
}

/* Keep the revealed content flush against the summary row. */
details > *:last-child {
  margin-bottom:0;
}

details > summary {
  /* Borrow the theme's link colour and weight - the one accent this design has. */
  color:#39c;
  font-weight:500;
  cursor:pointer;
  padding:2px 0;
  /* Drop the default disclosure triangle; we draw our own below. */
  list-style:none;
}

details > summary::-webkit-details-marker {
  display:none;
}

/* Caret drawn with borders rather than the `\25B8` glyph. That glyph is the
   "small" variant and carries a lot of built-in side bearing, so it stays
   visually tiny however much the font-size is scaled - and rotating it drags
   the shape off-centre, because its ink is not centred in the em box. Borders
   give exact dimensions and a box that rotates around its own centre. */
details > summary::before {
  content:"";
  display:inline-block;
  width:0;
  height:0;
  margin-right:0.45em;
  border-top:0.4em solid transparent;
  border-bottom:0.4em solid transparent;
  border-left:0.6em solid currentColor;
  /* Distance the caret is raised above the baseline. `middle` sits at roughly
     -0.14em for this box; -0.05em nudges it up from there. Raise the value
     (less negative) to move the caret up, lower it to move it down. */
  vertical-align:-0.05em;
  transition:transform 0.2s ease;
}

details[open] > summary::before {
  transform:rotate(90deg);
}

details > summary:hover {
  color:#069;
}

/* Animate open/close. Requires `::details-content`; browsers without it snap
   open exactly as they did before. */
@supports selector(details::details-content) {
  details::details-content {
    /* Tinted panel so the revealed text reads as a unit distinct from the
       running prose. #f4f4f4 is the theme's existing panel tone (see
       `header ul`); #f8f8f8 is left to <pre>, so code blocks nested inside an
       expander stay distinguishable.
       Vertical padding is applied only while open: padding sits outside the
       content box, so a collapsed panel would otherwise still render 20px tall
       and leave a gap beneath every summary. */
    box-sizing:border-box;
    background:#f4f4f4;
    border-left:2px solid #e0e0e0;
    padding:0 16px;

    block-size:0;
    overflow:hidden;
    transition:block-size 0.25s ease, content-visibility 0.25s ease;
    transition-behavior:allow-discrete;
  }

  details[open]::details-content {
    block-size:auto;
    padding-block:10px;
  }
}

/* ---------------------------------------------------------------------------
   Images and figures in post bodies.
   --------------------------------------------------------------------------- */

/* Once <img> carries width/height attributes, `max-width:100%` can squash the
   image unless the height is free to follow the aspect ratio. `.avatar` keeps
   its 150px height because a class selector outranks this element selector. */
img {
  height:auto;
}

figcaption {
  font-style:italic;
  margin-top:6px;
}

/* Inline code used as link text, e.g. [`pad_cpu_sys_cnt`](url) in Markdown.
   The theme's `code, pre { color:#333 }` rule comes after `a { color:#39c }`
   at equal specificity, so it wins and the link renders in body grey with no
   hover feedback. Inheriting from the link restores both, because the <code>
   then follows whatever colour the <a> currently has. */
a code {
  color:inherit;
}