@import url("https://fonts.cdnfonts.com/css/jetbrains-mono-2");

/* Eric Meyer's Reset CSS v2.0 | 20110126 | Public Domain */
/* Source: http://meyerweb.com/eric/tools/css/reset/ */
/* Modified by Cameron K. Brooks, June 2025 */

/* Reset box model, font inheritance, and vertical alignment */
html, body, div, span, applet, object, iframe,			/* structure */
h1, h2, h3, h4, h5, h6, p, blockquote, pre,				/* text blocks */
a, abbr, acronym, address, big, cite, code,				/* inline/semantic */
del, dfn, em, img, ins, kbd, q, s, samp,				/* inline/semantic */
small, strike, strong, sub, sup, tt, var,				/* inline/semantic */
b, u, i, center,										/* inline/legacy */
dl, dt, dd, ol, ul, li,									/* lists */
fieldset, form, label, legend,							/* forms */
table, caption, tbody, tfoot, thead, tr, th, td,		/* tables */
article, aside, canvas, details, embed,					/* HTML5/media */
figure, figcaption, footer, header, hgroup,				/* HTML5 layout */
menu, nav, output, ruby, section, summary,				/* HTML5 layout */
time, mark, audio, video                               /* HTML5/media */ {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Ensure HTML5 elements render correctly in older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Set base line height */
body {
  line-height: 1;
}

/* Remove list bullets and indentation */
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove quote styles */
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

/* Normalize table layout */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --font-family: "JetBrains Mono", monospace;
  --line-height: 1.2rem;
  --border-thickness: 2px;
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;

  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 800;

  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --text-color-alt: #aaa;
    --background-color: #000;
    --background-color-alt: #111;
  }
}

* {
  box-sizing: border-box;
}

* + * {
  margin-top: var(--line-height);
}

html {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  background: var(--background-color);
  color: var(--text-color);
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--line-height) 2ch;
  max-width: calc(min(80ch, round(down, 100%, 1ch)));
  line-height: var(--line-height);
  overflow-x: hidden;
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }
  body {
    padding: var(--line-height) 1ch;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
  line-height: var(--line-height);
}

h1 {
  font-size: 2rem;
  line-height: calc(2 * var(--line-height));
  margin-bottom: calc(var(--line-height) * 2);
  text-transform: uppercase;
}
h2 {
  font-size: 1rem;
  text-transform: uppercase;
}

hr {
  position: relative;
  display: block;
  height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0;
  border: none;
  color: var(--text-color);
}
hr:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(var(--line-height) / 2 - var(--border-thickness));
  left: 0;
  width: 100%;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  height: 0;
}

a {
  text-decoration-thickness: var(--border-thickness);
}

a:link,
a:visited {
  color: var(--text-color);
}

p {
  margin-bottom: var(--line-height);
}

strong {
  font-weight: var(--font-weight-bold);
}
em {
  font-style: italic;
}

sub {
  position: relative;
  display: inline-block;
  margin: 0;
  vertical-align: sub;
  line-height: 0;
  width: calc(1ch / 0.75);
  font-size: 0.75rem;
}

table {
  position: relative;
  top: calc(var(--line-height) / 2);
  width: calc(round(down, 100%, 1ch));
  border-collapse: collapse;
  margin: 0 0 calc(var(--line-height) * 2);
}

th,
td {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc((var(--line-height) / 2))
    calc(1ch - var(--border-thickness) / 2)
    calc((var(--line-height) / 2) - (var(--border-thickness)));
  line-height: var(--line-height);
  vertical-align: top;
  text-align: left;
}
table tbody tr:first-child > * {
  padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
}

th {
  font-weight: 700;
}
.width-min {
  width: 0%;
}
.width-auto {
  width: 100%;
}

.header {
  margin-bottom: calc(var(--line-height) * 2);
}
.header h1 {
  margin: 0;
}
.header tr td:last-child {
  text-align: right;
}

