@font-face {
  font-family: "WebPlus IBM VGA 9x16";
  src: url("assets/fonts/WebPlus_IBM_VGA_9x16.woff") format("woff");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --dos-black: #000000;
  --dos-blue: #0000aa;
  --dos-green: #00aa00;
  --dos-cyan: #00aaaa;
  --dos-red: #aa0000;
  --dos-magenta: #aa00aa;
  --dos-brown: #aa5500;
  --dos-gray: #aaaaaa;
  --dos-dark-gray: #555555;
  --dos-bright-blue: #5555ff;
  --dos-bright-green: #55ff55;
  --dos-bright-cyan: #55ffff;
  --dos-bright-red: #ff5555;
  --dos-bright-magenta: #ff55ff;
  --dos-yellow: #ffff55;
  --dos-white: #ffffff;
  --font-dos: "WebPlus IBM VGA 9x16", "PingFang SC", "Microsoft YaHei", monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #151515;
  color: var(--dos-gray);
  font-family: var(--font-dos);
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

button,
pre {
  font: inherit;
}

button {
  color: inherit;
}

.app {
  min-height: 100svh;
  background: var(--dos-black);
}

.screen {
  position: relative;
  display: none;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
}

.screen::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.22) 0,
      rgba(0, 0, 0, 0.22) 1px,
      rgba(255, 255, 255, 0.04) 1px,
      rgba(255, 255, 255, 0.04) 2px
    );
  mix-blend-mode: multiply;
}

.screen::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 11;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.65);
}

.screen.is-active {
  animation: raster-snap 180ms steps(2, end);
}

.screen-boot.is-active,
.screen-prompt.is-active {
  display: grid;
}

.screen-blog.is-active {
  display: grid;
}

@keyframes raster-snap {
  0% {
    opacity: 0.7;
    transform: scaleY(0.985);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.crt {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.035) 0,
      rgba(255, 0, 0, 0.035) 1px,
      rgba(0, 255, 0, 0.025) 1px,
      rgba(0, 255, 0, 0.025) 2px,
      rgba(0, 0, 255, 0.035) 2px,
      rgba(0, 0, 255, 0.035) 3px
    );
  opacity: 0.65;
}

.screen-boot {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 1.35em 3ch 1.2em;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.045), transparent 56%),
    var(--dos-black);
  color: #d8d8d8;
  line-height: 1.12;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.65),
    0 0 7px rgba(210, 240, 255, 0.18);
}

.screen-boot.is-active {
  animation:
    raster-snap 90ms steps(2, end),
    crt-warmup 620ms steps(5, end);
}

@keyframes crt-warmup {
  0% {
    filter: brightness(0.12) contrast(1.8);
  }
  12% {
    filter: brightness(2.4) contrast(1.2);
  }
  22% {
    filter: brightness(0.55) contrast(1.8);
  }
  36% {
    filter: brightness(1.55) contrast(1.35);
  }
  58% {
    filter: brightness(0.9) contrast(1.5);
  }
  100% {
    filter: brightness(1) contrast(1);
  }
}

.crt-sync {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: -1em;
  z-index: 4;
  height: 1em;
  background: rgba(210, 230, 255, 0.28);
  box-shadow: 0 0 14px rgba(210, 230, 255, 0.25);
  animation: sync-roll 520ms steps(10, end) 1;
}

@keyframes sync-roll {
  0% {
    transform: translateY(-1em);
  }
  100% {
    transform: translateY(102svh);
  }
}

.boot-badge {
  position: absolute;
  top: 2.1em;
  right: 5.5ch;
  z-index: 2;
  width: 18ch;
  height: 8.6em;
  color: #b8ff7f;
  filter: blur(0.12px);
  animation: badge-pop 440ms steps(2, end);
}

.energy-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 3px rgba(110, 255, 70, 0.9)) drop-shadow(0 0 9px rgba(110, 255, 70, 0.45));
}

.energy-script {
  fill: currentColor;
  stroke: none;
  font-family: "Brush Script MT", "Apple Chancery", cursive;
  font-size: 31px;
  font-style: italic;
  letter-spacing: 0;
}

.energy-caption {
  fill: #35ff35;
  stroke: none;
  font-family: var(--font-dos);
  font-size: 9px;
  letter-spacing: 0;
}

