@layer theme, base, components, forms, utilities;

@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --relative-spacing: 0.25em;
        --breakpoint-xs: 30rem;
        --breakpoint-sm: 40rem;
        --breakpoint-md: 48rem;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 80rem;
        --breakpoint-2xl: 96rem;
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        --text-5xl: 3rem;
        --text-6xl: 3.75rem;
        --text-7xl: 4.5rem;
        --text-8xl: 6rem;
        --text-9xl: 8rem;
        --font-weight-thin: 100;
        --font-weight-extralight: 200;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --font-weight-black: 900;
        --leading-none: 1;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-normal: 1.55;
        --leading-relaxed: 1.625;
        --leading-loose: 2;
        --radius-xs: 0.125rem;
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --radius-4xl: 2rem;
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --aspect-video: 16 / 9;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(--font-sans-font-feature-settings);
        --default-font-variation-settings: var(--font-sans-font-variation-settings);
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(--font-mono-font-feature-settings);
        --default-mono-font-variation-settings: var(--font-mono-font-variation-settings);
        --color-gray-50: oklch(0.985 0.002 247.839);
        --color-gray-100: oklch(0.967 0.003 264.542);
        --color-gray-200: oklch(0.928 0.006 264.531);
        --color-gray-300: oklch(0.872 0.01 258.338);
        --color-gray-400: oklch(0.707 0.022 261.325);
        --color-gray-500: oklch(0.551 0.027 264.364);
        --color-gray-600: oklch(0.446 0.03 256.802);
        --color-gray-700: oklch(0.373 0.034 259.733);
        --color-gray-800: oklch(0.278 0.033 256.848);
        --color-gray-900: oklch(0.21 0.034 264.665);
        --color-gray-950: oklch(0.13 0.028 261.692);
        --color-primary: var(--theme-main-text-color);
        --color-primary-inverted: var(--theme-inverted-text-color);
        --color-primary-lighter: var(--theme-primary-color-light);
        --color-primary-darker: var(--theme-primary-color-dark);
        --color-container: var(--theme-main-bg-color);
        --color-article: var(--border-color-article);
        --color-code: var(--theme-bg-code);
        --color-theme-code: var(--theme-inverted-text-color);
        --color-button: var(--border-color-button);
        --color-button-primary: var(--theme-primary-color);
        --tw-border-style: solid;
    }
}
@layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }

    html, :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(--font-sans);
        font-feature-settings: var(--default-font-feature-settings, normal);
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }

    abbr:where([title]) {
        text-decoration: underline dotted;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
        text-align: start;
        line-height: 1.25;
        text-wrap: balance;
    }

    :where(article, aside, nav, section) :is( h1, h2, h3, h4) {
        margin-block: 0;
    }

    :where(a) {
        color: inherit;
        text-decoration: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.125em;

        &:hover {
            text-decoration: underline;
        }
    }

    :where(h1,h2) a {
        color: var(--gradient-end);
    }

    b, strong {
        font-weight: bolder;
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }

    th {
        text-align: left;
        border-bottom: 1px solid var(--color-table-border);
        padding: 1px;
    }

    td {
        text-align: left;
        padding: 1px;
        vertical-align: top;
    }

    :-moz-focusring {
        outline: auto;
    }

    progress {
        vertical-align: baseline;
    }

    summary {
        display: list-item;
    }


    ol, ul, menu {
        list-style: none;
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        display: block;
        vertical-align: middle;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    button, input, select, optgroup, textarea, ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }

    ::file-selector-button {
        margin-inline-end: 4px;
    }

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab, currentColor 50%, transparent);
    }

    textarea {
        resize: vertical;
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }

    ::-webkit-datetime-edit {
        display: inline-flex;
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }

    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }

    :-moz-ui-invalid {
        box-shadow: none;
    }

    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
        appearance: button;
    }

    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
        height: auto;
    }

    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }

    baseline-status {
        min-height: 3.625rem;
    }
}
@layer utilities {
    .hidden {
        display: none;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .not-sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .line-clamp-none {
        overflow: visible;
        display: block;
        -webkit-box-orient: horizontal;
        -webkit-line-clamp: unset;
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .\<md {
        display: initial;
        @media (width >= 48rem) {
            display: none;
        }
    }

    .\>md {
        display: none;
        @media (width >= 48rem) {
            display: initial;
        }
    }
}
@layer components {
    .min-h-11 {
        min-height: 44px;
    }

    .form-input, .form-textarea, .form-select, .form-multiselect {
        appearance: none;
        background-color: #fff;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .form-select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
        background-position: right .5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .icon-inline {
        block-size: calc(var(--spacing) * 5);
        inline-size: calc(var(--spacing) * 5);
        margin-block: auto;
    }

    .icon-cap {
        block-size: 1em;
        inline-size: 1em;
        margin-block: auto;
    }

    .icon-xs {
        block-size: calc(var(--spacing) * 5);
        inline-size: calc(var(--spacing) * 5);
    }

    .icon-sm {
        block-size: calc(var(--spacing) * 6);
        inline-size: calc(var(--spacing) * 6);
    }

    .icon-md {
        block-size: calc(var(--spacing) * 8);
        inline-size: calc(var(--spacing) * 8);
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-sm);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-button);
        background-color: transparent;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        font-size: 1rem;
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-primary);
        cursor: pointer;

        svg {
            display: inline-flex;
            aspect-ratio: 1 / 1;
        }

        &:hover {
            border-color: var(--color-button-primary);
            background-color: var(--color-button-primary);
            color: var(--color-white);
        }

        &:focus {
            border-color: transparent;
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-outline-style: none;
            outline-style: none;
        }
    }

    .btn-search {
        position: absolute;
        top: calc(var(--spacing) * 0);
        right: calc(var(--spacing) * 0);
        margin: calc(var(--spacing) * 0);
        display: flex;
        aspect-ratio: 1 / 1;
        height: 100%;
        justify-content: center;
        border-style: var(--tw-border-style);
        border-width: 0;
        padding: calc(var(--spacing) * 0);
        color: var(--color-black);
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

        .icon {
            height: calc(var(--spacing) * 5);
            width: calc(var(--spacing) * 5);
        }
    }

    .btn-primary {
        background-color: var(--color-primary);
        color: var(--color-white);
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

        &:hover {
            background-color: var(--color-primary-lighter);
            color: var(--color-white);
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
    }

    .btn-secondary {
        border-style: var(--tw-border-style);
        border-width: 2px;
        border-color: var(--color-primary-lighter);
        background-color: var(--color-white);
        color: var(--color-black);
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

        &:hover {
            border-color: var(--color-primary-darker);
            background-color: var(--color-white);
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }

        &:focus {
            border-style: var(--tw-border-style);
            border-width: 2px;
            border-color: transparent;
        }
    }
}

.btn-inline {
    border-color: transparent;

    &:hover {
        text-decoration: underline;
        background-color: transparent;
    }
}

@layer forms {
    [type="text"], input:where(:not([type])), [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
        color: var(--theme-input-color);
        background-color: var(--color-secondary-default);
        border-color: var(--border-color-button);
        border-radius: var(--radius-sm);
    }

    .form-input, .form-email, .form-select, .form-multiselect, .form-textarea {
        width: 100%;
        border-radius: var(--radius-md);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-gray-300);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

        &:focus {
            border-color: var(--color-gray-300);
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            --tw-ring-color: rgb(255 255 255 / 50%);
            --tw-outline-style: none;
            outline-style: none;
            --tw-ring-inset: inset;
        }
    }

    form, fieldset {
        & label {
            color: var(--theme-main-text-color);
        }

        .field {
            margin-bottom: calc(var(--spacing) * 1);
        }

        .field.field-reserved {
            margin-bottom: calc(var(--spacing) * 7);
        }

        .field.field-reserved ul:last-of-type {
            margin-bottom: calc(var(--spacing) * -6);
            padding-bottom: calc(var(--spacing) * 1);
        }

        .field.field-reserved ul {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
        }

        label {
            margin-bottom: calc(var(--spacing) * 1);
            display: block;
        }

        .field.choice {
            display: flex;
            align-items: center;
        }

        .field.choice input {
            margin-right: calc(var(--spacing) * 4);
        }

        .field.choice label {
            margin-bottom: calc(var(--spacing) * 0);
        }

        .field.field-error .messages {
            max-width: fit-content;
            color: var(--color-red-600);
        }

        legend {
            margin-bottom: calc(var(--spacing) * 3);
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
            color: var(--color-primary);
        }

        legend + br {
            display: none;
        }
    }

    fieldset ~ fieldset {
        margin-top: calc(var(--spacing) * 8);
    }

    .form-group {
        flex-wrap: nowrap;
        gap: 0.5rem;

        label {
            flex-grow: 1;
        }

        .btn {
            width: fit-content;
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-gray-300);

            &:hover {
                border-color: var(--color-primary);
            }
        }
    }
}