p {
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

img,
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
img {
  font-style: italic;
  color: var(--text-color-alt);
}

details {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin-bottom: var(--line-height);
}

summary {
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
details[open] summary {
  margin-bottom: var(--line-height);
}

details ::marker {
  display: inline-block;
  content: "▶";
  margin: 0;
}
details[open] ::marker {
  content: "▼";
}

details :last-child {
  margin-bottom: 0;
}

pre {
  white-space: pre;
  overflow-x: auto;
  margin: var(--line-height) 0;
  overflow-y: hidden;
}
figure pre {
  margin: 0;
}

pre,
code {
  font-family: var(--font-family);
}

code {
  font-weight: var(--font-weight-medium);
}

figure {
  margin: calc(var(--line-height) * 2) 3ch;
  overflow-x: auto;
  overflow-y: hidden;
}

figcaption {
  display: block;
  font-style: italic;
  margin-top: var(--line-height);
}

ul,
ol {
  padding: 0;
  margin: 0 0 var(--line-height);
}

ul {
  list-style-type: square;
  padding: 0 0 0 2ch;
}
ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}
ol ul,
ol ol,
ul ol,
ul ul {
  padding: 0 0 0 3ch;
  margin: 0;
}
ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: var(--font-weight-medium);
}

li {
  margin: 0;
  padding: 0;
}

li::marker {
  line-height: 0;
}

::-webkit-scrollbar {
  height: var(--line-height);
}

input,
button,
textarea {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness))
    calc(1ch - var(--border-thickness));
  margin: 0;
  font: inherit;
  font-weight: inherit;
  height: calc(var(--line-height) * 2);
  width: auto;
  overflow: visible;
  background: var(--background-color);
  color: var(--text-color);
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-grid;
  place-content: center;
  vertical-align: top;
  width: 2ch;
  height: var(--line-height);
  cursor: pointer;
}
input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
  content: "";
  width: 1ch;
  height: calc(var(--line-height) / 2);
  background: var(--text-color);
}
input[type="radio"],
input[type="radio"]:before {
  border-radius: 100%;
}

button:focus,
input:focus {
  --border-thickness: 3px;
  outline: none;
}

input {
  width: calc(round(down, 100%, 1ch));
}
::placeholder {
  color: var(--text-color-alt);
  opacity: 1;
}
::-ms-input-placeholder {
  color: var(--text-color-alt);
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button {
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

button:hover {
  background: var(--background-color-alt);
}
button:active {
  transform: translate(2px, 2px);
}

label {
  display: block;
  width: calc(round(down, 100%, 1ch));
  height: auto;
  line-height: var(--line-height);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

label input {
  width: 100%;
}

.tree,
.tree ul {
  position: relative;
  padding-left: 0;
  list-style-type: none;
  line-height: var(--line-height);
}
.tree ul {
  margin: 0;
}
.tree ul li {
  position: relative;
  padding-left: 1.5ch;
  margin-left: 1.5ch;
  border-left: var(--border-thickness) solid var(--text-color);
}
.tree ul li:before {
  position: absolute;
  display: block;
  top: calc(var(--line-height) / 2);
  left: 0;
  content: "";
  width: 1ch;
  border-bottom: var(--border-thickness) solid var(--text-color);
}
.tree ul li:last-child {
  border-left: none;
}
.tree ul li:last-child:after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  content: "";
  height: calc(var(--line-height) / 2);
  border-left: var(--border-thickness) solid var(--text-color);
}

/* ========== NEW ========== */
select {
  font: inherit;
  font-weight: inherit;
  color: var(--text-color);
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness)) 1ch;
  height: calc(var(--line-height) * 2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      var(--text-color) 50%
    ),
    linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
  background-position: calc(100% - 1.5ch) calc(50% - 0.25ch),
    calc(100% - 1ch) calc(50% - 0.25ch);
  background-size: 0.5ch 0.5ch, 0.5ch 0.5ch;
  background-repeat: no-repeat;
  padding-right: 3ch;
  cursor: pointer;
}

select:focus {
  --border-thickness: 3px;
  outline: none;
}

option {
  background-color: var(--background-color);
  color: var(--text-color);
}
/* ========== NEW ========== */

.grid {
  --grid-cells: 0;
  display: flex;
  gap: 1ch;
  width: calc(
    round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1))
  );
  margin-bottom: var(--line-height);
}

