:root{--colour-bg: #f8f9fb;--colour-surface: #ffffff;--colour-border: #dee2e8;--colour-text: #1a1d23;--colour-muted: #6b7280;--colour-accent: #2563eb;--colour-alice: #2563eb;--colour-bob: #16a34a;--colour-eve: #dc2626;--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)}*,*:before,*:after{box-sizing:border-box}body{margin:0;height:100%;background:var(--colour-bg);color:var(--colour-text);font-family:Trebuchet MS,sans-serif;font-size:16px;line-height:1.6;overflow:hidden}h1,h2,h3{margin-top:0;line-height:1.25}p{margin-top:0}button{cursor:pointer;font-family:inherit}.app-shell{max-width:1100px;height:100vh;margin:0 auto;padding:16px;display:flex;flex-direction:column;overflow:hidden}.app-main{flex:1;min-height:0;overflow-y:auto}.app-header{padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid var(--colour-border);flex-shrink:0}.app-header h1{color:var(--colour-accent);margin-bottom:4px;font-size:1.75rem}.app-subtitle{color:var(--colour-muted);margin-bottom:16px;font-size:.95rem}.app-footer__licence{color:var(--colour-muted);text-decoration:underline;text-underline-offset:2px}.app-footer__licence:hover{color:var(--colour-accent)}.app-footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--colour-border);color:var(--colour-muted);font-size:.8rem;text-align:center;flex-shrink:0}.card{background:var(--colour-surface);border:1px solid var(--colour-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px}.mode-switch{display:flex;gap:0;border:1px solid var(--colour-border);border-radius:var(--radius-md);overflow:hidden;width:fit-content}.mode-switch__btn{padding:10px 28px;border:none;background:var(--colour-surface);color:var(--colour-muted);font-size:.95rem;font-weight:600;transition:background .15s,color .15s}.mode-switch__btn:hover{background:var(--colour-step-bg);color:var(--colour-text)}.mode-switch__btn--active{background:var(--colour-accent);color:#fff}.teaching-mode{display:flex;flex-direction:column;gap:10px}.teaching-mode__title{font-size:1.35rem;color:var(--colour-text);margin:0 0 8px}.teaching-mode__description{color:var(--colour-text);font-size:1rem;margin:0}.step-visual{width:100%;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--colour-border);background:var(--colour-surface)}.step-visual svg{display:block;width:100%}.crypto-panel{background:var(--colour-step-bg);border:1px solid var(--colour-step-border);border-left:4px solid var(--colour-accent);border-radius:var(--radius-md);padding:10px 14px}.crypto-panel__header{font-family:Courier New,monospace;font-size:.8rem;font-weight:700;color:var(--colour-accent);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}.crypto-panel__text{color:var(--colour-text);margin:0 0 12px;font-size:.95rem}.crypto-panel__formula{font-family:Courier New,monospace;font-size:.9rem;background:var(--colour-surface);border:1px solid var(--colour-step-border);border-radius:var(--radius-sm);padding:8px 12px;color:var(--colour-accent);display:inline-block;margin:0}.step-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 0}.step-nav__btn{padding:10px 22px;border:1px solid var(--colour-border);border-radius:var(--radius-md);background:var(--colour-surface);color:var(--colour-text);font-size:.95rem;font-weight:600;transition:background .15s,border-color .15s}.step-nav__btn:hover:not(:disabled){background:var(--colour-step-bg);border-color:var(--colour-accent)}.step-nav__btn:disabled{opacity:.35;cursor:not-allowed}.step-nav__counter{font-family:Courier New,monospace;font-size:.9rem;color:var(--colour-muted);text-align:center;flex:1}.step-nav__dots{display:flex;justify-content:center;gap:8px;margin-top:12px}.step-nav__dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--colour-accent);background:transparent;transition:background .15s}.step-nav__dot--done{background:var(--colour-accent)}.step-nav__dot--current{background:var(--colour-accent);transform:scale(1.25)}.simulation-mode{display:flex;flex-direction:column;gap:20px}.simulation-mode__public-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.simulation-mode__randomise{padding:10px 22px;border:none;border-radius:var(--radius-md);background:var(--colour-accent);color:#fff;font-size:.95rem;font-weight:600;transition:opacity .15s}.simulation-mode__randomise:hover{opacity:.85}.simulation-mode__public-label{font-size:.9rem;color:var(--colour-muted);font-family:Courier New,monospace}.simulation-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.success-banner{background:#f0fdf4;border:2px solid #16a34a;border-radius:var(--radius-lg);padding:20px 24px;text-align:center}.success-banner--pending{background:var(--colour-step-bg);border-color:var(--colour-step-border)}.success-banner__title{color:#15803d;font-size:1.15rem;font-weight:700;margin:0 0 12px}.success-banner__title--pending{color:var(--colour-muted);font-size:.95rem;font-weight:400;margin:0}.success-banner__swatches{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}.success-banner__equals{font-size:1.5rem;color:#15803d;line-height:1}.success-banner__body{margin-top:12px;color:#15803d;font-size:.9rem;margin-bottom:0}.paint-bucket{display:flex;flex-direction:column;align-items:center;gap:6px}.paint-bucket__swatch{width:72px;height:72px;border-radius:50%;border:3px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}.paint-bucket__label{font-family:Courier New,monospace;font-size:.75rem;color:var(--colour-muted);text-align:center;max-width:80px;line-height:1.3}.paint-bucket__tooltip{font-size:.75rem;color:var(--colour-muted);font-style:italic;text-align:center;max-width:90px;line-height:1.3}.lane{display:flex;flex-direction:column;min-width:200px;border-radius:var(--radius-lg);border:1px solid var(--colour-border);box-shadow:var(--shadow-card);overflow:hidden;background:var(--colour-surface)}.lane__header{padding:12px 16px;color:#fff;font-weight:700;font-size:1rem}.lane__header--alice{background:var(--colour-alice)}.lane__header--bob{background:var(--colour-bob)}.lane__header--eve{background:var(--colour-eve)}.lane__body{padding:16px;display:flex;flex-direction:column;gap:16px;flex:1}.lane__row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;justify-content:center}.lane__operator{font-size:1.3rem;color:var(--colour-muted);font-weight:300;line-height:1;padding-top:26px}.lane__divider{border:none;border-top:1px solid var(--colour-border);margin:4px 0}.lane__picker-row{display:flex;flex-direction:column;align-items:center;gap:6px}.lane__picker-label{font-size:.8rem;color:var(--colour-muted);font-family:Courier New,monospace}.lane__colour-input{width:52px;height:36px;border:1px solid var(--colour-border);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:var(--colour-surface)}.lane__section-label{font-size:.75rem;font-family:Courier New,monospace;color:var(--colour-muted);text-align:center;text-transform:uppercase;letter-spacing:.05em}.lane__eve-warning{font-size:.82rem;color:var(--colour-eve);background:#fff5f5;border:1px solid #fecaca;border-radius:var(--radius-sm);padding:8px 10px;line-height:1.5}.lane__eve-fail-label{font-size:.8rem;color:var(--colour-eve);font-weight:700;font-family:Courier New,monospace;text-align:center}@media (max-width: 768px){.simulation-grid{grid-template-columns:1fr}.step-nav__btn{padding:10px 14px;font-size:.88rem}.app-header h1{font-size:1.35rem}}