*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--gb-bg);
    color: var(--gb-text);
    font-family: var(--gb-font-body);
    font-size: var(--gb-text-base);
    line-height: var(--gb-leading-normal);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--gb-font-heading);
    font-weight: var(--gb-weight-semibold);
    line-height: var(--gb-leading-tight);
    letter-spacing: var(--gb-tracking-tight);
}

h1 {
    font-size: var(--gb-text-h1);
}

h2 {
    font-size: var(--gb-site-section-title);
}

h3 {
    font-size: var(--gb-text-h4);
}

p,
ul {
    margin: 0;
}

a {
    color: var(--gb-primary);
    text-underline-offset: var(--gb-underline-offset);
}

a:hover {
    color: var(--gb-primary-hover);
}

:focus-visible {
    outline: var(--gb-focus-width) solid var(--gb-focus);
    outline-offset: var(--gb-focus-offset);
}

::selection {
    background: var(--gb-primary-soft);
    color: var(--gb-text);
}

[id] {
    scroll-margin-top: var(--gb-space-5);
}

.site-main {
    flex: 1 0 auto;
}

.site-container {
    width: 100%;
    max-width: var(--gb-content-max-width);
    margin: 0 auto;
    padding: 0 var(--gb-site-gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: var(--gb-space-2);
    left: var(--gb-space-2);
    z-index: var(--gb-z-toast);
    padding: var(--gb-space-2) var(--gb-space-4);
    border-radius: var(--gb-radius-btn);
    background: var(--gb-primary);
    color: var(--gb-primary-contrast);
    font-weight: var(--gb-weight-bold);
    transform: translateY(-200%);
}

.skip-link:focus {
    color: var(--gb-primary-contrast);
    transform: none;
}

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gb-space-2);
    min-height: var(--gb-control-height);
    padding: var(--gb-space-2) var(--gb-space-5);
    border: var(--gb-border-width-strong) solid transparent;
    border-radius: var(--gb-radius-btn);
    font-family: var(--gb-font-body);
    font-size: var(--gb-text-base);
    font-weight: var(--gb-weight-heavy);
    line-height: var(--gb-leading-tight);
    text-decoration: none;
    transition: background-color var(--gb-duration-fast) var(--gb-easing),
        color var(--gb-duration-fast) var(--gb-easing),
        transform var(--gb-duration-fast) var(--gb-easing);
}

.site-button:active {
    transform: translateY(1px);
}

.site-button--small {
    min-height: var(--gb-control-height-sm);
    padding: var(--gb-space-1) var(--gb-space-3);
    font-size: var(--gb-text-sm);
}

.site-button--primary {
    background: var(--gb-primary);
    color: var(--gb-primary-contrast);
}

.site-button--primary:hover {
    background: var(--gb-primary-hover);
    color: var(--gb-primary-contrast);
}

.site-button--secondary {
    border-color: var(--gb-border-strong);
    background: var(--gb-surface);
    color: var(--gb-text);
}

.site-button--secondary:hover {
    background: var(--gb-surface-2);
    color: var(--gb-text);
}

.page-section {
    padding: var(--gb-space-7) 0;
}

.page-section--tinted {
    background: var(--gb-surface-2);
}

.card {
    padding: var(--gb-space-5);
    border: var(--gb-border-width) solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    background: var(--gb-surface);
    box-shadow: var(--gb-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-button {
        transition: none;
    }
}

.page-intro {
    display: flex;
    flex-direction: column;
    gap: var(--gb-space-3);
    max-width: var(--gb-site-prose-max-width);
    margin-bottom: var(--gb-space-6);
}

.page-intro__kicker {
    color: var(--gb-secondary-text);
    font-size: var(--gb-text-sm);
    font-weight: var(--gb-weight-heavy);
    text-transform: uppercase;
}

.page-intro h1 {
    font-size: var(--gb-site-hero-title);
    font-weight: var(--gb-weight-bold);
}

.page-intro p {
    color: var(--gb-text-muted);
    font-size: var(--gb-text-h4);
}

.page-intro p a {
    font-size: var(--gb-text-base);
    font-weight: var(--gb-weight-bold);
}

.prose {
    overflow-wrap: anywhere;
    font-size: var(--gb-text-h4);
    line-height: var(--gb-leading-normal);
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose table,
.prose blockquote,
.prose pre {
    margin: 0 0 var(--gb-space-4);
}

.prose h2,
.prose h3 {
    margin: var(--gb-space-6) 0 var(--gb-space-2);
    font-family: var(--gb-font-heading);
    line-height: var(--gb-leading-tight);
}

.prose h2 {
    font-size: var(--gb-text-h3);
}

.prose h3 {
    font-size: var(--gb-text-h4);
}

.prose h2:target,
.prose h3:target {
    border-radius: var(--gb-radius-sm);
    background: var(--gb-accent-soft);
    box-shadow: 0 0 0 var(--gb-space-2) var(--gb-accent-soft);
}

.prose ul,
.prose ol {
    padding-left: var(--gb-space-6);
}

.prose li + li {
    margin-top: var(--gb-space-2);
}

.prose blockquote {
    padding: var(--gb-space-1) var(--gb-space-3);
    border-left: var(--gb-accent-bar-width) solid var(--gb-border);
    color: var(--gb-text-muted);
}

.prose code {
    padding: 0 var(--gb-space-1);
    border-radius: var(--gb-radius-xs);
    background: var(--gb-surface-2);
    font-family: var(--gb-font-mono);
    font-size: var(--gb-text-sm);
}

.prose pre {
    overflow-x: auto;
    padding: var(--gb-space-3) var(--gb-space-4);
    border: var(--gb-border-width) solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
    background: var(--gb-surface-2);
}

.prose pre code {
    padding: 0;
    background: none;
}

.prose strong {
    font-weight: var(--gb-weight-heavy);
}

.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--gb-text-base);
}

.prose th,
.prose td {
    padding: var(--gb-space-2) var(--gb-space-3);
    border: var(--gb-border-width) solid var(--gb-border);
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--gb-surface-2);
    font-weight: var(--gb-weight-bold);
}

.prose .lesson-picture {
    display: block;
    width: 100%;
    max-width: var(--gb-demo-picture-max-width);
    height: auto;
    margin: var(--gb-space-2) 0;
    border-radius: var(--gb-radius-lg);
}