/*! Copyright Steph Ango, stephango.com
    Please do not reproduce without permission.

    Credits:
    normalize.css (MIT License), github.com/necolas/normalize.css
    Flexoki (MIT License), github.com/kepano/flexoki

*/

/* Normalize.css reset */
/* html{-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:600}code,kbd,samp{font-size:1em}small{font-size:80%}sub,sup{font-size:85%;line-height:0;position:relative;vertical-align:baseline;font-variant-numeric:tabular-nums}sub{bottom:-0.25em}sup{top:-0.35em}img{border-style:none}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} */

/* CSS Variables */
:root{
  --font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-content);
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
  --border-radius: 4px;
  --font-small: 0.875em;
  --font-smaller: 0.8em;
  --wrap-wide: 54em;
  --wrap-normal: 44em;
  --heading-weight: 500;
  --input-width: 20em;
  --image-radius: 6px;
}

@media (max-width: 860px){
  :root{
    --wrap-normal: 88vw;
    --wrap-wide: 100vw;
    --input-width: 100%;
    --heading-weight: 600;
  }
  :root .wide,:root .wider{
    --border-radius: 0;
    --image-radius: 0;
  }
}

/* Base styles */
*,*:before,*:after{box-sizing:inherit}
::selection{background:var(--color-selection)}
::-moz-selection{background:var(--color-selection)}
html{box-sizing:border-box;width:100%;height:100%;font-size:62.5%}
body{
  color-scheme:light dark;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--color-bg-primary);
  font-family:var(--font-content);
  margin:2vw auto 0 auto;
  /* line-height:1.15; */
  padding:2rem 0 24rem;
  overflow-x:hidden;
  font-size:1.8rem;
  font-size:calc(1.5rem + 0.25vw);
  color:var(--color-tx-normal);
}

/* Typography */
small,.small{font-size:var(--font-small);line-height:1.4}
.smaller{font-size:var(--font-smaller);line-height:1.4}
.font-ui{font-family:var(--font-ui)}
.font-content{font-family:var(--font-content)}
.font-mono{font-family:var(--font-mono)}

h1,h2,h3,h4,h5,h6{
  line-height:1.3;
  margin-bottom:0;
  padding-bottom:0;
}
h1{
  font-weight:500;
  font-size:2em;
  font-size:calc(1.35em + 0.55vw);
  letter-spacing:-0.02em;
  line-height:1.25;
  margin-top:1.5em;
  margin-bottom:0.25em;
}
h2{
  font-weight:var(--heading-weight);
  font-size:1.4em;
  font-size:calc(1em + 0.2vw);
  letter-spacing:-0.015em;
  margin-top:1em;
  margin-bottom:0.5em;
  line-height:1.3;
}
h3{
  font-weight:var(--heading-weight);
  font-size:1.2em;
  font-size:1em;
  line-height:1.3;
  margin-top:1em;
  margin-bottom:0.5em;
}

/* Layout */
.wrap{
  max-width:var(--wrap-normal);
  margin-left:auto;
  margin-right:auto;
}

heading{
  display:block;
  max-width:var(--wrap-wide);
  width:var(--wrap-normal);
  margin-left:auto;
  margin-right:auto;
}

article{
  display:block;
  max-width:var(--wrap-wide);
  width:var(--wrap-normal);
  margin-left:auto;
  margin-right:auto;
}

/* Responsive images */
article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  border-radius: var(--image-radius);
}

/* Navigation */
nav{
  margin:0 auto 3em;
  width:var(--wrap-normal);
  max-width:var(--wrap-wide);
  display:flex;
  align-items:center;
  font-family:var(--font-ui);
}
nav .flex-grow{
  flex-grow:1;
}
nav .flex-shrink{
  flex-shrink:1;
}

/* Links */
a{
  color:var(--color-tx-normal);
  text-decoration:underline;
}
a:hover{
  color:var(--color-action);
  border-color:var(--color-action);
}
a:focus{
  outline:none;
  background-color:var(--color-bg-hover);
}
a.plain,a.muted{
  text-decoration:none;
}
a.internal-link{
  color:var(--color-tx-normal);
  /* text-decoration:none; */
}
a.internal-link:hover{
  color:var(--color-action);
}

/* Utility classes */
.flex{display:flex}
.align-center{align-items:center}
.align-baseline{align-items:baseline}
.flex-grow{flex-grow:1}
.flex-shrink{flex-shrink:1}
.muted{color:var(--color-tx-muted)}
.muted a{color:var(--color-tx-muted)}
.faint{color:var(--color-tx-faint)}
.action{color:var(--color-action)}
.font-medium{font-weight:500}
.tabular-nums{font-variant-numeric:tabular-nums}
.line-height-loose{line-height:1.6}
.nowrap{white-space:nowrap}
.text-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
  display:block;
}

/* Spacing */
.pa{padding:1rem}
.pt{padding-top:1rem}
.pr{padding-right:1rem}
.pb{padding-bottom:1rem}
.pl{padding-left:1rem}
.pta{padding:2rem}
.ptt{padding-top:2rem}
.ptr{padding-right:2rem}
.ptb{padding-bottom:2rem}
.ptl{padding-left:2rem}
.pn1{padding-top:2rem}
.pn2{padding-top:4rem}
.ps1{padding-bottom:2rem}
.ps2{padding-bottom:4rem}
.st{margin-top:1rem}
.sr{margin-right:1rem}
.sb{margin-bottom:1rem}
.sl{margin-left:1rem}
.ssl{margin-left:2rem}
.sst{margin-top:2rem}
.ssr{margin-right:2rem}
.sssr{margin-right:1rem}
.ssb{margin-bottom:2rem}
.ssl{margin-left:2rem}
.mn1{margin-top:2rem}
.mn2{margin-top:4rem}
.ms1{margin-bottom:2rem}
.ms2{margin-bottom:4rem}