:root {
    --layout-padding: clamp(0.375em, 1.75vw, 1.5em);
    --layout-spacing: clamp(0.5ex, 1.5vi, 1ex);
    --theme-main-bg-color: oklch(98.51% 0 0);
    --theme-main-text-color: oklch(11.49% 0 0);
    --theme-inverted-text-color: oklch(92% 0 0);
    --border-color-default: #ebedec;
    --border-color-article: #c6ccc8;
    --border-color-button: #c6ccc8;
    --color-secondary-default: #efefef;
    --theme-input-color: oklch(11.49% 0 0);
    --theme-primary-color: #00bd0f;
    --theme-primary-color-light: #00bd0f;
    --theme-primary-color-dark: #008300;
    --theme-gradient-dark: #008300;
    --theme-gradient: #00bd0f;
    --theme-gradient-light: #00bd0f;
    --color-code-background: #282c34;
    --theme-accent-color: #fff700;
    --color-table-border: oklch(0.872 0.01 258.338 / .3);
    --fg-color: var(--color-black);

    @media (color-gamut: p3) {
        @supports (background: oklch(0 0 0)) {
            --theme-gradient-light: oklch(84.88% 0.36852781063661505 145.64495037017772);
            --theme-gradient: oklch(68.43% 0.36852781063661505 145.64495037017772);
            --theme-gradient-dark: oklch(51.98% 0.36852781063661505 145.64495037017772);
        }
    }
    @media (prefers-color-scheme: dark) {
        --theme-main-bg-color: oklch(29.25% 0.016 264.3);
        --theme-main-text-color: oklch(92% 0 0);
        --theme-inverted-text-color: oklch(11.49% 0 0);
        --border-color-default: #141414;
        --border-color-article: #393337;
        --border-color-button: #c6ccc8;
        --color-secondary-default: #c6bcbc;
        --color-code-background: #fafafa;
        --color-table-border: oklch(0.872 0.01 258.338 / .15);
        --fg-color: var(--color-white);
    }
}

@property --gradient-start {
    syntax: "<color>";
    inherits: false;
    initial-value: #00fb29;
}

@property --gradient-middle {
    syntax: "<color>";
    inherits: false;
    initial-value: #00bd0f;
}

@property --gradient-end {
    syntax: "<color>";
    inherits: false;
    initial-value: #008300;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.125em;
}

h3 {
    font-size: 1.875em;
    font-weight: 600;
}

h4 {
    font-size: 1.5em;
    font-weight: 600;
}

h5 {
    font-size: 1.25em;
    font-weight: 500;
}

h6 {
    font-size: 1em;
    font-weight: 500;
}

body {
    background-color: var(--color-container);
    color: var(--color-primary);
}

.mirrored-text {
    color: var(--theme-inverted-text-color);
}

.page-header {
    position: relative;
    z-index: 1;
}

.base-block {
    padding-inline: var(--layout-padding);
}

.wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    row-gap: 1rem;
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
    min-height: 100dvh;

    @media (width >= 48rem) {
        grid-template-columns: 15rem 2fr 1fr;
        column-gap: calc(2.1vw + 1.5rem);
    }

    .logo, h1, h2 {
        --gradient-start: var(--theme-gradient-dark);
        --gradient-middle: var(--theme-gradient);
        --gradient-end: var(--theme-gradient-light);
        margin-bottom: 0.5ex;
        @media (prefers-color-scheme: dark) {
            --gradient-start: var(--theme-gradient-light);
            --gradient-end: var(--theme-gradient-dark);
        }
        width: fit-content;
        background: linear-gradient(83deg, var(--gradient-start), var(--gradient-start), var(--gradient-middle), var(--gradient-end), var(--gradient-end));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: --gradient-start 1s, --gradient-end 1s;

        &:hover {
            --gradient-start: var(--theme-gradient-light);
            --gradient-end: var(--theme-gradient-dark);
            @media (prefers-color-scheme: dark) {
                --gradient-start: var(--theme-gradient-dark);
                --gradient-end: var(--theme-gradient-light);
            }
        }
    }

    .title-home {
        display: inline;
        font-size: 1em;
        margin: 0;

        .logo {
            em {
                margin-top: calc(var(--spacing) * -5);
                margin-right: calc(var(--spacing) * 5.5);
            }
        }

    }
}

