/* BrowneUI. The :root palette below is the only place its colors are written:
   CSS uses var(--browne-*), scripts call browne() from /static/js/browne.js,
   and Python reads the block through util/browne_palette.py. */

@font-face {
  font-family: '04b03';
    src:  url('04b03.ttf.woff') format('woff'),
    url('04b03.ttf.svg#04b03') format('svg'),
    url('04b03.ttf.eot'),
    url('04b03.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "unifont";
  src: url("./unifont-12.0.01.woff2");
}
@font-face {
  font-family: "unifont-upper";
  src: url("./unifont_upper-12.0.01.woff2");
  unicode-range: U+10000-10FFFF;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "unifont", "unifont-upper", "Unifont", "04b03", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serf;
  margin: 0;
  padding: 0;
  /* so that footer always live at the bottom */
  /* use it with style="flex-grow: 1;" */
  height: 100%;
}

:root {
  --browne-heading: #554037;     /* h1-h4 */
  --browne-code: #654D37;        /* code text */
  --browne-button: #804A3A;      /* buttons, active states */
  --browne-highlight: #B13254;   /* links, emphasis, errors */
  --browne-words: #87746C;       /* body text */
  --browne-boundary: #B39A8F;    /* borders */
  --browne-dark-bg: #DBC8B8;     /* dark background, highlight hover */
  --browne-title: #EEE2CF;       /* title bars, widgets, light background */
  --browne-parchment: #F7EDDC;   /* page background, parchment sheet */
  /* SVG turbulence is also procedural, and works without JavaScript or WebGL.
     It is transparent, so the parchment color shows through beneath it. */
  --parchment-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='768'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .012' numOctaves='5' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.23'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.24 .7' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath filter='url(%23p)' opacity='.6' d='M0 0h768v768H0z'/%3E%3Cpath filter='url(%23f)' d='M0 0h768v768H0z'/%3E%3C/svg%3E");
}

html,
body,
.parchment-fallback {
  background-color: var(--browne-parchment);
  background-image: var(--parchment-fallback);
}

.parchment-host {
  isolation: isolate;
}

/* parchment.js paints chunks into this layer, behind the host's content. */
.browne-parchment-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* On the page, chunks sit in document space and scroll natively. The script
   sizes the layer to the content, so it never makes the page taller. */
body > .browne-parchment-layer {
  bottom: auto;
}

canvas.browne-parchment {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

@media print {
  html,
  body,
  .parchment-fallback {
    background: white !important;
  }

  .browne-parchment-layer {
    display: none;
  }
}

div.markdown-page {
  flex-grow: 1
}

body {
  /* so that footer always live at the bottom */
  display: flex;
  /* so that footer always live at the bottom */
  flex-direction: column;
}

h1 {
  color: var(--browne-heading);
  font-weight: 500;
  font-size: 3em;
  line-height: 0.8;
  /* cancel default h1 */
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}

.markdown-page h1 {
  padding-top: 20%;
  padding-bottom: 10%;
}

h2 {
  color: var(--browne-heading);
  font-weight: 400;
  font-size: 1.8em;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--browne-words);
  text-decoration-thickness: 4px;
  text-underline-offset: 10%;
}

h3 {
  color: var(--browne-heading);
  font-weight: 400;
  font-size: 1.3em;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--browne-words);
  text-decoration-thickness: 2px;
  text-underline-offset: 10%;
}

h4 {
  color: var(--browne-heading);
  font-weight: 400;
  font-size: 1.1em;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--browne-words);
  text-decoration-thickness: 2px;
  text-underline-offset: 10%;
}

/* paragraph */
p {
  /* margin:0;
    padding-top: 0;
    padding-bottom: 0; */
}

.markdown-page p {
  white-space: pre-wrap;
  /* so that line break preserve */
}

/* https://dmitry.khlebnikov.net/2020/05/10/wrap-indicator-in-pre-blocks/#bonus-round */
p {
  /* so we could position the child */
  position: relative;
  /* to avoid collapsing empty lines */
  min-height: 1em;
  /* set the height explicitly */
  /* line-height: 1.2; */
  /* first line indent */
  /* text-indent: -1.2em; */
  /* padding for the line */
  /* padding-left: 1.2em; */
}

