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

:root {
  --bg: #0A0A0C; --fg: #E8E8E4;
  --dim:   color-mix(in srgb, var(--fg) 60%, var(--bg));
  --faint: color-mix(in srgb, var(--fg) 40%, var(--bg));
  --line:  color-mix(in srgb, var(--fg) 13%, var(--bg));
  --line-2:color-mix(in srgb, var(--fg) 24%, var(--bg));
  --accent: #FCEE0A;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.5;
  min-height: 100dvh; display: flex; flex-direction: column;
}

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem;
  align-items: flex-end; justify-content: space-between;
  padding: 1.4rem clamp(1.1rem, 4vw, 3rem) 1.2rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.brand h1 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.mark { width: 9px; height: 9px; background: var(--accent); align-self: center; }
.sub { margin: 0; font-size: .7rem; color: var(--faint); letter-spacing: .02em; text-transform: uppercase; }

.controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.btn, .filebtn {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .46rem .8rem;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 3px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.btn:hover:not(:disabled), .filebtn:hover { color: var(--fg); border-color: var(--fg); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary { color: var(--bg); background: var(--fg); border-color: var(--fg); font-weight: 500; }
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.btn.primary:disabled { background: var(--line-2); border-color: var(--line-2); color: var(--faint); }
#file { display: none; }
.rule { width: 1px; height: 20px; background: var(--line-2); margin: 0 .3rem; }

main { flex: 1; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.1rem, 4vw, 3rem); display: grid; place-items: center; }

.drop {
  border: 1px dashed var(--line-2); border-radius: 4px;
  padding: clamp(3rem, 10vw, 6rem) clamp(2rem, 8vw, 5rem);
  text-align: center; transition: border-color .15s, color .15s;
}
.drop.hot { border-color: var(--accent); }
.drop-lead { margin: 0 0 .5rem; font-size: 1rem; color: var(--fg); }
.drop-sub { margin: 0; font-size: .78rem; color: var(--faint); }

.stage { display: flex; gap: clamp(1rem, 3vw, 2.4rem); align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.plate { margin: 0; }
.plate canvas {
  display: block; max-width: min(86vw, 460px); height: auto;
  border: 1px solid var(--line);
  box-shadow: 0 2px 70px -18px rgba(255,255,255,.2);
  image-rendering: auto;
}
.plate.small canvas { max-width: min(40vw, 150px); opacity: .55; }
.plate figcaption {
  margin-top: .7rem; font-size: .7rem; color: var(--faint);
  letter-spacing: .05em; text-transform: uppercase;
}
#nowcap { color: var(--fg); }

.readout {
  margin: 1.6rem 0 0; font-size: .7rem; color: var(--faint);
  letter-spacing: .04em; text-align: center;
}

.foot {
  max-width: 46rem; margin: clamp(2.5rem, 7vw, 6rem) auto 0;
  padding: 2rem clamp(1.1rem, 4vw, 3rem) 3.5rem;
  border-top: 1px solid var(--line);
  font-family: system-ui, sans-serif;
}
.foot p { font-size: .82rem; color: var(--dim); margin: 0 0 .9rem; }
.foot .dim { color: var(--faint); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }