:root {
    --gradient-from: #4ade80;
    --gradient-to: #447aee;
    --tw-gradient-stops: var(--gradient-from), var(--gradient-to);
    --text: rgb(51 65 85);
    --text-dark: #fff;
    --text-cyan: rgb(8 145 178);
    --text-slate: rgb(100 116 139);
    --text-teal: rgb(20 184 166);
    --border: rgb(243 244 246);
    --bg: #ffffff;
    --accent: var(--text-cyan);
    --accent-hover: rgb(13 148 136);
    --accent-text: var(--bg);
    --preformatted: #ccc;
    --marked: #ffdd33;
    --disabled: #e2e8f0;
}

/* Force light mode - override Simple.css dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
        --bg: #ffffff;
        --accent-bg: #f5f7ff;
        --text-light: #585858;
        --preformatted: #ccc;
    }
}

body > header {
    border-color: var(--border);
    background: var(--bg);
}
body > header > :only-child {
    /* Remove simple.css margin */
    margin-block-start: 0;
    margin-block-end: -32px;
}
body > header nav {
    display: flex;
    align-items: center;
}
body > header a {
    border: 0;
}
body > header a.header-logo {
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
body > header a.header-logo:hover {
    background-color: unset;
}
body > header a.active {
    background-color: #f1f5f9;
}
body > header a.header-logo > img {
    height: 46px;
    width: auto;
}
body > header a.header-logo-small > img {
    /* Funny size and vanishing effect */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
@media (max-width: 768px) {
    /* Hide header github small on mobile screens */
    body > header a.header-logo-small > span {
        display: none;
    }
}
body > header .bg-gradient-wrap {
    /* ensure element tightly wraps text */
    display: flex;
}

body > header h1 {
    color: var(--text-teal);
}

.pills {
    display: flex;
    gap: 1em;
    flex-direction: column;
    margin-top: 1em;
    align-items: stretch;
}
.pills > div {
    border-radius: 0.75rem;
    flex: 1;
}
.pills > div > p {
    margin: 0;
}
@media (min-width: 768px) {
    .pills {
        flex-direction: row;
    }
    .pills > div {
        width: 33%;
    }
}

body > main > pre {
    font-size: 0.8rem;
}

.code-windows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.code-window {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.code-window > pre {
    border-radius: 0;
    border: 1px solid var(--disabled);
}

.code-window.terminal > pre {
    background: #282c34;
}

.code-window.terminal > pre > code {
    color: #e2e8f0 !important;
}

.window-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #cbd5e1;
    position: relative;
}

.window-header::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
    width: 3.5rem;
    height: 1rem;
    background-image:
        radial-gradient(circle, #ff5f57 50%, transparent 50%),
        radial-gradient(circle, #ffbd2e 50%, transparent 50%),
        radial-gradient(circle, #28ca42 50%, transparent 50%);
    background-size: 1rem 1rem;
    background-position:
        0 0,
        1.25rem 0,
        2.5rem 0;
    background-repeat: no-repeat;
}

.window-title {
    font-size: 0.75rem;
    color: #475569;
    font-family: monospace;
    font-weight: 500;
    margin-left: 3.5rem;
}

.code-window pre {
    padding: unset;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow: auto;
}

/* Language-specific sections controlled by radio inputs */
.lang-section {
    display: none;
    border-top: var(--border-width) solid var(--border);
    border-bottom: var(--border-width) solid var(--border);
    margin: 3rem 0;
    padding: 2rem 1rem;
}

#lang-typescript:checked ~ .lang-section.typescript,
#lang-python:checked ~ .lang-section.python,
#lang-bash:checked ~ .lang-section.bash {
    display: block;
}