@charset "UTF-8";
@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --screen-width {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --breakpoint-scale {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@property --inverse-breakpoint-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth !important;
  scroll-padding-top: 80px;
  overflow-x: clip;
}

/* * { border: solid red 1px; } */
html {
  font-size: 10px; /* Force root to 10px. Now 1rem ALWAYS equals 10px, regardless of OS scaling */
  /* more uniform text between mac/linux */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 599px) {
  body {
    --next-break-down: 0;
    --next-break-up: 599;
  }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
  body {
    --next-break-down: 600;
    --next-break-up: 1199;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1699px) {
  body {
    --next-break-down: 1200;
    --next-break-up: 1699;
  }
}
@media screen and (min-width: 1700px) and (max-width: 2279px) {
  body {
    --next-break-down: 1700;
    --next-break-up: 2279;
  }
}
@media screen and (min-width: 2280px) {
  body {
    --next-break-down: 2280;
    --next-break-up: 9999;
  }
}
body {
  font-size: 1.6rem; /* Reset body text to 16px (1.6 * 10) */
  line-height: 1;
  /* font-family: 'Barlow'; */
  font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --100vw: 100vw;
  --screen-width: tan(atan2(var(--100vw), 1px));
  --break-range: calc(var(--next-break-up) - var(--next-break-down));
  --breakpoint-scale: clamp(0, (var(--screen-width) - var(--next-break-down)) / var(--break-range), 1);
  --inverse-breakpoint-scale: calc(1 - var(--breakpoint-scale));
  --gutter: 4.4rem;
  --content-width: 130rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --feature-width: 10rem;
  --feature-max-width: 10rem;
  /* colors - Samurai Black/Red Theme */
  /* --layout-primary-rgb: 220, 20, 40; */
  --layout-primary-rgb: 188, 20, 37;
  --layout-primary: rgb(var(--layout-primary-rgb));
  --layout-light: #f5f5f5;
  --layout-dark: #0c0c0c;
  --layout-less-light: #eef5f8;
  --layout-less-dark: #2d2e31;
  --action-100: #ff6b6b;
  --action-300: #ff4444;
  --action-500: #DC143C;
  --action-700: #B22222;
  --action-900: #8B0000;
  --success: #4caf50;
  --error: #ff1744;
  --disabled-light: #666666;
  --disabled-dark: #333333;
  /* font-sizes */
  --font-line-gap-ratio: .7;
  --prose-paragraph-gap-ratio: .7; /* multiplied with lineheight */
  /* font metrics (barlow; TODO: get from font automatically) */
  --font-cap-height-ratio: .7;
  --font-ascender-height-ratio: 1;
  --font-descender-height-ratio: .2;
  --font-height: calc(var(--font-ascender-height-ratio) + var(--font-descender-height-ratio));
  --font-line-height-ratio: calc(var(--font-cap-height-ratio) + var(--font-line-gap-ratio));
  --font-size-top-fix-ratio: 0;
  --font-size-top-fix-ratio: calc(calc(var(--font-ascender-height-ratio) - var(--font-cap-height-ratio)) + calc(var(--font-line-gap-ratio) / 2));
  --font-size-top-fix-ratio: calc(var(--font-ascender-height-ratio) - var(--font-cap-height-ratio));
  --font-size-bottom-fix-ratio: 0;
  --font-size-bottom-fix-ratio: calc(var(--font-descender-height-ratio) + calc(var(--font-line-gap-ratio) / 2));
  --font-size-bottom-fix-ratio: var(--font-descender-height-ratio);
  --font-size-top-fix-sm: calc(calc(var(--font-size-sm) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-sm: calc(var(--font-size-sm) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-base: calc(calc(var(--font-size-base) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-base: calc(var(--font-size-base) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-lg: calc(calc(var(--font-size-lg) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-lg: calc(var(--font-size-lg) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-xl: calc(calc(var(--font-size-xl) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-xl: calc(var(--font-size-xl) * var(--font-size-bottom-fix-ratio));
  /* focus */
  --focus-color: var(--action-500);
  --focus-width: 0.2rem;
  --focus-offset: 0.25em;
}

@media screen and (min-width: 768px) {
  body {
    /* font-sizes */
    --font-size-sm: 2.0rem;
    --font-size-base: 2.2rem;
    --font-size-lg: 4.0rem;
    --font-size-xl: 4.8rem;
  }
}
@media screen and (max-width: 768px) {
  body {
    --gutter: 2.4rem;
    /* font-sizes */
    --font-size-sm: 2.0rem;
    --font-size-base: 2.2rem;
    --font-size-lg: 3.0rem;
    --font-size-xl: 4.8rem;
  }
}
body > * {
  --font-size: var(--font-size-base);
}

/* tailwind extension */
.text-sm {
  --font-size: var(--font-size-sm);
}

.text-base {
  --font-size: var(--font-size-base);
}

.text-lg {
  --font-size: var(--font-size-lg);
}

.text-xl {
  --font-size: var(--font-size-xl);
}

/* elements */
p,
span,
strong,
em,
i,
b,
a,
button,
input[type=submit],
input[type=reset],
input[type=button],
input[type=text],
input[type=email],
input[type=password],
textarea {
  font-size: var(--font-size);
  line-height: var(--font-line-height-ratio);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  hyphens: auto;
}

p {
  text-wrap: pretty;
  hyphens: auto;
}

hr {
  margin-top: calc(var(--gutter) / 2);
  margin-bottom: calc(var(--gutter) / 2);
}

ul {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--action-500);
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}

a:has(> img) {
  display: contents;
  text-decoration: none;
}

a:has(> img)::before,
a:has(> img)::after {
  content: none !important;
}

a:hover {
  color: var(--action-700);
}

a:active {
  color: var(--action-900);
}

button,
.button,
a.button,
input[type=submit] {
  --btn-background: var(--action-500);
  --btn-text-color: white;
  --btn-border-width: unset;
  --btn-border-color: unset;
  --btn-border-style: unset;
  --btn-border-radius: .25rem;
  --btn-padding: 1rem 2.5rem;
  --btn-font-weight: 600;
  --btn-box-shadow: unset;
  cursor: pointer;
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-color: var(--btn-border-color);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--btn-box-shadow);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
  /* Default tone: primary */
}
button:not([data-tone]), button[data-tone=primary],
.button:not([data-tone]),
.button[data-tone=primary],
a.button:not([data-tone]),
a.button[data-tone=primary],
input[type=submit]:not([data-tone]),
input[type=submit][data-tone=primary] {
  --btn-primary-color: var(--action-500);
  --btn-accent-color: var(--layout-light);
}
button[data-tone=dark],
.button[data-tone=dark],
a.button[data-tone=dark],
input[type=submit][data-tone=dark] {
  --btn-primary-color: var(--layout-dark);
  --btn-accent-color: var(--layout-primary);
}
button[data-tone=light],
.button[data-tone=light],
a.button[data-tone=light],
input[type=submit][data-tone=light] {
  --btn-primary-color: var(--layout-light);
  --btn-accent-color: var(--layout-primary);
}
button,
.button,
a.button,
input[type=submit] {
  /* Default type: filled */
}
button:not([data-type]), button[data-type=filled],
.button:not([data-type]),
.button[data-type=filled],
a.button:not([data-type]),
a.button[data-type=filled],
input[type=submit]:not([data-type]),
input[type=submit][data-type=filled] {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  --btn-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-border-color: var(--btn-primary-color);
}
button:not([data-type]):hover, button[data-type=filled]:hover,
.button:not([data-type]):hover,
.button[data-type=filled]:hover,
a.button:not([data-type]):hover,
a.button[data-type=filled]:hover,
input[type=submit]:not([data-type]):hover,
input[type=submit][data-type=filled]:hover {
  --btn-background: transparent;
  --btn-text-color: var(--btn-primary-color);
  --btn-box-shadow: unset;
}
button:not([data-type]):active, button[data-type=filled]:active,
.button:not([data-type]):active,
.button[data-type=filled]:active,
a.button:not([data-type]):active,
a.button[data-type=filled]:active,
input[type=submit]:not([data-type]):active,
input[type=submit][data-type=filled]:active {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  filter: brightness(0.8);
}
button:not([data-type]):disabled, button[data-type=filled]:disabled,
.button:not([data-type]):disabled,
.button[data-type=filled]:disabled,
a.button:not([data-type]):disabled,
a.button[data-type=filled]:disabled,
input[type=submit]:not([data-type]):disabled,
input[type=submit][data-type=filled]:disabled {
  --btn-background: var(--disabled-dark);
  --btn-text-color: var(--disabled-light);
  --btn-border-color: var(--disabled-dark);
  filter: none;
  cursor: not-allowed;
}
button,
.button,
a.button,
input[type=submit] {
  /* Outline type */
}
button[data-type=outline],
.button[data-type=outline],
a.button[data-type=outline],
input[type=submit][data-type=outline] {
  --btn-background: transparent;
  --btn-border-color: var(--btn-primary-color);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-text-color: var(--btn-primary-color);
  --btn-font-weight: bold;
  --btn-box-shadow: unset;
}
button[data-type=outline]:hover,
.button[data-type=outline]:hover,
a.button[data-type=outline]:hover,
input[type=submit][data-type=outline]:hover {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
}
button[data-type=outline]:active,
.button[data-type=outline]:active,
a.button[data-type=outline]:active,
input[type=submit][data-type=outline]:active {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  filter: brightness(0.8);
}
button[data-type=outline]:disabled,
.button[data-type=outline]:disabled,
a.button[data-type=outline]:disabled,
input[type=submit][data-type=outline]:disabled {
  --btn-background: transparent;
  --btn-border-color: var(--disabled-dark);
  --btn-text-color: var(--disabled-dark);
  filter: none;
  cursor: not-allowed;
}
button:hover,
.button:hover,
a.button:hover,
input[type=submit]:hover {
  transform: translateY(-3px);
}

h1 {
  --font-size: var(--font-size-xl);
  font-size: var(--font-size-xl);
  font-weight: bold;
}

h2 {
  --font-size: var(--font-size-lg);
  font-size: var(--font-size-lg);
  font-weight: bold;
}

h3 {
  --font-size: calc(var(--font-size-lg) * 0.7);
  font-size: calc(var(--font-size-lg) * 0.7);
  font-weight: bold;
}

h4,
h5,
h6 {
  --font-size: var(--font-size-base);
  font-size: var(--font-size-base);
  font-weight: bold;
}

::selection {
  background: var(--action-100);
  color: white;
}

/* util */
:where(main.page > section) {
  padding: var(--gutter) 0;
}

.section--light {
  background: var(--layout-light);
  color: var(--layout-dark);
}

.section--dark {
  background: var(--layout-dark);
  color: var(--layout-light);
}

.content-grid {
  --full: minmax(var(--gutter), 1fr);
  padding-inline: 0;
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end];
}

.content-grid > :not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe),
.content-grid > .prose-contents > :not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe) {
  width: 100%;
}

.content-grid > :where(:not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe)),
.content-grid > .prose-contents > :where(:not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe)) {
  grid-column: content;
}

.content--feature {
  grid-column: feature;
}

.content--feature-max {
  grid-column: feature-max;
}

.content--full {
  grid-column: full;
}

.content--full-safe {
  grid-column: full;
  padding-inline: var(--gutter);
}

.content-grid:where(.content--full-safe) {
  padding-inline: var(--gutter);
}

:is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  width: 100% !important;
  max-width: 100%;
}

.clickable-parent:not(a) {
  position: static;
}

.clickable-parent:not(a) a {
  position: static;
}

.clickable-parent:not(a) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

a.clickable-parent {
  position: static;
}

a.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

.focus-parent:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--shadow:focus-within {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.focus-parent--shadow :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--outline:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent--outline :focus {
  outline: none !important;
  box-shadow: none !important;
}

:focus-visible {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

.prose {
  font-size: var(--font-size);
  line-height: var(--font-line-height-ratio);
  text-wrap: pretty;
}
.prose-contents {
  display: contents;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-bottom: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio));
  text-wrap: balance;
}
.prose h1:nth-child(n+2), .prose h2:nth-child(n+2), .prose h3:nth-child(n+2), .prose h4:nth-child(n+2), .prose h5:nth-child(n+2), .prose h6:nth-child(n+2) {
  margin-top: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio) * 2);
}
.prose p + p {
  margin-top: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio));
}
.prose {
  /* Container for responsiveness (Recommended) */
}
.prose .table-container {
  overflow-x: auto;
}
.prose p + .table-container {
  margin-top: calc(var(--gutter) / 2);
}
.prose .table-container + p {
  margin-top: calc(var(--gutter) / 2);
}
.prose {
  /* The Table */
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 2rem;
  line-height: 1.5;
}
.prose {
  /* Header Cells */
}
.prose thead th {
  font-weight: 600;
  color: #111827; /* Darker text for headers */
  border-bottom: 2px solid #e5e7eb; /* Thicker line under header */
  padding: 0.75rem 1rem;
  background-color: #f9fafb; /* Very subtle grey background */
}
.prose {
  /* Body Cells */
}
.prose tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151; /* Standard body text color */
  vertical-align: top;
}
.prose {
  /* Zebra Striping (Optional) */
}
.prose tbody tr:nth-child(even) {
  background-color: #fcfcfd;
}
.prose {
  /* Hover effect for better tracking */
}
.prose tbody tr:hover {
  background-color: rgba(var(--layout-primary-rgb), 0.05);
  transition: background-color 0.2s ease;
}
.prose {
  /* First and Last Column Padding Adjustment */
}
.prose th:first-child,
.prose td:first-child {
  padding-left: 0;
}
.prose th:last-child,
.prose td:last-child {
  padding-right: 0;
}
.prose ul, .prose ol {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.prose ol {
  list-style-type: decimal;
  margin-left: 2.5rem;
}
.prose ul {
  list-style-type: disc;
  margin-left: 2.5rem;
}
.prose ul ul {
  list-style-type: circle;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.prose blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
}
.prose blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
.prose blockquote p {
  display: inline;
}

body:has(dialog[open]) {
  overflow: hidden;
}
body:has(dialog[open]) > *:not(dialog) {
  pointer-events: none;
}

.hash-prefix::before {
  content: "# ";
  color: var(--layout-primary);
}

details.prose_toggle {
  margin-block: 0.5rem;
  padding-block: 0.5rem;
}
details.prose_toggle summary {
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  cursor: pointer;
  font-weight: bold;
}
details.prose_toggle > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--font-line-gap-ratio) * var(--font-size));
  margin-top: 15px;
  margin-left: 2px;
  padding-left: 15px;
  border-left: solid var(--layout-primary) 4px;
}
details.prose_toggle {
  /* Rotate the line when open */
}
details.prose_toggle[open] summary::after {
  transform: rotate(0deg);
}