.main-header {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: color-mix(in srgb, var(--color-container) 40%, transparent);
    padding-top: calc(var(--spacing) * 2);
    font-size: 0.625rem;

    &::before {
        background: linear-gradient(180deg, var(--color-container), transparent 90%);
        backdrop-filter: blur(0.275rem);
        content: '';
        display: block;
        position: absolute;
        inset-inline: 0;
        height: 100%;
        top: 0;
    }

    @media (width >= 48rem) {
        background-color:  var(--color-container);
        background-image: none;
        position: relative;
        grid-column: span 3 / span 3;
        justify-content: flex-start;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        font-size: 1rem;

        &::before {
            content: none;
        }
    }

    .logo {
        position: relative;
        display: flex;
        height: 3.333ex;
        max-width: 164px;
        flex-wrap: wrap;
        font-size: 3em;
        line-height: 1;
        font-weight: var(--font-weight-semibold);

        @media (width >= 48rem) {
            margin-bottom: 0.5ex;
            max-width: 246px;
        }

        span {
            display: inline-block;
        }

        em {
            margin-top: calc(var(--spacing) * -7);
            margin-right: calc(var(--spacing) * 6);
            margin-left: auto;
            display: inline-block;
            font-style: normal;
        }

        &:hover {
            text-decoration: none;
        }
    }

    .menu-toggle {
        position: absolute;
        top: calc(var(--spacing) * 3);
        left: calc(var(--spacing) * 4);
        display: flex;
        height: fit-content;
        width: fit-content;
        border-radius: var(--radius-sm);
        border-style: var(--tw-border-style);
        border-width: 1px;
        padding: calc(var(--spacing) * 0.5);

        @media (width >= 48rem) {
            display: none;
        }
    }
}

.main-footer {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);

    @media (width >= 48rem) {
        grid-column: span 3 / span 3;
    }

    .copyright {
        font-size: 0.875em;
        column-gap: calc(var(--spacing) * 2);
    }

    .socials {
        margin-inline-start: auto;
        margin-inline-end: 2rem;
    }
}

.scroll-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1rem;
    z-index: 20;

    @media (width >= 48rem) {
        bottom: 3rem;
        right: 3rem;
    }

    .btn {
        background: color(from var(--color-theme-code) srgb r g b / 0.5);
        border-radius: 99em;
        padding: calc(var(--spacing) * 3);
        cursor: pointer;
    }
}

.search-baseline .loader {
    display: flex;
    padding: 0.5em;
    align-items: center;
    justify-content: center;
}

