@font-face {
  font-family: Barlow;
  src: url('assets/fonts/barlow-condensed-bold.woff2') format('woff2');
  font-display: swap;
}

:root {
  --console-font: Consolas, 'Liberation Mono', monospace;
}

:root {
  --ink: #c4c8c8;
  --sub: #7f8789;
  --line: #353c3f;
  --panel: #0a0d0f;
  --bg: #050708;
  --alarm: #b43b43;
  --font_main: Barlow;
  --font_main_light: Barlow;
  --font_mono: var(--console-font);
  --color_r: 196;
  --color_g: 200;
  --color_b: 200;
  --color_black: #050708;
  --color_light_black: #050708;
  --color_grey: #202529;
}

* {
  box-sizing: border-box;
}

html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Barlow,sans-serif;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

button:hover {
  color: white;
}

h1,h2,h3,p,figure {
  margin: 0;
}

header h2 {
  font-size: 1.45cqh;
  letter-spacing: .11em;
  font-weight: 400;
}

span,small {
  font-weight: 400;
}

#archive[hidden] {
  display: none;
}

#archive {
  height: 100%;
  display: grid;
  grid-template-rows: 6cqh 5.4cqh 28cqh 9.5cqh minmax(0,1fr) 8.5cqh 2cqh;
  gap: 1.1cqh;
  padding: 2.1cqh 4cqw 1.6cqh;
  animation: appear .65s ease-out;
}

#archive>* {
  min-width: 0;
  min-height: 0;
}

.masthead {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: .7cqh;
  position: relative;
}

.hardcode {
  width: 16cqw;
  height: 5.5cqh;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) brightness(1.75);
  margin-left: -1cqw;
}

.masthead-id {
  margin-left: auto;
  text-align: right;
  font: 1cqh/1.5 var(--console-font);
  letter-spacing: .1em;
  padding-right: 4cqw;
}

.masthead-id strong {
  display: block;
  font-size: .8cqh;
  color: var(--sub);
  font-weight: 400;
}

.window-controls {
  position: absolute;
  right: -2.5cqw;
  top: -1.6cqh;
  display: flex;
  gap: 1cqw;
  opacity: 0;
  transition: opacity .2s;
}

.masthead:hover .window-controls {
  opacity: 1;
}

.window-controls button {
  width: 2.4cqw;
  height: 2.4cqh;
  font-size: 1.6cqh;
}

.identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eyebrow {
  font: .82cqh var(--console-font);
  letter-spacing: .2em;
  color: var(--sub);
}

.identity h1 {
  font-family: Barlow;
  font-weight: 400;
  font-size: 4.25cqh;
  line-height: 1.1;
  letter-spacing: .015em;
}

.identity h1 span {
  font-size: 1.5cqh;
  color: var(--sub);
  vertical-align: middle;
}

.archive-index {
  font: .9cqh/1.7 var(--console-font);
  text-align: right;
  color: var(--sub);
}

.archive-index b {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .1em;
}

.telemetry {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 3.3cqw;
}

#gc-portrait-panel {
  border: 1px solid #444d50;
  overflow: hidden;
  position: relative;
  background: #07090a;
}

#gc-portrait-panel>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.22);
  filter: grayscale(1) contrast(1.15) brightness(.9);
}

.scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0px,transparent 3px,#0002 4px);
  pointer-events: none;
}

.scan:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(transparent,#d2d8d817,transparent);
  animation: scan 8s linear infinite;
}

.face-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font: .73cqh var(--console-font);
  letter-spacing: .03em;
  padding: .7cqh 1.1cqw;
  background: linear-gradient(#050708df,transparent);
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2cqh 1.4cqw 1cqh;
  background: linear-gradient(transparent,#050708);
}

figcaption strong {
  display: block;
  font: 1.4cqh Barlow;
  letter-spacing: .13em;
}

figcaption span {
  display: block;
  font: .65cqh var(--console-font);
  color: #a1a7a8;
  margin-top: .4cqh;
  letter-spacing: .08em;
}

.instruments {
  display: grid;
  grid-template-rows: 1.15fr 1fr .65fr;
  gap: 1.3cqh;
}

.instrument {
  border-top: 1px solid var(--line);
  padding-top: .7cqh;
  overflow: hidden;
  position: relative;
}

.instrument h1 {
  font: 1.35cqh Barlow;
  letter-spacing: .08em;
}

.instrument h1>i {
  font-style: normal;
  font: .8cqh var(--console-font);
  color: var(--sub);
}

#mod_cpuinfo_innercontainer>h1,#mod_ramwatcher_inner>h1 {
  display: flex;
  flex-direction: column;
  gap: .35cqh;
}