.grid > *,
.grid > input {
  flex: 0 0
    calc(
      round(
        down,
        (100% - (1ch * (var(--grid-cells) - 1))) / var(--grid-cells),
        1ch
      )
    );
}
.grid:has(> :last-child:nth-child(1)) {
  --grid-cells: 1;
}
.grid:has(> :last-child:nth-child(2)) {
  --grid-cells: 2;
}
.grid:has(> :last-child:nth-child(3)) {
  --grid-cells: 3;
}
.grid:has(> :last-child:nth-child(4)) {
  --grid-cells: 4;
}
.grid:has(> :last-child:nth-child(5)) {
  --grid-cells: 5;
}
.grid:has(> :last-child:nth-child(6)) {
  --grid-cells: 6;
}
.grid:has(> :last-child:nth-child(7)) {
  --grid-cells: 7;
}
.grid:has(> :last-child:nth-child(8)) {
  --grid-cells: 8;
}
.grid:has(> :last-child:nth-child(9)) {
  --grid-cells: 9;
}

/* DEBUG UTILITIES */

.debug .debug-grid {
  --color: color-mix(
    in srgb,
    var(--text-color) 10%,
    var(--background-color) 90%
  );
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
      var(--color) 0 1px,
      transparent 1px 100%
    ),
    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
  background-size: 1ch var(--line-height);
  margin: 0;
}

.debug .off-grid {
  background: rgba(255, 0, 0, 0.1);
}

.debug-toggle-label {
  text-align: right;
}

/* ========== Flavour Overrides (Light + Dark Mode) ========== */

[data-theme="rose"] {
  --background-color:     #fff0f5;
  --background-color-alt: #ffe5ee;
  --text-color:           #550a2a;
  --text-color-alt:       #a02040;
}

@media (prefers-color-scheme: dark) {
  [data-theme="rose"] {
    --background-color:     #3b0a24;
    --background-color-alt: #4d122c;
    --text-color:           #ffe5ee;
    --text-color-alt:       #ffb6c1;
  }
}

[data-theme="ocean"] {
  --background-color:     #f0fcff;
  --background-color-alt: #e0f9ff;
  --text-color:           #00475d;
  --text-color-alt:       #007c96;
}

@media (prefers-color-scheme: dark) {
  [data-theme="ocean"] {
    --background-color:     #002933;
    --background-color-alt: #003a47;
    --text-color:           #e0f9ff;
    --text-color-alt:       #90dffa;
  }
}

[data-theme="forest"] {
  --background-color:     #f3fff0;
  --background-color-alt: #ecffeb;
  --text-color:           #2a4f2a;
  --text-color-alt:       #4f7f4f;
}

@media (prefers-color-scheme: dark) {
  [data-theme="forest"] {
    --background-color:     #1a2e1a;
    --background-color-alt: #243f24;
    --text-color:           #d6f5d6;
    --text-color-alt:       #a4d4a4;
  }
}

[data-theme="desert"] {
  --background-color:     #faf3d7;
  --background-color-alt: #f5e8b8;
  --text-color:           #8b6d1f;
  --text-color-alt:       #b98a00;
}

@media (prefers-color-scheme: dark) {
  [data-theme="desert"] {
    --background-color:     #3f351f;
    --background-color-alt: #5a4a2a;
    --text-color:           #f5e8b8;
    --text-color-alt:       #efd08f;
  }
}

[data-theme="sepia"] {
  --background-color:     #f4ece2;
  --background-color-alt: #e8d9c5;
  --text-color:           #5d3a1a;
  --text-color-alt:       #8b5a2b;
}

@media (prefers-color-scheme: dark) {
  [data-theme="sepia"] {
    --background-color:     #392b24;
    --background-color-alt: #4f3b32;
    --text-color:           #e8d9c5;
    --text-color-alt:       #cbb3a3;
  }
}

[data-theme="twilight"] {
  --background-color:     #f0f0ff;
  --background-color-alt: #e8e8ff;
  --text-color:           #2a2a5b;
  --text-color-alt:       #4f4fa3;
}