.energy-star {
  stroke-width: 3.4;
}

.energy-arc {
  stroke-width: 3.1;
}

@keyframes badge-pop {
  0%,
  35% {
    opacity: 0;
  }
  36%,
  62% {
    opacity: 1;
  }
  63%,
  75% {
    opacity: 0.25;
  }
  76%,
  100% {
    opacity: 1;
  }
}

.boot-brand {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  gap: 1ch;
  max-width: calc(100% - 28ch);
  margin-bottom: 1.65em;
  color: #f0f0f0;
  white-space: nowrap;
}

.award-mark {
  display: grid;
  gap: 0.12em;
  padding-top: 0.05em;
}

.award-mark span {
  display: block;
  width: 1.1ch;
  height: 0.45em;
  background: #4ea2ff;
  box-shadow: 0 0 5px rgba(85, 170, 255, 0.8);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.boot-text {
  min-height: 0;
  margin: 0;
  padding-left: 0;
  color: #ededed;
  white-space: pre-wrap;
}

.screen-boot.is-waiting .boot-text::after {
  content: "";
  display: inline-block;
  width: 1ch;
  height: 1em;
  margin-left: 0.15ch;
  background: #ededed;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.75);
  animation: boot-cursor-blink 500ms steps(1, end) infinite;
  vertical-align: -0.12em;
}

@keyframes boot-cursor-blink {
  50% {
    opacity: 0;
  }
}

.boot-hint {
  display: grid;
  gap: 0.15em;
  color: #f0f0f0;
}

.screen-prompt {
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: 1em 2ch;
  background: var(--dos-black);
  color: var(--dos-gray);
}

.prompt-output {
  align-self: start;
}

.cursor-block {
  display: inline-block;
  width: 1ch;
  height: 1em;
  margin-left: 0.15ch;
  background: var(--dos-gray);
  animation: cursor-blink 900ms steps(1, end) infinite;
  vertical-align: text-bottom;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

.prompt-hint {
  width: max-content;
  max-width: 100%;
  padding: 0 1ch;
  background: var(--dos-gray);
  color: var(--dos-black);
}

.screen-blog {
  grid-template-rows: 1em 1em minmax(0, 1fr) 1em;
  gap: 0;
  background: var(--dos-blue);
  color: var(--dos-gray);
}

.dos-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-width: 0;
  padding: 0 1ch;
  background: var(--dos-gray);
  color: var(--dos-black);
}

.dos-title__center {
  color: var(--dos-red);
}

.dos-title__right {
  text-align: right;
}

.dos-menu {
  display: flex;
  min-width: 0;
  gap: 0;
  padding: 0 1ch;
  overflow: hidden;
  background: var(--dos-black);
  color: var(--dos-gray);
  white-space: nowrap;
}

.dos-menu__item {
  height: 1em;
  padding: 0 2ch 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dos-menu__item:hover,
.dos-menu__item:focus,
.dos-menu__item.is-menu-focus,
.dos-menu__item[aria-expanded="true"] {
  background: var(--dos-gray);
  color: var(--dos-black);
  outline: none;
}

.dos-menu b,
.dos-menu__item[aria-expanded="true"] b,
.dos-menu__item:hover b,
.dos-menu__item:focus b {
  color: var(--dos-yellow);
  font-weight: 400;
}

.dos-menu__item[aria-expanded="true"] b,
.dos-menu__item:hover b,
.dos-menu__item:focus b,
.dos-menu__item.is-menu-focus b {
  color: var(--dos-red);
}

.dos-dropdown {
  position: absolute;
  top: 2em;
  left: 1ch;
  z-index: 6;
  display: grid;
  grid-template-columns: 22ch 33ch;
  align-items: start;
  color: var(--dos-black);
}

.dos-dropdown-file,
.dos-dropdown-admin {
  grid-template-columns: 18ch;
}

.dos-dropdown-admin {
  left: 38ch;
}

.dos-dropdown-file .dos-dropdown__list,
.dos-dropdown-admin .dos-dropdown__list {
  padding: 1em 0;
}

.dos-dropdown-file .dos-dropdown__list li,
.dos-dropdown-admin .dos-dropdown__list li {
  height: 1.7em;
}

.dos-dropdown-file .dos-dropdown__list button,
.dos-dropdown-admin .dos-dropdown__list button {
  height: 1.7em;
  padding: 0.35em 2ch;
}

.dos-dropdown-file .dos-dropdown__list .menu-key-token,
.dos-dropdown-admin .dos-dropdown__list .menu-key-token {
  color: var(--dos-black);
}

.dos-dropdown-file .dos-dropdown__list .menu-key-token u,
.dos-dropdown-file .dos-dropdown__list .menu-label-hotkey,
.dos-dropdown-admin .dos-dropdown__list .menu-key-token u,
.dos-dropdown-admin .dos-dropdown__list .menu-label-hotkey {
  color: var(--dos-black);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.dos-dropdown-file .dos-dropdown__list .menu-label-rest,
.dos-dropdown-admin .dos-dropdown__list .menu-label-rest {
  color: var(--dos-black);
}

.dos-dropdown__list {
  min-width: 0;
  margin: 0;
  padding: 1em 0;
  border: 2px double var(--dos-black);
  background: var(--dos-gray);
  list-style: none;
}

.dos-dropdown__submenu {
  margin-left: -2px;
}

.dos-dropdown__list li {
  height: 1em;
}

.dos-dropdown__list button {
  display: block;
  width: 100%;
  height: 1em;
  padding: 0 1ch;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

.dos-dropdown-file .dos-dropdown__list button,
.dos-dropdown-admin .dos-dropdown__list button {
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
  column-gap: 0;
  align-items: center;
}

.dos-dropdown-file .dos-dropdown__list .menu-label,
.dos-dropdown-admin .dos-dropdown__list .menu-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.dos-dropdown-file .dos-dropdown__list.is-pane-focus li.is-active .menu-key-token,
.dos-dropdown-file .dos-dropdown__list.is-pane-focus li.is-active .menu-key-token u,
.dos-dropdown-file .dos-dropdown__list.is-pane-focus li.is-active .menu-label-hotkey,
.dos-dropdown-file .dos-dropdown__list.is-pane-focus li.is-active .menu-label-rest,
.dos-dropdown-file .dos-dropdown__list button:hover .menu-key-token,
.dos-dropdown-file .dos-dropdown__list button:hover .menu-key-token u,
.dos-dropdown-file .dos-dropdown__list button:hover .menu-label-hotkey,
.dos-dropdown-file .dos-dropdown__list button:hover .menu-label-rest,
.dos-dropdown-file .dos-dropdown__list button:focus .menu-key-token,
.dos-dropdown-file .dos-dropdown__list button:focus .menu-key-token u,
.dos-dropdown-file .dos-dropdown__list button:focus .menu-label-hotkey,
.dos-dropdown-file .dos-dropdown__list button:focus .menu-label-rest,
.dos-dropdown-admin .dos-dropdown__list.is-pane-focus li.is-active .menu-key-token,
.dos-dropdown-admin .dos-dropdown__list.is-pane-focus li.is-active .menu-key-token u,
.dos-dropdown-admin .dos-dropdown__list.is-pane-focus li.is-active .menu-label-hotkey,
.dos-dropdown-admin .dos-dropdown__list.is-pane-focus li.is-active .menu-label-rest,
.dos-dropdown-admin .dos-dropdown__list button:hover .menu-key-token,
.dos-dropdown-admin .dos-dropdown__list button:hover .menu-key-token u,
.dos-dropdown-admin .dos-dropdown__list button:hover .menu-label-hotkey,
.dos-dropdown-admin .dos-dropdown__list button:hover .menu-label-rest,
.dos-dropdown-admin .dos-dropdown__list button:focus .menu-key-token,
.dos-dropdown-admin .dos-dropdown__list button:focus .menu-key-token u,
.dos-dropdown-admin .dos-dropdown__list button:focus .menu-label-hotkey,
.dos-dropdown-admin .dos-dropdown__list button:focus .menu-label-rest {
  color: var(--dos-black);
}

.dos-dropdown__list.is-pane-focus li.is-active button,
.dos-dropdown__list button:hover,
.dos-dropdown__list button:focus {
  background: var(--dos-cyan);
  color: var(--dos-black);
  outline: none;
}

.dos-dropdown__list.is-pane-focus {
  box-shadow: inset 0 0 0 1px var(--dos-white);
}

.dos-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: min(62ch, calc(100vw - 4ch));
  transform: translate(-50%, -50%);
  padding: 1em 2ch;
  border: 2px double var(--dos-white);
  background: var(--dos-gray);
  color: var(--dos-black);
}

.dos-dialog__title {
  position: absolute;
  top: -1px;
  left: 2ch;
  padding: 0 1ch;
  background: var(--dos-gray);
  color: var(--dos-red);
}

.dos-field {
  display: grid;
  grid-template-columns: 8ch minmax(32ch, 1fr);
  gap: 1ch;
  margin: 1em 0;
  align-items: center;
}

.dos-field-textarea {
  align-items: start;
}

.dos-input {
  width: 100%;
  height: 2.25em;
  padding: 0 1ch;
  border: 0;
  background: var(--dos-black);
  color: var(--dos-gray);
  line-height: 2.25;
  outline: none;
}

.dos-textarea {
  width: 100%;
  min-height: 9em;
  padding: 0.5em 1ch;
  border: 0;
  resize: none;
  background: var(--dos-black);
  color: var(--dos-gray);
  font: inherit;
  line-height: 1.25;
  outline: none;
}

.dos-dialog__section {
  margin-bottom: 0.5em;
  color: var(--dos-blue);
}

.dos-results {
  min-height: 8em;
  max-height: 8em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--dos-blue);
  color: var(--dos-white);
}

.dos-results li {
  height: 1em;
}

.dos-results button,
.dos-dialog__button {
  width: 100%;
  height: 1em;
  padding: 0 1ch;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

.dos-results li.is-active button,
.dos-results button:hover,
.dos-results button:focus {
  background: var(--dos-cyan);
  color: var(--dos-black);
  outline: none;
}

.dos-results__empty {
  padding: 0 1ch;
  color: var(--dos-gray);
}

.dos-dialog__footer {
  margin-top: 1em;
  color: var(--dos-blue);
}

.dos-dialog-help {
  width: min(45ch, calc(100vw - 4ch));
}

.dos-dialog-create {
  width: min(92ch, calc(100vw - 4ch));
}

.dos-dialog-login {
  width: min(72ch, calc(100vw - 4ch));
}

.dos-editor-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 1ch;
  margin: 1em 0 0.5em;
}

.dos-editor-toolbar .dos-dialog__button {
  width: 8ch;
  margin-left: 0;
}

.dos-editor-help {
  margin-top: -0.5em;
  color: var(--dos-blue);
}

.dos-turnstile-row {
  align-items: start;
}

.dos-turnstile {
  min-height: 4.25em;
  overflow: hidden;
}

.dos-turnstile-note {
  margin-top: 0.5em;
  color: var(--dos-blue);
  line-height: 1.1;
}

.dos-login-message {
  min-height: 1em;
  margin-top: 1em;
  color: var(--dos-blue);
  line-height: 1.1;
}

.dos-login-message[data-tone="warn"] {
  color: var(--dos-red);
}

.dos-login-message[data-tone="error"] {
  color: var(--dos-red);
}

.dos-help-text {
  margin: 1em 0;
  color: var(--dos-black);
  white-space: pre-wrap;
}

.dos-dialog__button {
  width: 8ch;
  margin-left: auto;
  background: var(--dos-blue);
  color: var(--dos-white);
  text-align: center;
}

.dos-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 1ch;
  margin-top: 1em;
}

.dos-dialog__actions .dos-dialog__button {
  margin-left: 0;
}

.dos-dialog__button:hover,
.dos-dialog__button:focus {
  background: var(--dos-cyan);
  color: var(--dos-black);
  outline: none;
}

.dos-dialog__button:disabled {
  background: var(--dos-gray);
  color: var(--dos-black);
  cursor: wait;
}

.dos-window {
  display: grid;
  grid-template-columns: minmax(36ch, 38ch) minmax(0, 1fr);
  gap: 2ch;
  min-height: 0;
  padding: 1em 2ch 0;
}

.dos-list,
.dos-view {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 2px double var(--dos-bright-cyan);
  background: var(--dos-blue);
  color: var(--dos-gray);
}

.dos-list {
  display: grid;
  grid-template-rows: 1fr;
}

.dos-list__title {
  position: absolute;
  top: -1px;
  left: 2ch;
  z-index: 1;
  padding: 0 1ch;
  background: var(--dos-blue);
  color: var(--dos-white);
}

.dos-list__items {
  min-height: 0;
  margin: 0;
  padding: 1em 0 0;
  overflow-y: auto;
  list-style: none;
}

.dos-list__items:focus {
  outline: none;
}

.dos-list__items li {
  height: 1em;
}

.file-row {
  display: grid;
  grid-template-columns: minmax(12ch, 1fr) 10ch 8ch;
  column-gap: 2ch;
  width: 100%;
  height: 1em;
  padding: 0 1ch;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.file-row__name {
  min-width: 0;
  overflow: hidden;
  color: var(--dos-white);
  white-space: nowrap;
}

.file-row__size,
.file-row__date {
  color: var(--dos-gray);
  white-space: nowrap;
}

.file-row__size {
  text-align: right;
}

.file-row__date {
  text-align: left;
}

.dos-list__items li.is-active .file-row {
  background: var(--dos-cyan);
  color: var(--dos-black);
}

.dos-list__items li.is-active .file-row__name,
.dos-list__items li.is-active .file-row__size,
.dos-list__items li.is-active .file-row__date {
  color: var(--dos-black);
}

.dos-view {
  display: grid;
  grid-template-rows: 1em minmax(0, 1fr);
}

.dos-view__title {
  display: flex;
  gap: 1ch;
  min-width: 0;
  padding: 0 1ch;
  background: var(--dos-gray);
  color: var(--dos-black);
  white-space: nowrap;
}

.dos-view__title span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--dos-red);
  text-overflow: ellipsis;
}

