@font-face {
  font-family: Archivo;
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --base: #0c1114;
  --surface: #141c20;
  --line: #2d3a40;
  --ink: #f1ede4;
  --muted: #a7b0b3;
  --copper: #e3ae7c;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--base);
}

* { box-sizing: border-box; }

body { margin: 0; user-select: none; }
input { user-select: text; }

.entrance {
  display: grid;
  grid-template-columns: minmax(19rem, .86fr) minmax(0, 1.55fr);
  min-height: 100svh;
  max-width: 112rem;
  margin: auto;
  padding: clamp(1.25rem, 2.6vw, 3rem);
  gap: clamp(1.25rem, 3.1vw, 3.75rem);
}

.entrance-panel {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  padding: .8rem clamp(.5rem, 1.65vw, 2rem) .65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .68rem;
  font-size: .96rem;
  font-weight: 650;
}

.brand img { display: block; }

.sign-in {
  width: min(100%, 24rem);
  margin-block: 3.5rem;
}

h1 {
  margin: 0;
  font: 610 clamp(2.35rem, 4.05vw, 4rem)/1 Archivo, Inter, sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.intro { color: var(--muted); margin: .85rem 0 1.95rem; line-height: 1.55; }

form { display: grid; }

label {
  margin-bottom: .45rem;
  font-size: .85rem;
  font-weight: 600;
}

input {
  margin-bottom: 1rem;
  min-width: 0;
  width: 100%;
  min-height: 3.15rem;
  padding: .7rem .88rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .35rem;
  font: inherit;
}

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

.hint, .error { margin: 0 0 .95rem; line-height: 1.5; font-size: .83rem; }
.hint { color: var(--muted); }
.error { color: #ffb69e; }

button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 3.15rem;
  margin-top: .3rem;
  padding: .7rem 1rem;
  background: var(--copper);
  color: #1b130e;
  border: 0;
  border-radius: .35rem;
  font: 700 .95rem/1.25 Inter, system-ui, sans-serif;
  cursor: pointer;
}

button:hover { background: #f1c59b; }
button span { font-size: 1.28rem; line-height: 1; }

.panel-footer {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .77rem;
}

.local-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--copper); }

.screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: .55rem;
  overflow: hidden;
  background: var(--surface);
}

.frame { position: relative; min-height: 22rem; background: #1f211e; }

.frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  color: var(--muted);
  font-size: .77rem;
  font-variant-numeric: tabular-nums;
}

.shot-label { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); }
.shot-index { color: var(--copper); border-right: 1px solid var(--line); padding-inline-end: .75rem; }

@media (max-width: 46rem) {
  .entrance { grid-template-columns: 1fr; gap: 1.3rem; min-height: 100svh; }
  .entrance-panel { padding: .4rem .2rem; }
  .sign-in { width: 100%; max-width: 27rem; margin: 2.5rem auto 1.75rem; }
  .screen { min-height: 0; grid-template-rows: auto auto; align-self: start; }
  .frame { min-height: 0; aspect-ratio: 16 / 9; }
}