@media (prefers-color-scheme: dark) {
  [data-theme="twilight"] {
    --background-color:     #1e1e3a;
    --background-color-alt: #2a2a4f;
    --text-color:           #e0d8ff;
    --text-color-alt:       #bfb3ff;
  }
}

[data-theme="glacier"] {
  --background-color:     #f4fbff;
  --background-color-alt: #e6f7fd;
  --text-color:           #003344;
  --text-color-alt:       #005566;
}

@media (prefers-color-scheme: dark) {
  [data-theme="glacier"] {
    --background-color:     #0d1a1f;
    --background-color-alt: #1a2d33;
    --text-color:           #ccf2ff;
    --text-color-alt:       #99e0f2;
  }
}

[data-theme="clay"] {
  --background-color:     #f8ebe4;
  --background-color-alt: #e6c8ba;
  --text-color:           #8b453f;
  --text-color-alt:       #b66e63;
}

@media (prefers-color-scheme: dark) {
  [data-theme="clay"] {
    --background-color:     #3b2e2a;
    --background-color-alt: #513f3c;
    --text-color:           #e6c8ba;
    --text-color-alt:       #d0a49d;
  }
}

[data-theme="midnight"] {
  --background-color:     #111622;
  --background-color-alt: #1a1f2f;
  --text-color:           #d0d8ff;
  --text-color-alt:       #a0b0e0;
}

@media (prefers-color-scheme: dark) {
  [data-theme="midnight"] {
    --background-color:     #0a0f18;
    --background-color-alt: #141a29;
    --text-color:           #d0d8ff;
    --text-color-alt:       #a0b0e0;
  }
}

[data-theme="sandstone"] {
  --background-color:     #fbede2;
  --background-color-alt: #f1d2c4;
  --text-color:           #a34f3e;
  --text-color-alt:       #c96b54;
}

@media (prefers-color-scheme: dark) {
  [data-theme="sandstone"] {
    --background-color:     #3a2b27;
    --background-color-alt: #513f3b;
    --text-color:           #f1d2c4;
    --text-color-alt:       #d8ac9e;
  }
}

[data-theme="coral"] {
  --background-color:     #fff5f0;
  --background-color-alt: #ffe6dc;
  --text-color:           #d1443c;
  --text-color-alt:       #e65a49;
}

@media (prefers-color-scheme: dark) {
  [data-theme="coral"] {
    --background-color:     #4b1e16;
    --background-color-alt: #5c2a21;
    --text-color:           #ffe6dc;
    --text-color-alt:       #ffb8aa;
  }
}

[data-theme="mint"] {
  --background-color:     #f0fff4;
  --background-color-alt: #e0ffea;
  --text-color:           #1f5d40;
  --text-color-alt:       #3a8f6b;
}

@media (prefers-color-scheme: dark) {
  [data-theme="mint"] {
    --background-color:     #1a2a1e;
    --background-color-alt: #243a27;
    --text-color:           #e0ffea;
    --text-color-alt:       #a0d2ac;
  }
}

[data-theme="mauve"] {
  --background-color:     #faf5ff;
  --background-color-alt: #f1eaff;
  --text-color:           #5b2a5b;
  --text-color-alt:       #7f4f7f;
}

@media (prefers-color-scheme: dark) {
  [data-theme="mauve"] {
    --background-color:     #2e1e2e;
    --background-color-alt: #3c2a3c;
    --text-color:           #f1eaff;
    --text-color-alt:       #d6b3d6;
  }
}

[data-theme="slate"] {
  --background-color:     #f4f6f8;
  --background-color-alt: #e6e9ed;
  --text-color:           #2e3a47;
  --text-color-alt:       #48535f;
}

@media (prefers-color-scheme: dark) {
  [data-theme="slate"] {
    --background-color:     #181f24;
    --background-color-alt: #242c31;
    --text-color:           #e6e9ed;
    --text-color-alt:       #b0b6bb;
  }
}

[data-theme="honey"] {
  --background-color:     #fff9e6;
  --background-color-alt: #fff3cc;
  --text-color:           #7f5900;
  --text-color-alt:       #a36f0a;
}

