@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    --r-background-color: #f4f7f8;
    --r-main-font: "Noto Sans Thai", Arial, sans-serif;
    --r-main-font-size: 27px;
    --r-main-color: #1f2933;
    --r-block-margin: 18px;
    --r-heading-margin: 0 0 20px 0;
    --r-heading-font: "Noto Sans Thai", Arial, sans-serif;
    --r-heading-color: #111827;
    --r-heading-line-height: 1.12;
    --r-heading-letter-spacing: 0;
    --r-heading-text-transform: none;
    --r-heading-text-shadow: none;
    --r-heading-font-weight: 700;
    --r-heading1-size: 2.15em;
    --r-heading2-size: 1.5em;
    --r-heading3-size: 1.1em;
    --r-heading4-size: 1em;
    --r-code-font: "JetBrains Mono", Consolas, Monaco, monospace;
    --r-link-color: #087c95;
    --r-link-color-hover: #024c67;
    --r-selection-background-color: #9be3f0;
    --r-selection-color: #0d2b36;
    --teal-900: #024c67;
    --teal-800: #046b85;
    --teal-700: #087c95;
    --teal-600: #0d91ad;
    --teal-500: #1aa8c2;
    --teal-100: #dff5f8;
    --ink: #1f2933;
    --muted: #5b6670;
    --line: #d7dee2;
    --paper: #ffffff;
    --shadow: 0 10px 26px rgba(2, 76, 103, 0.16);
}

.reveal-viewport {
    background: #edf3f5;
}

.reveal {
    color: var(--r-main-color);
    font-family: var(--r-main-font);
    font-size: var(--r-main-font-size);
}

.reveal .slides {
    text-align: left;
}

.reveal .slides section,
.reveal .slides section > section {
    box-sizing: border-box;
    min-height: 100%;
    padding: 58px 70px 54px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0) 0 72%, rgba(8, 124, 149, 0.08) 72% 100%),
        var(--paper);
    border: 1px solid #d9e1e5;
    box-shadow: 0 2px 12px rgba(31, 41, 51, 0.08);
    line-height: 1.42;
    overflow: hidden;
}

.reveal .slides section::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 44%;
    height: 100%;
    background:
        linear-gradient(135deg, var(--teal-500) 0 18%, transparent 18%),
        linear-gradient(135deg, var(--teal-700) 0 34%, transparent 34%),
        linear-gradient(135deg, var(--teal-800) 0 50%, transparent 50%),
        linear-gradient(135deg, var(--teal-900) 0 64%, transparent 64%);
    clip-path: polygon(0 78%, 47% 100%, 0 100%);
    opacity: 0.95;
    pointer-events: none;
}

.reveal .slides section::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 32%;
    height: 38%;
    background:
        linear-gradient(135deg, transparent 0 20%, rgba(13, 145, 173, 0.28) 20% 30%, transparent 30%),
        linear-gradient(135deg, transparent 0 36%, rgba(8, 124, 149, 0.35) 36% 46%, transparent 46%),
        linear-gradient(135deg, transparent 0 52%, rgba(2, 76, 103, 0.75) 52% 100%);
    clip-path: polygon(42% 0, 100% 0, 100% 100%);
    pointer-events: none;
}

.reveal .slides section > * {
    position: relative;
    z-index: 1;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    margin: var(--r-heading-margin);
    color: var(--r-heading-color);
    font-family: var(--r-heading-font);
    font-weight: var(--r-heading-font-weight);
    line-height: var(--r-heading-line-height);
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

.reveal h1 {
    max-width: 760px;
    color: var(--teal-900);
    font-size: var(--r-heading1-size);
    font-weight: 800;
}

.reveal h1 + p {
    display: inline-block;
    margin-top: 2px;
    padding: 0.46em 0.78em;
    border-left: 5px solid var(--teal-700);
    background: #eef7f9;
    color: var(--teal-900);
    font-size: 0.72em;
    font-weight: 700;
}

.reveal h2 {
    display: inline-block;
    padding: 0 0 8px;
    border-bottom: 4px solid var(--teal-700);
    color: #1c252c;
    font-size: var(--r-heading2-size);
    font-weight: 700;
}

.reveal h3 {
    color: var(--teal-800);
    font-size: var(--r-heading3-size);
    font-weight: 800;
}

.reveal p {
    margin: var(--r-block-margin) 0;
}

.reveal a {
    color: var(--r-link-color);
    text-decoration: none;
}

.reveal a:hover {
    color: var(--r-link-color-hover);
}

.reveal ul,
.reveal ol {
    display: block;
    margin: 18px 0 0 1.1em;
}

.reveal li {
    margin: 0.34em 0;
    padding-left: 0.15em;
}

.reveal li::marker {
    color: var(--teal-700);
    font-weight: 800;
}

.reveal strong,
.reveal b {
    color: var(--teal-900);
    font-weight: 800;
}

.reveal blockquote {
    width: auto;
    margin: 24px 0;
    padding: 22px 26px;
    border-left: 7px solid var(--teal-700);
    background: #f5fbfc;
    box-shadow: var(--shadow);
    color: var(--ink);
}

.reveal table {
    width: 100%;
    margin: 22px 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
    font-size: 0.74em;
}

.reveal table th,
.reveal table td {
    padding: 0.68em 0.82em;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.reveal table th {
    background: var(--teal-800);
    color: #ffffff;
    font-weight: 800;
}

.reveal table tbody tr:nth-child(even) td {
    background: #f4fafb;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
    border-bottom: 0;
}

.reveal pre {
    width: 100%;
    margin: 22px 0;
    border-left: 8px solid var(--teal-600);
    background: #102a35;
    box-shadow: var(--shadow);
    font-size: 0.55em;
    line-height: 1.45;
}

.reveal pre code {
    max-height: 430px;
    padding: 20px 24px;
    color: #eef7f9;
}

.reveal code {
    border-radius: 3px;
    padding: 0.08em 0.26em;
    background: #e7f3f5;
    color: var(--teal-900);
    font-family: var(--r-code-font);
    font-size: 0.86em;
}

.reveal pre code {
    background: transparent;
}

.reveal img,
.reveal video,
.reveal iframe {
    max-width: 100%;
    max-height: 70vh;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.reveal a[style*="background:#fabd2f"] {
    display: inline-block !important;
    min-width: 220px;
    padding: 0.72em 1.15em !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--teal-800) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-align: center;
    box-shadow: 8px 8px 0 rgba(26, 168, 194, 0.18);
}

.reveal a[style*="background:#fabd2f"]:hover {
    background: var(--teal-900) !important;
}

.reveal .controls {
    color: var(--teal-800);
}

.reveal .progress {
    height: 6px;
    background: #cfdadd;
    color: var(--teal-700);
}

.reveal .slide-number {
    right: 18px;
    bottom: 14px;
    padding: 4px 8px;
    background: var(--teal-900);
    color: #ffffff;
    font-family: var(--r-main-font);
    font-size: 13px;
    font-weight: 700;
}

.reveal .mermaid svg {
    max-height: 50vh !important;
    max-width: 100% !important;
}

section.has-light-background,
section.has-light-background h1,
section.has-light-background h2,
section.has-light-background h3,
section.has-light-background h4,
section.has-light-background h5,
section.has-light-background h6 {
    color: var(--ink);
}

@media print {
    .backgrounds {
        background-color: var(--r-background-color);
    }
}