* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --ink: #e8fff7;
  --cyan: #35f2ff;
  --pink: #ff3dbb;
  --yellow: #ffe74a;
  --green: #55ff8a;
  --panel: #11131a;
}
html { min-height: 100%; background: #030405; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "Courier New", monospace; }
a { color: inherit; }
button, input { font: inherit; }

.splash {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 44%, #102c3e 0, #06121c 42%, #010407 75%),
    #010407;
}
.splash::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #02080d99 4px 5px);
  box-shadow: inset 0 0 10rem #000;
}
.splash main { position: relative; width: 100%; text-align: center; padding: 2rem 1rem; }
.logo {
  display: inline-block;
  margin: 0 0 clamp(2rem, 8vh, 5rem);
  color: #7898ad;
  font: 700 clamp(.42rem, 1.45vw, 1.1rem)/1.2 monospace;
  text-align: left;
  white-space: pre;
  text-shadow: 0 -1px 0 #c1d4de66, 2px 3px 0 #01080d, 0 0 1.5rem #217dab44;
}
.enter {
  display: block;
  width: max-content;
  margin: auto;
  color: #8edaff;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 .35rem #39bfff, 0 0 1.2rem #0879bd;
  animation: pulse 6s ease-in-out infinite;
}
.enter:hover, .enter:focus-visible { color: #d9f4ff; animation: none; outline: 1px dashed #79cdec; outline-offset: .5rem; }
.splash footer { position: relative; padding: 1rem; color: #435664; font-size: .75rem; }
@keyframes pulse {
  50% { color: #c6eeff; text-shadow: 0 0 .65rem #54c8ff, 0 0 2.4rem #0879bd; transform: scale(1.025); }
}

.board-page {
  background: radial-gradient(ellipse at top, #101d2a 0, #06090e 55%, #020304 100%);
}
.board-header, .board-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); color: #7898ad; font-size: .78rem; letter-spacing: .12em; }
.back { color: var(--green); text-decoration: none; text-shadow: 0 0 .35rem #55ff8a; }
.console {
  position: relative;
  width: min(950px, calc(100% - 2rem));
  margin: clamp(1rem, 5vh, 4rem) auto 2rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 2px solid #8edaff88;
  border-radius: .35rem;
  background: var(--panel);
  box-shadow: .5rem .5rem 0 #000, 0 0 1rem #39bfff22, inset 0 0 2rem #0008;
}
.title-block { margin-bottom: 2rem; }
.title-block h1 { margin: .15rem 0; color: #8edaff; font-size: clamp(2rem, 7vw, 5rem); line-height: .9; letter-spacing: -.06em; text-shadow: 0 0 .7rem #39bfff88; }
.title-block p { margin: .4rem 0; color: #9ca3b5; }
.title-block .eyebrow { color: #8edaff; font-size: .78rem; letter-spacing: .12em; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 2vw, 1rem); }
.pad {
  aspect-ratio: 1.15;
  min-width: 0;
  padding: .8rem;
  border: 0;
  border-top: .6rem solid #8edaff;
  border-radius: .3rem;
  background: #272b34;
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 0 0 2px #ffffff22, 0 .35rem 0 #050506;
  transition: translate 60ms, box-shadow 60ms, background 100ms;
}
.pad b { display: block; font-size: clamp(.8rem, 2.1vw, 1.15rem); overflow-wrap: anywhere; }
.pad span { float: right; margin-top: 1.3rem; color: var(--green); font-weight: 700; }
.pad:hover, .pad:focus-visible { background: #3a3f4b; outline: 2px solid var(--green); outline-offset: 3px; }
.pad:active, .pad.playing { translate: 0 .3rem; box-shadow: inset 0 0 1rem #55ff8a88, 0 .05rem 0 #050506; background: #555d6c; }
.transport { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dashed #8edaff88; }
.transport button { padding: .7rem 1rem; border: 1px solid var(--green); background: #0d1c12; color: var(--green); cursor: pointer; }
.transport label { display: flex; align-items: center; gap: 1rem; color: #aeb4c2; font-size: .8rem; }
.transport input { width: min(260px, 100%); accent-color: var(--green); }
.transport output { grid-column: 1 / -1; min-height: 2.4rem; padding: .7rem; border: 1px inset #8edaff66; background: #030b08; color: var(--green); font-size: .85rem; }
.board-footer { justify-content: center; text-align: center; }
@media (max-width: 620px) {
  .pads { grid-template-columns: repeat(2, 1fr); }
  .transport { grid-template-columns: 1fr; }
  .transport output { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .enter { animation: none; } }


/* Project index */
.index-page {
  overflow-x: hidden;
  background: radial-gradient(ellipse at top, #101d2a 0, #06090e 55%, #020304 100%);
  color: #aab8c2;
}
.index-page::before,
.board-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #0008 4px 5px);
  box-shadow: inset 0 0 10rem #000;
}
.walkthrough {
  position: relative;
  width: min(800px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 5rem) 0;
  line-height: 1.55;
  text-shadow: 0 0 .5rem #6598b944;
}
.walkthrough header { text-align: left; }
.walkthrough h1 {
  margin: 0;
  color: #8edaff;
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  letter-spacing: .08em;
  text-shadow: 0 0 .7rem #39bfff88;
}
.walkthrough h2 { margin: 3.5rem 0 0; color: #8edaff; letter-spacing: .15em; }
.walkthrough h3 { margin: 0 0 .2rem; color: #8796a0; font-size: 1rem; }
.walkthrough p { margin: .25rem 0; }
.walkthrough .chrome, .walkthrough .rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px dashed #8edaff;
  box-shadow: 0 0 .45rem #39bfff88;
}
.file-meta { color: #647581; font-size: .78rem; letter-spacing: .08em; }
.walkthrough a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 .35rem #55ff8a, 0 0 1rem #14913b88;
}
.walkthrough a:hover, .walkthrough a:focus-visible {
  color: #caffd9;
  outline: 1px dashed #8edaff;
  outline-offset: .25rem;
}
.project { margin: 2rem 0; padding-left: 1.2rem; border-left: 2px solid #39bfff88; }
.project p { color: #73838e; }
.walkthrough footer { margin-top: 4rem; color: #566570; text-align: left; font-size: .8rem; }
@media (max-width: 540px) {
  .project { padding-left: .8rem; }
}