@media (prefers-color-scheme: dark) {
  [data-theme="honey"] {
    --background-color:     #3a2d14;
    --background-color-alt: #503f1c;
    --text-color:           #fff3cc;
    --text-color-alt:       #ffe599;
  }
}

[data-theme="rust"] {
  --background-color:     #fff0ea;
  --background-color-alt: #ffdacf;
  --text-color:           #8b2e0f;
  --text-color-alt:       #b34718;
}

@media (prefers-color-scheme: dark) {
  [data-theme="rust"] {
    --background-color:     #2f1a15;
    --background-color-alt: #422a23;
    --text-color:           #ffdacf;
    --text-color-alt:       #ffb699;
  }
}

[data-theme="dracula"] {
  --background-color:     #f8f8f2;
  --background-color-alt: #e8e8dc;
  --text-color:           #282a36;
  --text-color-alt:       #44475a;
}

@media (prefers-color-scheme: dark) {
  [data-theme="dracula"] {
    --background-color:     #282a36;
    --background-color-alt: #373a4f;
    --text-color:           #f8f8f2;
    --text-color-alt:       #bd93f9;
  }
}

[data-theme="solarized"] {
  --background-color:     #fdf6e3;
  --background-color-alt: #eee8d5;
  --text-color:           #657b83;
  --text-color-alt:       #586e75;
}

@media (prefers-color-scheme: dark) {
  [data-theme="solarized"] {
    --background-color:     #002b36;
    --background-color-alt: #073642;
    --text-color:           #fdf6e3;
    --text-color-alt:       #93a1a1;
  }
}

[data-theme="monokai"] {
  --background-color:     #f5f5f5;
  --background-color-alt: #e8e8e8;
  --text-color:           #272822;
  --text-color-alt:       #75715e;
}

@media (prefers-color-scheme: dark) {
  [data-theme="monokai"] {
    --background-color:     #272822;
    --background-color-alt: #3e3d32;
    --text-color:           #f8f8f2;
    --text-color-alt:       #f92672;
  }
}

[data-theme="gruvbox"] {
  --background-color:     #fbf1c7;
  --background-color-alt: #f9f5d7;
  --text-color:           #3c3836;
  --text-color-alt:       #504945;
}

@media (prefers-color-scheme: dark) {
  [data-theme="gruvbox"] {
    --background-color:     #282828;
    --background-color-alt: #32302f;
    --text-color:           #ebdbb2;
    --text-color-alt:       #d5c4a1;
  }
}

[data-theme="nord"] {
  --background-color:     #eceff4;
  --background-color-alt: #e5e9f0;
  --text-color:           #2e3440;
  --text-color-alt:       #4c566a;
}

@media (prefers-color-scheme: dark) {
  [data-theme="nord"] {
    --background-color:     #2e3440;
    --background-color-alt: #3b4252;
    --text-color:           #d8dee9;
    --text-color-alt:       #e5e9f0;
  }
}

[data-theme="one-dark"] {
  --background-color:     #fafafa;
  --background-color-alt: #f0f0f0;
  --text-color:           #383a42;
  --text-color-alt:       #525358;
}

@media (prefers-color-scheme: dark) {
  [data-theme="one-dark"] {
    --background-color:     #282c34;
    --background-color-alt: #353b45;
    --text-color:           #abb2bf;
    --text-color-alt:       #cad3e0;
  }
}

[data-theme="palenight"] {
  --background-color:     #f5f2fa;
  --background-color-alt: #ebe8f5;
  --text-color:           #4a4563;
  --text-color-alt:       #6c678e;
}

@media (prefers-color-scheme: dark) {
  [data-theme="palenight"] {
    --background-color:     #292d3e;
    --background-color-alt: #444267;
    --text-color:           #e0def4;
    --text-color-alt:       #c3bef0;
  }
}

[data-theme="terminal"] {
  --background-color:     #000000;
  --background-color-alt: #001100;
  --text-color:           #00ff00;
  --text-color-alt:       #66ff66;
}

@media (prefers-color-scheme: dark) {
  [data-theme="terminal"] {
    --background-color:     #000000;
    --background-color-alt: #001100;
    --text-color:           #00ff00;
    --text-color-alt:       #66ff66;
  }
}