p::before {
  /* we need content for pseudo elements */
  content: '';
  position: absolute;
  display: block;
  /* without width it will be invisible */
  width: 1.2em;
  /* to match the height of the parent */
  height: 100%;
  top: 0;
  left: 0;
  background:
    url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48dGV4dCB4PSIwIiB5PSIxOSI+JiN4MjNjZTs8L3RleHQ+PC9zdmc+Cg==) no-repeat repeat;
  background-size: 1.2em 1.2em;
  clip: rect(1.2em 1.2em 100vh 0);
  opacity: .5;
  /* mirror the arrow */
  transform: rotateY(180deg);
  transform-origin: left;
}

blockquote p::before,
li p::before {
  background: none;
}

/* canvas */
canvas {
  padding: 0;
  margin: auto;
  display: block;
  width: 800px;
}

/* container */
.container {
  width: 60%;
  margin: 25px auto 50px auto;
  color: var(--browne-words);
  line-height: 1.5em;
  text-rendering: optimizelegibility;
  letter-spacing: 0.01rem;
}

.container a {}

.container a:hover {}

/* list */
ol,
ul {
  /*list-style-type: none;*/
  margin-top: 0px;
  margin-bottom: 1em;
  padding-left: 2em
}

li p {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

li:first-child {
  margin-top: 0px;
  padding-top: 0px;
}

li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

li.menu-item:not(:last-child) {
  margin: 0px;
  padding: 0px;
}

.nodot {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orderedlist {
  margin: 0.5em;
  padding-left: 1em;
}

/* section left/right */
section.one-third {
  padding: 1em;
  width: 18em;
  position: relative;
  display: block;
}

.floatbox {
  /*display: inline-block;*/
  /*text-align: center;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  list-style: none;
  vertical-align: baseline;
}

.center {
  text-align: center;
}

/* Typing Effect */
.typing {
  -webkit-animation: typing 1s infinite ease-in-out
}

@-webkit-keyframes typing {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* icon */
.fa {
  font-weight: 300;
  font-size: 1.5em;
}

.icon-title {
  font-family: "unifont", "unifont-upper", "Unifont", Menlo, Monaco, Consolas, "Courier New", monospace;
  padding: 2px 4px;
  font-size: 90%;
  background-color: var(--browne-title);
  border: 1px solid var(--browne-title);
  border-radius: 8px;

  page-break-inside: avoid;
  line-height: 1.6;
  display: block;
  /*text-overflow: ellipsis;*/
  /* Required for text-overflow to do anything */
}

/* work with hide.js */
.fade {
  opacity: 0;
}

/* <hr> boarder */
hr.title {
  border: 0;
  border-bottom: 2px dashed var(--browne-title);
  background: var(--browne-dark-bg);
}

hr.title::after {
  content: none;
}

hr {
  border-top: 1px dashed var(--browne-dark-bg);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}

hr:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: var(--browne-parchment);
  color: var(--browne-dark-bg);
  font-size: 18px;
}

/* no down paddings */
.no-gap {
  margin-bottom: 15px;
}

/* delete */
.delete {
  background-color: var(--browne-words);
  color: var(--browne-words);
  text-shadow: none;
  border: 1px solid var(--browne-words);
  border-radius: 4px;
}

.delete:hover {
  background-color: transparent;
  color: var(--browne-words);
  text-shadow: none;
  background-color: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
}

.remove {
  text-decoration: line-through !important;
}

/* bold */
b,
strong {
  /* for Unifont */
  font-weight: 900;
}

/* ruby */
ruby {
  font-family: "unifont", "unifont-upper", "Unifont", BlinkMacSystemFont, -apple-system, "Helvetica Neue", Tahoma, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-feature-settings: "locl" on;
  -webkit-font-feature-settings: "locl" on;
  -webkit-locale: "ja";
}

/* quote */
.quote {
  border-left: 4px solid var(--browne-words);
  padding-left: .8em;
}

/* block */
blockquote {
  background: var(--browne-title);
  border-left: 10px solid var(--browne-boundary);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: var(--browne-boundary);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

/* text block */
.input,
textarea {
  width: 100%;
  padding: 12px;
  outline: none !important;
  background: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  box-shadow: 0 0 0px var(--browne-words);
  resize: none;
  text-align: left;
  color: var(--browne-heading);
}

.input:focus,
textarea:focus {
  box-shadow: 0 0 3px var(--browne-words);
}

/* image */
.img-box {
  border: 1px solid var(--browne-words);
  border-radius: 4px;
  margin-top: 0.5em;
  margin-bottom: 14px;
  width: 100%;
}
.img-box img {
  max-width: 100%;
  display: block;
}

img.nearest {
  image-rendering: pixelated; /* Chromium + Safari */
  image-rendering: crisp-edges; /* Firefox */
  -ms-interpolation-mode: nearest-neighbor; /* IE, only works on <img> tags */
}

.markdown-page img {
  border: 4px solid var(--browne-words);
  border-radius: 4px;
  max-width: 100%;
  /* height: auto;
    width: 100%; */
}

figure p {
  text-align: center;
}

figure {
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 5%;
  padding-right: 5%;
}

figcaption {
  text-align: center;
  color: var(--browne-boundary);
  font-family: "unifont", "unifont-upper", "Unifont", Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* code */
code,
.code-box,
span.arithmatex {
  color: var(--browne-code);
}

code,
span.arithmatex {
  font-family: "unifont", "unifont-upper", "Unifont", Menlo, Monaco, Consolas, "Courier New", monospace;
  display: inline-flex;
  padding: 1px 4px;
  font-size: 90%;
  background-color: var(--browne-dark-bg);
  border-radius: 4px;
}

/* latex */
div.arithmatex {
  font-family: "unifont", "unifont-upper", "Unifont", "Courier New", Courier, monospace;
  margin-top: 0.5em;
  padding: 9px 14px;
  margin-bottom: 14px;
  background-color: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  page-break-inside: avoid;
  line-height: 1.6;
  display: block;
  word-wrap: normal;
  /*text-overflow: ellipsis;*/
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: auto;
}

.code-box,
pre code {
  font-family: "unifont", "unifont-upper", "Unifont", "Courier New", Courier, monospace;
  margin-top: 0.5em;
  padding: 9px 14px;
  margin-bottom: 14px;
  background-color: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  page-break-inside: avoid;
  line-height: 1.6;
  display: block;
  word-wrap: normal;
  /*text-overflow: ellipsis;*/
  /* Required for text-overflow to do anything */
  white-space: pre;
  overflow: auto;
}

.code-box .highlight {
  color: var(--browne-highlight);
}

/* copy-to-clipboard button, pinned top-right inside the code box */
.codeblock {
  position: relative;
}

.codeblock button {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: calc(0.5em + 6px);
  right: 8px;
  padding: 2px 10px;
  font-family: "unifont", "unifont-upper", "Unifont", Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 78%;
  line-height: 1.4;
  color: var(--browne-button);
  background-color: var(--browne-dark-bg);
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.codeblock button:hover {
  color: var(--browne-highlight);
  background-color: var(--browne-title);
  border-color: var(--browne-highlight);
}

.codeblock button:active {
  color: var(--browne-button);
  background-color: var(--browne-title);
}

/* scroll bar */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--browne-title);
  /*border-left: 1px solid var(--browne-boundary);*/
  border-right: 1px solid var(--browne-boundary);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--browne-words);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  /*background: var(--browne-highlight);*/
}

/* link */
a.link,
.markdown-page a {
  color: var(--browne-highlight);
  text-decoration: none;
  border-bottom: dotted 2px var(--browne-dark-bg);
  cursor: pointer;
  position: relative;
  z-index: 10;
}

a.link:hover,
.markdown-page a:hover {
  padding: 2px 0px;
  background-color: var(--browne-dark-bg);
  border-radius: 4px;
}

/* details */
details:hover {
  color: var(--browne-highlight);
  cursor: pointer;
}

/* button */
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -moz-user-select: none;
  background-image: none;
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  color: var(--browne-button);
  text-decoration: none;
}

.btn:hover {
  border: 1px solid transparent;
  background-color: var(--browne-highlight);
  color: #FFF;
}

.clicked {
  border: 1px solid transparent;
  background-color: var(--browne-button);
  color: #FFF;
}

/* primary action: same filled look as .clicked, but stays a real button */
.btn-primary {
  border: 1px solid transparent;
  background-color: var(--browne-button);
  color: #FFF;
}

.btn-primary:hover {
  background-color: var(--browne-highlight);
}

/* disabled: faded, hatched like unwritten parchment, no hover response */
.btn:disabled,
.btn[aria-disabled="true"],
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  border: 1px dashed #C9B6AB;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--browne-boundary) 16%, transparent) 0,
    color-mix(in srgb, var(--browne-boundary) 16%, transparent) 4px,
    transparent 4px,
    transparent 8px
  );
  color: var(--browne-boundary);
  cursor: not-allowed;
  opacity: 0.75;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--browne-boundary) 60%, transparent);
}

