:root {
  --ink: #050505;
  --paper: #fff;
  --grey: #777;
  --line: #d8d8d8;
  --signal: #f2dc00;
  --display: "Nimbus Mono PS", "Liberation Mono", monospace;
  --utility: "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
body {
  width: min(100% - 40px, 680px);
  height: 100dvh;
  max-height: 100dvh;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-block: clamp(24px, 6vh, 56px) clamp(16px, 4vh, 40px);
  font-family: var(--utility);
  font-size: 14px;
  text-rendering: geometricPrecision;
}
a { color: inherit; }
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.hero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 28px;
}
.label {
  margin: 0;
  padding: 10px 8px;
  color: var(--grey);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1 {
  position: relative;
  margin: 0;
  font: 400 clamp(4rem, 15vw, 7.8rem)/.78 var(--display);
  letter-spacing: -.11em;
  text-transform: uppercase;
  transform-origin: center;
  white-space: pre-line;
}
.title-stage { position: relative; width: min(100%, 5.45ch); height: 1.56em; font: 400 clamp(4rem, 15vw, 7.8rem)/.78 var(--display); text-align: left; }
.title-stage h1, .title-stage .title-login { position: absolute; inset: 0; width: 100%; }
.index {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.index::-webkit-scrollbar { width: 6px; }
.index::-webkit-scrollbar-track { background: transparent; }
.index::-webkit-scrollbar-thumb { background: var(--line); }
nav { margin: 0 auto; border-top: 1px solid var(--ink); }
nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(.8rem, 2.5vw, .95rem);
  text-decoration: none;
  transition: padding .16s ease, background .16s ease, color .16s ease;
}
nav a:hover, nav a:focus-visible {
  padding-inline: 14px;
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}
nav a.is-private {
  animation: private-row-in 420ms cubic-bezier(.2,.85,.2,1) both;
}
.project-label {
  display: flex;
  align-items: center;
  gap: .5em;
  min-width: 0;
}
.project-lock {
  width: .72em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  fill: currentColor;
}
.project-lock .title-mark-shackle {
  transform: rotate(-24deg);
  transform-box: view-box;
  transform-origin: 6px 17px;
}

.title-mark {
  display: inline;
  letter-spacing: 0;
  vertical-align: baseline;
}
.title-mark[hidden] { display: none; }
.title-mark-ink {
  display: inline;
  letter-spacing: 0;
}
.title-mark-lock {
  display: inline-block;
  width: .2em;
  height: .26em;
  margin-left: -0.2em;
  vertical-align: baseline;
  overflow: visible;
  opacity: 0;
  fill: currentColor;
  pointer-events: none;
}
.title-mark-shackle { transform-box: view-box; transform-origin: 6px 17px; }
.title-mark.is-lock .title-mark-ink { animation: mark-dot-to-lock 320ms cubic-bezier(.2,.8,.2,1) both; }
.title-mark.is-lock .title-mark-lock { opacity: 1; }
.title-mark.is-lock .title-mark-body { animation: mark-body-from-dot 320ms cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
.title-mark.is-lock .title-mark-shackle { animation: mark-shackle-on 360ms 240ms cubic-bezier(.2,.8,.2,1) both; }
.title-mark.is-lock.is-open .title-mark-shackle { animation: mark-shackle-open 520ms cubic-bezier(.2,.8,.2,1) both; }
.title-mark.is-settled .title-mark-ink { opacity: 0; animation: none; }
.title-mark.is-settled .title-mark-lock { opacity: 1; }
.title-mark.is-settled .title-mark-body,
.title-mark.is-settled .title-mark-shackle { animation: none; }
.title-mark.is-settled .title-mark-shackle { transform: rotate(0deg); }
.title-mark.is-settled.is-open .title-mark-shackle { transform: rotate(-24deg); }

.title-login { margin: 0; overflow: visible; font: 400 clamp(4rem, 15vw, 7.8rem)/.78 var(--display); letter-spacing: -.11em; text-transform: uppercase; }
.title-login label { display: block; height: .78em; min-width: 0; white-space: nowrap; }
.title-login input { display: inline-block; min-width: 0; width: 3.2ch; height: .78em; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; line-height: .78; letter-spacing: inherit; outline: 0; vertical-align: baseline; }
.title-login input::placeholder { color: var(--ink); opacity: 1; }
.title-login input:focus::placeholder { animation: blink 900ms steps(1, end) infinite; }
.title-login .auth-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; font: 400 1rem/1 var(--utility); color: transparent; background: transparent; }
.title-login.auth-failed { color: #a20c00; animation: auth-reject 620ms cubic-bezier(.36,.07,.19,.97) both; }
.title-login.auth-failed input, .title-login.auth-failed input::placeholder { color: #a20c00; }
.auth-error { position: absolute; left: 0; top: 100%; margin: 6px 0 0; color: #a20c00; font: 400 .85rem/1.4 var(--utility); letter-spacing: 0; text-transform: none; white-space: normal; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes auth-reject {
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
@keyframes private-row-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mark-dot-to-lock {
  to { opacity: 0; }
}
@keyframes mark-body-from-dot {
  from { transform: scale(.92); }
  to { transform: scale(1); }
}
@keyframes mark-shackle-on {
  from { opacity: 0; transform: rotate(0deg) scaleY(0); }
  to { opacity: 1; transform: rotate(0deg) scaleY(1); }
}
@keyframes mark-shackle-open {
  from { transform: rotate(0deg); }
  to { transform: rotate(-24deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  h1 mark { animation: none; }
}
@media (max-width: 480px) {
  body { width: calc(100% - 28px); padding-block: 20px 16px; }
  .hero { padding-bottom: 20px; }
  h1 { font-size: clamp(3.8rem, 22vw, 6rem); }
  .title-stage { font-size: clamp(3.8rem, 22vw, 6rem); }
  .title-login { font-size: clamp(3.8rem, 22vw, 6rem); }
}