/* fcc-cipher — site-specific Field Bulletin layer. * * Phosphor-green accent (Bletchley/CRT terminal feel). * Owns Enigma console + frequency chart + Caesar ribbon + Vigenère grid * + SHA-256 avalanche diff styles. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #7dd3a4 !important; --accent-2: #a4e1c0 !important; --accent-wash: color-mix(in srgb, #7dd3a4 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #3b8a64 !important; --accent-2: #4fa17b !important; --accent-wash: color-mix(in srgb, #3b8a64 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Enigma machine ─────────────────────────────────────────────── */ .enigma-mode-row { display: flex; gap: 0.4rem; margin: 0 0 0.85rem; align-items: center; flex-wrap: wrap; } .enigma-mode-row .mode-label { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-right: 0.4rem; } .enigma-mode-btn { font: 500 0.76rem/1 var(--mono); letter-spacing: 0.04em; padding: 0.4rem 0.85rem; border-radius: var(--r-1); background: transparent; border: 1px solid var(--border); color: var(--ink-3, var(--dim)); cursor: pointer; transition: color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out), background var(--dur-1) var(--ease-in-out); } .enigma-mode-btn:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .enigma-mode-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } .enigma-canvas-wrap { width: 100%; background: var(--bg); border: 0; border-top: 1px solid var(--border); padding: 0; } #enigmaCanvas { width: 100%; height: 520px; display: block; cursor: pointer; touch-action: pan-y; } .enigma-rotor-display { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.85rem; } .enigma-label { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .rotor-pos { font: 600 1.1rem/1 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); background: var(--panel-2); padding: 0.3rem 0.7rem; border-top: 1px solid var(--border); letter-spacing: -0.02em; } .enigma-output-row { display: flex; gap: 1rem; align-items: flex-end; margin-top: 0.85rem; flex-wrap: wrap; } .enigma-output-row > div { flex: 1; min-width: 220px; } .enigma-text { font: 500 1rem 'JetBrains Mono', ui-monospace, monospace; color: var(--text); background: var(--panel-2); padding: 0.55rem 0.8rem; border-top: 1px solid var(--border); min-height: 1.5em; letter-spacing: 0.05em; word-break: break-all; } .enigma-hint { font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--ink-3, var(--dim)); margin: 0.85rem 0 0; line-height: 1.55; } /* ── Cipher gallery (uses .cipher-card via shared museum.css) ──── */ .cipher-card .cipher-cat-dot { background: var(--accent); } .cipher-card .cipher-sample .cipher { color: var(--accent); } /* ── Frequency analysis ───────────────────────────────────────── */ .freq-textarea { width: 100%; resize: vertical; margin-bottom: 0.85rem; min-height: 4rem; } .freq-canvas-wrap { width: 100%; background: var(--bg); border-top: 1px solid var(--border); } #freqCanvas { width: 100%; height: 240px; display: block; } .freq-stats { display: flex; gap: 1.5rem; margin-top: 0.75rem; font: 500 0.85rem var(--mono); font-feature-settings: "tnum" 1, "zero" 1; } .freq-stat-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.3rem; display: block; } .freq-stat-value { color: var(--text); font-feature-settings: "tnum" 1, "zero" 1; } .freq-stat-value.accent { color: var(--accent); } .freq-stat-note { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--ink-3, var(--dim)); margin: 0.45rem 0 0; line-height: 1.55; } .freq-legend { display: flex; gap: 1rem; margin-top: 0.6rem; font: 500 0.74rem var(--mono); color: var(--ink-3, var(--dim)); } .freq-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .freq-legend-swatch { width: 10px; height: 10px; display: inline-block; } /* ── Caesar ribbon ────────────────────────────────────────────── */ .caesar-controls { display: grid; gap: 0.75rem; grid-template-columns: 1fr minmax(160px, 220px); align-items: start; margin-bottom: 0.85rem; } @media (max-width: 720px) { .caesar-controls { grid-template-columns: 1fr; } } .text-area, .freq-textarea, .text-input { width: 100%; } .caesar-output, .vigenere-output { font: 500 1rem 'JetBrains Mono', ui-monospace, monospace; background: var(--panel-2); border-top: 1px solid var(--border); padding: 0.6rem 0.85rem; min-height: 1.5em; word-break: break-all; color: var(--text); } .ribbon { display: block; margin-top: 0.85rem; padding: 0.65rem 0.4rem; background: var(--bg); border-top: 1px solid var(--border); overflow-x: auto; } .ribbon-row { display: flex; gap: 0; align-items: center; font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; } .ribbon-row + .ribbon-row { margin-top: 0.35rem; } .ribbon-row--plain { color: var(--ink-3, var(--dim)); } .ribbon-row--cipher { color: var(--accent); } .ribbon-label { flex: 0 0 36px; font: 500 0.65rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4, var(--dim)); padding: 0.3rem 0.5rem 0.3rem 0; } .ribbon-cell { display: inline-flex; width: 1.55em; height: 1.7em; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 500; } .ribbon-cell--shifted { color: var(--accent); } /* ── Vigenère grid ────────────────────────────────────────────── */ .vigenere-controls { display: grid; gap: 0.75rem; grid-template-columns: 1fr minmax(160px, 240px); align-items: start; margin-bottom: 0.85rem; } @media (max-width: 720px) { .vigenere-controls { grid-template-columns: 1fr; } } .vigenere-grid { margin-top: 0.85rem; padding: 0.65rem 0.5rem; background: var(--bg); border-top: 1px solid var(--border); overflow-x: auto; font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; } .vg-row { display: flex; gap: 0; align-items: center; } .vg-row + .vg-row { margin-top: 0.2rem; } .vg-label { flex: 0 0 56px; font: 500 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4, var(--dim)); padding: 0.2rem 0.4rem 0.2rem 0; } .vg-cell { display: inline-flex; width: 1.55em; height: 1.5em; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 500; } .vg-cell--plain { color: var(--ink-2, var(--text)); } .vg-cell--key { color: var(--signal); } .vg-cell--shift { color: var(--ink-3, var(--dim)); font-size: 0.78rem; } .vg-cell--cipher { color: var(--accent); } /* ── Hash avalanche diff ──────────────────────────────────────── */ .hash-output { font: 500 0.95rem 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1, "zero" 1; background: var(--panel-2); border-top: 1px solid var(--border); padding: 0.6rem 0.85rem; min-height: 1.5em; word-break: break-all; letter-spacing: 0.04em; color: var(--text); } .hash-row-label { display: inline-block; font: 500 0.65rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-right: 0.6rem; vertical-align: middle; } .hash-char-match { color: var(--ink-3, var(--dim)); } .hash-char-diff { color: var(--accent); font-weight: 700; }