.secret-command {
  position: absolute;
  left: -20001119px;
}

#avatar {
  /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
  background-image: url('../img/2026.png');

  /* make a square container */
  width: 150px;
  height: 150px;

  border: 5px solid var(--browne-boundary);
  -webkit-border-radius: 30px;
  /* Saf3+, Chrome */
  border-radius: 30px;
  /* Opera 10.5, IE 9 */
  /*-moz-border-radius: 30px;  Disabled for FF1+ */

  /* fill the container, preserving aspect ratio, and cropping to fit */
  background-size: cover;

  /* center the image vertically and horizontally */
  background-position: top center;

  /* round the edges to a circle with border radius 1/2 container size */
  border-radius: 50%;
}

#avatar-sanity {
  background-image: url('../img/2026_mask.png');
  width: 150px;
  height: 150px;

  border: 5px solid var(--browne-boundary);
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-size: cover;

  background-position: top center;

  border-radius: 50%;
}

div.avatar {
  width: 100px;
  display: inline-block;
  white-space: pre-line;
  text-align: center;
  margin: 5px;
  vertical-align: top;
}

.avatar p {
  display: inline-block;
  overflow-wrap: break-word;
}

.avatar img {
  object-fit: cover;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 5px dashed var(--browne-boundary);
  -webkit-border-radius: 30px;
  /* Saf3+, Chrome */
  border-radius: 30px;
  /* Opera 10.5, IE 9 */
  /*-moz-border-radius: 30px;  Disabled for FF1+ */
  display: inline-block;
  max-width: 100%;
  aspect-ratio: 1/1;
}

/* nav */
/* Add a black background color to the top navigation */
nav {
  /* This is so that nav a will have opacity 100% */
  opacity: 100%;
  background-color: color-mix(in srgb, var(--browne-parchment) 0%, transparent);

  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
}

/* TOC */
#toc {
  font-size: 100%;
  position: fixed;
  right: 2%;
  top: 10%;
  width: 10%;
  font-weight: bolder;
  line-height: initial;
  white-space: normal;
  overflow-wrap: break-word;
}

#toc p {
  font-size: 120%;
  text-align: center;
}

#toc ul {
  padding-left: 10px;
}

#toc li {
  opacity: 50%;
}

#toc li:hover {
  opacity: 100%;
}

/* Style the links inside the navigation bar */
nav a {
  color: var(--browne-words);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
nav a:hover {
  background-color: var(--browne-highlight);
  color: var(--browne-parchment);
}

/* table */
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

td,
th {
  border: 2px solid var(--browne-title);
  padding: 8px;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: var(--browne-words);
  color: var(--browne-dark-bg);
}

tr {
  color: var(--browne-code);
}

tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--browne-dark-bg) 31%, transparent);
}

tr:nth-child(odd) {
  background-color: color-mix(in srgb, var(--browne-boundary) 31%, transparent);
}

/* toggle, thanks: https://danklammer.com/articles/simple-css-toggle-switch/ */
.sanity-control {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
}

.sanity-toggle-halo {
  display: inline-flex;
  position: relative;
}

.sanity-toggle-halo.sanity-toggle-halo-hinted {
  margin-left: 28px;
}

.sanity-control-label,
.sanity-toggle-halo .toggle {
  position: relative;
  z-index: 1;
}

.sanity-hint {
  display: block;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.sanity-hint-ray {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 62px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: var(--browne-words);
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: attr(text);
  display: block;
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: var(--browne-parchment);
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 37px;
  color: var(--browne-parchment);
  white-space: nowrap;
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked.toggle-red {
  background-color: var(--browne-highlight);
}

.toggle:checked:before {
  left: 32px;
}

.rainbow {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7a00,
    #e6c300,  /* darker yellow */
    #00a000,  /* deeper green */
    #009ecb,  /* deeper cyan */
    #0000ff,
    #7a00ff,
    #ff0000
);
  background-size: 400% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -400% 0%;
  }
}

/* Before and After Slider */
.ba {
  position: relative;
  overflow: hidden;
  --pct: 50%;
  user-select: none;
}

/* base images sizing - inherit page styles for responsive behavior */
.ba img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* let mouse events reach container */
}

