:root {
    --md-sys-color-primary: #f59e0b; /* Amber 500 */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #fde68a; /* Amber 200 */
    --md-sys-color-on-primary-container: #a16207; /* Amber 700 */
    --md-sys-color-secondary: #f59e0b; /* Amber 500 */
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #fde68a; /* Amber 200 */
    --md-sys-color-on-secondary-container: #a16207; /* Amber 700 */
    --md-sys-color-tertiary: #f59e0b; /* Amber 500 */
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fde68a; /* Amber 200 */
    --md-sys-color-on-tertiary-container: #a16207; /* Amber 700 */
    --md-sys-color-error: #ef4444; /* Red 500 */
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #fecaca; /* Red 200 */
    --md-sys-color-on-error-container: #b91c1c; /* Red 700 */
    --md-sys-color-background: #f9fafb; /* Gray 50 */
    --md-sys-color-on-background: #1f2937; /* Gray 800 */
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1f2937; /* Gray 800 */
    --md-sys-color-surface-variant: #f3f4f6; /* Gray 100 */
    --md-sys-color-on-surface-variant: #4b5563; /* Gray 600 */
    --md-sys-color-outline: #d1d5db; /* Gray 300 */
}

body {
    font-family: 'Roboto', sans-serif;
}

.markdown-container {
    font-family: 'Roboto', sans-serif;
    color: var(--md-sys-color-on-background);
    background: var(--md-sys-color-surface);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    max-width: 800px;
    margin: 2rem auto;
}

.markdown-container p {
    margin: 1.25em 0;
    line-height: 1.7;
    font-size: 1.1rem;
}

.markdown-container h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 2.5rem 0 1.2rem 0;
    color: var(--md-sys-color-on-surface);
    line-height: 1.2;
}

.markdown-container h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    color: var(--md-sys-color-primary);
    line-height: 1.3;
}

.markdown-container h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.5rem 0 0.75rem 0;
    color: var(--md-sys-color-on-primary-container);
    line-height: 1.4;
}

.markdown-container img {
    display: block;
    margin: 2rem auto;
    max-width: 100%;
    border-radius: 0.75rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.markdown-container li {
    margin: 0.5em 0 0.5em 1.5em;
    line-height: 1.6;
    font-size: 1.05rem;
}

.markdown-container a {
    color: var(--md-sys-color-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.markdown-container a:hover {
    color: var(--md-sys-color-on-primary-container);
}

.error-button{
    color: var(--md-sys-color-on-error);
    background: var(--md-sys-color-error);
}

.error-container{
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}