/* K1 Walkthrough — kryptos.today brand */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* Backgrounds */
  --bg:        #0c1612;        /* deep teal-black */
  --bg-2:      #0f1a16;        /* card / inset */
  --bg-3:      #142420;        /* button bg */
  /* Foregrounds */
  --ink:       #e8e2d2;        /* warm ivory */
  --ink-soft:  #c8bfa8;
  --dim:       rgba(232,226,210,0.55);
  --faint:     rgba(232,226,210,0.22);
  --rule:      rgba(232,226,210,0.10);
  /* Accents */
  --amber:     #c89860;        /* primary — the "A.I." orange */
  --amber-2:   #b07f48;
  --green:     #6b9e7a;        /* the • LIVE green */
  --green-dim: rgba(107,158,122,0.55);
  --plain:     #c89860;        /* plaintext = amber */
  --key:       #6b9e7a;        /* key = green */
  --cipher:    #d76a4a;        /* ciphertext = warmer red-orange */
}

* { box-sizing: border-box; }

html, body { margin:0; padding:0; height:100%; background: var(--bg); color: var(--ink); }
body { font-family: 'Newsreader', Georgia, serif; overflow:hidden; }

.mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }
.serif { font-family: 'Newsreader', Georgia, serif; }

deck-stage::part(overlay) { /* not exposed but harmless */ }

/* ── Slide scaffold ──────────────────────────────────────────────────────── */
.slide {
  position: absolute; inset: 0;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* Faint background KRYPTOS letters scattered across slides */
.bg-letters {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  color: rgba(232,226,210,0.035);
  font-size: 280px;
  line-height: 1;
  user-select: none;
  z-index: 0;
}
.bg-letters span {
  position: absolute;
}

/* Subtle scanline / vignette */
.slide::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 50%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}
.slide-content { position: relative; z-index: 2; height: 100%; }

/* ── Top chrome strip ────────────────────────────────────────────────────── */
.chrome-top {
  position: absolute; top: 36px; left: 64px; right: 64px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--dim); letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 5;
  white-space: nowrap;
}
.chrome-top .left { display:flex; gap: 24px; align-items:center; }
.chrome-top .right { display:flex; gap: 32px; align-items:center; }
.dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--green); box-shadow: 0 0 8px var(--green-dim);
  margin-right: 10px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.wordmark {
  letter-spacing: 0.55em; color: var(--ink); font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
.wordmark .dotsep { color: var(--faint); margin: 0 0.15em; }

.chrome-top .right .tag { color: var(--amber); }

.chrome-top hr,
.hr {
  border: 0; height: 1px; background: var(--rule); margin: 0;
}
.rule-top {
  position: absolute; top: 78px; left: 64px; right: 64px;
  height: 1px; background: var(--rule); z-index: 5;
}

/* ── Bottom chrome ───────────────────────────────────────────────────────── */
.chrome-bottom {
  position: absolute; bottom: 36px; left: 64px; right: 64px;
  display: flex; align-items: flex-end; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase;
  z-index: 5;
}
.rule-bot {
  position: absolute; bottom: 78px; left: 64px; right: 64px;
  height: 1px; background: var(--rule); z-index: 5;
}

/* ── Eyebrow / chapter labels ────────────────────────────────────────────── */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--green);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.eyebrow .num { color: var(--amber); margin-right: 12px; }

/* ── Headlines ──────────────────────────────────────────────────────────── */
.headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 92px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 28px 0;
}
.headline .accent { color: var(--amber); font-style: italic; font-weight: 400; }
.headline .qmark  { color: var(--amber); }
.subhead {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 1100px;
  margin: 0;
}
.subhead em { color: var(--ink); font-style: italic; }
.subhead b  { color: var(--ink); font-weight: 500; }
.subhead .mono { font-size: 22px; color: var(--ink); letter-spacing: 0.06em; }

/* ── Bracket-framed panel (the brand's signature corner brackets) ──────── */
.bracket-panel {
  position: relative;
  padding: 36px;
}
.bracket-panel::before,
.bracket-panel::after,
.bracket-panel > .br-tr,
.bracket-panel > .br-br {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--amber);
}
.bracket-panel::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket-panel::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bracket-panel > .br-tr { display:none; }
.bracket-panel > .br-br { display:none; }
.bracket-panel { background: rgba(15,26,22,0.6); }
.bracket-panel.with-bottom-brackets { padding-bottom: 44px; }
.bracket-panel.with-bottom-brackets::before { /* keep */ }
.bracket-panel.with-bottom-brackets::after  { /* keep */ }

/* Use real corner brackets via 4 absolutely-positioned divs for full control */
.brk { position:absolute; width: 22px; height: 22px; border: 1.5px solid var(--amber); }
.brk.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brk.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brk.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brk.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ── Stat strip (TOTAL ATTEMPTS · CURRENT STAGE · ATTEMPTS/SEC) ──────────── */
.stat-strip {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  margin: 0;
}
.stat {
  padding: 0 32px;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: center;
}
.stat .label .dot { width: 7px; height: 7px; }
.stat .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat .value .em { color: var(--amber); }
.stat .value .small { font-size: 22px; color: var(--ink-soft); }