article {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    row-gap: calc(var(--spacing) * 0);

    @media (width >= 48rem) {
        grid-column: 2 / span 2;
        grid-template-columns: 2fr 1fr;
        column-gap: calc(var(--spacing) * 4);
    }

    & > header {
        margin-bottom: calc(var(--spacing) * 6);
        container: article-header / inline-size;
    }

    & > section {
        margin-bottom: calc(var(--spacing) * 4);
        display: grid;
        width: 100%;
        grid-template-columns: 100%;
        row-gap: calc(var(--spacing) * 0);
        container: article-size / inline-size;

        @media (width >= 48rem) {
            grid-column: 1 / span 2;
            grid-template-columns: 2.5fr 1fr;
            column-gap: calc(var(--spacing) * 4);
        }

        & > * {
            grid-column-start: 1;
        }

        h3 {
            color: var(--gradient-start);
        }

        p + :where(h2,h3,h4,h5,h6) {
            margin-block-start: calc(var(--relative-spacing) * 2lh);
        }

        & > :not(h1) {
            margin-block-start: 0.75lh;
        }

        ol, ul {
            list-style: revert;
            margin-inline-start: calc(var(--spacing) * 3);
            padding-inline-start: calc(var(--spacing) * 4);
        }

        ul {
            ::marker {
                content: '*  ';
            }
        }
    }

    :where(dl) {
        display: grid;
        grid-template-columns: fit-content(1.5rem) auto;
        gap: calc(var(--spacing) * 6) 0;
        margin-block: 1lh;

        dt {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 1);
            padding-inline-end: calc(var(--spacing) * 2);
        }
        dt, dd {
            border-bottom: 1px solid var(--border-color-article);
            padding-block-end: calc(var(--spacing) * 2);
        }
    }

    blockquote {
        margin-left: 1rem;
        width: 50%;
    }

    baseline-status {
        border: 1px solid var(--border-color-article);
        font-size: 0.875rem;
        padding: 1rem 1rem 0;
        min-height: 95px;

        @container article-size (width >= 24rem) {
            min-height: 58px;
        }

        .name {
            font-size: 1em !important;
        }
    }

    .baseline {
        padding-block: calc(var(--spacing) * 4);
        display: grid;
        grid-template-columns: 1fr;

        @media screen and (width >= 48rem) {
            grid-column: 1 / span 2;
            grid-template-columns: 2.5fr 1fr;
            scroll-margin-block-start: 2lh;
        }

        :where(a):hover {
            text-decoration: underline;
        }

        & > * {
            grid-column-start: 1;
        }

        baseline-status {
            padding-block-start: 0;
            margin-block-end: 1lh;
        }

        & > :not(baseline-status) {
            margin-block-start: 1lh;
        }

        h3 {
            margin-block-end: 1lh;
            scroll-margin-block-start: 3lh;

            @media (width >= 48rem) {
                scroll-margin-block-start: 1lh;
            }
        }

        .highlight {
            grid-column: 1 / span 2;
        }
    }

    .reference-list {
        display: flex;
        gap: 1rem;
        align-content: center;
    }

    .reference {
        display: inline-flex;
        align-content: center;
        width: fit-content;
        gap: 0.25rem;
    }

    &.result-item {
        @media (width >= 48rem) {
            grid-column: 1 / span 1;
        }

        header,
        :where(h1, h2) {
            margin-block-start: 0.25em;
            margin-block-end: 0;
        }
    }

    & > footer {
        margin-block: 1lh;
        border-style: var(--tw-border-style);
        border-width: 0;
        text-align: start;
    }

    .highlight {
        background: var(--chroma-bg-color);
        position: relative;

        @media (width >= 48rem) {
            grid-column: 1 / span 2;
        }

        > .chroma {
            max-width: calc(100vw - var(--spacing) * 8);
            overflow-x: auto;
            scrollbar-width: none;
            @media (width >= 64rem) {
                max-width: 100%;
            }
            border-radius: var(--radius-md);

            &::-webkit-scrollbar {
                display: none;
            }

            code {
                scrollbar-width: none;
            }

            table {
                max-width: 100%;
            }

            .lntd + .lntd {
                width: fit-content;
            }
        }
    }

    pre {
        padding: calc(var(--spacing) * 3);

        ::-webkit-scrollbar {
            display: none;
        }

        code {
            scrollbar-width: none;
        }
    }

    &.video video, &.audio audio {
        width: 100%;
    }

    :where(p, li, dt, dd) > code {
        display: inline-block;
        border: 1px solid oklch(from var(--theme-main-text-color) l c h / 25%);
        border-radius: 4px;
        padding: 0 0.5ex;
        background: rgba(117, 244, 115, 0.25);
        width: fit-content;
    }
}

article .title a {
    display: block;

    &:hover {
        text-decoration-color: var(--gradient-end);
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.125em;
    }
}

.main {
    @media (width >= 48rem) {
        &.content {
            grid-column: 2 / span 2;
            margin-bottom: calc(var(--spacing) * 8);
        }
    }

    h1 {
        margin-bottom: calc(var(--spacing) * 2);
        font-size: clamp(1.25rem, 2vw + 1.25rem, 2.75rem);
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
    }

    h2 {
        margin-bottom: calc(var(--spacing) * 3);
        font-size: clamp(1.25rem, 2vw + 1.25rem, 2.25rem);
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
    }

    & > article {
        margin-bottom: calc(var(--spacing) * 4);
        column-gap: calc(var(--spacing) * 4);
        padding-inline: calc(var(--spacing) * 4);

        @media (width >= 48rem) {
            margin-bottom: calc(var(--spacing) * 8);
            padding-left: calc(var(--spacing) * 0);
        }

        & > * {
            grid-column-start: 1;
        }

        & > .toc-container {
            grid-column-start: 2;
        }

        header h1 {
            --tw-leading: 1.1;
            margin-bottom: calc(var(--spacing) * 3);
            line-height: 1.1;
        }
    }

    .article-meta {
        display: flex;
        flex-direction: column;
        font-size: 0.875em;
        column-gap: calc(var(--spacing) * 3);
        row-gap: calc(var(--spacing) * 2);

        .time-date {
            column-gap: calc(var(--spacing) * 3);
            row-gap: calc(var(--spacing) * 2);
        }

        .date,
        .time {
            column-gap: calc(var(--spacing) * 2);
        }

        .spacer {
            display: flex;
            width: 0;
            height: 1em;
            border-left: 1px solid;
            margin-block: auto;
        }

        & > .spacer {
            display: none;
        }

        @container article-header (width >= 24rem) {
            flex-direction: row;

            & > .spacer {
                display: flex;
            }
        }
    }

    .search-results {
        padding: calc(var(--spacing) * 4);
    }

    .result-item mark {
        display: inline-flex;
        border: 1px solid var(--theme-accent-color);
        background: none;
        color: inherit;
        border-radius: 0.25rem;
    }
}