/* The "before" image sits above the after image and is clipped by width */
.ba-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--pct, 50%)) 0 0);
}

/* Simple handle: a vertical bar centered on the split */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pct));
  transform: translateX(-50%);
  width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--browne-heading);
  pointer-events: none; /* the container will capture pointer movements */
  z-index: 2;
  text-shadow: 0 0 4px rgba(255,255,255,0.6);
  overflow: visible;
}

/* make bar easier to see by adding a wider invisible hit area (visual remains thin) */
.ba-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px; /* hit area */
  height: 100%;
  background: transparent;
}

/* ── tabs (CSS-only, up to 3; radio inputs + general-sibling) ── */
.tabs > input[type="radio"] { display: none; }

.tabs > label {
  display: inline-block;
  padding: 0.3em 0.9em;
  cursor: pointer;
  border: 1px solid var(--browne-boundary);
  border-bottom: none;
  background: var(--browne-dark-bg);
  color: var(--browne-words);
  border-radius: 4px 4px 0 0;
  user-select: none;
}

.tabs > label:hover { background: var(--browne-title); color: var(--browne-heading); }

.tabs > div {
  display: none;
  padding: 0.8em;
  border: 1px solid var(--browne-boundary);
}

.tabs > input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1),
.tabs > input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2),
.tabs > input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3) {
  background: var(--browne-title);
  color: var(--browne-heading);
  font-weight: bold;
}

.tabs > input[type="radio"]:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input[type="radio"]:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs > input[type="radio"]:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; }

/* ── tooltip ([data-tooltip] attribute) ──────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--browne-words);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--browne-heading);
  color: var(--browne-title);
  padding: 0.25em 0.5em;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── video / audio ───────────────────────────────────────────── */
video {
  display: block;
  max-width: 100%;
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
}

audio {
  display: block;
  width: 100%;
  margin: 0.4em 0;
}

/* ── footnotes ───────────────────────────────────────────────── */
.footnotes {
  border-top: 1px dashed var(--browne-boundary);
  margin-top: 2em;
  padding-top: 0.5em;
  font-size: 0.85em;
  color: var(--browne-words);
}

.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--browne-highlight);
  text-decoration: none;
  border-bottom: none;
}

.footnote-ref::before { content: "["; }
.footnote-ref::after  { content: "]"; }

/* ── responsive breakpoints ──────────────────────────────────── */
@media (max-width: 900px) {
  .container { width: 85%; }
  #toc { width: 14%; font-size: 85%; }
}

@media (max-width: 600px) {
  .container { width: 96%; }
  #toc { display: none; }
}

/* ── print ───────────────────────────────────────────────────── */
@media print {
  #toc, .ba-handle { display: none; }
  .container { width: 100%; margin: 0; }
  a, a.link { color: #000; text-decoration: underline; }
  .code-box, pre { border: 1px solid #999; }
  .fade { opacity: 1; }
}

/* ── kpi cards ───────────────────────────────────────────────── */
.kpi {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1em 0;
}

.kpi-card {
  background: var(--browne-parchment);
  border: 1px solid var(--browne-dark-bg);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 1px 4px rgba(84,64,55,0.10);
}

.kpi-card b {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--browne-highlight);
}

/* ── svg polyline chart ──────────────────────────────────────── */
.chart {
  display: block;
  width: 100%;
  max-width: 900px;
  background: var(--browne-parchment);
  border: 1px solid var(--browne-boundary);
  border-radius: 6px;
  overflow: hidden;
  margin: 0.5em 0;
}

/* ── note / warn annotation blocks ──────────────────────────── */
.note {
  background: var(--browne-title);
  border-radius: 4px;
  padding: 0.45em 0.8em;
  margin: 0.5em 0;
  font-size: 0.9em;
  color: var(--browne-words);
}

.warn {
  background: var(--browne-parchment);
  border-left: 3px solid var(--browne-highlight);
  padding: 0.45em 0.8em;
  border-radius: 0 4px 4px 0;
  margin: 0.5em 0;
  font-size: 0.9em;
}

/* ── grid-3 — equal 3-col triptych ──────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0.5em 0;
}

@media (max-width: 700px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.grid-3 > * { min-width: 0; }

/* ── info-bar — horizontal metadata strip ────────────────────── */
.info-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  padding: 0.35em 0.8em;
  background: var(--browne-dark-bg);
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--browne-heading);
  margin: 0.4em 0;
}

.info-bar strong { margin-right: 0.25em; }

.info-bar .sep {
  color: var(--browne-boundary);
  user-select: none;
}

/* ── sample-card — bordered group card ───────────────────────── */
.sample-card {
  border: 1px solid var(--browne-boundary);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0.8em 0;
  background: var(--browne-parchment);
}

.sample-card > .sample-title {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--browne-heading);
  margin: 0 0 0.25em;
}

.sample-card > .sample-desc {
  font-size: 0.88em;
  color: var(--browne-words);
  margin: 0 0 0.6em;
}

/* ── vox — Three.js WebGL point-cloud / mesh viewport ────────── */
.vox {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--browne-boundary);
  border-radius: 6px;
  background: var(--browne-title);
  cursor: grab;
  touch-action: none;
}

.vox:active { cursor: grabbing; }

/* ── mcrender — Minecraft .litematic auto-viewer ───────────────── */
.mcrender {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--browne-boundary);
  border-radius: 6px;
  background: var(--browne-title);
}

.vcap {
  font-size: 0.82em;
  color: var(--browne-words);
  margin-bottom: 4px;
}

/* ── panel-card — bordered info card with key-value rows ────── */
.panel-card {
  border: 1.5px solid var(--browne-boundary);
  border-radius: 8px;
  padding: 15px 18px;
  background: var(--browne-parchment);
}

.panel-card .panel-title {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--browne-words);
  margin: 0 0 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--browne-dark-bg);
}

.panel-card p {
  margin: 0.3em 0;
  font-size: 0.93em;
  line-height: 1.55;
}

/* accent-a — var(--browne-highlight) crimson (most vivid) */
.panel-card-a { border-color: var(--browne-highlight); }
.panel-card-a .panel-title { color: var(--browne-highlight); }

/* accent-b — var(--browne-heading) dark brown (heading tone) */
.panel-card-b { border-color: var(--browne-heading); }
.panel-card-b .panel-title { color: var(--browne-heading); }

/* accent-c — var(--browne-words) medium brown (text tone) */
.panel-card-c { border-color: var(--browne-words); }
.panel-card-c .panel-title { color: var(--browne-words); }

/* ===== Collapsible <details> / <summary> markers ===== */
/* From: https://facelessuser.github.io/pymdown-extensions/extensions/details/ */

details[open] > summary::before {
  content: "\25BC";
}

details summary:focus {
  outline: none;
}

details summary::before {
  content: "\25B6";
  padding-right: 0.5em;
}

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

details {
  display: block;
  /* border: 1px solid #aaa;
  border-radius: 4px; */
  padding: .5em .5em 0;
  cursor: pointer;
}

summary {
  display: block;
  font-weight: bold;
  margin: -.5em -.5em 0;
  cursor: pointer;
}

details[open] {
  padding: .5em;
}

/* Keep recursively nested entries in the index at the root text size. */
.tree-page details,
.tree-page summary {
  font-size: 1rem;
}

/* Align file bullets and labels with sibling folder markers and labels. */
.tree-page > ul,
.tree-page details > ul {
  padding-left: 1.25em;
}

/* ── lead paragraph + pull quote ─────────────────────────────── */
.lead {
  font-size: 1.1em;
  line-height: 1.65;
}

.pull {
  border-left: 3px solid var(--browne-highlight);
  padding: 0.2em 0 0.2em 1em;
  margin: 1.3em 0;
  font-style: italic;
}

/* ── Chart.js box (figure.chart) ─────────────────────────────── */
/* base .chart above still applies; this overrides for canvas charts */
figure.chart {
  background: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 8px;
  padding: 1em;
  margin: 1.6em 0;
  text-align: center;
}

figure.chart canvas {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

figure.chart figcaption {
  text-align: left;
}

/* ── Mermaid pan/zoom diagram (figure.diagram) ───────────────── */
/* paired JS: /static/js/diagram.js (renders + wires svg-pan-zoom) */
figure.diagram {
  background: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 8px;
  padding: 0;
  margin: 1.6em 0;
  overflow: hidden;
}

.diagram-stage {
  position: relative;
  /* pre-render fallback; diagram.js sets the real height from diagram aspect */
  height: 240px;
  overflow: hidden;
  cursor: grab;
  background: var(--browne-title);
}

.diagram-stage:active {
  cursor: grabbing;
}

.diagram-stage .mermaid {
  margin: 0;
  padding: 0;
  height: 100%;
  background: none;
  border: none;
  overflow: visible;
}

.diagram-stage .mermaid svg {
  width: 100%;
  height: 100%;
  display: block;
}

.diagram-bar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.7em;
  border-top: 1px solid var(--browne-boundary);
  background: var(--browne-dark-bg);
}

