:root{--colour-bg: #f8f9fb;--colour-surface: #ffffff;--colour-border: #dee2e8;--colour-text: #1a1d23;--colour-muted: #6b7280;--colour-accent: #2563eb;--colour-alice: #2563eb;--colour-alice-dark: #1d4ed8;--colour-private: #b45309;--colour-private-dark: #92400e;--colour-bob: #16a34a;--colour-eve: #dc2626;--colour-locked: #7c3aed;--colour-sig: #0891b2;--colour-step-bg: #eff6ff;--colour-step-border: #bfdbfe;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-card: 0 1px 4px rgba(0,0,0,.08)}[data-theme=dark]{--colour-bg: #0f1117;--colour-surface: #1a1d23;--colour-border: #2d3139;--colour-text: #e8eaf0;--colour-muted: #9ca3af;--colour-accent: #3b82f6;--colour-alice: #3b82f6;--colour-alice-dark: #2563eb;--colour-private: #d97706;--colour-private-dark: #b45309;--colour-bob: #22c55e;--colour-eve: #ef4444;--colour-locked: #a855f7;--colour-sig: #06b6d4;--colour-step-bg: #1e2433;--colour-step-border: #2d3f6e;--shadow-card: 0 1px 4px rgba(0,0,0,.4)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{font-family:Trebuchet MS,sans-serif;background:var(--colour-bg);color:var(--colour-text);font-size:16px}.app-shell{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden}.app-header{flex-shrink:0;padding:10px 20px;border-bottom:1px solid var(--colour-border);background:var(--colour-surface);display:flex;align-items:center;gap:12px;flex-wrap:wrap}.app-title-group{flex:1;min-width:0}.app-header h1{margin:0;font-size:1.5rem;color:var(--colour-text)}.app-subtitle{margin:0;font-size:.9rem;color:var(--colour-muted)}.app-main{flex:1;overflow-y:auto;padding:16px 20px;min-height:0}.app-footer{flex-shrink:0;padding:6px 20px;border-top:1px solid var(--colour-border);font-size:13px;color:var(--colour-muted);background:var(--colour-surface)}.app-footer p{margin:0}.card{background:var(--colour-surface);box-shadow:var(--shadow-card);border-radius:var(--radius-lg);padding:16px 20px;border:1px solid var(--colour-border)}.mode-switch{display:flex;gap:3px;background:var(--colour-bg);border:1px solid var(--colour-border);border-radius:var(--radius-md);padding:3px}.mode-switch button{padding:7px 18px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:15px;background:transparent;color:var(--colour-muted);transition:all .15s;font-family:inherit}.mode-switch button.active{background:var(--colour-accent);color:#fff}.mode-switch button:hover:not(.active){background:var(--colour-border);color:var(--colour-text)}.sim-mode-switch{display:flex;gap:3px;background:var(--colour-bg);border:1px solid var(--colour-border);border-radius:var(--radius-md);padding:3px;margin-bottom:12px;width:fit-content}.sim-mode-switch button{padding:6px 16px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;background:transparent;color:var(--colour-muted);transition:all .15s;font-family:inherit}.sim-mode-switch button.active-enc{background:var(--colour-alice);color:#fff}.sim-mode-switch button.active-sig{background:var(--colour-sig);color:#fff}.sim-mode-switch button:hover:not(.active-enc):not(.active-sig){background:var(--colour-border);color:var(--colour-text)}.theme-toggle{background:none;border:1px solid var(--colour-border);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;font-size:18px;color:var(--colour-text);flex-shrink:0}.math-panel{background:var(--colour-step-bg);border-left:4px solid var(--colour-accent);border-radius:var(--radius-md);padding:14px 18px;margin-top:10px}.math-label{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--colour-muted);font-weight:600}.formula{font-family:Courier New,monospace;font-size:14px;white-space:pre;background:var(--colour-surface);padding:12px 14px;border-radius:var(--radius-sm);margin:0;overflow-x:auto;color:var(--colour-text);border:1px solid var(--colour-border);line-height:1.7}.padlock-scene{width:100%;max-height:340px;display:block}.number-stream{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;min-height:28px}.num-chip{font-family:Courier New,monospace;font-size:13px;padding:3px 8px;border-radius:10px;white-space:nowrap}.num-chip.plaintext{background:#dcfce7;color:#15803d}.num-chip.cipher{background:#f3e8ff;color:#6d28d9}.num-chip.sig-chip{background:#ecfeff;color:#0e7490}[data-theme=dark] .num-chip.plaintext{background:#14532d;color:#4ade80}[data-theme=dark] .num-chip.cipher{background:#2e1065;color:#c084fc}[data-theme=dark] .num-chip.sig-chip{background:#083344;color:#22d3ee}.key-badge{display:inline-flex;align-items:center;gap:4px;font-family:Courier New,monospace;font-size:13px;padding:4px 10px;border-radius:10px;white-space:nowrap}.key-badge.public{background:#dbeafe;color:#1d4ed8}.key-badge.private{background:#fef3c7;color:#92400e}[data-theme=dark] .key-badge.public{background:#1e3a5f;color:#93c5fd}[data-theme=dark] .key-badge.private{background:#451a03;color:#fcd34d}.lane{display:flex;flex-direction:column;gap:8px}.lane-header{padding:8px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:14px}.lane-header.alice{background:#dbeafe;color:#1d4ed8}.lane-header.bob{background:#dcfce7;color:#15803d}.lane-header.eve{background:#fee2e2;color:#b91c1c}[data-theme=dark] .lane-header.alice{background:#1e3a5f;color:#93c5fd}[data-theme=dark] .lane-header.bob{background:#14532d;color:#4ade80}[data-theme=dark] .lane-header.eve{background:#450a0a;color:#fca5a5}.simulation-grid{display:grid;gap:12px}.simulation-grid.encryption{grid-template-columns:1fr 1fr 1fr}.simulation-grid.signature{grid-template-columns:1fr 1fr}.teaching-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.teaching-right{display:flex;flex-direction:column;gap:10px}.step-guide{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--colour-border)}.step-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.step-dot{width:11px;height:11px;border-radius:50%;background:var(--colour-border);cursor:pointer;border:none;padding:0;transition:background .15s}.step-dot.active-enc{background:var(--colour-alice)}.step-dot.active-sig{background:var(--colour-sig)}.nav-btn{padding:7px 20px;border-radius:var(--radius-sm);border:1px solid var(--colour-border);background:var(--colour-surface);color:var(--colour-text);cursor:pointer;font-size:15px;font-family:inherit}.nav-btn:disabled{opacity:.35;cursor:not-allowed}.nav-btn:hover:not(:disabled){background:var(--colour-bg)}.section-badge{display:inline-block;padding:3px 12px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:6px}.section-badge.encryption{background:#dbeafe;color:#1d4ed8}.section-badge.signature{background:#ecfeff;color:#0e7490}[data-theme=dark] .section-badge.encryption{background:#1e3a5f;color:#93c5fd}[data-theme=dark] .section-badge.signature{background:#083344;color:#22d3ee}.step-title{margin:0 0 8px;font-size:1.35rem;color:var(--colour-text)}.step-description{margin:0 0 8px;line-height:1.6;color:var(--colour-text);font-size:15px}.crypto-detail{background:var(--colour-step-bg);border:1px solid var(--colour-step-border);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;color:var(--colour-muted);margin:0;line-height:1.6}.eve-panel{border-left:4px solid var(--colour-eve);background:var(--colour-surface);border-radius:var(--radius-md);padding:12px 16px;margin-top:10px;font-size:14px;border:1px solid var(--colour-border);border-left-width:4px;border-left-color:var(--colour-eve);color:var(--colour-text)}.eve-panel strong{color:var(--colour-eve)}.blocked-box{background:var(--colour-bg);border:2px dashed var(--colour-border);border-radius:var(--radius-sm);padding:12px;text-align:center;color:var(--colour-muted);font-size:14px}.success-badge{color:var(--colour-bob);font-weight:600;font-size:14px}.fail-badge{color:var(--colour-eve);font-weight:600;font-size:14px}.tamper-btn{padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--colour-eve);background:transparent;color:var(--colour-eve);cursor:pointer;font-size:13px;font-family:inherit}.reset-btn{padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--colour-border);background:transparent;color:var(--colour-muted);cursor:pointer;font-size:13px;font-family:inherit}.tamper-btn:hover{background:#fee2e2}[data-theme=dark] .tamper-btn:hover{background:#450a0a}.input-field{width:100%;padding:8px 10px;border:1px solid var(--colour-border);border-radius:var(--radius-sm);font-size:15px;font-family:inherit;background:var(--colour-bg);color:var(--colour-text)}.input-field:focus{outline:none;border-color:var(--colour-accent)}.arrow-label{font-size:13px;color:var(--colour-muted);text-align:center;padding:3px 0}.arrow-down{text-align:center;color:var(--colour-muted);font-size:18px;line-height:1}.key-summary{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 14px;background:var(--colour-surface);border-radius:var(--radius-md);border:1px solid var(--colour-border);margin-bottom:12px}.key-summary-note{font-size:13px;color:var(--colour-muted)}.validation-warn{color:var(--colour-eve);font-size:13px;margin-top:2px}.char-count{font-size:13px;color:var(--colour-muted);text-align:right}.input-label{font-size:14px;font-weight:600;color:var(--colour-muted);margin-bottom:3px}.section-label{font-size:13px;color:var(--colour-muted);margin-bottom:4px}.result-box{background:var(--colour-step-bg);border-radius:var(--radius-sm);padding:9px 12px;font-family:Courier New,monospace;font-size:15px;border:1px solid var(--colour-step-border);color:var(--colour-text)}.tamper-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sim-key-area{display:flex;flex-direction:column;gap:6px}@media (max-width: 768px){.simulation-grid.encryption,.simulation-grid.signature,.teaching-layout{grid-template-columns:1fr}.app-header{padding:8px 12px}.app-main{padding:10px 12px}}