.dos-admin-actions {
  display: flex;
  gap: 1ch;
  margin-left: auto;
}

.dos-admin-button {
  height: 1em;
  padding: 0 1ch;
  border: 0;
  background: var(--dos-blue);
  color: var(--dos-white);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.dos-admin-button:hover,
.dos-admin-button:focus {
  background: var(--dos-cyan);
  color: var(--dos-black);
  outline: none;
}

.dos-view__body {
  min-height: 0;
  padding: 1em 2ch;
  overflow-y: auto;
  color: var(--dos-white);
  line-height: 1.25;
}

.dos-view__body p {
  margin: 0 0 1em;
}

.dos-view__body ul {
  margin: 0 0 1em;
  padding-left: 2ch;
}

.dos-view__body li {
  margin: 0 0 0.35em;
}

.dos-view__body strong {
  color: var(--dos-yellow);
  font-weight: 400;
}

.dos-view__body a {
  color: var(--dos-yellow);
}

.dos-view__body img {
  display: block;
  width: min(100%, 42ch);
  max-height: 13em;
  margin: 1em 0;
  padding: 0.5em 1ch;
  border: 2px solid var(--dos-gray);
  background: var(--dos-black);
  filter: saturate(0.75) contrast(1.15);
  image-rendering: pixelated;
}

.dos-view__body img.skyline-image {
  width: 100%;
  max-height: none;
  padding: 0;
  object-fit: contain;
  background: var(--dos-black);
  filter: saturate(0.9) contrast(1.05);
  image-rendering: auto;
}

.dos-status {
  display: block;
  background: var(--dos-black);
  color: var(--dos-gray);
}

.dos-status__message {
  min-width: 0;
  padding: 0 1ch;
  overflow: hidden;
  background: var(--dos-gray);
  color: var(--dos-black);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .app {
    padding: 0;
  }

  .screen {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    font-size: 16px;
  }

  .screen-blog {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .dos-title {
    grid-template-columns: 1fr;
    height: auto;
  }

  .dos-title__center,
  .dos-title__right {
    display: none;
  }

  .dos-menu {
    gap: 1ch;
    overflow-x: auto;
  }

  .dos-dropdown {
    left: 1ch;
    right: 1ch;
    grid-template-columns: 1fr;
  }

  .dos-dropdown__submenu {
    margin-left: 0;
    margin-top: -2px;
  }

  .dos-window {
    grid-template-columns: 1fr;
    grid-template-rows: 10em minmax(20em, 1fr);
    gap: 1em;
    padding: 1em 1ch 0;
  }

  .dos-view__body {
    padding: 1em 1ch;
  }
}