#mod_cpuinfo_innercontainer>h1>i {
  display: none;
}

#mod_cpuinfo_innercontainer>div {
  display: flex;
  align-items: center;
  margin-top: .6cqh;
  gap: 1cqw;
}

#mod_cpuinfo_innercontainer>div>h1 {
  font: .8cqh var(--console-font);
  flex: 0 0 18%;
  color: var(--sub);
}

#mod_cpuinfo_usagecounter0 {
  font: 1.8cqh Barlow;
  font-style: normal;
  color: var(--ink);
  display: block;
  margin-top: .3cqh;
}

#mod_cpuinfo canvas {
  display: block;
  min-width: 0;
  width: 100%;
  height: 5cqh;
  border-block: 1px dashed #303638;
}

#mod_ramwatcher_info {
  color: var(--sub);
  font: .85cqh var(--console-font);
}

#mod_ramwatcher_pointmap {
  display: grid;
  grid-template-columns: repeat(40,minmax(0,1fr));
  grid-template-rows: repeat(11,1fr);
  grid-auto-flow: column;
  gap: .12cqh .22cqw;
  height: 4.1cqh;
  margin-top: .65cqh;
}

.mod_ramwatcher_point {
  background: var(--ink);
  min-width: 0;
  min-height: 0;
}

.mod_ramwatcher_point.free {
  opacity: .12;
}

.mod_ramwatcher_point.active {
  opacity: .85;
}

.mod_ramwatcher_point.available {
  opacity: .35;
}

#mod_ramwatcher_swapcontainer {
  display: none;
}

.construct-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: .5cqh;
}

.construct-status>span {
  font: .8cqh var(--console-font);
  color: var(--sub);
  letter-spacing: .07em;
}

.construct-status>strong {
  font: 2.3cqh Barlow;
}

.construct-status>strong>span {
  font-size: 1cqh;
  color: var(--sub);
}

.status-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1cqw;
  font: .73cqh var(--console-font);
  letter-spacing: .08em;
  color: var(--sub);
}

.status-line i {
  width: .5cqh;
  height: .5cqh;
  background: #a4abaa;
  box-shadow: 0 0 5px #b8c1c144;
}

.link-panel {
  border-block: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: .7cqh 0;
  gap: .6cqh;
}

.link-panel>header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.link-panel>header>span {
  font: .8cqh var(--console-font);
  color: var(--sub);
}

.link-data {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 2cqw;
  flex: 1;
  min-height: 0;
}

.link-data>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2cqh;
}

.link-data>div>span {
  font: .7cqh var(--console-font);
  color: var(--sub);
  letter-spacing: .1em;
}

.link-data strong {
  font: 1.8cqh Barlow;
}

.link-data small {
  font: 1cqh var(--console-font);
  color: var(--sub);
}

#link-wave {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.link-bottom {
  display: flex;
  justify-content: space-between;
  font: .7cqh var(--console-font);
  letter-spacing: .09em;
  color: var(--sub);
}

section#main_shell {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #434b4e;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  overflow: hidden;
  transition: none;
  background: var(--panel);
  min-height: 0;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75cqh 1.4cqw;
  border-bottom: 1px solid var(--line);
  background: #121719;
}

.terminal-header>span {
  font: .75cqh var(--console-font);
  color: var(--sub);
}

div#main_shell_innercontainer {
  flex: 1;
  min-height: 0;
  width: auto;
  height: auto;
  margin: .9cqh 1.4cqw .4cqh;
  overflow: hidden;
}

#terminal0 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.console-hint {
  display: flex;
  justify-content: space-between;
  padding: .6cqh 1.4cqw;
  border-top: 1px solid #222a2c;
  font: .72cqh var(--console-font);
  color: var(--sub);
}

.console-hint button {
  font: inherit;
  letter-spacing: .03em;
}

.xterm {
  height: 100%;
}

.xterm-viewport {
  overflow: hidden!important;
}

.xterm-screen {
  max-width: 100%;
}

section#keyboard {
  width: 100%;
  height: 100%;
  top: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: .4cqh;
  border-top: 1px solid var(--line);
}

div.keyboard_row {
  height: 18%;
  margin: 0;
  width: 100%;
  gap: .3cqw;
  justify-content: space-between;
}

div.keyboard_row:last-child {
  left: 0;
}

div.keyboard_key {
  min-width: 0;
  width: auto;
  flex: 1;
  height: 100%;
  margin: 0;
  border: 1px solid #22292c;
  border-radius: 0;
  background: #0a0d0e;
}

div.keyboard_key>h1,div.keyboard_key>h4,div.keyboard_row>.keyboard_key:first-child>*,div.keyboard_row>.keyboard_key:last-child>* {
  font-size: 1cqh;
  top: 0;
}

div.keyboard_key>:not(h1) {
  font-size: .7cqh;
}

div.keyboard_key>h2 {
  top: 0;
  left: .2cqw;
}

div.keyboard_key>h3 {
  bottom: 0;
  right: .2cqw;
}

div.keyboard_key>svg {
  width: 1.4cqh;
  height: 1.4cqh;
  top: 0!important;
}

div.keyboard_row:not(:nth-child(4)):not(:last-child)>.keyboard_key:last-child,div.keyboard_row>.keyboard_key:first-child {
  min-width: 0;
  width: auto;
  flex: 1.4;
}

div.keyboard_row#row_1>div.keyboard_enter,div.keyboard_row#row_2>div.keyboard_enter {
  min-width: 0;
  width: auto;
  flex: 1.4;
  height: 100%;
  margin: 0;
  top: 0;
  right: 0;
  border: 1px solid #353e41;
}

div.keyboard_key#keyboard_spacebar {
  min-width: 0;
  width: auto;
  flex: 5;
  height: 100%;
  border: 1px solid #353e41;
}

div.keyboard_row:last-child>.keyboard_key>*,div.keyboard_row:not(:nth-child(4))>.keyboard_key:last-child>*,div.keyboard_row:nth-child(4)>.keyboard_key:nth-last-child(2)>*,div.keyboard_row>.keyboard_key:first-child>*,div.keyboard_row:last-child>div.keyboard_key:nth-last-child(-n+3)>* {
  font-size: .9cqh;
}

section#keyboard .keyboard_key.active {
  color: var(--bg);
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: .7cqh var(--console-font);
  letter-spacing: .1em;
  color: var(--sub);
  border-top: 1px solid var(--line);
  padding-top: .5cqh;
}

body.breach {
  --ink: #d0bfc0;
  --line: #653037;
}

body.breach #link-state,body.breach #construct-state,body.breach #footer-state {
  color: var(--alarm);
}

body.breach #gc-portrait-panel {
  border-color: var(--alarm);
}

body.breach .scan:after {
  background: linear-gradient(transparent,#bd384530,transparent);
}

body.breach .status-line i {
  background: var(--alarm);
}

section#boot_screen {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 2cqh 3cqw;
  background: var(--bg);
  font: 1cqh/1.5 var(--console-font);
  color: var(--sub);
  overflow: hidden;
  z-index: 20;
}

section#boot_screen.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

section#boot_screen.center h1 {
  font: 7cqw Barlow;
  letter-spacing: .07em;
}

section#boot_screen h1.glitch::before,section#boot_screen h1.glitch::after {
  content: 'EDGERUNNER';
}

#boot_screen .boot-controls {
  position: absolute;
  right: 2cqw;
  top: 1cqh;
}

@keyframes scan {

  from {
    top: -12%;
  }

  to {
    top: 112%;
  }
}

@keyframes appear {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media(prefers-reduced-motion:reduce) {

  .scan:after {
    animation: none;
  }

  #archive {
    animation: none;
  }
}

/* The release occupies the same portrait canvas and stays until dismissed. */

#archive {
  position: relative;
}

.release-card[hidden] {
  display: none;
}

