/* Clustering Tutorial Styles */

/* Override global body background for clustering tutorial */
body {
    background: linear-gradient(135deg, var(--dill-green) 0%, var(--aura-indigo) 100%);
}

/* Professional Color Palette */
:root {
    --alpine-oat: #F5EBDC;
    --dill-green: #5B7553;
    --aura-indigo: #4B3F72;
    --butter-yellow: #FFD95B;
    --dark-gray: #2E2E2E;
    --light-gray: #6B7280;
    --white: #FFFFFF;
    
    /* Typography */
    --font-primary: 'Inter', 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
    --font-serif: 'Crimson Text', 'Georgia', 'Times New Roman', serif;
}

/* Tutorial Main Title */
.tutorial-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--aura-indigo);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.tutorial-subtitle {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--dark-gray);
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Styles */
.course-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dill-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.course-link:hover {
    color: var(--aura-indigo);
    text-decoration: none;
}

/* Tutorial Header */
.tutorial-header {
    background: linear-gradient(135deg, var(--dill-green) 0%, var(--aura-indigo) 100%);
    color: var(--white);
    padding: 3rem 0;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.tutorial-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.chapter-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.chapter-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Progress Bar */
.chapter-progress {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
    border-radius: 3px;
    margin: 1rem auto;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.chapter-progress-fill {
    background: linear-gradient(90deg, var(--butter-yellow), #F4C430);
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 217, 91, 0.5);
}

.section-progress {
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 2px;
    margin: 1rem auto;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.section-progress-fill {
    background: linear-gradient(90deg, var(--butter-yellow), #F4C430);
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(255, 217, 91, 0.5);
}

/* Chapter Navigation */
.chapter-navigation {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

/* Reusable Chapter Navigation Button Class */
.chapter-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--dill-green);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark-gray);
    font-size: 0.9rem;
    white-space: nowrap;
    margin: 0.25rem;
    text-decoration: none;
    min-width: 80px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(91, 117, 83, 0.2);
}

.chapter-nav-btn:hover {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.4);
}

.chapter-nav-btn.active {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.4);
    transform: translateY(-2px);
    font-weight: 700;
}

/* Progress Tracker */
.progress-tracker {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.progress-dot.active {
    background: #22c55e;
    border-color: #16a34a;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.progress-dot.completed {
    background: #22c55e;
    border-color: #16a34a;
}

/* Section Navigation */
.section-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Reusable Section Navigation Button Class */
.section-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--dill-green);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark-gray);
    font-size: 0.9rem;
    white-space: nowrap;
    margin: 0.25rem;
    box-shadow: 0 2px 8px rgba(91, 117, 83, 0.2);
}

.section-nav-btn:hover {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.4);
}

.section-nav-btn.active {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.4);
    transform: translateY(-2px);
    font-weight: 700;
}

/* Content Sections */
.content-section {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Interactive Demos */
.interactive-demo {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* Visualization Placeholders */
.visualization-placeholder {
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    border: 2px dashed #999;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    margin: 1rem 0;
    font-style: italic;
    color: #666;
}

/* Formula Boxes */
.formula-box {
    background: linear-gradient(135deg, var(--alpine-oat) 0%, #F0F4E8 100%);
    border: 2px solid var(--aura-indigo);
    border-left: 6px solid var(--aura-indigo);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(75, 63, 114, 0.15);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.formula-box::before {
    content: '📐';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--white);
    padding: 0 10px;
    font-size: 1.2rem;
}

.formula-box h5 {
    color: var(--aura-indigo);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-primary);
}

.formula-box p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.formula-box ul, .formula-box ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.formula-box li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.formula-display {
    text-align: center;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--alpine-oat) 0%, #F0F4E8 100%);
    border: 2px solid var(--aura-indigo);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(75, 63, 114, 0.1);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-gray);
    font-family: 'Times New Roman', serif;
    position: relative;
    overflow: hidden;
}

.formula-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dill-green), var(--aura-indigo));
}

