@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root { color-scheme: dark; background: #050505; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; background: #050505; }
body { color: #efede6; font-family: "Instrument Sans", Arial, sans-serif; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.home,
.opening,
.legacy {
  min-height: 100svh;
  padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}

.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(80px, 1fr) auto auto auto;
  align-items: start;
}

.plaque {
  justify-self: start;
  display: inline-grid;
  min-height: 60px;
  place-items: center;
  padding: 0 20px;
  border: 2px solid currentColor;
  color: #efede6;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: 1;
}

.line {
  align-self: end;
  max-width: 12ch;
  margin: 0 0 clamp(36px, 7vw, 84px);
  color: #efede6;
  font-size: clamp(52px, 10vw, 148px);
  font-weight: 690;
  letter-spacing: -.075em;
  line-height: .76;
}

.entry-actions {
  display: grid;
  grid-template-columns: minmax(220px, .6fr) minmax(320px, 1.4fr);
  border: 1px solid rgba(239, 237, 230, .9);
}

.files-entry,
.x-entry {
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  background: transparent;
  color: #efede6;
  cursor: pointer;
  text-decoration: none;
}

.files-entry { border-right: 1px solid rgba(239, 237, 230, .9); }
.x-entry[draggable="true"] { cursor: grab; user-select: none; -webkit-user-drag: element; }
.x-entry[draggable="true"]:active { cursor: grabbing; }
.files-entry input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.files-entry b,
.x-entry b { display: block; font-size: clamp(22px, 2.5vw, 40px); font-weight: 700; letter-spacing: -.045em; }
.x-entry small { display: block; margin-top: 5px; color: rgba(239, 237, 230, .56); font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.files-entry:hover,
.files-entry:focus-within,
.x-entry:hover,
.x-entry:focus-visible { background: #efede6; color: #181916; outline: 0; }
.x-entry:hover small,
.x-entry:focus-visible small { color: rgba(24, 25, 22, .58); }

.entry-object {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.entry-object i { display: block; border: 1px solid currentColor; }
.entry-object-pulse i:nth-child(5) { background: currentColor; }

.trust-line {
  margin: 28px 0 0;
  color: rgba(239, 237, 230, .52);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
}

.opening,
.legacy {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  background: #050505;
}
.opening strong,
.legacy h1 {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  color: rgba(239, 237, 230, .72);
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: .16em;
}
.opening > button {
  width: 60px;
  height: 60px;
  border: 0;
  background: #efede6;
  color: #181916;
  font-size: 28px;
  cursor: pointer;
}

.legacy { align-content: start; }
.legacy h1 { align-self: end; margin-bottom: 28px; }
.legacy-get,
.legacy > button {
  grid-column: 1 / -1;
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid #efede6;
  background: transparent;
  color: #efede6;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.legacy > button { margin-top: 12px; }
.legacy-get:hover,
.legacy-get:focus-visible,
.legacy > button:hover,
.legacy > button:focus-visible { background: #efede6; color: #181916; outline: 0; }

#room-root { position: fixed; z-index: 999998; inset: 0; background: #050505; }
noscript { display: block; padding: 40px; font-weight: 700; letter-spacing: .08em; }

@media (max-width: 720px) {
  .home { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .plaque { min-height: 48px; padding: 0 14px; font-size: 24px; }
  .line { align-self: center; margin: 40px 0; font-size: clamp(52px, 18vw, 88px); }
  .entry-actions { grid-template-columns: 1fr; }
  .files-entry { border-right: 0; border-bottom: 1px solid rgba(239, 237, 230, .9); }
  .files-entry,
  .x-entry { min-height: 92px; padding: 14px 16px; }
  .entry-object { width: 50px; height: 50px; flex-basis: 50px; }
  .x-entry small { display: block; }
  .trust-line { line-height: 1.5; }
}

@media (pointer: coarse) {
  .entry-actions { grid-template-columns: 1fr; }
  .files-entry { border-right: 0; }
  .x-entry { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}