.tape-example{margin:10px 0;padding:5px;background-color:#f0f0f0;border:1px dashed #ccc;border-radius:3px}.tape-example .tape-viz{font-family:var(--font-mono);font-weight:700;color:var(--color-danger)}.diagram{display:block;margin:0 auto 20px;max-width:100%;height:auto}.step-by-step-diagrams{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;justify-content:center}.diagram-step{border:1px solid #ddd;padding:15px;border-radius:5px;background-color:#f9f9f9;flex:1 1 300px;min-width:280px;box-shadow:2px 2px 5px #0000000d}.diagram-step p{margin-top:0;font-size:.95em;text-align:center}.diagram-step .diagram{margin-bottom:0;padding:5px;background-color:#fff;border-radius:3px}.machine-info{font-size:.9rem;color:var(--color-text-light);font-style:italic}.transition-table{width:100%;max-width:400px;border-collapse:collapse;margin-bottom:12px;font-family:var(--font-mono);font-size:.9rem}.transition-table th,.transition-table td{border:1px solid #2a2a4e;padding:8px 12px;text-align:center}.transition-table thead th{background-color:#16162e;color:#9ab;font-weight:600;font-size:.85rem;border-color:#2a2a4e}.transition-table tbody td{background-color:#0f0f1e;color:#ccd}.transition-table .state-cell{font-weight:700;background-color:#12122a;color:var(--color-accent)}.transition-table .rule-cell{transition:background-color .2s,color .2s,box-shadow .2s}.transition-table tr.active-row .state-cell{background-color:#1a1a38;color:#f78}.transition-table .rule-cell.active-rule{background-color:var(--color-accent);color:#fff;font-weight:700;box-shadow:0 0 8px #e945604d}#state-diagram-container{margin-bottom:12px}.state-diagram-header{font-size:.85rem;color:#9ab;margin-bottom:6px;font-weight:600}#state-diagram{background:#0a0a16;border:1px solid #1a1a3e;border-radius:var(--radius-md);padding:12px;text-align:center;overflow-x:auto}#state-diagram svg{max-width:100%;height:auto}.edge-active path{stroke:var(--color-accent)!important;stroke-width:2.5px!important}.edge-active text,.edge-active tspan{fill:var(--color-accent)!important}#turing-machine{background:var(--color-surface-dark);border:1px solid #1a1a3e;border-radius:var(--radius-lg);padding:16px 20px}#tape-container{width:100%;overflow-x:auto;margin-bottom:15px;padding:10px 0;background-color:#0a0a16;border:1px solid #1a1a3e;border-radius:var(--radius-md);position:relative;-webkit-mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent)}#tape{display:flex;min-width:fit-content;padding:0 24px}.tape-cell{position:relative;min-width:34px;height:34px;border:1px solid #2a2a4e;display:flex;justify-content:center;align-items:center;font-size:1.2em;font-family:var(--font-mono);font-weight:600;background-color:#12122a;color:#667;margin-right:2px;border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}.tape-cell.active.head-moved-left:before,.tape-cell.active.head-moved-right:before{content:"";position:absolute;top:-10px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}.tape-cell.active.head-moved-left:before{left:6px;border-right:6px solid var(--color-accent)}.tape-cell.active.head-moved-right:before{right:6px;border-left:6px solid var(--color-accent)}.tape-cell.cell-1{background-color:#1a1a38;color:#abd}.tape-cell.active{border:2px solid var(--color-accent);font-weight:700;background-color:#1e1030;color:#fff;box-shadow:0 0 10px #e945604d}.tape-cell.written{animation:flash-write .5s ease-out}@keyframes flash-write{0%{background-color:#3a1a40;box-shadow:0 0 12px #e9456080}50%{background-color:#2a1030}to{background-color:#12122a;box-shadow:none}}#controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}#narration-panel{padding:10px 12px;background:#0d0d1a;border:1px solid #1a1a3e;border-radius:var(--radius-md);transition:border-color .3s,background-color .3s,box-shadow .3s}.narration-header{display:flex;gap:16px;color:#9ab;font-size:.95rem;margin-bottom:8px}.narration-header strong{font-weight:700;color:#fff;font-family:var(--font-mono)}.narration-content{padding:4px 0;color:var(--color-accent-secondary);font-size:.9rem;line-height:1.6}.champion-summary{display:block;margin-top:8px;color:#8a8;font-size:.85rem;font-style:italic}#execution-trace{margin-top:12px}#turing-machine.halted{border-color:#2a5a2a;box-shadow:0 0 20px #4caf5026}#turing-machine.halted #narration-panel{animation:halt-flash .8s ease-out;border-color:var(--color-success);background-color:#0d1a0d;box-shadow:0 0 8px #4caf5033}#turing-machine.halted .narration-content{color:var(--color-success)}@keyframes halt-flash{0%{background-color:#0d0d1a}30%{background-color:#0d2a0d;box-shadow:0 0 12px #4caf504d}to{background-color:#0d0d1a}}#turing-machine .keyboard-hint{color:#667}#turing-machine .keyboard-hint kbd{background:#1a1a30;border-color:#2a2a4e;color:#889}#turing-machine .speed-control label{color:#9ab}#turing-machine .speed-label{color:#667}#turing-machine .speed-control input[type=range]{accent-color:var(--color-accent)}@media (prefers-reduced-motion: reduce){.tape-cell.written{animation:none}.tape-cell,.rule-cell,#narration-panel{transition:none}#turing-machine.halted #narration-panel{animation:none}#turing-machine.halted{box-shadow:none}}@media (max-width: 640px){#controls{flex-direction:column;align-items:stretch}#controls .control-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}#controls .speed-control{width:100%}.transition-table{font-size:.8rem}#state-diagram svg{min-width:480px}.diagram-state-ref{overflow-x:auto}.diagram-state-ref .diagram{min-width:420px}}