:root {
  --bg:          #f3f1ea;
  --bg-alt:      #e3dfd3;
  --surface:     #fbfaf6;
  --ink:         #171410;
  --ink-soft:    #5a554d;
  --ink-muted:   #918b82;
  --rule:        rgba(23,20,16,0.14);
  --rule-strong: rgba(23,20,16,0.32);
  --accent:      #3a4d6b;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body:   'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme='dark'] {
  --bg:          #0e0d0b;
  --bg-alt:      #191713;
  --surface:     #14120f;
  --ink:         #f0ece3;
  --ink-soft:    #b0a99d;
  --ink-muted:   #777067;
  --rule:        rgba(240,236,227,0.14);
  --rule-strong: rgba(240,236,227,0.32);
  --accent:      #8aa1c6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:          #0e0d0b;
    --bg-alt:      #191713;
    --surface:     #14120f;
    --ink:         #f0ece3;
    --ink-soft:    #b0a99d;
    --ink-muted:   #777067;
    --rule:        rgba(240,236,227,0.14);
    --rule-strong: rgba(240,236,227,0.32);
    --accent:      #8aa1c6;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

/* Viewfinder graphic — accent-tinted corners and crosshair */
.viewfinder {
  position: relative;
  width: 160px;
  height: 106px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  margin: 0 auto 2.5rem;
}
.viewfinder::before, .viewfinder::after,
.viewfinder .corner-br, .viewfinder .corner-bl {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent);
  border-style: solid;
}
.viewfinder::before  { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.viewfinder::after   { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.viewfinder .corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.viewfinder .corner-bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.crosshair {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crosshair::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 38%;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.crosshair::after {
  content: '';
  position: absolute;
  width: 38%;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.crosshair-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  position: relative;
  z-index: 1;
}
.shutter-label {
  position: absolute;
  top: 5px; right: 8px;
  font: 400 0.5rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0.55;
  text-transform: uppercase;
}
.exposure-label {
  position: absolute;
  bottom: 5px; left: 8px;
  font: 400 0.5rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Error content */
.error-code {
  font: 400 clamp(5rem,15vw,8rem)/1 var(--font-mono);
  color: var(--accent);
  opacity: 0.14;
  letter-spacing: -0.04em;
  margin-bottom: -1.5rem;
  user-select: none;
}
.headline {
  font: 600 clamp(1.5rem,4vw,2.2rem)/1.2 var(--font-body);
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.headline em {
  color: var(--accent);
  font-style: normal;
}
.divider {
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto 1.4rem;
  opacity: 0.42;
}
.tagline {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.85;
  max-width: 380px;
  margin: 0 auto 2.5rem;
}
.tagline strong {
  color: var(--ink);
  font-weight: 600;
}

/* Actions */
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font: 500 0.65rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-soft);
  font: 500 0.65rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--ink); }

/* EXIF footer */
.exif-note {
  margin-top: 3rem;
  font: 400 0.58rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  opacity: 0.5;
  text-transform: uppercase;
}