/* Guido's significant whitespace. In a brace language, indentation is decoration —
   so it can disagree with the braces, and code can look guarded while running
   unconditionally (the classic dangling-statement bug). Python makes the indentation
   itself the block: what you see is what runs. Toggle the guard and the style and
   watch which statements actually execute. Vanilla JS, no deps, no build. Dark theme.
   Palette shared with siblings: green = a line that ran / honest code (the win),
   violet = a line that ran when it looked like it shouldn't. No red. */

#python-blocks {
  --pb-ran: #30d158;                 /* executed, as the layout implies — honest */
  --pb-surprise: #b488ff;           /* executed despite looking guarded — the lie (violet, not red) */
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.pb-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.pb-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.pb-controls { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pb-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); }
.pb-mode {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
  border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55));
  padding: 7px 13px; border-radius: 7px; transition: color 0.18s, background 0.18s;
}
.pb-mode:hover { color: var(--color-text-primary, #fff); }
.pb-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }

.pb-guard { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--color-text-secondary, rgba(255,255,255,0.7)); cursor: pointer; user-select: none; }
.pb-switch { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.16); position: relative; transition: background 0.2s; flex: 0 0 auto; }
.pb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.pb-guard.on .pb-switch { background: var(--pb-ran); }
.pb-guard.on .pb-switch::after { transform: translateX(16px); }

/* code */
.pb-code {
  font-family: var(--font-mono, "SF Mono", Monaco, monospace); font-size: 0.85rem; line-height: 1.85;
  background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 9px; padding: 14px 8px; overflow-x: auto;
}
.pb-line { display: block; white-space: pre; padding: 1px 12px; border-radius: 4px; color: #c8c8cc; transition: background 0.25s, color 0.25s; }
.pb-line.ran { background: rgba(48,209,88,0.16); color: #fff; box-shadow: inset 3px 0 0 var(--pb-ran); }
.pb-line.surprise { background: rgba(180,136,255,0.18); color: #fff; box-shadow: inset 3px 0 0 var(--pb-surprise); }
.pb-cmt { color: rgba(255,255,255,0.34); }

.pb-readout {
  margin-top: 16px; font-size: 0.9rem; line-height: 1.55; min-height: 2.6em;
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 14px 16px; transition: border-color 0.25s;
}
.pb-readout.honest { border-color: var(--pb-ran); }
.pb-readout b { color: #fff; }
.pb-readout .pb-hl-ran { color: var(--pb-ran); font-weight: 650; }
.pb-readout .pb-hl-surprise { color: var(--pb-surprise); font-weight: 650; }

.pb-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }