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

.announcement { font-size: .9rem; }
.announcement a { color: inherit; font-weight: 600; text-decoration: none; }
.announcement a:hover { text-decoration: underline; }

.sidebar-brand-text { font-weight: 800; letter-spacing: -0.01em; }
.sidebar-tree .caption, .sidebar-tree :not(.caption) > .caption-text {
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--color-brand-content);
}
.sidebar-tree .current-page > .reference { font-weight: 600; color: var(--color-brand-primary); }
.sidebar-tree .reference { border-radius: 8px; margin: 1px 8px; }

article h1 { font-weight: 800; letter-spacing: -0.02em; }
article h1::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: .6rem; border-radius: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}
article h2 { font-weight: 700; padding-bottom: .3rem; border-bottom: 1px solid var(--color-background-border); }
article h3 { font-weight: 600; }

.highlight { border-radius: 10px; }
div.highlight pre { border-radius: 10px; padding: 1rem 1.1rem; }
div[class*="highlight-"] { border-radius: 10px; border: 1px solid var(--color-background-border); }
code.literal { border-radius: 5px; padding: .1em .35em; border: 1px solid var(--color-background-border); }

.admonition { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 27, 51, .06); }

table.docutils { border-radius: 10px; overflow: hidden; border: 1px solid var(--color-background-border); }
table.docutils th { background: var(--color-sidebar-item-background--hover); }

.related-pages a { border-radius: 10px; padding: .75rem 1rem; border: 1px solid var(--color-background-border); }
.related-pages a:hover { border-color: var(--color-brand-content); }

img { border-radius: 8px; }

.sidebar-logo-container { margin: .5rem auto .25rem; }
.sidebar-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 20px rgba(56, 189, 248, .4); }
.footer .icons a { transition: color .15s; }
.footer .icons a:hover { color: var(--color-brand-primary); }

/* Imported GitBook content: video embeds and collapsible solutions */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.25rem 0; border-radius: 12px; overflow: hidden;
  background: #000; box-shadow: 0 10px 30px rgba(15, 27, 51, .18); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
details.solution { margin: .75rem 0 1.75rem; border: 1px solid var(--color-background-border); border-radius: 10px;
  background: var(--color-background-secondary); }
details.solution > summary { cursor: pointer; padding: .6rem 1rem; font-weight: 600; color: var(--color-brand-primary); }
details.solution > summary::before { content: "💡 Show "; }
details.solution[open] > summary::before { content: "💡 "; }
details.solution[open] > summary { border-bottom: 1px solid var(--color-background-border); }
details.solution > :not(summary) { margin-left: 1rem; margin-right: 1rem; }

/* Chapter completion (progress.js) */
.page-progress { margin: 2rem 0 1rem; padding: 1.1rem 1.25rem; border-radius: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--color-background-border);
  background: var(--color-background-secondary); }
.page-progress.is-done { border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .08); }
.page-progress .pp-text strong { display: block; font-size: 1rem; }
.page-progress .pp-text span { font-size: .88rem; color: var(--color-foreground-secondary); }
.page-progress .pp-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pp-btn { font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; padding: .55rem 1rem; border-radius: 10px; border: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; text-decoration: none; display: inline-block; }
.pp-btn:hover { filter: brightness(1.05); }
.pp-btn[disabled] { opacity: .6; cursor: wait; }
.pp-btn.ghost { background: transparent; color: var(--color-foreground-secondary); border: 1px solid var(--color-background-border); font-weight: 600; }
.pp-btn.next { background: #10b981; }
.done-chip { display: inline-flex; align-items: center; gap: .35rem; margin: -.25rem .4rem 1rem 0; padding: .3rem .8rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; background: rgba(16, 185, 129, .12); color: #059669; border: 1px solid rgba(16, 185, 129, .35); }
.sidebar-tree a.reference.is-done::after { content: "✓"; margin-left: .4rem; font-weight: 800; color: #10b981; }
.sidebar-progress { margin: .25rem var(--sidebar-item-spacing-horizontal, 1rem) .75rem; font-size: .8rem; color: var(--color-foreground-secondary); }
.sidebar-progress .bar { height: 6px; border-radius: 999px; background: var(--color-background-border); overflow: hidden; margin-top: .35rem; }
.sidebar-progress .bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #10b981); }

/* Quiz card injected by quiz.js */
.quiz-chip { display: inline-flex; align-items: center; gap: .4rem; margin: -.25rem 0 1rem; padding: .3rem .8rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; text-decoration: none; background: var(--color-sidebar-item-background--hover);
  color: var(--color-brand-primary); border: 1px solid var(--color-background-border); }
.quiz-chip:hover { border-color: var(--color-brand-content); }
.quiz-card { margin: 2.5rem 0 1rem; padding: 1.4rem 1.5rem; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 60%, #38bdf8 100%); box-shadow: 0 14px 40px rgba(30, 58, 138, .25); }
.quiz-card h2 { margin: 0 0 .25rem !important; padding: 0 !important; border: 0 !important; color: #fff; font-size: 1.3rem; }
.quiz-card > p { margin: 0 0 1rem; opacity: .9; }
.quiz-card .quiz-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.quiz-card .quiz-item + .quiz-item { margin-top: .6rem; }
.quiz-card .quiz-item strong { display: block; }
.quiz-card .quiz-item small { opacity: .85; }
.quiz-card .quiz-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.quiz-card a.quiz-btn { display: inline-block; padding: .5rem 1rem; border-radius: 10px; font-weight: 700; text-decoration: none;
  background: #fff; color: #1d4ed8; }
.quiz-card a.quiz-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.quiz-card a.quiz-btn:hover { filter: brightness(.95); }
.quiz-card .quiz-all { display: inline-block; margin-top: .9rem; color: #fff; font-size: .9rem; opacity: .9; }