.formula-display strong {
    font-size: 1.4rem;
    color: var(--dark-gray);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== ENHANCED CONTENT STYLING CLASSES ===== */

/* Learning Objectives Box - Special styling for learning objectives */
.learning-objectives-box {
    background: linear-gradient(135deg, var(--alpine-oat) 0%, #F0F4E8 100%);
    border: 3px solid var(--dill-green);
    border-left: 8px solid var(--dill-green);
    border-radius: 16px;
    padding: 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 12px 35px rgba(91, 117, 83, 0.2);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
    overflow: hidden;
}

.learning-objectives-box::before {
    content: '🎯';
    position: absolute;
    top: -12px;
    left: 25px;
    background: var(--white);
    padding: 0 15px;
    font-size: 1.5rem;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(91, 117, 83, 0.3);
}

.learning-objectives-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(91, 117, 83, 0.1), rgba(75, 63, 114, 0.1));
    border-radius: 50%;
    transform: translate(30px, -30px);
}

.learning-objectives-box h2 {
    color: var(--dill-green);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    font-family: var(--font-primary);
    position: relative;
    z-index: 1;
}

.learning-objectives-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.learning-objectives-box li {
    background: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    border-left: 4px solid var(--aura-indigo);
    color: var(--dark-gray);
    line-height: 1.8;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.learning-objectives-box li:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(75, 63, 114, 0.15);
    border-left-color: var(--butter-yellow);
}

.learning-objectives-box li::before {
    content: '✓';
    color: var(--dill-green);
    font-weight: bold;
    margin-right: 0.8rem;
    font-size: 1.1rem;
}

/* Explanation Box - For detailed explanations */
.explanation-box {
    background: linear-gradient(135deg, var(--alpine-oat) 0%, #F0F4E8 100%);
    border-left: 4px solid var(--dill-green);
    padding: 2rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(91, 117, 83, 0.15);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.explanation-box::before {
    content: '💡';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--white);
    padding: 0 10px;
    font-size: 1.2rem;
}

.explanation-box p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.explanation-box ul, .explanation-box ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.explanation-box li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

/* Model Box - For algorithm/model descriptions */
.model-box {
    background: linear-gradient(135deg, var(--alpine-oat) 0%, #F0F4E8 100%);
    border: 2px solid var(--dill-green);
    border-left: 6px solid var(--dill-green);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(91, 117, 83, 0.15);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.model-box::before {
    content: '⚙️';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--white);
    padding: 0 10px;
    font-size: 1.2rem;
}

.model-box h5 {
    color: var(--dill-green);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-primary);
}

.model-box p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.model-box ul, .model-box ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.model-box li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

/* Important Notes Box */
.important-notes {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border: 2px solid var(--butter-yellow);
    border-left: 6px solid var(--butter-yellow);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(255, 217, 91, 0.15);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.important-notes::before {
    content: '⚠️';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--white);
    padding: 0 10px;
    font-size: 1.2rem;
}

.important-notes h5 {
    color: var(--dark-gray);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-primary);
}

.important-notes p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.important-notes ul, .important-notes ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.important-notes li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

/* Code Box - For code snippets */
.code-box {
    background: var(--dark-gray);
    border: 2px solid var(--aura-indigo);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(46, 46, 46, 0.3);
    position: relative;
    overflow-x: auto;
    font-family: var(--font-mono);
    line-height: 1.8;
    color: #e2e8f0;
}

/* Ensure all text inside code-box is visible */
.code-box * {
    color: #e2e8f0 !important;
}

.code-box strong {
    color: #82aaff !important; /* Blue for keywords */
}

.code-box span[style*="color"] {
    /* Preserve inline color styles but ensure visibility */
}

.code-box::before {
    content: '💻';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--dark-gray);
    padding: 0 10px;
    font-size: 1.2rem;
}

.code-box pre {
    margin: 0;
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.8;
    white-space: pre;
    overflow-x: auto;
}

.code-box code {
    color: #e2e8f0;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    line-height: 1.8;
}