/* ── Tag chip (the "K4 · 1990" amber chip) ──────────────────────────────── */
.chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--amber);
  padding: 7px 14px;
}
.chip.green { border-color: var(--green); color: var(--green); }
.chip.solid { background: var(--amber); color: #1a1208; border-color: var(--amber); }

/* ── Mono cell rows (plaintext / key / cipher visual) ──────────────────── */
.cell-row { display: flex; gap: 8px; }
.cell {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 400;
  border: 1px solid var(--rule);
  color: var(--ink);
}
.cell.plain  { color: var(--plain);  border-color: rgba(200,152,96,0.5);  background: rgba(200,152,96,0.08); }
.cell.key    { color: var(--key);    border-color: rgba(107,158,122,0.5); background: rgba(107,158,122,0.08); }
.cell.cipher { color: var(--cipher); border-color: rgba(215,106,74,0.5);  background: rgba(215,106,74,0.08); }
.cell.dim    { color: var(--faint);  border-color: var(--rule); }

.cell.lg { width: 140px; height: 140px; font-size: 64px; }
.cell.sm { width: 52px; height: 64px; font-size: 26px; }
.cell.xs { width: 42px; height: 56px; font-size: 22px; }

.row-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.row-label.plain  { color: var(--plain);  }
.row-label.key    { color: var(--key);    }
.row-label.cipher { color: var(--cipher); }

.idx-row { display: flex; gap: 8px; margin-top: 6px; }
.idx-row .ix {
  width: 42px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.idx-row .ix.hot.plain  { color: var(--plain); }
.idx-row .ix.hot.key    { color: var(--key); }
.idx-row .ix.hot.cipher { color: var(--cipher); }

/* ── Cipher block (large monospace) ─────────────────────────────────────── */
.cipher-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  letter-spacing: 0.22em;
  color: var(--cipher);
  line-height: 1.5;
  font-weight: 400;
}

/* ── Plus / Equals operators ────────────────────────────────────────────── */
.op {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 300;
  color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 140px;
  align-self: flex-end;
}

/* ── Math callout ───────────────────────────────────────────────────────── */
.math {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.math .pl { color: var(--plain); }
.math .ky { color: var(--key); }
.math .cp { color: var(--cipher); }
.math .div { color: var(--faint); font-size: 16px; letter-spacing: 0.3em; }
.math .note { color: var(--dim); font-size: 14px; letter-spacing: 0.06em; }

/* ── KRYPTOS alphabet strip ─────────────────────────────────────────────── */
.alpha-strip { display: flex; gap: 4px; }
.alpha-strip .ch {
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.alpha-strip .ch .box {
  width: 50px; height: 64px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  color: var(--ink);
  position: relative;
}
.alpha-strip .ch .pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.alpha-strip .ch.hero .box {
  border-color: var(--amber);
  background: rgba(200,152,96,0.10);
  color: var(--amber);
}
.alpha-strip .ch.hot .box {
  border-color: currentColor;
}
.alpha-strip .ch.hot.plain  { color: var(--plain);  }
.alpha-strip .ch.hot.plain  .box { background: rgba(200,152,96,0.18); border-color: var(--plain); color: var(--plain); }
.alpha-strip .ch.hot.key    { color: var(--key);    }
.alpha-strip .ch.hot.key    .box { background: rgba(107,158,122,0.18); border-color: var(--key); color: var(--key); }
.alpha-strip .ch.hot.cipher { color: var(--cipher); }
.alpha-strip .ch.hot.cipher .box { background: rgba(215,106,74,0.18); border-color: var(--cipher); color: var(--cipher); }
.alpha-strip .ch.hot .pos { color: currentColor; }

/* ── Footer note style ──────────────────────────────────────────────────── */
.fnote {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.fnote .arrow { color: var(--cipher); }
.fnote .dim   { color: var(--faint); }

/* ── Buttons (slide controls) ───────────────────────────────────────────── */
.btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--bg-3);
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 14px 24px;
  cursor: pointer;
  transition: background 120ms;
}
.btn:hover { background: rgba(200,152,96,0.12); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Step indicator (bottom-right of slide 5) ───────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 3px 4px;
  width: 280px;
}
.steps .step {
  height: 4px; background: var(--rule);
}
.steps .step.done { background: var(--amber); }
.steps .step.active { background: var(--ink); }

/* ── Cipher → plain reveal table (last slide) ───────────────────────────── */
.reveal-row {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
  font-size: 22px;
  line-height: 1.7;
  color: var(--faint);
}
.plaintext-final {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plaintext-final .err {
  color: var(--cipher);
  border-bottom: 2px solid var(--cipher);
  padding-bottom: 2px;
  font-style: italic;
}