/* Tutorial Specific Styles */
.tutorial-content {
    padding-top: 100px;
    min-height: 100vh;
}

.tutorial-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.tutorial-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.tutorial-header h1 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.tutorial-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.tutorial-meta span {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.difficulty {
    background: #dbeafe;
    color: #1e40af;
}

.duration {
    background: #dcfce7;
    color: #166534;
}

.updated {
    background: #fef3c7;
    color: #92400e;
}

/* Table of Contents */
.tutorial-toc {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid #2563eb;
}

.tutorial-toc h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.tutorial-toc ul {
    list-style: none;
}

.tutorial-toc li {
    margin-bottom: 0.5rem;
}

.tutorial-toc a {
    color: #2563eb;
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
}

.tutorial-toc a:hover {
    text-decoration: underline;
}

/* Content Sections */
.tutorial-article section {
    margin-bottom: 3rem;
}

.tutorial-article h2 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.tutorial-article h3 {
    font-size: 1.4rem;
    color: #374151;
    margin: 1.5rem 0 1rem 0;
}

.tutorial-article h4 {
    font-size: 1.2rem;
    color: #4b5563;
    margin: 1rem 0 0.5rem 0;
}

.tutorial-article p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #374151;
}

.tutorial-article ul,
.tutorial-article ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.tutorial-article li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Code Blocks */
.code-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    overflow-x: auto;
}

.code-block h4 {
    color: #94a3b8;
    margin-bottom: 1rem;
}

pre {
    background: #0f172a;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem 0;
}

code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
}

/* Example Boxes */
.example-box {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 1.5rem 0;
    overflow: hidden;
}

.example-box h4 {
    background: #f8fafc;
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

.chat-example {
    padding: 1rem;
}

.user-message,
.claude-message {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 6px;
}

.user-message {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
}

.claude-message {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
}

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

.tip-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tip-card h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.tip-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* Warning Box */
.warning-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.warning-box h4 {
    color: #dc2626;
    margin-bottom: 1rem;
}

.warning-box ul {
    margin: 0;
}

.warning-box li {
    color: #7f1d1d;
}

/* Navigation */
.tutorial-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .tutorial-article {
        padding: 1rem;
    }

    .tutorial-header h1 {
        font-size: 2rem;
    }

    .tutorial-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .tutorial-navigation {
        flex-direction: column;
        text-align: center;
    }
}

/ * Claude Code Optimization Tutorial Styles */ .alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left: 4px solid;
}

.alert-warning {
    background-color: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

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

.code-comparison .before,
.code-comparison .after {
    padding: 1.5rem;
    border-radius: 8px;
}

.code-comparison .before {
    background-color: #fff5f5;
    border: 1px solid #fed7d7;
}

.code-comparison .after {
    background-color: #f0fff4;
    border: 1px solid #c6f6d5;
}

.code-comparison h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.code-comparison blockquote {
    margin: 0;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-style: italic;
}

.code-comparison pre {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

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

.performance-metrics h4 {
    margin-top: 0;
    color: #28a745;
}

.performance-metrics ul {
    margin: 0;
    padding-left: 1.5rem;
}

.performance-metrics li {
    margin-bottom: 0.5rem;
}

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

.permission-level {
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid;
}

.permission-level.green {
    background-color: #f0fff4;
    border-color: #68d391;
}

.permission-level.yellow {
    background-color: #fffbeb;
    border-color: #f6e05e;
}

.permission-level.red {
    background-color: #fff5f5;
    border-color: #fc8181;
}

.permission-level h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.permission-level ul {
    margin: 0;
    padding-left: 1.5rem;
}

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

.memory-layer {
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.memory-layer h4 {
    margin-top: 0;
    color: #007bff;
}

.session-commands {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.session-commands ul {
    margin: 0;
    padding-left: 1.5rem;
}

.session-commands code {
    background-color: #e9ecef;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.comparison-table {
    overflow-x: auto;
    margin: 2rem 0;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.comparison-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

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

.pitfalls {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.pitfall {
    padding: 1.5rem;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
}

.pitfall h4 {
    margin-top: 0;
    color: #856404;
}

.pitfall code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.key-takeaways {
    background-color: #e8f5e8;
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid #28a745;
    margin: 2rem 0;
}

.key-takeaways h4 {
    margin-top: 0;
    color: #155724;
}

.key-takeaways ul {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;
}

.key-takeaways li {
    margin-bottom: 0.5rem;
}

/* Advanced tutorial meta styles */
.tutorial-meta .advanced {
    background-color: #ffebee;
    color: #c62828;
}

/* Mobile responsive for new elements */
@media (max-width: 768px) {
    .code-comparison {
        grid-template-columns: 1fr;
    }

    .permission-strategy {
        grid-template-columns: 1fr;
    }

    .memory-system {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        font-size: 0.9rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
    }
}

/ * Eight Honors Eight Shames Tutorial Styles */ .eight-principles {
    margin: 2rem 0;
}

.principle-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.shame,
.honor {
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid;
}

.shame {
    background-color: #fff5f5;
    border-color: #fc8181;
}

.shame h3 {
    color: #c53030;
    margin-top: 0;
    margin-bottom: 1rem;
}

.honor {
    background-color: #f0fff4;
    border-color: #68d391;
}

.honor h3 {
    color: #2f855a;
    margin-top: 0;
    margin-bottom: 1rem;
}

.example-bad,
.example-good {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
}

.example-bad {
    background-color: rgba(252, 129, 129, 0.1);
    border-left: 4px solid #fc8181;
}

.example-good {
    background-color: rgba(104, 211, 145, 0.1);
    border-left: 4px solid #68d391;
}

.example-bad h4,
.example-good h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.example-bad h4 {
    color: #c53030;
}

.example-good h4 {
    color: #2f855a;
}

.example-bad pre,
.example-good pre {
    margin: 0.5rem 0 0 0;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.85rem;
}

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

.practice-item {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.practice-item h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #2d3748;
    font-size: 1.1rem;
}

.practice-item ul {
    margin: 0;
    padding-left: 1.5rem;
}

.practice-item li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #4a5568;
}

/* Mobile responsive for eight principles */
@media (max-width: 768px) {
    .principle-pair {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .practice-guide {
        grid-template-columns: 1fr;
    }

    .example-bad pre,
    .example-good pre {
        font-size: 0.8rem;
    }
}

/* Ad
ditional styles for new tutorials */

/* Feature highlights for Claude 3.5 Sonnet */
.feature-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feature-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Workflow diagram */
.workflow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 12px;
}

.workflow-step {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-number {
    width: 30px;
    height: 30px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-weight: bold;
}

.workflow-arrow {
    font-size: 1.5rem;
    color: #007bff;
    font-weight: bold;
}

/* Development cycle */
.development-cycle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.cycle-step {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cycle-step h4 {
    color: #2d3748;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Monitoring dashboard */
.monitoring-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.metric-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.metric-card h4 {
    margin-top: 0;
    color: #2d3748;
}

/* Security threats */
.security-threats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.threat-card {
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid;
}

.threat-card.high {
    background-color: #fff5f5;
    border-color: #fc8181;
}

.threat-card.medium {
    background-color: #fffbeb;
    border-color: #f6e05e;
}

.threat-card.low {
    background-color: #f0fff4;
    border-color: #68d391;
}

.threat-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Security checklist */
.security-checklist {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.checklist-item input[type="checkbox"] {
    margin-right: 1rem;
    transform: scale(1.2);
}

.checklist-item label {
    cursor: pointer;
    user-select: none;
}

/* Performance pyramid */
.performance-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.pyramid-level {
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 600px;
}

.pyramid-level.level-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    max-width: 500px;
}

.pyramid-level.level-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    max-width: 400px;
}

.pyramid-level.level-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    max-width: 300px;
}

/* Test pyramid */
.test-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.unit-tests {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    max-width: 500px;
}

.integration-tests {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    max-width: 400px;
}

.e2e-tests {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    max-width: 300px;
}

/* Deployment strategies */
.deployment-strategies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.strategy-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.strategy-card h3 {
    margin-top: 0;
    color: #2d3748;
}

.strategy-card ul {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;
}

/* Deployment checklist */
.deployment-checklist {
    background: #f0fff4;
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid #28a745;
    margin: 2rem 0;
}

.deployment-checklist h4 {
    margin-top: 0;
    color: #155724;
}

/* Mobile responsive for new elements */
@media (max-width: 768px) {
    .workflow-diagram {
        flex-direction: column;
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

    .feature-highlights,
    .security-threats,
    .deployment-strategies {
        grid-template-columns: 1fr;
    }

    .pyramid-level {
        max-width: 100% !important;
    }

    .development-cycle {
        grid-template-columns: 1fr;
    }

    .monitoring-dashboard {
        grid-template-columns: 1fr;
    }
}