.release-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 2cqh;
  padding: 3cqh 6cqw 2.4cqh;
  overflow: hidden;
  isolation: isolate;
  background: #050708;
  color: #c4c8c8;
  outline: none;
  animation: appear .45s ease-out;
}

.release-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.release-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) brightness(.6) contrast(1.12);
}

.release-art:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#050708d9 0%,#05070814 27%,#05070835 43%,#050708ed 68%,#050708 88%);
}

.release-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  font: .8cqh/1.5 var(--console-font);
  letter-spacing: .12em;
  color: #9ba3a5;
}

.release-window-controls {
  display: flex;
  gap: 1.3cqw;
}

.release-window-controls button {
  display: grid;
  place-items: center;
  min-width: 3cqw;
  height: 2.2cqh;
  font: 1.7cqh Barlow;
  color: #aab1b2;
}

.release-main {
  align-self: end;
  display: grid;
  justify-items: start;
  gap: .7cqh;
  min-width: 0;
  padding-bottom: 1.5cqh;
}

.release-artist {
  font: 1.5cqh/1.5 var(--console-font);
  letter-spacing: .3em;
  color: #c1c7c7;
}

.release-card #release-track {
  font: 6.9cqh/.95 Barlow;
  letter-spacing: .025em;
  white-space: nowrap;
  max-width: 100%;
  color: #e0e3e2;
}

.release-info {
  display: grid;
  gap: .7cqh;
  margin-top: 1.8cqh;
  border-top: 1px solid #66707380;
  padding-top: 1.2cqh;
  width: 100%;
}

.release-date {
  font: 4.9cqh/1.1 Barlow;
  letter-spacing: .08em;
  color: #d1d6d5;
}

.release-label {
  font: 1.2cqh/1.5 var(--console-font);
  letter-spacing: .19em;
  color: #aab3b4;
}

.release-logo {
  display: block;
  width: 30cqw;
  height: 10cqh;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) brightness(1.7);
  margin: 1cqh 0 0 -1.7cqw;
}

.release-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3cqw;
  border-top: 1px solid #3a4346;
  padding-top: 1.1cqh;
  color: #7f8a8c;
  font: .8cqh/1.5 var(--console-font);
  letter-spacing: .08em;
}

.release-bottom button {
  font: inherit;
  letter-spacing: inherit;
  min-height: 2.6cqh;
}

.release-card button:hover,.release-card button:focus-visible {
  color: #fff;
  outline: 1px solid #778487;
  outline-offset: .4cqh;
}

.release-card button:focus:not(:focus-visible) {
  outline: none;
}

@media(prefers-reduced-motion:reduce) {

  .release-card {
    animation: none;
  }
}

/* Browser canvas. Container units keep the portrait composition independent of the host page. */

html,body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #030405;
}

a {
  color: inherit;
  text-decoration: none;
}

button,input,a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline: 1px solid #a3afb0;
  outline-offset: 3px;
}

#experience {
  width: min(100vw,calc(100dvh * 9 / 16),540px);
  height: min(100dvh,calc(100vw * 16 / 9),960px);
  position: relative;
  container-type: size;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

#archive {
  height: 100%;
  width: 100%;
  padding-bottom: 1.6cqh;
}

.masthead {
}

.masthead-id {
  padding-right: 0;
}

.hardcode {
  flex-shrink: 0;
}

.sound-toggle {
  font: .76cqh var(--console-font);
  letter-spacing: .06em;
  margin-left: 2cqw;
  border: 1px solid #353c3f;
  min-height: 24px;
  min-width: 45px;
  padding: .5cqh .7cqw;
  color: #aab4b5;
}

.instrument h2 {
  font: 1.35cqh Barlow;
  letter-spacing: .08em;
  font-weight: 400;
}

.cpu-chart {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 1cqw;
  align-items: center;
  margin-top: 1.3cqh;
  height: 5cqh;
}

.cpu-chart span {
  display: block;
  font: .8cqh var(--console-font);
  color: var(--sub);
}

#cpu-value {
  display: block;
  font: 1.8cqh Barlow;
  margin-top: .5cqh;
  font-weight: 400;
}

#cpu-wave {
  display: block;
  width: 100%;
  height: 5cqh;
  min-width: 0;
  border-block: 1px dashed #303638;
}