/* Syntax highlighting for code */
.code-box .keyword { color: #c792ea; } /* purple */
.code-box .string { color: #c3e88d; } /* green */
.code-box .number { color: #f78c6c; } /* orange */
.code-box .comment { color: #676e95; } /* gray */
.code-box .function { color: #82aaff; } /* blue */
.code-box .variable { color: #ffcb6b; } /* yellow */

/* Image Container - For images and visualizations */
.image-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

.p-value-demo{
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
    text-align: center;
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.image-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 20px;
    background: white;
    padding: 0 10px;
    font-size: 1.2rem;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 1rem 0;
}

.image-container h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.image-container p {
    color: #64748b;
    font-style: italic;
    margin-top: 1rem;
}

/* Graph Container - For charts and graphs */
.graph-container {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    border-left: 6px solid #16a34a;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.15);
    text-align: center;
    position: relative;
}

.graph-container::before {
    content: '📊';
    position: absolute;
    top: -10px;
    left: 20px;
    background: white;
    padding: 0 10px;
    font-size: 1.2rem;
}

.graph-container canvas {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
}

.graph-container h4 {
    color: #14532d;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.graph-container p {
    color: #166534;
    font-style: italic;
    margin-top: 1rem;
}

/* Interactive Container - For interactive demos and simulations */
.interactive-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-left: 6px solid #0284c7;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
    text-align: center;
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.8;
}

.interactive-container::before {
    content: '🎯';
    position: absolute;
    top: -10px;
    left: 20px;
    background: white;
    padding: 0 10px;
    font-size: 1.2rem;
}

.interactive-container p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.interactive-container ul, .interactive-container ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.interactive-container li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--dark-gray);
}

.interactive-container canvas {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
}

.interactive-container h4 {
    color: #0c4a6e;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.interactive-container p {
    color: #0369a1;
    font-style: italic;
    margin-top: 1rem;
}

/* Concept Cards */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.concept-card-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 2px solid #2196f3;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.concept-card-green {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    border: 2px solid #4caf50;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.concept-card-yellow {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 2px solid #ff9800;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

.concept-card-purple {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 2px solid #9c27b0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
}

/* Comparison Tables */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.comparison-table th, .comparison-table td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem;
    text-align: left;
}

.comparison-table th {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: bold;
}

.comparison-table tr:nth-child(even) {
    background: #f8f9fa;
}

/* Quiz Styles */
.enhanced-quiz-container {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.enhanced-quiz-question {
    margin-bottom: 1rem;
}

.enhanced-quiz-option {
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.enhanced-quiz-option:hover {
    background: #e9ecef;
    border-color: #667eea;
}

.enhanced-quiz-option.correct {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.enhanced-quiz-option.incorrect {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.enhanced-quiz-explanation {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 4px;
    display: none;
}

.enhanced-quiz-explanation.show {
    display: block;
}

/* Quiz Score Container */
.quiz-score-container {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 2px solid #b3d9ff;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Navigation Buttons */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Sub-section Navigation Footer */
.sub-section-nav-footer {
    background: linear-gradient(135deg, var(--dill-green) 0%, var(--aura-indigo) 100%);
    padding: 2rem 0;
    margin: 2rem 0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(91, 117, 83, 0.15);
}

.sub-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sub-nav-btn {
    background: var(--white);
    border: 2px solid var(--white);
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark-gray);
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sub-nav-btn:hover {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.3);
}

.sub-nav-btn.prev-btn {
    margin-right: auto;
}

.sub-nav-btn.next-btn {
    margin-left: auto;
}

.sub-nav-label {
    font-size: 0.9rem;
    color: var(--light-gray);
    font-weight: 500;
}

/* ===== UNSUPERVISED LEARNING TYPES GRID ===== */
.unsupervised-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem 0;
}

/* Reusable Type Card Class - Can be used for any content grid */
.type-card {
    background: var(--alpine-oat);
    border: 2px solid var(--dill-green);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(91, 117, 83, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    line-height: 1.6;
    cursor: pointer;
}

.type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dill-green), var(--aura-indigo));
}

.type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(91, 117, 83, 0.25);
    border-color: var(--aura-indigo);
}

.type-card h4 {
    color: var(--dill-green);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

.type-card p {
    color: var(--dark-gray);
    margin-bottom: 1rem;
    line-height: 1.8;
    font-family: var(--font-primary);
}

.type-card strong {
    color: var(--aura-indigo);
    font-weight: 600;
    font-family: var(--font-primary);
}

/* Type-specific accent colors */
.type-card.clustering {
    border-left: 6px solid var(--dill-green);
}

.type-card.dimensionality {
    border-left: 6px solid var(--aura-indigo);
}

.type-card.anomaly {
    border-left: 6px solid var(--butter-yellow);
}

.type-card.association {
    border-left: 6px solid #10b981;
}

.type-card.neural {
    border-left: 6px solid #8b5cf6;
}

.type-card.density {
    border-left: 6px solid #f59e0b;
}

/* Alternative color variants for different content types */
.type-card.primary {
    border-left: 6px solid var(--dill-green);
}

.type-card.secondary {
    border-left: 6px solid var(--aura-indigo);
}

.type-card.accent {
    border-left: 6px solid var(--butter-yellow);
}

.type-card.success {
    border-left: 6px solid #10b981;
}

.type-card.warning {
    border-left: 6px solid #f59e0b;
}

.type-card.info {
    border-left: 6px solid #06b6d4;
}

/* ===== CHAPTER 13 SPECIFIC STYLES ===== */

/* Grid Layouts */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.grid-auto-fit-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

.grid-auto-fit-medium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.grid-auto-fit-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Small font size for lists */
.small-list {
    font-size: 0.9rem;
}

/* White background boxes */
.white-box {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}

/* Centered text with margin */
.centered-text {
    text-align: center;
    margin: 1rem 0;
    font-size: 1.2rem;
}

.centered-text-small {
    text-align: center;
    margin: 1rem 0;
    font-size: 1.1rem;
}

/* Light gray background boxes */
.light-gray-box {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
}

/* Demo controls grid */
.demo-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Visualization placeholder with dashed border */
.visualization-dashed {
    background: white;
    border: 2px dashed #ccc;
    height: 200px;
    margin: 4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 8px;
}

.visualization-dashed-large {
    background: white;
    border: 2px dashed #ccc;
    height: 400px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 8px;
}

/* Centered content */
.centered-content {
    text-align: center;
}

/* Demo metrics grid */
.demo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

/* Ordered list with margin */
.ordered-list {
    margin: 1rem 0;
}

/* Nested unordered list */
.nested-list {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

/* Algorithm box 
.algorithm-box {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}*/

/* Mode seeking visualization */
.mode-seeking-viz {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* Demo layout */
.demo-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 1rem 0;
}

/* Demo status */
.demo-status {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
}

/* Status info */
.status-info p {
    margin-bottom: 0.5rem;
}

/* Demo visualization */
.demo-visualization {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
}

/* Demo metrics */
.demo-metrics {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
}

/* Metrics grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

/* Metric item */
.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

.metric-label {
    font-weight: 600;
    color: var(--dark-gray);
}

.metric-value {
    color: var(--aura-indigo);
    font-weight: 700;
}

/* Control group */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    font-weight: 600;
    color: var(--dark-gray);
}

.control-group input,
.control-group select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Control buttons */
.control-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Quiz score */
.quiz-score {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    text-align: center;
}

/* Quiz result */
.quiz-result {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    font-weight: 600;
}

.quiz-result.correct {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.quiz-result.incorrect {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Button styles */
.btn-generate {
    background: var(--dill-green);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.btn-generate:hover {
    background: var(--aura-indigo);
    transform: translateY(-2px);
}

.btn-reset {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.btn-reset:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* Flex layouts */
.flex-gap {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 3rem 0;
}

/* Monospace text */
.monospace {
    font-family: monospace;
    font-size: 0.9rem;
}

/* Margin top */
.margin-top {
    margin-top: 1rem;
}

/* Quiz section styling */
.quiz-section {
    margin: 2rem 0;
    padding: 1rem;
    background: #f0f8ff;
    border-radius: 8px;
    text-align: center;
}

/* Advice box */
.advice-box {
    margin-top: 1rem;
    padding: 0.5rem;
    background: #e3f2fd;
    border-radius: 4px;
}

.advice-box p {
    margin: 0;
    font-size: 0.9rem;
}

/* ===== CHAPTER 10 INTERACTIVE DEMO STYLES ===== */
.demo-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.control-group {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
}

.control-group h4 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.1rem;
}

.control-item {
    margin: 1rem 0;
}

.control-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #555;
}

.control-item select,
.control-item input[type="range"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.control-item input[type="range"] {
    padding: 0;
    height: 6px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.control-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4f46e5;
    cursor: pointer;
    border-radius: 50%;
}

.control-item input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4f46e5;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

.control-item span {
    display: inline-block;
    margin-left: 0.5rem;
    font-weight: 500;
    color: #4f46e5;
}

.demo-button {
    background: #4f46e5;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.demo-button:hover {
    background: #4338ca;
}

.visualization-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.visualization-panel {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-align: center;
}

.visualization-panel h4 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.1rem;
}

.visualization-panel canvas,
.visualization-panel svg {
    border: 1px solid #eee;
    border-radius: 4px;
}

.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.cutting-methods {
    margin: 2rem 0;
}

.cutting-methods h5 {
    margin: 0 0 1rem 0;
    color: #333;
}

.radio-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin: 0;
}

.demo-metrics {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.demo-metrics h4 {
    margin: 0 0 1rem 0;
    color: #333;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.metric-label {
    font-weight: 500;
    color: #555;
}

.metric-value {
    font-weight: 600;
    color: #4f46e5;
    font-family: 'JetBrains Mono', monospace;
}

/* ===== CHAPTER 13 SPECIFIC STYLES FROM INLINE <STYLE> BLOCK ===== */

/* Visualization placeholder */
.visualization-placeholder {
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    border: 2px dashed #999;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    margin: 1rem 0;
    font-style: italic;
    color: #666;
}

/* Interactive demo */
.interactive-demo {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* Formula box */
.formula-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

/* Theorem box */
.theorem-box {
    background: #f3e5f5;
    border-left: 4px solid #9c27b0;
    padding: 3rem;
    margin: 1rem 0;
    border-radius: 4px;
    line-height: 1.6;
}

/* Algorithm box */
.algorithm-box {
    background: #f1f8e9;
    border-left: 4px solid #689f38;
    padding: 3rem;
    margin: 1rem 0;
    border-radius: 4px;
}

/* Kernel box */
.kernel-box {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

/* Convergence box */
.convergence-box {
    background: #fce4ec;
    border-left: 4px solid #e91e63;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

/* Bandwidth box */
.bandwidth-box {
    background: #e8f5e8;
    border-left: 4px solid #4caf50;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

/* Comparison table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

.comparison-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Quiz question */
.quiz-question {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}

/* Learning objectives card */
.learning-objectives-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
}

/* Section navigation */
.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1rem;
}

.section-nav button {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.section-nav button:hover {
    background: #e9ecef;
}

.section-nav button.active {
    background: var(--butter-yellow);
    border-color: var(--butter-yellow);
    color: var(--dark-gray);
}

/* Content sections */
.content-section {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navigation buttons */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Mode seeking visualization */
.mode-seeking-viz {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .chapter-navigation {
        flex-direction: column;
        align-items: center;
    }
    
    .chapter-nav-btn {
        width: 100%;
        max-width: 200px;
        margin: 0.25rem 0;
    }
    
    .section-nav {
        flex-direction: column;
        align-items: center;
    }
    
    .section-nav-btn {
        width: 100%;
        max-width: 250px;
        margin: 0.25rem 0;
    }
    
    .tutorial-main-title {
        font-size: 2.5rem;
    }
    
    .tutorial-subtitle {
        font-size: 1.1rem;
    }
    
    .concepts-grid {
        grid-template-columns: 1fr;
    }
    
    .sub-nav-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .sub-nav-btn {
        width: 100%;
        max-width: 200px;
    }
    
    .unsupervised-types-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===== AZBN BUTTON STYLES (OVERRIDE GENERIC BUTTON STYLES) ===== */

/* Ensure azbn-btn styles take precedence over generic button styles */
.azbn-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-family: var(--font-primary) !important;
    font-size: 0.9rem !important;
    background-color: var(--dill-green) !important;
    color: var(--white) !important;
    border-color: var(--dill-green) !important;
}

.azbn-btn:hover {
    background-color: var(--butter-yellow) !important;
    border-color: var(--butter-yellow) !important;
    color: var(--dark-gray) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.3) !important;
}

.azbn-btn.azbn-secondary,
.azbn-btn.azbn-secondary {
    background-color: var(--white) !important;
    color: var(--dark-gray) !important;
    border-color: var(--dill-green) !important;
    border-width: 2px !important;
}

.azbn-btn.azbn-secondary:hover,
.azbn-btn.azbn-secondary:hover {
    background-color: var(--butter-yellow) !important;
    color: var(--dark-gray) !important;
    border-color: var(--butter-yellow) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 217, 91, 0.3) !important;
}

.azbn-btn:focus {
    outline: 3px solid var(--primary-light) !important;
    outline-offset: 2px !important;
}

/* ===== COMMON COMPONENT STYLES ===== */

/* Demo Container Components */
.demo-container {
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(75, 63, 114, 0.1);
}

.demo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--alpine-oat);
    border-radius: 8px;
    border: 1px solid rgba(91, 117, 83, 0.2);
}

.demo-visualization {
    background: var(--white);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(75, 63, 114, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Interactive Elements */
.interactive-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.interactive-slider input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--alpine-oat);
    outline: none;
    -webkit-appearance: none;
}

.interactive-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--aura-indigo);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.interactive-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--aura-indigo);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.interactive-slider .slider-display {
    font-weight: 600;
    color: var(--aura-indigo);
    font-size: 0.9rem;
    background: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(75, 63, 114, 0.2);
}

.interactive-button {
    background: linear-gradient(135deg, var(--aura-indigo) 0%, var(--dill-green) 100%);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-primary);
}

.interactive-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.interactive-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.interactive-button.secondary {
    background: linear-gradient(135deg, var(--light-gray) 0%, #9CA3AF 100%);
}

.interactive-input {
    padding: 0.5rem 0.75rem;
    border: 2px solid rgba(75, 63, 114, 0.2);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
    background: var(--white);
}

.interactive-input:focus {
    outline: none;
    border-color: var(--aura-indigo);
    box-shadow: 0 0 0 3px rgba(75, 63, 114, 0.1);
}

.interactive-select {
    padding: 0.5rem 0.75rem;
    border: 2px solid rgba(75, 63, 114, 0.2);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.interactive-select:focus {
    outline: none;
    border-color: var(--aura-indigo);
    box-shadow: 0 0 0 3px rgba(75, 63, 114, 0.1);
}

/* Quiz Components */
.quiz-container {
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(75, 63, 114, 0.1);
}

.quiz-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--aura-indigo);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.quiz-answer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid rgba(75, 63, 114, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--white);
}

.quiz-answer:hover {
    border-color: var(--aura-indigo);
    background: rgba(75, 63, 114, 0.05);
}

.quiz-answer input[type="radio"] {
    margin: 0;
    accent-color: var(--aura-indigo);
}

.quiz-answer label {
    cursor: pointer;
    flex: 1;
    margin: 0;
    font-family: var(--font-primary);
    color: var(--dark-gray);
}

/* Metrics Display */
.metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--alpine-oat);
    border-radius: 8px;
    border: 1px solid rgba(91, 117, 83, 0.2);
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 6px;
    border: 1px solid rgba(75, 63, 114, 0.1);
}

.metric-label {
    font-size: 0.85rem;
    color: var(--light-gray);
    margin-bottom: 0.5rem;
    text-align: center;
    font-weight: 500;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aura-indigo);
    font-family: var(--font-mono);
}

/* Visualization Panels */
.visualization-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
}

.visualization-panel {
    background: var(--white);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(75, 63, 114, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.visualization-panel h4 {
    margin: 0 0 1rem 0;
    color: var(--aura-indigo);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--alpine-oat);
    padding-bottom: 0.5rem;
}

/* Control Groups */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.control-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .demo-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .control-group {
        min-width: unset;
    }
    
    .visualization-container {
        gap: 1rem;
    }
    
    .metrics-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}