.diagram-bar .hint {
  font-size: 0.8em;
  color: var(--browne-words);
  margin-right: auto;
}

.diagram-bar button {
  font-family: inherit;
  font-size: 0.85em;
  line-height: 1;
  padding: 0.35em 0.6em;
  min-width: 2em;
  cursor: pointer;
  color: var(--browne-heading);
  background: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 5px;
}

.diagram-bar button:hover {
  background: var(--browne-parchment);
}

figure.diagram:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

figure.diagram:fullscreen .diagram-stage {
  flex: 1;
  height: auto;
  max-height: none;
}

figure.diagram figcaption {
  padding: 0.6em 0.8em;
  color: var(--browne-words);
  font-size: 0.92em;
}

/* ── 88x31 badges ───────────────────────────────────────────── */
.badges-88x31 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.6em;
}

.badges-88x31 a img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}

.badge-add-yours {
  display: flex;
  align-items: center;
  height: 31px;
  font-size: 0.8em;
  opacity: 0.6;
}

/* Copyright on the left, palette on the right. */
.footer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

/* Footer palette. The markup is hidden by default, so it only appears on
   pages that load this stylesheet. */
.browne-palette {
  display: flex;
  gap: 4px;
}

/* Each chip gets a dashed frame as wide as the footer's cut line. */
.browne-swatch {
  position: relative;
  padding: 1px;
  border: 2px dashed var(--browne-boundary);
  border-radius: 4px;
}

/* Saturated accents sit apart from the neutral ramp. */
.browne-swatch:not(.accent) + .accent {
  margin-left: 8px;
}

.browne-swatch svg {
  display: block;
  width: 12px;
  height: 12px;
}

.browne-swatch:hover::after {
  content: attr(data-label);
  position: absolute;
  right: -2px;
  bottom: calc(100% + 6px);
  z-index: 1;
  padding: 2px 6px;
  white-space: nowrap;
  font-size: 0.8em;
  color: var(--browne-words);
  background: var(--browne-title);
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  pointer-events: none;
}

/* ── dyn-search — compact search input for dynamic sections ──── */
.dyn-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--browne-boundary);
  border-radius: 4px;
  background: var(--browne-parchment);
  color: var(--browne-button);
  font-size: small;
  margin-bottom: 8px;
  outline: none;
}
.dyn-search:focus { border-color: var(--browne-button); }

/* ── search-meta — result count line below a dyn-search ─────── */
.search-meta { font-size: 11px; color: var(--browne-words); margin: 2px 0 4px; min-height: 1em; }

/* ── pag — scrubber paginator ────────────────────────────────── */
.pag-nav { margin-top: 16px; user-select: none; }
.pag-track { position: relative; height: 28px; cursor: pointer; margin: 4px 0; }
.pag-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; margin-top: -2px; height: 4px; background: var(--browne-dark-bg); border-radius: 2px; pointer-events: none; transition: background 0.1s; }
.pag-track:hover::before { background: var(--browne-boundary); }
.pag-fill { position: absolute; left: 0; top: 50%; margin-top: -2px; height: 4px; background: var(--browne-button); pointer-events: none; border-radius: 2px; }
.pag-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--browne-button); pointer-events: none; transition: width 0.1s, height 0.1s; box-shadow: 0 0 0 2px var(--browne-parchment); }
.pag-track:hover .pag-thumb { width: 14px; height: 14px; }
.pag-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--browne-words); }
.pag-arr { color: var(--browne-button); text-decoration: none; font-size: 14px; margin-left: 16px; border-bottom: 1px solid var(--browne-boundary); padding-bottom: 1px; transition: color 0.1s, border-color 0.1s; }
.pag-arr:hover { color: var(--browne-highlight); border-color: var(--browne-highlight); }
.pag-arr.pag-dis { color: #C5B0A6; pointer-events: none; border-color: transparent; }

/* ── mu — music list row ─────────────────────────────────────── */
.mu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: small; }
.mu-left { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-title { color: var(--browne-button); }
.mu-date { font-size: 11px; flex-shrink: 0; margin-left: 12px; white-space: nowrap; }