.popover {
    background: var(--chroma-bg-color);
    border: 2px solid var(--fg-color);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
    max-width: 64rem;
    margin: auto;
    width: 96vw;

    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 8);
    }

    button {
        border: 1px solid var(--border-color-article);
        border-radius: var(--radius-sm);
        background: var(--chroma-bg-color);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: calc(var(--spacing) * 2);
        top: calc(var(--spacing) * 2);
        width: 1.5rem;
        height: 1.5rem;
    }

    iframe {
        width: 100%;
        height: 70dvh;
        min-height: fit-content;
    }
}

.metadata {
    margin-top: calc(var(--spacing) * 8);
    display: block;
    width: 100%;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    font-size: 0.75em;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
}

@scope (.toc-container) {
    :scope {
        --size: 2;
        --toc-top: calc(var(--spacing) * var(--size));
        position: fixed;
        @media (width >= 48rem) {
            --size: 4;
            --toc-top: 0;
            position: absolute;
        }
        --toc-right: calc(var(--spacing) * var(--size));
        background-color: rgba(from var(--theme-main-bg-color) r g b / 0.65);
        border: 1px solid rgba(from var(--color-button) r g b / 0.15);
        border-radius: 0.25rem;
        padding: calc(var(--spacing) * var(--size));
        right: var(--toc-right);
        top: var(--toc-top);
        width: fit-content;
        z-index: 5;
        transition: top 0.5s linear, width 0.5s ease-out, background-color 0.5s;

        &.sticky {
            position: fixed;
            top: 0.5lh;
        }

        &[open] {
            background-color: var(--theme-main-bg-color);
            width: auto;
        }
    }

    .toc {
        gap: 0.25lh;
        padding: 0.5lh 0.5rem;
        width: 20rem;
        max-height: 80dvh;
        overflow-y: auto;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        overscroll-behavior-block: contain;
    }

    .toc-link {
        display: inline-block;

        &::first-letter {
            text-transform: uppercase;
        }
    }
}

@scope (.sidebar) {
    :scope {
        position: fixed;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: 10;
        display: flex;
        height: 100dvh;
        width: 100vw;
        flex-direction: column;
        gap: calc(var(--spacing) * 4);
        background-color: var(--color-container);
        padding-inline: min(6vw, 1rem);
        padding-block: calc(var(--spacing) * 4);
        transform: translateX(-100vw);
        transition: transform 0.55s;

        &.open {
            transform: translateX(0);
        }

        @media (width >= 48rem) {
            position: sticky;
            top: 2rem;
            z-index: 0;
            height: auto;
            margin-block-end: auto;
            width: 100%;
            background-color: var(--color-container);
            padding-right: calc(var(--spacing) * 0);
            padding-left: calc(var(--spacing) * 4);
            transform: translateX(0);
        }
    }

    .menu-toggle {
        position: relative;
        margin-left: auto;
        display: flex;
        height: fit-content;
        width: fit-content;
        border-radius: 0.25rem;
        border-style: var(--tw-border-style);
        border-width: 1px;
        padding: calc(var(--spacing) * 0.5);
        @media (width >= 48rem) {
            display: none;
        }
    }

    .search-box {
        position: relative;
        width: 100%;
    }

    .menu {
        margin-block: 1rem;
        max-height: calc(100dvh - 5rem);
        overflow-y: scroll;
        scrollbar-width: none;
        overscroll-behavior-block: contain;

        @media (width >= 48rem) {
            max-height: unset;
        }

        .heading {
            margin-block-start: calc(var(--spacing) * 2);
        }
    }

    .navigation {
        max-width: 28ch;

        a {
            display: flex;
            text-wrap: balance;
            padding-block: 2px;

            &:hover {
                text-decoration-line: underline;
            }
        }
    }

    summary {
        align-items: center;
        display: flex;
        gap: 0.5rem;

        svg {
            rotate: 180deg;
        }

        &::marker {
            display: none;
        }

        [open] & {
            svg {
                rotate: 0deg;
            }
        }
    }
}