#mod_ramwatcher_info {
  margin-top: .35cqh;
}

#mod_ramwatcher_pointmap {
  grid-template-columns: repeat(40,minmax(0,1fr));
  grid-auto-flow: row;
}

.mod_ramwatcher_point {
  display: block;
  transition: opacity .3s;
}

#main_shell_innercontainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto!important;
  scrollbar-width: none;
}

#main_shell_innercontainer::-webkit-scrollbar {
  display: none;
}

#terminal0 {
  font: 1.45cqh/1.72 var(--console-font);
  height: auto;
  min-height: 0;
  overflow-wrap: normal;
  white-space: pre-wrap;
  flex: 0 0 auto;
  user-select: text;
}

.terminal-line {
  min-height: 2.5cqh;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal-line.breach-line {
  color: #ba4149;
}

.terminal-line.muted {
  color: #849295;
}

#console-form {
  display: flex;
  gap: 1ch;
  min-height: 2.5cqh;
  align-items: center;
  font: 1.45cqh/1.72 var(--console-font);
  color: #849193;
  flex: 0 0 auto;
}

#console-input {
  padding: 0;
  margin: 0;
  display: block;
  min-width: 0;
  flex: 1;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  outline: 0;
  caret-color: var(--ink);
}

#console-form[hidden] {
  display: none;
}

.console-hint button {
  min-height: 2.3cqh;
}

section#keyboard {
  gap: .35cqh;
}

.keyboard_row {
  display: flex;
  gap: .35cqw;
  height: 18%;
  width: 100%;
  min-height: 0;
  justify-content: space-between;
}

.keyboard_key {
  font: .85cqh Barlow;
  color: var(--ink);
  border: 1px solid #293134;
  border-radius: 0;
  background: #090d0e;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  min-height: 0;
}

.keyboard_key:active,.keyboard_key.pressed {
  background: #b9c3c3;
  color: #050708;
}

.keyboard_key.wide {
  flex: 1.6;
}

.keyboard_key.space {
  flex: 6;
  border-color: #3a4649;
}

.keyboard_key:focus-visible {
  outline-offset: 0;
}

footer a {
  display: grid;
  place-items: center;
  min-height: 2cqh;
}

.release-card {
  z-index: 12;
}

.release-header {
}

.release-header>button {
  font: 2.4cqh Barlow;
  min-width: 24px;
  min-height: 24px;
}

.release-main {
  padding-bottom: .5cqh;
}

.release-logo {
  height: 8.3cqh;
  margin-top: .5cqh;
}

.release-listen {
  display: flex;
  align-items: center;
  gap: 5cqw;
  font: 1cqh/1.4 var(--console-font);
  letter-spacing: .1em;
  border: 1px solid #758184;
  padding: 1.3cqh 2.2cqw;
  margin-top: 1cqh;
  min-height: 32px;
}

.release-listen:hover {
  background: #bec8c8;
  color: #050708;
}

.action-icon {
  width: 1.6cqh;
  height: 1.6cqh;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.release-bottom a {
  display: grid;
  place-items: center;
  min-height: 24px;
}

.release-bottom button {
  min-height: 24px;
}

#release-card[hidden],#boot-screen[hidden],#start-gate[hidden],#boot-title[hidden] {
  display: none!important;
}

#boot-screen {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: #050708;
  padding: 4cqh 5cqw;
  font: 1.05cqh/2 var(--console-font);
  color: #9ba8aa;
  display: flex;
  align-items: flex-start;
}

#boot-lines {
  white-space: pre-wrap;
}

#boot-title {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  font: 7cqw Barlow;
  letter-spacing: .08em;
  color: #c4c8c8;
  width: max-content;
  height: max-content;
  border: 3px solid #b6c0c0;
  padding: 1.5cqh 2.5cqw;
}

#start-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  padding: 5cqh 6cqw;
  background: #050708;
  isolation: isolate;
}

.gate-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,#05070880 0%,#05070816 25%,#050708db 65%,#050708 88%),url('assets/gc/cover.jpg') center 38% / cover no-repeat;
  filter: grayscale(1);
}

.gate-content {
  display: grid;
  justify-items: start;
  gap: 1cqh;
  min-width: 0;
}

