:root {
  --ink: #101010;
  --paper: #fff9ed;
  --paper-2: #f0f0f0;
  --pink: #ff80bd;
  --acid: #caff31;
  --cyan: #50e6f2;
  --blue: #001db0;
  --chrome: #c0c0c0;
  --mono: "Courier New", Courier, monospace;
  --sans: "MS Sans Serif", Tahoma, Geneva, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(16, 16, 16, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 16, 16, 0.08) 1px, transparent 1px),
    var(--paper);
  background-size: 16px 16px;
  font-family: var(--sans);
}

body::-webkit-scrollbar {
  width: 18px;
}

body::-webkit-scrollbar-track {
  border-left: 1px solid var(--ink);
  background:
    linear-gradient(45deg, #ffffff 25%, var(--chrome) 25% 50%, #ffffff 50% 75%, var(--chrome) 75%);
  background-size: 8px 8px;
}

body::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: var(--chrome);
}

main {
  min-height: 100svh;
  padding: clamp(16px, 4vw, 34px);
}

h1,
h2,
p,
pre {
  margin-top: 0;
}

h1 {
  max-width: 13ch;
  margin-bottom: 14px;
  color: #111111;
  font-size: clamp(2.4rem, 10vw, 5.8rem);
  line-height: 0.84;
  text-transform: uppercase;
  text-shadow:
    2px 0 var(--pink),
    -2px 0 var(--cyan);
}

h2 {
  margin-bottom: 8px;
  font-size: 1rem;
  text-transform: uppercase;
}

p {
  max-width: 760px;
  line-height: 1.45;
}

.file-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -8px -8px 22px;
  padding: 7px;
  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: var(--chrome);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.file-menu span {
  padding: 4px 6px;
}

.kicker,
.status {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  background: var(--acid);
  font: 900 0.74rem/1 var(--mono);
  text-transform: uppercase;
}

.text-file {
  max-width: 860px;
  padding: clamp(14px, 3vw, 24px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 7px 7px 0 rgba(16, 16, 16, 0.22);
  font: 700 0.95rem/1.55 var(--mono);
  white-space: pre-wrap;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: 18px;
  align-items: start;
}

.protocol-list {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.protocol-list li {
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.18);
  font: 800 0.82rem/1.35 var(--mono);
  text-transform: uppercase;
}

.protocol-list li::before {
  margin-right: 8px;
  color: #008000;
  content: "[OK]";
}

.app-image {
  width: 100%;
  border: 2px solid #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: var(--chrome);
  box-shadow: 5px 5px 0 rgba(16, 16, 16, 0.22);
}

.glitter {
  min-height: 100svh;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 128, 189, 0.6) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 32%, rgba(80, 230, 242, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 82%, rgba(202, 255, 49, 0.7) 0 2px, transparent 3px),
    #111111;
  background-size: 34px 34px, 48px 48px, 56px 56px, auto;
  color: #ffffff;
}

.glitter h1 {
  color: #ffffff;
}

.glitter .protocol-list li {
  background: #202020;
  color: #ffffff;
}

.glitter .status {
  color: #111111;
}

@media (max-width: 620px) {
  .split {
    grid-template-columns: 1fr;
  }

  .app-image {
    max-height: 240px;
    object-fit: cover;
  }
}