* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:              oklch(10% 0 0deg);
  --surface:         oklch(14% 0 0deg);
  --surface-hover:   oklch(16% 0 0deg);
  --surface-header:  oklch(11% 0 0deg);
  --border:          oklch(26% 0 0deg);
  --text:            oklch(92% 0 0deg);
  --text-bright:     oklch(100% 0 0deg);
  --text-code:       oklch(78% 0 0deg);
  --muted:           oklch(58% 0 0deg);
  --accent:          oklch(68% 0.22 25deg);
  --accent-dim:      color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-border:   color-mix(in oklch, var(--accent) 35%, transparent);
  --green:           oklch(84% 0.18 158deg);
  --green-dim:       color-mix(in oklch, var(--green) 12%, transparent);
  --green-border:    color-mix(in oklch, var(--green) 35%, transparent);
  --yellow:          oklch(82% 0.15 80deg);
  --yellow-dim:      color-mix(in oklch, var(--yellow) 10%, transparent);
  --yellow-border:   color-mix(in oklch, var(--yellow) 30%, transparent);
  --blue:            oklch(72% 0.18 250deg);
  --blue-dim:        color-mix(in oklch, var(--blue) 10%, transparent);
  --blue-border:     color-mix(in oklch, var(--blue) 30%, transparent);
  --purple:          oklch(72% 0.18 300deg);
  --purple-dim:      color-mix(in oklch, var(--purple) 10%, transparent);
  --purple-border:   color-mix(in oklch, var(--purple) 30%, transparent);
  --mono:            'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:             oklch(97% 0 0deg);
    --surface:        oklch(100% 0 0deg);
    --surface-hover:  oklch(94% 0 0deg);
    --surface-header: oklch(93% 0 0deg);
    --border:         oklch(82% 0 0deg);
    --text:           oklch(20% 0 0deg);
    --text-bright:    oklch(10% 0 0deg);
    --text-code:      oklch(30% 0 0deg);
    --muted:          oklch(50% 0 0deg);
    --accent:         oklch(48% 0.22 25deg);
    --green:          oklch(40% 0.18 158deg);
    --yellow:         oklch(46% 0.15 80deg);
    --blue:           oklch(42% 0.18 250deg);
    --purple:         oklch(45% 0.18 300deg);
  }
}

/* Base */

.app-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  min-height: 100dvh;
}

/* Layout */

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-logo {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-bright);
  text-decoration: none;
  border: none;
}

.site-logo-accent {
  color: var(--accent);
}

.site-nav {
  margin-inline-start: auto;
  display: flex;
  gap: 1.25rem;
}

.site-nav-link {
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  border: none;
  transition: color 0.15s;
}

.site-nav-link:hover {
  color: var(--text);
}

.site-main {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 2rem 1.75rem;
}

/* Card */

.card {
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border);
  font-size: 0.625rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.card-body {
  padding: 0.75rem 0.875rem;
}

/* Index page */

.page-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-end: 0.375rem;
  color: var(--text-bright);
}

.page-subtitle {
  color: var(--muted);
  margin-block-end: 1.75rem;
  font-size: 0.75rem;
}

.example-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.example-card {
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
}

.example-arrow {
  color: var(--muted);
  transition: color 0.15s, transform 0.15s;
}

.example-card:hover {
  border-color: var(--muted);
  background: var(--surface-hover);
}

.example-card:hover .example-arrow {
  color: var(--text);
  transform: translateX(3px);
}

.example-card-title {
  color: var(--text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
}

.example-card-desc {
  font-size: 0.6875rem;
  color: var(--muted);
  margin-block-start: 0.1875rem;
}

.example-card-desc-code {
  font-family: var(--mono);
  color: var(--text);
}

/* Example page */

.back {
  font-size: 0.6875rem;
  color: var(--muted);
  border: none;
  display: inline-block;
  margin-block-end: 1.25rem;
  text-decoration: none;
  transition: color 0.15s;
}

.back:hover {
  color: var(--text);
}

.example-header {
  margin-block-end: 1.25rem;
}

.example-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-block-end: 0.375rem;
}

