.tutorial-container{max-width:56rem;margin:0 auto;padding:var(--space-lg) var(--space-md)}.tutorial-header{text-align:center;margin-bottom:var(--space-2xl)}.tutorial-header h2{font-size:clamp(2rem,5vw,2.5rem);font-weight:700;margin-bottom:var(--space-sm);color:var(--color-text)}.tutorial-subtitle{font-size:clamp(1rem,2.5vw,1.125rem);color:var(--color-text-muted);max-width:40rem;margin:0 auto var(--space-xl);line-height:1.6}.tutorial-progress{margin-bottom:var(--space-xl)}.progress-bar{height:8px;background:var(--color-bg-alt);border-radius:var(--border-radius-full);overflow:hidden;margin-bottom:var(--space-md)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width .5s cubic-bezier(.4,0,.2,1);border-radius:var(--border-radius-full)}.progress-steps{display:flex;justify-content:space-between;align-items:center;position:relative;max-width:32rem;margin:0 auto}.step-dot{width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid var(--color-border);background:var(--color-bg-light);color:var(--color-text-muted);font-weight:600;font-size:.875rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;z-index:2}.step-dot:hover{transform:scale(1.1);border-color:var(--color-primary)}.step-dot.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.step-dot.completed{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.step-dot:focus{outline:2px solid var(--color-primary);outline-offset:3px}.progress-steps:before{content:"";position:absolute;top:50%;left:1.25rem;right:1.25rem;height:3px;background:var(--color-border);z-index:1;transform:translateY(-50%)}.tutorial-steps{position:relative;min-height:60vh}.tutorial-step{display:none;opacity:0;animation:fadeOut .3s ease}.tutorial-step.active{display:block;opacity:1;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.step-content{background:var(--color-bg-light);border-radius:var(--border-radius-lg);border:1px solid var(--color-border);padding:var(--space-xl);box-shadow:0 4px 12px #00000014}.step-title{font-size:1.75rem;font-weight:600;margin-bottom:var(--space-lg);color:var(--color-text)}.step-number{display:inline-block;padding:.25rem .75rem;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;border-radius:var(--border-radius-full);font-size:.875rem;font-weight:700;margin-right:var(--space-sm)}.step-body{font-size:1.05rem;line-height:1.7;color:var(--color-text)}.step-body .lead{font-size:1.25rem;font-weight:500;color:var(--color-primary);margin-bottom:var(--space-lg);line-height:1.5}.interactive-demo{margin:var(--space-lg) 0;padding:var(--space-lg);background:var(--color-bg);border:2px solid var(--color-primary-alpha);border-radius:var(--border-radius-lg)}.demo-button{display:inline-block;padding:var(--space-sm) var(--space-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);font-weight:600;cursor:pointer;transition:all .2s ease}.demo-button:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.demo-button:active{transform:translateY(0)}.compass-container{max-width:20rem;margin:var(--space-md) auto}.compass-svg{width:100%;height:auto}.compass-needle{transition:transform .5s ease;transform-origin:center}.needle-w{stroke:#e74c3c;fill:#e74c3c}.needle-x{stroke:#3498db;fill:#3498db}.needle-y{stroke:#2ecc71;fill:#2ecc71}.needle-z{stroke:#f39c12;fill:#f39c12}.compass-label{font-size:.875rem;fill:var(--color-text-muted)}.visualizer-placeholder{text-align:center;padding:var(--space-xl);background:var(--color-bg-alt);border-radius:var(--border-radius-md)}.calculator-placeholder,.quiz-placeholder,.q8-table-placeholder{text-align:center;padding:var(--space-lg);background:var(--color-bg-alt);border-radius:var(--border-radius-md);min-height:12rem;display:flex;align-items:center;justify-content:center}.analogy-box,.problem-statement,.key-insight,.quaternion-explanation,.key-property,.q8-definition,.why-q8,.mckenna-mistake,.algorithm-overview,.norm-explanation,.fractal-structure,.payoff-grid,.mysticism-vs-math,.next-steps-box{margin:var(--space-lg) 0;padding:var(--space-lg);background:var(--color-bg);border-left:4px solid var(--color-primary);border-radius:var(--border-radius-md)}.analogy-box h4,.problem-statement h4,.key-insight h4,.quaternion-explanation h4,.key-property h4,.q8-definition h4,.why-q8 h4,.algorithm-overview h4,.norm-explanation h4,.next-steps-box h4{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-primary)}.key-insight{background:linear-gradient(135deg,var(--color-primary-alpha) 0%,var(--color-accent-alpha) 100%);border-left-color:var(--color-accent)}.highlight{background:var(--color-accent-alpha);padding:.25rem .5rem;border-radius:var(--border-radius-sm);font-weight:600}blockquote{margin:var(--space-md) 0;padding:var(--space-md);border-left:4px solid var(--color-border);background:var(--color-bg-alt);font-style:italic;color:var(--color-text-muted)}.critique{color:var(--color-text);font-weight:500;font-style:normal}.label-w,.label-x,.label-y,.label-z,.component-w,.component-x,.component-y,.component-z{display:inline-block;padding:.125rem .5rem;border-radius:var(--border-radius-sm);font-weight:600;font-family:Courier New,monospace}.label-w,.component-w{background:#ffe5e5;color:#c0392b}.label-x,.component-x{background:#e3f2fd;color:#1976d2}.label-y,.component-y{background:#e8f5e9;color:#2e7d32}.label-z,.component-z{background:#fff3e0;color:#ef6c00}.math-progression{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin:var(--space-lg) 0}.math-level{text-align:center;padding:var(--space-md);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--border-radius-md);width:100%;max-width:24rem}.math-level.highlight{border-color:var(--color-primary);background:var(--color-primary-alpha)}.math-label{font-size:.875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.math-example{font-size:1.5rem;font-family:Courier New,monospace;margin:var(--space-sm) 0;color:var(--color-text)}.math-example em{color:var(--color-primary);font-style:italic}.math-desc{font-size:.875rem;color:var(--color-text-muted)}.arrow-down{font-size:2rem;color:var(--color-primary)}.component-list{list-style:none;padding:0;margin:var(--space-md) 0}.component-list li{padding:var(--space-xs) 0;font-size:1.05rem}.formula{font-size:1.25rem;font-family:Courier New,monospace;text-align:center;padding:var(--space-md);background:var(--color-bg-alt);border-radius:var(--border-radius-md);margin:var(--space-md) 0}.formula-box{background:var(--color-bg-alt);padding:var(--space-lg);border-radius:var(--border-radius-md);text-align:center;margin:var(--space-md) 0;border:2px solid var(--color-primary-alpha)}.formula-box code{font-size:1.25rem;font-weight:600;color:var(--color-primary)}.usage-examples{margin-top:var(--space-lg)}.usage-examples h5{font-size:1rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.usage-examples ul{list-style:none;padding:0}.usage-examples li{padding:var(--space-xs) 0;padding-left:var(--space-md);position:relative}.usage-examples li:before{content:"→";position:absolute;left:0;color:var(--color-primary);font-weight:700}.q8-elements{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;margin:var(--space-md) 0}.q8-element{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:var(--color-primary);color:#fff;font-weight:700;font-family:Courier New,monospace;border-radius:var(--border-radius-md);font-size:1.125rem}.q8-rules{margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-bg-alt);border-radius:var(--border-radius-md)}.q8-rules h5{font-size:1rem;font-weight:600;margin-bottom:var(--space-sm)}.q8-rules ul{list-style:none;padding:0}.q8-rules li{padding:var(--space-xs) 0;font-family:Courier New,monospace}.q8-rules code{background:var(--color-bg);padding:.125rem .375rem;border-radius:var(--border-radius-sm);font-size:.95rem}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--space-lg);margin:var(--space-lg) 0}.comparison-item{padding:var(--space-lg);border-radius:var(--border-radius-md);border:2px solid var(--color-border)}.comparison-item.mistake{background:#fff5f5;border-color:#e74c3c}.comparison-item.correct{background:#f0fdf4;border-color:#2ecc71}.comparison-item h5{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-sm)}.comparison-table{width:100%;border-collapse:collapse;margin:var(--space-lg) 0;font-size:.95rem}.comparison-table th,.comparison-table td{padding:var(--space-sm) var(--space-md);text-align:left;border:1px solid var(--color-border)}.comparison-table thead{background:var(--color-bg-alt);font-weight:600}.comparison-table .highlight-row{background:var(--color-primary-alpha);font-weight:600}.comparison-table .center{text-align:center}.algorithm-steps{counter-reset:step-counter;list-style:none;padding:0;margin:var(--space-lg) 0}.algorithm-steps li{counter-increment:step-counter;position:relative;padding-left:3rem;margin-bottom:var(--space-lg)}.algorithm-steps li:before{content:counter(step-counter);position:absolute;left:0;top:0;width:2rem;height:2rem;background:var(--color-primary);color:#fff;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}.algorithm-steps li strong{display:block;font-size:1.125rem;margin-bottom:var(--space-xs);color:var(--color-primary)}.algorithm-steps li p{margin:0}.algorithm-steps li small{color:var(--color-text-muted);font-size:.875rem}.payoff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:var(--space-lg);margin:var(--space-lg) 0}.payoff-item{padding:var(--space-md);background:var(--color-bg);border-left:4px solid var(--color-accent);border-radius:var(--border-radius-md)}.payoff-item h4{font-size:1.125rem;font-weight:600;color:var(--color-accent);margin-bottom:var(--space-sm)}.checkmark-list{list-style:none;padding:0;margin:var(--space-md) 0}.checkmark-list li{padding:var(--space-xs) 0;padding-left:var(--space-lg);position:relative}.checkmark-list li:before{content:"✓";position:absolute;left:0;color:var(--color-accent);font-weight:700;font-size:1.25rem}.encouragement{margin-top:var(--space-lg);padding:var(--space-md);background:linear-gradient(135deg,var(--color-accent-alpha) 0%,var(--color-primary-alpha) 100%);border-radius:var(--border-radius-md);text-align:center;font-size:1.05rem}.step-actions{display:flex;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.btn-primary,.btn-secondary{padding:var(--space-sm) var(--space-lg);font-size:1rem;font-weight:600;border-radius:var(--border-radius-md);cursor:pointer;transition:all .2s ease;border:none;text-decoration:none;display:inline-block}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-secondary{background:var(--color-bg-alt);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg);border-color:var(--color-primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.tutorial-container,.step-content{padding:var(--space-md)}.step-title{font-size:1.5rem}.step-body{font-size:1rem}.progress-steps{max-width:100%}.step-dot{width:2rem;height:2rem;font-size:.75rem}.comparison-grid,.payoff-grid{grid-template-columns:1fr}.step-actions{flex-direction:column}.interactive-demo{padding:var(--space-md)}.comparison-table{font-size:.875rem}.comparison-table th,.comparison-table td{padding:var(--space-xs) var(--space-sm)}}@media (max-width: 480px){.tutorial-header h2{font-size:1.75rem}.tutorial-subtitle{font-size:.95rem}.step-number{display:block;margin-bottom:var(--space-xs)}.math-example{font-size:1.25rem}.q8-element{width:2.5rem;height:2.5rem;font-size:1rem}}@media (prefers-reduced-motion: reduce){.tutorial-step,.progress-fill,.step-dot,.compass-needle{animation:none!important;transition:none!important}}@media (prefers-contrast: high){.step-content,.interactive-demo,.analogy-box,.problem-statement,.key-insight{border-width:2px}}@media print{.tutorial-progress,.step-actions,header nav,footer{display:none}.tutorial-step{display:block!important;page-break-inside:avoid;margin-bottom:var(--space-2xl)}.step-content{box-shadow:none;border:1px solid #000}}