.gate-index {
  font: .85cqh var(--console-font);
  letter-spacing: .16em;
  color: #9ca7a8;
  margin-bottom: 4cqh;
}

.gate-content>p {
  font: 1.3cqh var(--console-font);
  letter-spacing: .24em;
}

.gate-content h2 {
  font: 6.9cqh/.95 Barlow;
  letter-spacing: .02em;
  font-weight: 400;
  white-space: nowrap;
  max-width: 100%;
}

.gate-rule {
  width: 100%;
  height: 1px;
  background: #596568;
  margin-top: 2cqh;
}

.gate-date {
  font: 1.1cqh var(--console-font);
  letter-spacing: .12em;
  margin: .8cqh 0 3cqh;
}

.gate-listen,
#start {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5cqw;
  min-height: 44px;
  width: 100%;
  border: 1px solid #a0acad;
  padding: 1.5cqh 3cqw;
  font: 1.3cqh Barlow;
  letter-spacing: .1em;
  background: #c5cdcd;
  color: #050708;
}

.gate-listen:hover,
.gate-listen:focus-visible {
  background: #e5eaea;
}

#start {
  background: #050708a8;
  color: #e5eaea;
}

#start:hover,
#start:focus-visible {
  background: #253033;
}

#start:disabled {
  opacity: .7;
  cursor: wait;
}

#start .action-icon {
  width: 2cqh;
  height: 2cqh;
}

#start-note {
  font: .8cqh/1.7 var(--console-font);
  color: #9aa8a9;
  margin-top: .5cqh;
}

.gate-content>.gate-return {
  font: .8cqh var(--console-font);
  letter-spacing: .1em;
  color: #7d8b8d;
  margin-top: 4cqh;
  min-height: 28px;
  display: grid;
  align-items: center;
}

.sr-only {
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background: #050708;
  color: #ccc;
  padding: 1em;
  font: 14px monospace;
  max-width: 90vw;
}

.noscript a {
  text-decoration: underline;
}

@media(prefers-reduced-motion:reduce) {

  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
  }
}

@media(max-height:500px) and (min-aspect-ratio:1/1) {

  #experience {
    max-height: 100dvh;
  }

  .sound-toggle {
    min-height: 18px;
    min-width: 35px;
  }
}

/* The single browser CPU chart takes the place of the native module footer. */

#mod_cpuinfo_innercontainer > .cpu-chart {
  display: grid;
}

#release-track, #gate-title {
  letter-spacing: .035em;
}

#boot-title {
  max-width: 92%;
}
/* Keep release information and controls legible on a phone. */
.release-label {
  font-size: max(12px, 1.2cqh);
}

.release-listen {
  font-size: max(12px, 1cqh);
  min-height: 44px;
}

.release-bottom,
.sound-toggle,
#replay,
#start-note {
  font-size: max(11px, .85cqh);
}

.release-bottom a,
.release-bottom button {
  min-height: 32px;
}

.gate-listen,
#start {
  font-size: max(14px, 1.3cqh);
}

#open-console,
#release-dismiss {
  border: 1px solid #596568;
  font: max(11px, 1cqh) var(--console-font);
  letter-spacing: .08em;
  padding: .7cqh 2cqw;
}

#open-console {
  width: 100%;
  min-height: 44px;
  padding-inline: 3cqw;
  text-align: left;
  background: #050708a8;
}

.release-header > #release-dismiss {
  min-height: 36px;
  flex: 0 0 auto;
}

#archive[data-console-open] {
  grid-template-rows: 6cqh 5.4cqh 28cqh 9.5cqh minmax(0, 1fr) 20cqh 2cqh;
}

#archive[data-console-open] .keyboard_key {
  font-size: max(11px, 1.1cqh);
}

#console-input {
  font-size: max(16px, 1.45cqh);
}

#console-input::placeholder {
  color: #849295;
}

#keyboard[inert] {
  opacity: .5;
}

#console-hint-text {
  color: #a8b4b5;
  font-size: max(9px, .8cqh);
}

.console-hint {
  align-items: center;
  gap: 2cqw;
}

#replay {
  white-space: nowrap;
}

/* Keep links reachable in short landscape viewports. */
#start-gate {
  align-items: safe end;
  overflow-y: auto;
}