.example-desc {
  font-size: 0.75rem;
  color: var(--text);
  line-height: 1.65;
}

.example-desc-code {
  font-family: var(--mono);
  color: var(--yellow);
  font-size: 0.6875rem;
}

/* Row (toggle + badge) */

.row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

/* CSP toggle */

.csp-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0.3125rem;
  overflow: hidden;
  width: fit-content;
}

.toggle-tab {
  border: none;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-family: var(--mono);
  color: var(--muted);
  background: var(--surface);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.toggle-tab:hover {
  color: var(--text);
  border: none;
}

.toggle-tab.active-unsafe {
  background: var(--accent-dim);
  color: var(--accent);
}

.toggle-tab.active-safe {
  background: var(--green-dim);
  color: var(--green);
}

/* Info box (CSP header) */

.info-box {
  margin-block-end: 1rem;
  border-left: 3px solid var(--blue-border);
  background: color-mix(in oklch, var(--blue-dim) 40%, var(--surface));
}

.info-box .card-header {
  color: var(--blue);
}

.info-code {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
}

.info-box.muted .info-code {
  color: var(--muted);
}

.info-code-muted {
  font-style: normal;
  color: var(--muted);
}

/* Script box */

.script-box {
  margin-block-end: 1rem;
  border-left: 3px solid var(--purple-border);
  background: color-mix(in oklch, var(--purple-dim) 40%, var(--surface));
}

.script-box .card-header {
  color: var(--purple);
}

.script-pre {
  overflow-x: auto;
}

.script-code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-code);
  white-space: pre-wrap;
  word-break: break-all;
}

.script-comment {
  color: var(--muted);
}

.nonce-token {
  color: var(--green);
  background: var(--green-dim);
  padding: 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
}

.nonce-missing {
  color: var(--accent);
}

.console-hint {
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.hash-note {
  margin-block-start: 0.625rem;
  font-size: 0.6875rem;
  color: var(--muted);
  word-break: break-all;
}

/* Demo box */

.demo-box {
  margin-block-end: 1rem;
  border-left: 3px solid var(--yellow-border);
  background: color-mix(in oklch, var(--yellow-dim) 40%, var(--surface));
}

.demo-box .card-header {
  color: var(--yellow);
}

.demo-label {
  display: block;
  margin-block-end: 0.5rem;
}

.demo-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.4375rem 0.625rem;
  outline: none;
  transition: border-color 0.15s;
}

.demo-input:focus {
  border-color: var(--muted);
}

.demo-btn {
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.4375rem 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}

.demo-btn:hover {
  background: var(--border);
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

/* Output */

.output {
  font-size: 0.75rem;
  margin-block-end: 1rem;
}

.output-code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text);
}

/* Creature panel */

.creature-panel {
  margin-block: 1rem;
}

.creature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 1rem;
}

.creature-row .creature-panel {
  margin-block: 0;
}

.creature-panel.ran {
  border-color: var(--green-border);
}

.creature-panel.ran .card-header {
  color: var(--green);
}

.creature-panel.blocked {
  border-color: var(--accent-border);
}

.creature-panel.blocked .card-header,
.creature-panel.xss .card-header {
  color: var(--accent);
}

.creature-panel.xss {
  border-color: var(--accent-border);
}

.creature-stage {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.5rem;
}

.creature {
  font-size: 1.125rem;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s;
  white-space: pre;
}

.creature.ran {
  color: var(--green);
  animation: creature-bounce 0.4s ease-out;
}

.creature.blocked {
  color: var(--accent);
}

.creature.xss {
  color: var(--accent);
  animation: creature-bounce 0.4s ease-out;
}

.creature-speech {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0%;
  transition: opacity 0.3s 0.2s;
}

.creature-speech.ran {
  color: var(--green);
  opacity: 100%;
}

.creature-speech.blocked,
.creature-speech.xss {
  color: var(--accent);
  opacity: 100%;
}

@keyframes creature-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  60%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}