.input {
    width: auto;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);

    &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--color-primary);
        --tw-outline-style: none;
        outline-style: none;
    }

    & -light {
        border-color: var(--color-gray-500);
        background-color: var(--color-white);
    }
}

.search-box {
    width: 100%;

    .form-input {
        min-height: calc(var(--spacing) * 11);
        width: 100%;

        &:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: -2px;
        }
    }
}

.dynamic-icon {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    color: var(--theme-inverted-text-color);
}

.tags {
    display: flex;
    gap: calc(var(--spacing) * 2);
    --tw-leading: 1;
    line-height: 1;

    a {
        --gradient-start: #006200;
        --gradient-end: #007200;
        display: inline-block;
        border-radius: 0.25rem;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--gradient-start);
        padding-inline: calc(var(--spacing) * 2.5);
        padding-block: calc(var(--spacing) * 1);
        font-size: 0.75em;
        color: var(--color-white);
        text-transform: uppercase;
        text-decoration-line: none;
        opacity: 80%;
        background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end), var(--gradient-end), var(--gradient-start));
        transition: --gradient-end 1s, --gradient-start 1s;

        &:hover, &:focus, &:active {
            --gradient-start: #007200;
            --gradient-end: #009200;
            border-color: var(--gradient-start);
            color: var(--color-white);
        }
    }
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);

    a {
        margin-bottom: calc(var(--spacing) * 1);
        display: inline-block;
        border-radius: calc(infinity * 1px);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-article);
        padding-inline: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 1);
        color: var(--color-black);
        text-decoration-line: none;

        &:hover, &:focus, &:active {
            color: var(--color-white);
        }
    }
}

.read-more {
    white-space: nowrap;
    color: var(--color-primary);
    --tw-content: ' \232A';

    &::after {
        content: var(--tw-content);
    }

    &:hover, &:active {
        text-decoration-line: underline;
    }
}

.resizer {
    display: flex;
    resize: horizontal;
    overflow:hidden;

    .resize-inner {
        flex-grow: 1;
        border: 0;
    }
}

.traversal {
    display: flex;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 0);

    a {
        display: inline-block;
        min-width: calc(var(--spacing) * 4);
        border-radius: 0.25rem;
        background-color: var(--color-primary-lighter);
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 2);
        color: var(--color-primary);
        text-decoration-line: none;

        &:hover, &:focus, &:active {
            background-color: var(--color-primary);
            color: var(--color-primary-inverted);
        }
    }
}

.likes {
    position: relative;
    display: inline;

    .likes {
        border: none;

        img {
            vertical-align: middle;
        }
    }

    .like .unlike {
        display: none;
    }

    .liked .like {
        display: none;
    }
}

:root {
    --chroma-color: #4a5e65;
    --chroma-bg-color: #e4e4e4;
    --chroma-bg-highlight-line: #d6d0bf;
    --chroma-line-numbers: #495050;
    --chroma-key: #859900;
    --chroma-namespace: #dc322f;
    --chroma-name: #085f9c;
    --chroma-literal: #006e00;
    --chroma-comment: #93a1a1;
    --chroma-generic: #d33682;
}

@media (prefers-color-scheme: dark) {
    --chroma-color: #93a1a1;
    --chroma-bg-color: #002b36;
    --chroma-bg-highlight-line: #19404a;
    --chroma-line-numbers: #495050;
    --chroma-key: #719e07;
    --chroma-namespace: #dc322f;
    --chroma-name: #268bd2;
    --chroma-literal: #2aa198;
    --chroma-comment: #586e75;
    --chroma-generic: #dc322f;
}

.bg {
    color: var(--chroma-color);
    background-color: var(--chroma-bg-color);
}

