@layer side-spesifikt {
    .fokusring:is(:hover, :focus-visible) {
        outline: var(--border-width, 1px) solid var(--color-focus-ring, light-dark(oklch(13% 0 0), oklch(93% 0 0)));
        outline-offset: 0.125rem;
    }

    @media (forced-colors: active) {
        .fokusring:is(:hover, :focus-visible) {
            outline-color: Highlight;
        }
    }

    .stabling {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .stabling > * {
        grid-area: 1 / 1;
    }

    html:has(> body.designsystem-side) {
        max-inline-size: none;
        background: var(--color-surface-muted, color-mix(in srgb, light-dark(oklch(100% 0 0), oklch(20% 0 0)) 92%, light-dark(oklch(13% 0 0), oklch(93% 0 0)) 8%));
    }

    body.designsystem-side {
        max-inline-size: none;
        margin: 0;
        background: var(--color-surface-muted, color-mix(in srgb, light-dark(oklch(100% 0 0), oklch(20% 0 0)) 92%, light-dark(oklch(13% 0 0), oklch(93% 0 0)) 8%));
    }

    @scope (.designsystem-side) {
        :scope {
            --portal-surface: var(--color-surface, light-dark(oklch(100% 0 0), oklch(20% 0 0)));
            --portal-surface-text: var(--color-surface-text, light-dark(oklch(13% 0 0), oklch(93% 0 0)));
            --portal-surface-muted: var(--color-surface-muted, color-mix(in srgb, light-dark(oklch(100% 0 0), oklch(20% 0 0)) 92%, light-dark(oklch(13% 0 0), oklch(93% 0 0)) 8%));
            --portal-panel: var(--portal-surface);
            --portal-panel-strong: var(--portal-surface-muted);
            --portal-border: color-mix(in srgb, var(--border-color, color-mix(in srgb, currentColor 50%, transparent)) 24%, transparent);
            --portal-border-strong: color-mix(in srgb, var(--portal-surface-text) 16%, transparent);
            --portal-accent-muted: color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 12%, transparent);
            --portal-shadow-soft: var(--shadow-soft, 0 0 0 transparent);
            --portal-shadow-elevated: var(--shadow-elevated, 0 0.45em 1.1em color-mix(in srgb, var(--color-surface-text) 10%, transparent));
            --portal-code-background: color-mix(in srgb, var(--portal-surface-text) 92%, var(--portal-surface) 8%);
            --portal-code-foreground: var(--color-surface-inverse-text, light-dark(oklch(100% 0 0), oklch(20% 0 0)));
            display: grid;
            grid-template-columns: minmax(18em, 22em) minmax(0, 1fr);
            align-items: start;
            gap: var(--space-large, 1.5em);
            color: var(--portal-surface-text);

            &:has(.designsystem-toc) {
                @media (width >= 96em) {
                    grid-template-columns: minmax(18em, 22em) minmax(0, 1fr) minmax(14em, 18em);
                }
            }

            @media (width < 70em) {
                grid-template-columns: 1fr;
            }
        }

        :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
            outline: max(2px, calc(var(--border-width, 1px) * 2)) solid var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
            outline-offset: 0.125rem;
        }

        .designsystem-innhold {
            min-inline-size: 0;
        }

        main {
            display: grid;
            gap: var(--space-large, 1.5em);
            margin-block-end: var(--space-large, 1.5em);

            .introduksjon > p,
            .introduksjon > ul,
            .introduksjon > ol,
            .introduksjon > dl {
                max-inline-size: 75ch;
            }

            > section {
                position: relative;
                display: grid;
                gap: var(--space-medium, 1em);
                padding-block: clamp(var(--space-medium, 1em), 2vw, var(--space-large, 1.5em));
                border-block-start: var(--border-width, 1px) solid var(--portal-border);

                &:target {
                    border-color: color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 45%, var(--portal-border));
                    outline: 0.2rem solid color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 18%, transparent);
                    outline-offset: 0.15rem;
                }
            }

            > section:first-child {
                padding-block-start: 0;
                border-block-start: 0;
            }

            > section > :is(h2, h3) {
                margin: 0;
            }
        }

        .designsystem-topp {
            position: relative;
            display: grid;
            gap: var(--space-small, 0.6em);
            margin-block-end: var(--space-large, 1.5em);
            padding-block: var(--space-small, 0.6em) var(--space-medium, 1em);

            .sti {
                margin: 0;
                font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-wide, 0.08em);
                text-transform: uppercase;
                opacity: var(--opacity-muted, 0.7);

                a {
                    text-decoration-thickness: 0.08em;
                }
            }

            h1 {
                margin: 0;
                font: var(--font-weight-normal, 400) clamp(var(--font-size-title-1, 1.65em), 4vw, var(--font-size-display, 2.25em)) / var(--line-height-tight, 1.1) var(--font-family-base, system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-tight, -0.02em);
                max-inline-size: 16ch;
                text-wrap: balance;
            }
        }

        .designsystem-sidebar-brytning {
            position: sticky;
            inset-block-start: var(--space-medium, 1em);
            max-block-size: calc(100svh - (var(--space-medium, 1em) * 2));
            overflow: auto;
            border: var(--border-width, 1px) solid var(--portal-border-strong);
            border-radius: var(--radius-large, 0.75em);
            background: color-mix(in srgb, var(--portal-surface) 94%, var(--portal-surface-muted) 6%);

            @media (width < 70em) {
                position: static;
                max-block-size: none;
            }
        }

        .designsystem-sidebar-apne {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-small, 0.6em);
            margin: 0;
            padding: var(--space-small, 0.6em) var(--space-medium, 1em);
            font: var(--font-headline, 600 1em/1.4 system-ui, sans-serif);
            list-style: none;
            cursor: pointer;
            user-select: none;

            &::-webkit-details-marker {
                display: none;
            }

            &::after {
                content: "▾";
                opacity: var(--opacity-muted, 0.7);
                transition: transform var(--transition-duration, 150ms) var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1));
            }

            details[open] > &::after {
                transform: rotate(180deg);
            }

            @media (width < 70em) {
                display: flex;
                border-block-end: var(--border-width, 1px) solid var(--portal-border);
            }
        }

        .designsystem-sidebar {
            display: grid;
            gap: var(--space-medium, 1em);
            align-content: start;
            padding: var(--space-medium, 1em);
            color: inherit;

            .sidebar-hjem {
                display: inline-grid;
                justify-self: start;
                gap: var(--space-2xs, 0.2em);
                inline-size: auto;
                padding: var(--space-small, 0.6em) var(--space-medium, 1em);
                border: var(--border-width, 1px) solid color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 18%, transparent);
                border-radius: var(--radius-pill, 9999px);
                background: color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 8%, var(--portal-surface) 92%);
                font: var(--font-headline, 600 1em/1.4 system-ui, sans-serif);
                letter-spacing: 0.01em;
                text-decoration: none;

                &::before {
                    content: "Delte byggesteiner";
                    font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                    letter-spacing: var(--letter-spacing-wide, 0.08em);
                    text-transform: uppercase;
                    opacity: var(--opacity-muted, 0.7);
                }
            }

            .designsystem-sok {
                position: relative;
                display: grid;
                gap: var(--space-small, 0.6em);

                input[type="search"] {
                    inline-size: 100%;
                    max-inline-size: none;
                    padding-inline-start: calc(var(--space-medium, 1em) + var(--space-small, 0.6em));
                    border-color: var(--portal-border);
                    border-radius: var(--radius-pill, 9999px);
                    background: var(--portal-surface);
                }

                &::before {
                    content: "⌕";
                    position: absolute;
                    inset-block-start: 0.65em;
                    inset-inline-start: var(--space-small, 0.6em);
                    z-index: 1;
                    opacity: var(--opacity-muted, 0.7);
                    pointer-events: none;
                }
            }

            .designsystem-sok-treff {
                position: absolute;
                inset-block-start: calc(100% + var(--space-2xs, 0.2em));
                inset-inline: 0;
                z-index: var(--z-overlay, 1000);
                display: grid;
                gap: var(--space-2xs, 0.2em);
                margin: 0;
                padding: var(--space-2xs, 0.2em);
                list-style: none;
                border: var(--border-width, 1px) solid var(--portal-border-strong);
                border-radius: var(--radius-medium, 0.75em);
                background: var(--portal-surface);
                box-shadow: var(--portal-shadow-elevated);
                max-block-size: 60vh;
                overflow-y: auto;

                &[hidden] {
                    display: none;
                }

                a {
                    display: grid;
                    gap: var(--space-2xs, 0.2em);
                    padding: var(--space-small, 0.6em);
                    border-radius: var(--radius-small, 0.5em);
                    border-inline-start: 0;
                    text-decoration: none;

                    &:is(:hover, :focus-visible) {
                        background: color-mix(in srgb, var(--portal-surface-muted) 78%, transparent);
                    }

                    small {
                        display: block;
                        opacity: var(--opacity-muted, 0.7);
                        font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                    }
                }
            }

            .sidebar-seksjon {
                display: grid;
                gap: var(--space-small, 0.6em);
                padding: 0;

                & + .sidebar-seksjon {
                    padding-block-start: var(--space-medium, 1em);
                    border-block-start: var(--border-width, 1px) solid var(--portal-border);
                }

                > h2 {
                    margin: 0;
                    font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                    letter-spacing: var(--letter-spacing-wide, 0.08em);
                    text-transform: uppercase;
                    opacity: var(--opacity-muted, 0.7);

                    a {
                        display: inline-flex;
                        inline-size: auto;
                        padding: 0;
                        border-inline-start: 0;
                        text-decoration: none;
                    }
                }

                > ul {
                    gap: var(--space-small, 0.6em);
                }
            }

            ul {
                display: grid;
                gap: var(--space-2xs, 0.2em);
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .sidebar-akkordeon {
                > ul {
                    margin: 0;
                    padding: 0 var(--space-xs, 0.4em) var(--space-xs, 0.4em);
                }
            }

            .sidebar-kategori {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--space-small, 0.6em);
                padding: var(--space-small, 0.6em) var(--space-xs, 0.4em);
                border-radius: var(--radius-small, 0.5em);
                font: var(--font-headline, 600 1em/1.4 system-ui, sans-serif);
                cursor: pointer;
                list-style: none;

                &::-webkit-details-marker {
                    display: none;
                }

                &::after {
                    content: "▾";
                    opacity: var(--opacity-muted, 0.7);
                    transition: transform var(--transition-duration, 150ms) var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1));
                }

                details[open] > &::after {
                    transform: rotate(180deg);
                }

                &:is(:hover, :focus-visible) {
                    background: color-mix(in srgb, var(--portal-surface) 72%, transparent);
                }

                &[aria-current="true"] {
                    color: var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
                }
            }

            li ul {
                padding-inline-start: var(--space-small, 0.6em);
            }

            a {
                display: inline-flex;
                align-items: center;
                inline-size: 100%;
                box-sizing: border-box;
                min-block-size: calc(var(--tap-target-min, 2.75rem) * 0.8);
                padding: var(--space-xs, 0.4em) var(--space-small, 0.6em);
                border-inline-start: max(2px, calc(var(--border-width, 1px) * 2)) solid transparent;
                border-radius: var(--radius-small, 0.5em);
                text-decoration: none;
                color: inherit;

                &:is(:hover, :focus-visible) {
                    background: color-mix(in srgb, var(--portal-surface-muted) 72%, transparent);
                }

                &[aria-current="page"] {
                    border-inline-start-color: var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
                    background: color-mix(in srgb, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 10%, var(--portal-surface) 90%);
                    font: var(--font-headline, 600 1em/1.4 system-ui, sans-serif);
                }
            }
        }

        .designsystem-toc {
            display: none;

            @media (width >= 96em) {
                display: grid;
                gap: var(--space-small, 0.6em);
                align-content: start;
                position: sticky;
                inset-block-start: var(--space-medium, 1em);
                max-block-size: calc(100svh - (var(--space-medium, 1em) * 2));
                overflow-y: auto;
                padding: var(--space-medium, 1em);
                border: var(--border-width, 1px) solid var(--portal-border);
                border-radius: var(--radius-large, 0.75em);
                background: var(--portal-surface);
            }

            h2 {
                margin: 0;
                font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-wide, 0.08em);
                text-transform: uppercase;
                opacity: var(--opacity-muted, 0.7);
            }

            ul {
                display: grid;
                gap: var(--space-2xs, 0.2em);
                margin: 0;
                padding: 0;
                list-style: none;
            }

            a {
                display: inline-flex;
                inline-size: 100%;
                min-block-size: calc(var(--tap-target-min, 2.75rem) * 0.72);
                align-items: center;
                padding: var(--space-xs, 0.4em) var(--space-small, 0.6em);
                border-radius: var(--radius-small, 0.5em);
                text-decoration: none;
                color: inherit;
                opacity: var(--opacity-muted, 0.7);

                &:is(:hover, :focus-visible) {
                    opacity: 1;
                    background: color-mix(in srgb, var(--portal-surface-muted) 72%, transparent);
                }
            }
        }

        .introduksjon,
        .tabellseksjon,
        .token-seksjon {
            display: grid;
            gap: var(--space-medium, 1em);
        }

        .introduksjon > h2 + p {
            margin-block-start: 0;
        }

        .lenkeliste {
            margin: 0;
        }

        .tabellramme {
            overflow-x: auto;
            border: var(--border-width, 1px) solid var(--portal-border);
            border-radius: var(--radius-medium, 0.75em);
            background: var(--portal-surface);
        }

        .oversiktstabell {
            inline-size: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: transparent;

            th,
            td {
                padding: var(--space-small, 0.6em) calc(var(--space-small, 0.6em) + var(--space-2xs, 0.2em));
                border-block-end: var(--border-width, 1px) solid color-mix(in srgb, var(--portal-surface-text) 10%, transparent);
                vertical-align: top;
                text-align: left;
            }

            thead th {
                position: sticky;
                inset-block-start: 0;
                z-index: 1;
                background: var(--portal-surface-muted);
                font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-wide, 0.08em);
                text-transform: uppercase;
            }

            tbody tr:nth-child(even) {
                background: color-mix(in srgb, var(--portal-surface-muted) 54%, transparent);
            }

            tbody:last-child tr:last-child :is(td, th) {
                border-block-end: 0;
            }

            .gruppe-rad th {
                background: color-mix(in srgb, var(--portal-surface-text) 94%, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 6%);
                color: var(--color-surface-inverse-text, light-dark(oklch(100% 0 0), oklch(20% 0 0)));
                font: var(--font-overskrift, 400 1.1em/1.1 system-ui, sans-serif);
            }

            code {
                white-space: normal;
                overflow-wrap: anywhere;
            }
        }

        .metadata-liste {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
            gap: var(--space-small, 0.6em);
            margin: 0;

            div {
                display: grid;
                gap: var(--space-2xs, 0.2em);
                padding: var(--space-small, 0.6em);
                border: var(--border-width, 1px) solid var(--portal-border);
                border-radius: var(--radius-medium, 0.75em);
                background: var(--portal-surface);
            }

            dt {
                font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-wide, 0.08em);
                text-transform: uppercase;
                opacity: var(--opacity-muted, 0.7);
            }

            dd {
                margin: 0;
                font: var(--font-headline, 600 1em/1.4 system-ui, sans-serif);
                text-wrap: pretty;
            }
        }

        .komponentliste {
            display: grid;
            gap: var(--space-medium, 1em);
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
            align-items: start;
        }

        .ikon-galleri {
            display: grid;
            gap: var(--space-small, 0.6em);
            grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
            margin: 0;
            padding: 0;
            list-style: none;

            li {
                display: grid;
                gap: var(--space-small, 0.6em);
                justify-items: center;
                padding: var(--space-medium, 1em) var(--space-small, 0.6em);
                border: var(--border-width, 1px) solid var(--portal-border);
                border-radius: var(--radius-medium, 0.75em);
                background: var(--portal-surface);
            }

            lm-ikon {
                font-size: 1.7em;
            }

            .ikon-galleri-navn {
                border: none;
                background: none;
                font: inherit;
                color: inherit;
                cursor: pointer;
            }
        }

        .demo-kort,
        .ressurskort {
            position: relative;
            display: grid;
            gap: var(--space-small, 0.6em);
            margin: 0;
            padding: var(--space-medium, 1em);
            border: var(--border-width, 1px) solid var(--portal-border);
            border-radius: var(--radius-large, 0.75em);
            background: var(--portal-surface);
            transition:
                border-color var(--transition-duration, 150ms) var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1)),
                background-color var(--transition-duration, 150ms) var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1)),
                opacity var(--transition-duration, 150ms) var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1));

            &:is(:hover, :focus-within) {
                border-color: var(--portal-border-strong);
                background: color-mix(in srgb, var(--portal-surface-muted) 72%, var(--portal-surface) 28%);
            }

            h3,
            p {
                margin: 0;
            }
        }

        .demo-flate {
            display: block;
            min-block-size: 5rem;
            padding: var(--space-small, 0.6em);
            border-radius: var(--radius-medium, 0.75em);
            border: var(--border-width, 1px) solid var(--portal-border);
            background: var(--portal-surface-muted);
        }

        .komponentforhandsvisning,
        .tokenforhandsvisning {
            display: grid;
            align-content: start;
            gap: var(--space-small, 0.6em);
        }

        .komponentforhandsvisning {
            min-block-size: 8rem;
            max-block-size: 14rem;
            overflow: auto;
            container-type: inline-size;

            > * {
                max-inline-size: 100%;
            }

            :where(
                lm-avatar,
                lm-breadcrumb,
                lm-button-group,
                lm-card,
                lm-carousel,
                lm-chart-area,
                lm-chart-bar,
                lm-chart-line,
                lm-chart-pie,
                lm-chart-scatter,
                lm-chart-sparkline,
                lm-checkbox-field,
                lm-color-field,
                lm-confirm-dialog,
                lm-currency-field,
                lm-data-table,
                lm-date-field,
                lm-dialog,
                lm-empty-state,
                lm-feed,
                lm-file-field,
                lm-flex,
                lm-grid,
                lm-ikon,
                lm-inline-message,
                lm-installer-knapp,
                lm-kode-lekeplass,
                lm-link-button,
                lm-link-preview,
                lm-listbox,
                lm-map-embed,
                lm-media-tile,
                lm-menu-button,
                lm-multistep-form,
                lm-nav-tabs,
                lm-number-field,
                lm-pagination,
                lm-preview-document,
                lm-preview-image,
                lm-progress-bar,
                lm-radio-group-field,
                lm-range-field,
                lm-range-slider,
                lm-select-field,
                lm-skeleton,
                lm-sok,
                lm-splitter,
                lm-stat,
                lm-switch-field,
                lm-tabs,
                lm-tag,
                lm-text-field,
                lm-textarea-field,
                lm-toast,
                lm-tooltip,
                lm-tree-view
            ) {
                display: block;
            }

            button,
            input,
            select,
            textarea,
            label {
                font-size: inherit;
            }
        }

        .tokenforhandsvisning {
            min-block-size: auto;
        }

        .tokenfarge-liste,
        .mellomrom-liste {
            display: grid;
            gap: var(--space-small, 0.6em);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tokenfarge-liste li,
        .mellomrom-liste li {
            display: grid;
            gap: var(--space-2xs, 0.2em);
        }

        .tokenfarge-liste li {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: var(--space-small, 0.6em);
        }

        .tokenfarge-prikk {
            inline-size: 1.5rem;
            block-size: 1.5rem;
            border: var(--border-width, 1px) solid color-mix(in srgb, var(--portal-surface-text) 12%, transparent);
            border-radius: 50%;
            background: var(--portal-surface);
        }

        .tokenfarge-liste li[data-token="--color-surface"] .tokenfarge-prikk {
            background: var(--color-surface, light-dark(oklch(100% 0 0), oklch(20% 0 0)));
        }

        .tokenfarge-liste li[data-token="--color-surface-muted"] .tokenfarge-prikk {
            background: var(--color-surface-muted, color-mix(in srgb, light-dark(oklch(100% 0 0), oklch(20% 0 0)) 92%, light-dark(oklch(13% 0 0), oklch(93% 0 0)) 8%));
        }

        .tokenfarge-liste li[data-token="--color-accent"] .tokenfarge-prikk {
            background: var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
        }

        .tokenfarge-liste li[data-token="--color-suksess"] .tokenfarge-prikk {
            background: var(--color-suksess, oklch(62% 0.12 150));
        }

        .tokenfarge-liste li[data-token="--color-fare"] .tokenfarge-prikk {
            background: var(--color-fare, oklch(58% 0.16 25));
        }

        .tokenfarge-liste li[data-token="--chart-color-1"] .tokenfarge-prikk {
            background: var(--chart-color-1, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
        }

        .demo-kort figcaption,
        .ressurskort .visningsnavn {
            font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
        }

        .demo-kort figcaption {
            display: grid;
            gap: var(--space-2xs, 0.2em);
            overflow-wrap: anywhere;
        }

        .mellomromskort {
            .demo-flate {
                min-block-size: auto;
            }

            .mellomrom-liste code {
                overflow-wrap: anywhere;
            }

            .linjalspor {
                inline-size: 100%;
                min-block-size: 2rem;
                display: flex;
                align-items: center;
                padding-inline: var(--space-xs, 0.4em);
                background: color-mix(in srgb, var(--portal-surface-muted) 72%, transparent);
                border-radius: var(--radius-small, 0.5em);
            }

            .linjalstrek {
                block-size: 1rem;
                border-radius: var(--radius-pill, 9999px);
                background: var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
            }

            .mellomrom-liste li[data-token="--space-2xs"] .linjalstrek {
                inline-size: max(1.25rem, calc(var(--space-2xs, 0.2em) * 8));
            }

            .mellomrom-liste li[data-token="--space-xs"] .linjalstrek {
                inline-size: max(1.5rem, calc(var(--space-xs, 0.4em) * 8));
            }

            .mellomrom-liste li[data-token="--space-small"] .linjalstrek {
                inline-size: max(1.75rem, calc(var(--space-small, 0.6em) * 8));
            }

            .mellomrom-liste li[data-token="--space-medium"] .linjalstrek {
                inline-size: max(2rem, calc(var(--space-medium, 1em) * 8));
            }

            .mellomrom-liste li[data-token="--space-large"] .linjalstrek {
                inline-size: max(2.5rem, calc(var(--space-large, 1.5em) * 8));
            }
        }

        .opacitykort {
            .demo-flate {
                background:
                    repeating-linear-gradient(
                        45deg,
                        transparent 0 0.75rem,
                        color-mix(in srgb, var(--portal-surface-text) 10%, transparent) 0.75rem 1.5rem
                    ),
                    color-mix(in srgb, var(--portal-surface-muted) 72%, transparent);
            }

            .gjennomsiktig-flate {
                display: grid;
                place-items: center;
                min-block-size: 4rem;
                padding: var(--space-small, 0.6em);
                border-radius: var(--radius-small, 0.5em);
                background: var(--color-surface-inverse, light-dark(oklch(13% 0 0), oklch(93% 0 0)));
                color: var(--color-surface-inverse-text, light-dark(oklch(100% 0 0), oklch(20% 0 0)));
            }
        }

        .typografikort {
            .demo-flate {
                padding: var(--space-small, 0.6em);
                overflow-wrap: anywhere;
            }
        }

        .bevegelseskort {
            .bevegelsesflate {
                display: inline-grid;
                place-items: center;
                padding: var(--space-small, 0.6em) var(--space-medium, 1em);
                border: var(--border-width, 1px) solid var(--portal-border);
                border-radius: var(--radius-pill, 9999px);
                background: var(--portal-surface);
                transition-property: transform, opacity;
                transition-duration: var(--transition-duration, 150ms);
                transition-timing-function: var(--transition-easing, cubic-bezier(0.32, 0.72, 0, 1));
            }

            .demo-flate:hover .bevegelsesflate {
                transform: translateY(calc(var(--space-2xs, 0.2em) * -0.5));
                opacity: 0.92;
            }
        }

        lm-grid,
        lm-kode-lekeplass {
            display: block;
        }

        .ressurskort a[href] {
            inline-size: auto;
            min-block-size: auto;
            padding: 0;
            border-radius: 0;
            background: transparent;
            font: inherit;
            text-decoration: underline;
            text-underline-offset: 0.16em;

            &:is(:hover, :focus-visible) {
                color: var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255)));
                background: transparent;
            }
        }

        code,
        kbd {
            font: var(--font-kode, 400 0.9em/1.6 ui-monospace, monospace);
        }

        :not(pre) > code {
            display: inline-block;
            padding-inline: var(--space-2xs, 0.2em);
            border: var(--border-width, 1px) solid color-mix(in srgb, var(--portal-surface-text) 12%, transparent);
            border-radius: var(--radius-small, 0.5em);
            background: color-mix(in srgb, var(--portal-surface-muted) 70%, transparent);
            color: color-mix(in srgb, var(--portal-surface-text) 88%, var(--color-accent, light-dark(oklch(58% 0.14 255), oklch(68% 0.14 255))) 12%);
        }

        kbd {
            padding: 0 var(--space-2xs, 0.2em);
            border: var(--border-width, 1px) solid var(--portal-border-strong);
            border-radius: var(--radius-small, 0.5em);
            background: color-mix(in srgb, var(--portal-surface) 88%, transparent);
        }

        pre {
            position: relative;
            margin: 0;
            padding: calc(var(--space-large, 1.5em) + var(--space-xs, 0.4em)) var(--space-medium, 1em) var(--space-medium, 1em);
            overflow-x: auto;
            border: var(--border-width, 1px) solid color-mix(in srgb, var(--portal-surface-text) 16%, transparent);
            border-radius: var(--radius-large, 0.75em);
            background: var(--portal-code-background);
            color: var(--portal-code-foreground);

            &::before {
                content: attr(data-language-label);
                position: absolute;
                inset-block-start: var(--space-small, 0.6em);
                inset-inline-start: var(--space-medium, 1em);
                padding: 0 var(--space-xs, 0.4em);
                border-radius: var(--radius-pill, 9999px);
                background: color-mix(in srgb, var(--portal-code-foreground) 12%, transparent);
                font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);
                letter-spacing: var(--letter-spacing-wide, 0.08em);
                text-transform: uppercase;
                opacity: var(--opacity-muted, 0.7);
            }

            code {
                display: block;
                color: inherit;
                white-space: pre;
            }
        }

        .code-copy-button {
            position: absolute;
            inset-block-start: var(--space-small, 0.6em);
            inset-inline-end: var(--space-small, 0.6em);
            min-block-size: auto;
            padding: var(--space-2xs, 0.2em) var(--space-small, 0.6em);
            border: var(--border-width, 1px) solid color-mix(in srgb, var(--portal-code-foreground) 16%, transparent);
            border-radius: var(--radius-pill, 9999px);
            background: color-mix(in srgb, var(--portal-code-foreground) 10%, transparent);
            color: inherit;
            font: var(--font-liten, 400 0.9em/1.4 system-ui, sans-serif);

            &:is(:hover, :focus-visible) {
                background: color-mix(in srgb, var(--portal-code-foreground) 18%, transparent);
            }

            &[data-state="success"] {
                color: color-mix(in srgb, var(--portal-code-foreground) 84%, var(--color-suksess, oklch(62% 0.12 150)) 16%);
            }
        }

        @media (width >= 70em) {
            html.js-sidebar-styrt .designsystem-sidebar-brytning > summary {
                display: none;
            }
        }
    }
}