@font-face{
  font-family:"Departure Mono";
  src: url('fonts/DepartureMono-Regular.woff2') format('woff2');
}

:root {
  --font-family: "Departure Mono";
  --border-thickness: 0;
  --text-color: #9fa199;
  --background-color: #2a2b26;
  --background-color-alt: #343630;
  --inverseforeground: #505050;
  --font-weight: 500;
  --uppercase:uppercase;
  --font-size:11px;
  font-family: var(--font-family);
  font-optical-sizing: none;
  font-weight: var(--font-weight);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--font-size);
  line-height:1;
  letter-spacing:0;
  vertical-align:baseline;
  font-synthesis:none;
  -webkit-font-smoothing : none;
  shape-rendering:crispEdges;
  text-rendering: optimizeSpeed;
  font-smooth:never;
}

.force-transform {
    transform: translateX(0) translateZ(0) !important;
}
.force-transform-even {
    transform: translateZ(1) !important; /* For even width */
}

/* THRESHOLD FILTER */
.bossmode, p, h2, .version, textarea, button, .marquee-container, .window-contents, textarea:focus, summary, .ascii {
  filter: url(#threshold);
}

.bossmode{
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

#video-wrapper {
    /* Initial small, centered state */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color-alt); /* Background for the button area */
    aspect-ratio: 48 / 9;

    /* The magic of the smooth transition */
    transition: aspect-ratio 0.6s;
}

#video-wrapper.expanded {
    /* max-height should match the 16:9 ratio (800 / 16 * 9 = 450) */
    aspect-ratio: 16 / 9;
    background-color: black;
    /* Use aspect-ratio for perfect scaling (only supported by modern browsers) */
}

#watch-button {
    cursor: pointer;
    border: none;
    background-color: var(--background-color-alt);
    color: var(--text-color);
    /* Ensure the button is also styled to transition its display property smoothly (optional) */
    opacity: 1;
    transition: opacity 0.4s;
}

#demo-video {
  width:100%;
}

#video-wrapper.expanded #watch-button {
    /* Hide the button when expanded */
    display: none;
    opacity: 0;
}

#fake-window {
  position: fixed;
  top: 20%;
  left: 30%;
  width: 27ch;
  background-color: var(--background-color-alt);
  padding: 0;
  border: 1px solid var(--text-color);
  padding:2px;
  /* box-shadow: 0px 0px 1px var(--background-color); */
  z-index: 1000;
  font-family: var(--font-family);
  display: none; /* Initially hidden */
}

#fake-window-titlebar {
  background-color: var(--text-color);
  color: var(--inverseforeground);
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;  /* Suggesting that it might be draggable */
  user-select: none;
  text-shadow: 0 0 0px white !important;
}

#fake-window-controls {
  display: flex;
  gap: 0.5rem;
  text-shadow: 0 0 0px white !important;
  color: var(--inverseforeground);
}

.fake-window-btn {
  padding: 0 5px;
  cursor: pointer;
  text-shadow: 0 0 0px white !important;
  color: var(--inverseforeground);
}

@keyframes flash-overlay {
  0% {
    background-color: var(--text-color);
    color: rgba(0, 0, 0, 0);
  }
  25% {
    background-color: var(--background-color);
    color: rgba(0, 0, 0, 0);
  }
  50% {
    background-color: var(--text-color);
    color: rgba(0, 0, 0, 0);
  }
  75% {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  100% {
    background-color: var(--background-color-alt);
    color: var(--text-color);
  }
}

#fake-window.flash-animation {
  animation: flash-overlay 0.08s steps(1, end);
}

#fake-window.flash-animation #fake-window-titlebar {
  background-color: inherit; /* Inherit from parent animation */
  color: inherit;
  text-shadow: 0 0 0px currentColor;
}

#fake-window.flash-animation #fake-window-content {
  color: inherit;
  text-shadow: 0 0 0px currentColor;
}

#fake-window.flash-animation .fake-window-btn {
  color: inherit;
}

.flash-animation {
  animation: flash-overlay 1s steps(1, end);
}

#fake-window-controls .fake-window-btn:hover {
  background-color: var(--background-color-alt);
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

#fake-window-content {
  padding: 10px;
}

/*.scrambling {
  text-shadow: 0 0 0px var !important;
}*/

.marquee-content,
.marquee-cotainer {
  display: inline-block;
  white-space: pre; /* This is crucial for preserving spaces */
  font-family: var(--font-family); /* Should match your measurement font */
}

::selection {
  background: var(--text-color); 
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

::-moz-selection {
  background: var(--text-color); 
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

span.subtitle::selection,
span.title::selection,
h1.title::selection,
h2.title::selection {
  background: var(--background-color); 
  color: var(--text-color);
}

:focus{
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  color: var(--background-color);
  outline:none;
}

input:focus {
  background-color: var(--text-color);
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

textarea:focus {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color:var(--text-color);
  text-decoration-color:var(--text-color);
}

button:focus,
#watch-button:focus {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color: var(--text-color);
}

input:focus::placeholder,
textarea:focus::placeholder {
  /*background: var(--text-color);*/
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

input::selection,
textarea::selection {
  color: var(--text-color) !important;
  background: var(--background-color-alt) !important;
  background-color: var(--background-color-alt) !important;
  text-shadow: 0 0 0px black !important;
}

input::-moz-selection,
textarea::-moz-selection {
  color: var(--text-color) !important;
  background: var(--background-color-alt) !important;
  background-color: var(--background-color-alt) !important;
  text-shadow: 0 0 0px black !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    text-color: var(--text-color);
    text-color: var(--text-color);
    background-color: var(--background-color);
  }
}

* {
  box-sizing: border-box;
}

.ascii{
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.asciicontainer{
  background-color:var(--text-color);
  box-shadow: inset 0 0 0.5px 1px var(--background-color-alt);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* + * {
  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);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  width: 100%;
  padding-top:0;
  padding-bottom:0;
  max-width: calc(min(80ch, round(down, 100%, 1ch)));
  line-height: var(--line-height);
  overflow-x: hidden;
  text-transform:var(--uppercase);
  margin-top:0px;
  text-shadow: 0px 0px 0px var(--background-color);
  padding-left:2ch;
  padding-right:2ch;
}

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

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

h1 {
  line-height: calc(2 * var(--line-height));
  margin-bottom: calc(var(--line-height) * 2);
  text-transform: var(--uppercase);
  color:var(--background-color);
}
h2 {
  text-transform: var(--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: 1px;
  color:var(--text-color);
}

a:hover {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color:var(--text-color);
  text-decoration-color:var(--text-color);
}

a:focus {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color: transparent !important;
}

.mute {
  text-decoration:underline;
  text-decoration-thickness: 1px;
  color:var(--text-color);
}

.mute:hover {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color:var(--text-color);
  text-decoration-color:var(--text-color);
}

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

strong {
  font-weight: var(--font-weight);
}
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: .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;
  background-color:var(--background-color-alt);
}
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%;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-family) monospace;
  padding:0;
  position:relative;
}

.marquee-content {
  display: inline-block;
  position: absolute;
  padding-left: 0%;  /* Start position */
  top:0;
  margin-top:0;
}

.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: none;
}

.ascii{
  margin: 0; 
  letter-spacing: -0.6px;
  font-family: monospace;
  text-shadow: 0 0 0px white !important;
}

img, video {
  display: block;
  width: 100%;
  object-fit: contain;
  overflow: hidden;
}
img {
  font-style: italic;
  color: var(--text-color);
}

details {
  margin-bottom: var(--line-height);
  background:var(--background-color-alt);
}

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

summary:focus, 
details:focus {
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
  background-color:var(--text-color);
  text-decoration-color:var(--text-color);
}

details ::marker {
  display: inline-block;
  content: '▶';
  margin: 0;
  padding: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);
}

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);
}

li {
  margin: 0;
  padding: 0;
}

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

input, button, textarea, #watch-button {
  border: none;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  background: var(--background-color);
  color: var(--text-color);
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  background:var(--background-color-alt);
  padding:0;
  margin:0;
  text-shadow: 0px 0px 0px var(--background-color);
}

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

::placeholder {
  color: var(--text-color);
  opacity: 1;
  text-transform:var(--uppercase);
}
::-ms-input-placeholder {
  color: var(--text-color);
  text-transform:var(--uppercase);
}
button::-moz-focus-inner,
#watch-button::-moz-focus-inner {
  padding: 0;
  border: 0
}

button,
#watch-button {
  text-transform: var(--uppercase);
  font-weight: var(--font-weight);
  cursor: pointer;
  background: var(--background-color-alt);
  color: var(--text-color);
}

button:hover,
#watch-button:hover {
  background: var(--text-color);
  color: var(--inverseforeground);
  text-shadow: 0 0 0px white !important;
}

button:active,
#watch-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);
  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);
}

.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;
}