.chroma {
    color: var(--chroma-color);
    background-color: var(--chroma-bg-color);

    .lnlinks {
        outline: none;
        text-decoration: none;
        color: inherit
    }

    .lntd {
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: 0;
    }

    .lntable {
        border-spacing: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }

    .hl {
        background-color: var(--chroma-bg-highlight-line);
    }

    .lnt {
        white-space: pre;
        -webkit-user-select: none;
        user-select: none;
        margin-right: 0.4em;
        padding: 0 0.4em 0 0.4em;
        color: var(--chroma-line-numbers)
    }

    .ln {
        white-space: pre;
        -webkit-user-select: none;
        user-select: none;
        margin-right: 0.4em;
        padding: 0 0.4em 0 0.4em;
        color: var(--chroma-line-numbers)
    }

    .line {
        display: flex;
    }

    .k {
        color: var(--chroma-key)
    }

    .kc {
        color: var(--chroma-key);
        font-weight: bold
    }

    .kd {
        color: var(--chroma-key)
    }

    .kn {
        color: var(--chroma-namespace);
        font-weight: bold
    }

    .kp {
        color: var(--chroma-key)
    }

    .kr {
        color: var(--chroma-key)
    }

    .kt {
        color: var(--chroma-key);
        font-weight: bold
    }

    .n {
        color: var(--chroma-name)
    }

    .na {
        color: var(--chroma-name)
    }

    .nb {
        color: #cb4b16
    }

    .bp {
        color: var(--chroma-name)
    }

    .nc {
        color: #cb4b16
    }

    .no {
        color: var(--chroma-name)
    }

    .nd {
        color: var(--chroma-name)
    }

    .ni {
        color: var(--chroma-name)
    }

    .ne {
        color: var(--chroma-name)
    }

    .nf {
        color: var(--chroma-name)
    }

    .fm {
        color: var(--chroma-name)
    }

    .nl {
        color: var(--chroma-name)
    }

    .nn {
        color: var(--chroma-name)
    }

    .nx {
        color: var(--chroma-name)
    }

    .py {
        color: var(--chroma-name)
    }

    .nt {
        color: var(--chroma-name);
        font-weight: bold
    }

    .nv {
        color: var(--chroma-name)
    }

    .vc {
        color: var(--chroma-name)
    }

    .vg {
        color: var(--chroma-name)
    }

    .vi {
        color: var(--chroma-name)
    }

    .vm {
        color: var(--chroma-name)
    }

    .l {
        color: var(--chroma-literal)
    }

    .ld {
        color: var(--chroma-literal)
    }

    .s {
        color: var(--chroma-literal)
    }

    .sa {
        color: var(--chroma-literal)
    }

    .sb {
        color: var(--chroma-literal)
    }

    .sc {
        color: var(--chroma-literal)
    }

    .dl {
        color: var(--chroma-literal)
    }

    .sd {
        color: var(--chroma-literal)
    }

    .s2 {
        color: var(--chroma-literal)
    }

    .se {
        color: var(--chroma-literal)
    }

    .sh {
        color: var(--chroma-literal)
    }

    .si {
        color: var(--chroma-literal)
    }

    .sx {
        color: var(--chroma-literal)
    }

    .sr {
        color: var(--chroma-literal)
    }

    .s1 {
        color: var(--chroma-literal)
    }

    .ss {
        color: var(--chroma-literal)
    }

    .m {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .mb {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .mf {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .mh {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .mi {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .il {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .mo {
        color: var(--chroma-literal);
        font-weight: bold
    }

    .ow {
        color: var(--chroma-key)
    }

    .c {
        color: var(--chroma-comment);
        font-style: italic
    }

    .ch {
        color: var(--chroma-comment);
        font-style: italic
    }

    .cm {
        color: var(--chroma-comment);
        font-style: italic
    }

    .c1 {
        color: var(--chroma-comment);
        font-style: italic
    }

    .cs {
        color: var(--chroma-comment);
        font-style: italic
    }

    .cp {
        color: var(--chroma-comment);
        font-style: italic
    }

    .cpf {
        color: var(--chroma-comment);
        font-style: italic
    }

    .g {
        color: var(--chroma-generic)
    }

    .gd {
        color: var(--chroma-generic)
    }

    .ge {
        color: var(--chroma-generic)
    }

    .gr {
        color: var(--chroma-generic)
    }

    .gh {
        color: var(--chroma-generic)
    }

    .gi {
        color: var(--chroma-generic)
    }

    .go {
        color: var(--chroma-generic)
    }

    .gp {
        color: var(--chroma-generic)
    }

    .gs {
        color: var(--chroma-generic)
    }

    .gu {
        color: var(--chroma-generic)
    }

    .gt {
        color: var(--chroma-generic)
    }

    .gl {
        color: var(--chroma-generic)
    }
}

.highlight {
    position: relative;
    border-radius: var(--radius-md);

    .icon-tabler.icon-tabler-check {
        stroke: var(--color-primary-lighter);
    }

    .chroma {
        .lntable {
            padding-block: calc(var(--spacing) * 3);
            padding-inline: calc(var(--spacing) * 5);
            overflow: hidden;

            pre {
                margin: 0;
                border-radius: 0;
            }
        }

        &:has(table) {
            background-color: transparent;
        }
    }

    .lntable tr {
        display: flex;
    }
}