/* Lists */
ul>li{list-style:disc}
ol,ul{
  padding:0.5rem 0 1rem 1em;
  margin:0 0 0 0.5em;
}
ol>li,ul>li{padding:0.15rem 0}
ol>li::marker,ul>li::marker{color:var(--color-tx-faint)}
ul>li::marker{font-size:85%}

ul.list-plain{
  padding-inline-start:0;
  margin-left:0;
}

ul.list-plain>li{list-style:none}

/* Horizontal rules */
hr{
  border:0;
  height:1px;
  margin:1.5em auto;
  background:var(--color-ui-muted);
  max-width:var(--wrap-wide);
  width:var(--wrap-normal);
}
main>hr{margin:4em auto}

/* Theme controls */
.theme-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Theme toggle */
#theme-toggle{
  height:20px;
  width:20px;
  display:block;
  border:none;
  cursor:pointer;
  background-color:var(--color-tx-muted);
  -webkit-mask-size:20px;
  -webkit-mask-position:50% 50%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd' /%3E%3C/svg%3E");
  transition: background-color 0.2s ease;
}
#theme-toggle:hover{
  background-color:var(--color-action);
}

/* Dice icon */
#theme-dice{
  height:20px;
  width:20px;
  display:block;
  border:none;
  cursor:pointer;
  background-color:var(--color-tx-muted);
  -webkit-mask-size:20px;
  -webkit-mask-position:50% 50%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 18C6.67 18 6 17.33 6 16.5S6.67 15 7.5 15s1.5.67 1.5 1.5S8.33 18 7.5 18zM7.5 9C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM16.5 18c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm0-9c-.83 0-1.5-.67-1.5-1.5S15.67 6 16.5 6 18 6.67 18 7.5 17.33 9 16.5 9z'/%3E%3C/svg%3E");
  transition: background-color 0.2s ease;
}
#theme-dice:hover{
  background-color:var(--color-action);
}

/* Footer */
footer{
  margin:2em auto;
  max-width:var(--wrap-wide);
  width:var(--wrap-normal);
  padding-top:1em;
  border-top:1px solid var(--color-ui-muted);
}

/* Responsive */
@media (max-width: 600px){
  .mh{display:none}
  .mobile-grid-rows{grid-auto-flow:row}
  ol>li,ul>li{padding:0.25rem 0}
}

@media (min-width: 600px){
  .dkh{display:none}
}

@media (max-width: 500px){
  .nav-links {
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .nav-link {
    margin-right: 0 !important;
    text-align: right;
  }
}


@media (max-width: 500px){
  .theme-controls {
    margin-left: 1.5rem;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }
  .sssr {
    margin-right: 0;
  }
}

.sm-space{margin-left:0.8rem;margin-right:0.8rem}

/* Code blocks */
code {
  font-family: var(--font-mono) !important;
  font-size: 0.9em;
}

.highlighter-rouge pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.5em;
  background-color: var(--color-ui-muted);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  line-height: 1.4;
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
}

/* Inline code */
code:not(.highlighter-rouge code) {
  background-color: var(--color-ui-muted);
  padding: 0.2em 0.2em;
  font-size: 0.9em;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--color-action);
  margin: 16px 0;
  padding: 8px 16px;
  background: var(--color-bg-tertiary);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--color-tx-muted);
}

blockquote p {
  margin: 0;
}

blockquote a {
  color: var(--color-action);
  text-decoration: none;
}

blockquote a:hover {
  text-decoration: underline;
}

/* ================================================ */

/* ================================================ */

/* Microblog-specific blockquote styling */
.microblog-content blockquote {
  border-left: 4px solid var(--color-action);
  margin: 16px 0;
  padding: 8px 16px;
  background: var(--color-bg-tertiary);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--color-tx-muted);
}

.microblog-content blockquote p {
  margin: 0;
}

.microblog-content blockquote a {
  color: var(--color-action);
  text-decoration: none;
}

.microblog-content blockquote a:hover {
  text-decoration: underline;
}

/* Responsive blockquote styling */
@media (max-width: 768px) {
  .microblog-content blockquote {
    margin: 12px 0;
    padding: 6px 12px;
    border-radius: 0 6px 6px 0;
  }
}

/* ================================================ */

/* ================================================ */

/* Quote Callout Styles */
.quote-callout {
  margin: 3rem 0;
  /* border: 1px solid var(--color-ui-muted);
  border-radius: var(--border-radius); */
  overflow: hidden;
}

.quote-callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-action);
  flex-shrink: 0;
}

.quote-callout-icon svg {
  width: 20px;
  height: 20px;
}
.quote-callout-content {
  padding: 1.5rem;
  text-align: center;
}

.quote-callout-content h1,
.quote-callout-content h2,
.quote-callout-content h3,
.quote-callout-content h4,
.quote-callout-content h5,
.quote-callout-content h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center;
}

.quote-callout-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--color-action);
}

.quote-callout-author a {
  text-decoration: none;
  font-weight: 500;
  color: var(--color-action);
}

.quote-callout-author a:hover {
  text-decoration: underline;
}