/* @theme light-dark */

/*
----------------------------------------------------------------------------
  Layers.
----------------------------------------------------------------------------
*/
@layer base, global, section, demo;

@import url('https://sakupi01.github.io/sakupi01.com/css/sakupi01.com.css')
    layer(base);
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css')
    layer(global);
@import url('../_fonts/fonts.css') layer(global);
@import url('../_styles/tokens/color.css') layer(global);
@import url('../_styles/tokens/animation.css') layer(global);

html {
    /* this has to be set to switch between light or dark */
    color-scheme: inherit;
    font-size: var(--rem);
    scrollbar-color: gray transparent;

    /* ----------------------------------
            Color Semantic Tokens
    ------------------------------------- */
    --color-primary: color-mix(in oklch, oklch(60% 0.24 1deg) 20%, white);
    --color-secondary: color-mix(in oklch, oklch(60% 0.24 1deg) 40%, white);
    --color-tertiary: color-mix(in oklch, oklch(60% 0.24 1deg) 60%, white);
    --color-quaternary: color-mix(in oklch, oklch(60% 0.24 1deg) 80%, white);
    --color-quinary: color-mix(in oklch, oklch(60% 0.24 1deg) 100%, white);
    --base-text: light-dark(var(--light-color), var(--dark-color));
    --base-text-reverse: light-dark(var(--dark-color), var(--light-color));
    --slight-text: light-dark(
        color-mix(in oklch, var(--light-color) 60%, white),
        color-mix(in oklch, var(--dark-color) 70%, white)
    );
    --code-dash: light-dark(var(--light-code), var(--dark-code));
    --base-background: light-dark(var(--light-bg), var(--dark-bg));
    --bgColor-default: light-dark(var(--light-bg), var(--dark-bg));
    --slide-border: light-dark(var(--light-color), var(--dark-color));
    --color-canvas-subtle: light-dark(
        var(--color-canvas-subtle-light),
        var(--color-canvas-subtle-dark)
    );
    --color-fg-default: light-dark(
        var(--color-fg-default-light),
        var(--color-fg-default-dark)
    );
    --color-neutral-muted: light-dark(
        var(--color-neutral-muted-light),
        var(--color-neutral-muted-dark)
    );
    --bgColor-muted: light-dark(
        var(--bgColor-muted-light),
        var(--bgColor-muted-dark)
    );
    --fgColor-default: light-dark(
        var(--fgColor-default-light),
        var(--fgColor-default-dark)
    );
    --heading-strong-color: light-dark(
        var(--heading-strong-color-light),
        var(--heading-strong-color-dark)
    );
    --fgColor-accent: light-dark(
        var(--fgColor-accent-light),
        var(--fgColor-accent-dark)
    );
    --fgColor-visited: light-dark(
        var(--fgColor-visited-light),
        var(--fgColor-visited-dark)
    );
    --electric-blue: color-mix(in srgb, oklch(51.01% .274 263.83deg), var(--full-contrast) 50%);
    --bright-violet: color-mix(in srgb, oklch(49.134% 0.2683 294.647deg), var(--full-contrast) 50%);
    --purple-to-blue-horizontal-gradient: linear-gradient(90deg, var(--electric-blue) 0%, var(--bright-violet) 100%);
    --yellow-to-orange-horizontal-gradient: linear-gradient(15deg, #ff7e7e, #ffcd73, #ffffb0);
    --lime-to-green-horizontal-gradient: linear-gradient(345deg, #46e9d2, #a9ffa6, #d1ffb0);;
    --purple-to-pink-horizontal-gradient: linear-gradient(279deg, #ff9fff, #bfa8ff);
    --sky-to-blue-horizontal-gradient: linear-gradient(8deg, #adfffb, #6999ff);
    --orange-to-pink-horizontal-gradient: linear-gradient(345deg, #f29eff, #ffa6c6, #ff9f9f);


    /* ----------------------------------
            Codeblock Semantic Tokens
    ------------------------------------- */
    --color-prettylights-syntax-comment: light-dark(
        var(--color-prettylights-syntax-comment-light),
        var(--color-prettylights-syntax-comment-dark)
    );
    --color-prettylights-syntax-constant: light-dark(
        var(--color-prettylights-syntax-constant-light),
        var(--color-prettylights-syntax-constant-dark)
    );
    --color-prettylights-syntax-entity: light-dark(
        var(--color-prettylights-syntax-entity-light),
        var(--color-prettylights-syntax-entity-dark)
    );
    --color-prettylights-syntax-storage-modifier-import: light-dark(
        var(--color-prettylights-syntax-storage-modifier-import-light),
        var(--color-prettylights-syntax-storage-modifier-import-dark)
    );
    --color-prettylights-syntax-entity-tag: light-dark(
        var(--color-prettylights-syntax-entity-tag-light),
        var(--color-prettylights-syntax-entity-tag-dark)
    );
    --color-prettylights-syntax-keyword: light-dark(
        var(--color-prettylights-syntax-keyword-light),
        var(--color-prettylights-syntax-keyword-dark)
    );
    --color-prettylights-syntax-string: light-dark(
        var(--color-prettylights-syntax-string-light),
        var(--color-prettylights-syntax-string-dark)
    );
    --color-prettylights-syntax-variable: light-dark(
        var(--color-prettylights-syntax-variable-light),
        var(--color-prettylights-syntax-variable-dark)
    );
    --color-prettylights-syntax-brackethighlighter-unmatched: light-dark(
        var(--color-prettylights-syntax-brackethighlighter-unmatched-light),
        var(--color-prettylights-syntax-brackethighlighter-unmatched-dark)
    );
    --color-prettylights-syntax-invalid-illegal-text: light-dark(
        var(--color-prettylights-syntax-invalid-illegal-text-light),
        var(--color-prettylights-syntax-invalid-illegal-text-dark)
    );
    --color-prettylights-syntax-invalid-illegal-bg: light-dark(
        var(--color-prettylights-syntax-invalid-illegal-bg-light),
        var(--color-prettylights-syntax-invalid-illegal-bg-dark)
    );
    --color-prettylights-syntax-carriage-return-text: light-dark(
        var(--color-prettylights-syntax-carriage-return-text-light),
        var(--color-prettylights-syntax-carriage-return-text-dark)
    );
    --color-prettylights-syntax-carriage-return-bg: light-dark(
        var(--color-prettylights-syntax-carriage-return-bg-light),
        var(--color-prettylights-syntax-carriage-return-bg-dark)
    );
    --color-prettylights-syntax-string-regexp: light-dark(
        var(--color-prettylights-syntax-string-regexp-light),
        var(--color-prettylights-syntax-string-regexp-dark)
    );
    --color-prettylights-syntax-markup-list: light-dark(
        var(--color-prettylights-syntax-markup-list-light),
        var(--color-prettylights-syntax-markup-list-dark)
    );
    --color-prettylights-syntax-markup-heading: light-dark(
        var(--color-prettylights-syntax-markup-heading-light),
        var(--color-prettylights-syntax-markup-heading-dark)
    );
    --color-prettylights-syntax-markup-italic: light-dark(
        var(--color-prettylights-syntax-markup-italic-light),
        var(--color-prettylights-syntax-markup-italic-dark)
    );
    --color-prettylights-syntax-markup-bold: light-dark(
        var(--color-prettylights-syntax-markup-bold-light),
        var(--color-prettylights-syntax-markup-bold-dark)
    );
    --color-prettylights-syntax-markup-deleted-text: light-dark(
        var(--color-prettylights-syntax-markup-deleted-text-light),
        var(--color-prettylights-syntax-markup-deleted-text-dark)
    );
    --color-prettylights-syntax-markup-deleted-bg: light-dark(
        var(--color-prettylights-syntax-markup-deleted-bg-light),
        var(--color-prettylights-syntax-markup-deleted-bg-dark)
    );
    --color-prettylights-syntax-markup-inserted-text: light-dark(
        var(--color-prettylights-syntax-markup-inserted-text-light),
        var(--color-prettylights-syntax-markup-inserted-text-dark)
    );
    --color-prettylights-syntax-markup-inserted-bg: light-dark(
        var(--color-prettylights-syntax-markup-inserted-bg-light),
        var(--color-prettylights-syntax-markup-inserted-bg-dark)
    );
    --color-prettylights-syntax-markup-changed-text: light-dark(
        var(--color-prettylights-syntax-markup-changed-text-light),
        var(--color-prettylights-syntax-markup-changed-text-dark)
    );
    --color-prettylights-syntax-markup-changed-bg: light-dark(
        var(--color-prettylights-syntax-markup-changed-bg-light),
        var(--color-prettylights-syntax-markup-changed-bg-dark)
    );
    --color-prettylights-syntax-markup-ignored-text: light-dark(
        var(--color-prettylights-syntax-markup-ignored-text-light),
        var(--color-prettylights-syntax-markup-ignored-text-dark)
    );
    --color-prettylights-syntax-markup-ignored-bg: light-dark(
        var(--color-prettylights-syntax-markup-ignored-bg-light),
        var(--color-prettylights-syntax-markup-ignored-bg-dark)
    );
    --color-prettylights-syntax-meta-diff-range: light-dark(
        var(--color-prettylights-syntax-meta-diff-range-light),
        var(--color-prettylights-syntax-meta-diff-range-dark)
    );
    --color-prettylights-syntax-brackethighlighter-angle: light-dark(
        var(--color-prettylights-syntax-brackethighlighter-angle-light),
        var(--color-prettylights-syntax-brackethighlighter-angle-dark)
    );
    --color-prettylights-syntax-sublimelinter-gutter-mark: light-dark(
        var(--color-prettylights-syntax-sublimelinter-gutter-mark-light),
        var(--color-prettylights-syntax-sublimelinter-gutter-mark-dark)
    );
    --color-prettylights-syntax-constant-other-reference-link: light-dark(
        var(--color-prettylights-syntax-constant-other-reference-link-light),
        var(--color-prettylights-syntax-constant-other-reference-link-dark)
    );
    --xsmall: max(0.3em, 0.3em + 1cqi);
    --rem: calc(1.25em + 0.5cqi);
    --small: max(0.4em, 0.4em + 1cqi);
    --medium: max(0.6em, 0.4em + 1cqi);
    --large: max(0.8em, 0.5em + 2cqi);
    --xlarge: max(0.8em, 0.3em + 4cqi);
    --h1: var(--xlarge, max(0.8em, 0.3em + 4cqi));
    --h2: var(--large, max(0.8em, 0.5em + 2cqi));
    --h3: var(--medium, max(0.6em, 0.6em + 1cqi));
    --h4: var(--small, max(0.4em, 0.4em + 1cqi));
    --code: 0.9em;
    --gutter: 0.75rem;
    --newline: var(--gutter, 0.75rem);
    --gutter-plus: calc(var(--gutter) * 1.5);
    --double-gutter: calc(var(--gutter) * 2);
    --triple-gutter: calc(var(--gutter) * 3);
    --shim: calc(var(--gutter) / 2);
    --shim-plus: calc(var(--gutter) * 0.75);
    --half-shim: calc(var(--gutter) / 4);
    --quarter-shim: calc(var(--gutter) / 8);
    --spacer: calc(var(--double-gutter) + 3vw);
    --page-margin: calc(var(--quarter-shim) + 4vw);
    --border-width: medium;
    --radius: var(--quarter-shim);
    --grid-item: 12em;
    --min-page: 15em;
    --page: 45em;
    --wide-break: 56em;
    --slide: slide;
}

/* a collection of different styles between full and index mode */
@layer global {
    body {
        margin: 0;

        &.full {
            main {
                height: 100vh;
                overflow: auto;
                scroll-snap-type: block mandatory;
                scroll-padding: 0;
                scrollbar-color: gray var(--base-background);

                .slide-group {
                    container-type: scroll-state;
                    scroll-snap-align: start;

                    @supports (container-type: scroll-state) {
                        > * {
                        transition: opacity .5s ease;
                        
                        @container not scroll-state(snapped: y) {
                        opacity: .25;
                        }  
                        }
                    }

                    section.slide {
                        box-sizing: border-box;
                        width: 100vw;
                        min-height: 100vh;
                        overflow: auto;
                        page-break-after: always;
                        break-after: page;
                        border-block-end: 1px solid silver;
                    }
                }
            }
        }

        &:not(.full) {
            padding: var(--page-margin);

                main {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2em;
                counter-reset: var(--slide, slide) 0;

                @media ( width < 800px ) {
                    grid-template-columns: repeat(1, minmax(0, 1fr));
                }
                
                @media ( 1600px < width ) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                .slide-group {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75em;
                    counter-increment: var(--slide, slide) 1;
                    position: relative;
                    
                    &::before {
                        position: absolute;
                        z-index: 1;
                        position-anchor: --slide-contents;
                        position-area: bottom right;
                        padding-right: 10px;
                        padding-bottom: 10px;
                        color: var(--header-footer-color);
                        font-size: 0.5em;
                        text-box: trim-both cap alphabetic;
                        content: counter(var(--slide, slide));
                    }
                }

                section.slide {
                    aspect-ratio: 4/3;
                    overflow: auto;
                    border: 1px solid var(--slide-border);
                    border-radius: var(--radius);
                    anchor-name: --slide-contents;
                }

                .comment {
                    background: var(--color-canvas-subtle);
                    color: var(--base-text);
                    padding: 0.75em 1em;
                    border-radius: 10px;
                    font-size: var(--xsmall, max(0.3em, 0.3em + 1cqi));
                    line-height: 1.5;

                    p {
                        margin: 0;

                        & + p {
                            margin-top: 0.5em;
                        }
                    }
                }
            }
        }
    }
}


@layer section {
    .slide-group {
        section {
            font-family: var(--font-family);
            font-size-adjust: 0.53;
            background-color: var(--base-background);
            color: var(--base-text);
            padding-inline: max(0.4em, 0.3em + 3cqi);
            padding-block: max(0.3em, 0.3em + 2cqi);
            display: grid;
            align-content: var(--justify, safe center);
            position: relative;
            resize: var(--resize, none);
            scroll-behavior: smooth;
            container: var(--slide, slide) / inline-size;
            contain: paint; /* position: fixed 要素をslide内に閉じ込める */

            #rainbow {
                background: var(--saku-gradient-color);
                background-clip: text;
                color: transparent;
                -webkit-text-fill-color: transparent;
                background-size: 500% auto;
                animation: text-shine 3s ease-in-out infinite alternate;
            }
    
            &.css_rebecca {
                display: grid;
                place-items: center;
                background-color: rebeccapurple;
                
                h1 {
                    color: white;
                }
            }
            
            &.gradation_animation {
                display: grid;
                place-items: center;
                
                h1 {
                    background: var(--saku-gradient-color);
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-size: 500% auto;
                    animation: text-shine 2s ease-in-out infinite alternate;
                }
            }
    
            &.columns_h {
                display: grid;
                grid-template-rows: repeat(2, minmax(0, 1fr));
                gap: 1rem;
            }
    
            &.columns_v {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem;
            }
    
            .center-self {
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 10px;
            }
    
            .github-icon {
                color: oklch(53% 0.3 293.74deg);
                font-size: 40px;
                text-align: center;
            }
    
            .fa-window-maximize-icon {
                color: oklch(56% 0.28 320.27deg);
                font-size: 40px;
                text-align: center;
            }
        }

        :is(h1, h2, h3, h4, h5, h6, p, th, td, li) {
            color: var(--base-text);
            margin-block: 0;
            padding-block: 0;
            text-wrap: pretty;
            font-size: var(--xsmall, max(0.3em, 0.3em + 1cqi));
        }
    
        /* stylelint-disable-next-line no-descending-specificity */
        h1 {
            font-family: var(--font-family);
            font-weight: 900;
            font-size: var(--h1);
            line-height: 1.2;
        }
    
        h2 {
            font-family: var(--font-family);
            font-weight: 800;
            font-size: var(--h2);
        }
    
        h3 {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: var(--h3);
        }
    
        h4 {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: var(--h4);
        }
    
        h5 {
            font-family: var(--font-family);
            font-weight: 400;
        }
    
        h6 {
            font-family: var(--font-family);
            font-weight: 400;
        }
    
        p {
            font-family: var(--font-family);
            font-weight: 400;
        }
    
        strong {
            font-family: var(--font-family);
            font-weight: bold;
            font-size: inherit;
            color: var(--base-text);
            margin-block-start: 0;
            padding-block: 0;
            text-wrap: pretty;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 40 2 100 7 Q 160 12 198 6' fill='none' stroke='%23FBBC04' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 0 100%;
            background-size: 100% 0.4em;
            padding-bottom: 0.1em;
        }
    
        th {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 0.47em;
            color: var(--base-text);
            text-wrap: pretty;
        }
    
        td {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 0.47em;
            color: var(--base-text);
            text-wrap: pretty;
        }
    
        ul {
            margin-block: var(--xsmall, max(0.3em, 0.3em + 1cqi));
        }
    
        li {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: max(0.3em, 0.3em + 1cqi);
            text-wrap: pretty;
    
            > ul {
                > li {
                    font-family: var(--font-family);
                    font-weight: 400;
                    font-size: .9em;
                    text-wrap: pretty;
                }
            }
        }
    
        a {
            color: var(--fgColor-accent);
            text-wrap: pretty;
            padding: 0 0.05rem;
        }
    

        @keyframes text-shine {
            0% {
                background-position: 0% 50%;
            }
    
            100% {
                background-position: 100% 50%;
            }
        }
    
        blockquote {
            width: 95%;
            margin: 0;
            font-family: "Open Sans", sans-serif;
            font-optical-sizing: auto;
            font-style: italic;
            color: var(--color-base-darkest);
            padding-inline: 1.2em .2em;
            padding-block: 1cqi;
            margin-block: var(--xsmall, max(0.3em, 0.3em + 1cqi));
            border: 1px dotted light-dark(var(--color-primary-medium), transparent);
            border-left: 8px solid var(--color-primary-medium);
            line-height: 1.6;
            position: relative;
            background: transparent;
    
        p {
          margin: 0%;
          anchor-name: --hoge;
        }
    
        &::before {
          font-family: Arial, sans-serif;
          content: "\201C";
          text-box: trim-both cap alphabetic;
          color: var(--color-primary-medium);
          font-optical-sizing: auto;
          font-size: max(2em, 2em + 3cqi);
          padding-inline-end: 0.3em;
          height: 100%;
          vertical-align: top;
          position: absolute;
          left: -5px; /* fallback for anchor positioning */
          position-anchor: --hoge;
          position-area: left;
        }
      }
    
        table {
            margin-left: auto;
            margin-right: auto;
        }
    
        pre {
            overflow: scroll;
            font-size: var(--xsmall, max(0.3em, 0.3em + 1cqi));
        }
    
        /* Shiki Dual Themes - デフォルトはライトテーマ */
        pre.shiki,
        pre.shiki span {
            color: var(--shiki-light);
            background-color: var(--shiki-light-bg);
        }

        @media (prefers-color-scheme: dark) {
            pre.shiki,
            pre.shiki span {
                color: var(--shiki-dark);
                background-color: var(--shiki-dark-bg);
            }
        }
    
        .baseline-bottom-fix {
            max-width: 600px;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scale(var(--baseline-scale, 1));
            transform-origin: center bottom;
            text-align: center;
            background-color: transparent;
            border: none;
        }
    
        .gradation-animation {
            background: var(--saku-gradient-color);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 500% auto;
            animation: text-shine 3s ease-in-out infinite alternate;
        }
    
        .centered {
            display: flex;
            justify-content: center;
            align-items: center;
    
            * {
                margin: 0;
                text-align: center;
                align-items: center;
            }
        }
    
        .right {
            display: flex;
            justify-content: end;
            align-items: center;
    
            * {
                margin: 0;
            }
        }
    
        .left {
            display: flex;
            justify-content: start;
            align-items: center;
    
            * {
                margin: 0;
            }
        }
    
        .center {
            display: grid;
            place-items: center;
        }
    
        .custom-padding {
            padding: 1rem;
        }
    
        .sns {
            font-size: var(--xsmall, max(0.3em, 0.3em + 1cqi));
            text-box: trim-both cap alphabetic;
        }
    
        /* OddBird-style responsive image scaling using Container Queries */
        img, svg, video, canvas {
            height: auto;
        }
    
        img, svg, video, canvas, audio, iframe, embed, object {
            display: inline-block;
            width: var(--img-width, var(--media-width, auto)); /* Allow custom width via style tag: --img-width for img --media-width for media icons n stuff */
            vertical-align: middle;
            max-width: 100%;
            place-self: center;
        }
    
        section img {
            background-color: transparent;
            max-height: 70cqi; /* Container-relative max height */
            object-fit: contain;
            margin-inline: auto;
        }
    
        section p:has(> img:only-child) {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
        }
    
        picture:has(img) {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        :is(pre) {
            border-radius: 16px;
            margin-block: 0.3rem;
            padding: 0.7rem 1rem;
            font-size: var(--xsmall, max(0.3em, 0.3em + 1cqi));
        }
    
        code:not(:is(pre) > code) {
            background-color: transparent;
            border-radius: 0;
            padding: 0;
            color: var(--code-dash);
    
            &::before {
                content: '`';
                color: var(--code-dash);
            }
    
            &::after {
                content: '`';
                color: var(--code-dash);
            }
        }
    
        em {
            --curved-underlineHeight: 1;
            --curved-underlineWidth: 7;
            --curved-underlineColor: oklch(79% 0.15 192.99deg / 80%);
            --curved-underlineSpread: 0;
    
            background: paint(curved-underline);
            
            &.rainbow {
                background: var(--saku-gradient-color);
                background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 100% auto;
                padding-inline: 5px;
            }
        }
    
        hr {
            width: 100%;
            margin: 1cqi auto;
        }
    
        small {
            font-size: 0.7em;
            line-height: 0.8em;
            color: var(--slight-text);
        }

        /* Container Query for baseline-status responsive scaling - outside @layer for higher specificity */
        /* Note: Container queries use CONTENT width (excluding padding), not client/offset width */
        
        baseline-status {
            margin-block-start: 2cqh;
            --baseline-scale: 1;
            transform: scale(var(--baseline-scale));
            transform-origin: center bottom;
        }

        @container slide (width > 250px) {
            baseline-status {
                --baseline-scale: 0.5;
            }
        }
        
        @container slide (width > 400px) {
            baseline-status {
                --baseline-scale: 0.6;
            }
        }

        @container slide (width > 550px) {
            baseline-status {
                --baseline-scale: 0.9;
            }
        }

        @container slide (width > 700px) {
            baseline-status {
                --baseline-scale: 1;
            }
        }

        .baseline-bottom-fix {
            transform: translateX(-50%) scale(var(--baseline-scale, 1));
        }
    
        /* If the Browser supports View Transition */
        @supports (view-transition-name: none) {
            /* Enable Element View Transition on Desktop */
            @media screen and (900px <= width) and (
                    prefers-reduced-motion: no-preference
                ) {
                /* Marpの::view-transition-<hoge> が上書きするので、これらは動作していない */
                ::view-transition-group(first-snippet),
                ::view-transition-group(second-snippet),
                ::view-transition-group(slide-title),
                ::view-transition-group(baseline-status) {
                    animation-duration: 0.35s;
                }
    
                ::view-transition(*) {
                    animation-timing-function: var(--ease-in-out-5);
                }
    
                ::view-transition-old(root),
                ::view-transition-new(root) {
                    animation-duration: 0.3s;
                }
    
                ::view-transition-old(first-snippet),
                ::view-transition-new(first-snippet),
                ::view-transition-old(second-snippet),
                ::view-transition-new(second-snippet),
                ::view-transition-old(slide-title),
                ::view-transition-new(slide-title),
                ::view-transition-old(baseline-status),
                ::view-transition-new(baseline-status) {
                    height: 100%;
                }
    
                /* .current クラスを持つslide-group内のみにview-transition-nameを適用 */
                &.current {
                    h1:nth-child(1 of section > h1) {
                        view-transition-name: slide-title;
                    }
        
                    h2:nth-child(1 of section > h2) {
                        view-transition-name: slide-subtitle;
                    }
        
                    h2:nth-child(2 of section > h2) {
                        view-transition-name: slide-subtitle-two;
                    }
        
                    h3:nth-child(1 of section > h3) {
                        view-transition-name: slide-title-3;
                    }
        
                    h4:nth-child(1 of section > h4) {
                        view-transition-name: slide-title-4;
                    }
        
                    pre:nth-child(1 of section > pre) {
                        view-transition-name: first-snippet;
                    }
        
                    pre:nth-child(2 of section > pre) {
                        view-transition-name: second-snippet;
                    }
        
                    p:nth-child(1 of section > p) {
                        view-transition-name: first-paragraph;
                    }
        
                    p:nth-child(2 of section > p) {
                        view-transition-name: second-paragraph;
                    }
        
                    a:nth-child(1 of section > a) {
                        view-transition-name: first-link;
                    }
        
                    a:nth-child(2 of section > a) {
                        view-transition-name: second-link;
                    }
        
                    a:nth-child(3 of section > a) {
                        view-transition-name: third-link;
                    }
        
                    a:nth-child(4 of section > a) {
                        view-transition-name: fourth-link;
                    }
        
                    a:nth-child(5 of section > a) {
                        view-transition-name: fifth-link;
                    }
        
                    div:nth-child(1 of section > div) {
                        view-transition-name: first-div;
                    }
        
                    div:nth-child(2 of section > div) {
                        view-transition-name: second-div;
                    }
        
                    div:nth-child(3 of section > div) {
                        view-transition-name: third-div;
                    }
        
                    ul:nth-child(1 of section > ul) {
                        view-transition-name: first-list;
                    }
        
                    ul:nth-child(2 of section > ul) {
                        view-transition-name: second-list;
                    }
        
                    section > picture {
                        view-transition-name: slide-emoji;
                    }
        
                    aside {
                        view-transition-name: slide-aside;
                    }
        
                    baseline-status {
                        view-transition-name: baseline-status;
                    }
        
                    table {
                        view-transition-name: table;
                    }
                }
    
                @keyframes circle-in-hesitate {
                    0% {
                        /* stylelint-disable-next-line property-no-vendor-prefix */
                        -webkit-clip-path: var(--circle-center-center-out);
                        clip-path: var(--circle-center-center-out);
                    }
    
                    40% {
                        /* stylelint-disable-next-line property-no-vendor-prefix */
                        -webkit-clip-path: var(--circle-hesitate);
                        clip-path: var(--circle-hesitate);
                    }
    
                    /* stylelint-disable-next-line keyframe-selector-notation */
                    to {
                        /* stylelint-disable-next-line property-no-vendor-prefix */
                        -webkit-clip-path: var(--circle-center-center-in);
                        clip-path: var(--circle-center-center-in);
                    }
                }
            }
        }

        @media screen and (prefers-reduced-motion: no-preference) {
            .text-shadows {
                text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
                    var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0
                    var(--color-quinary);
                font-weight: 900;
                text-align: center;
                margin: 0;
                color: var(--color-primary);
                animation: shadows 1.2s ease-in infinite;
                margin-left: 12px;
            }
        }
    
    
        .codepen {
            width: 100%; height: 100%; border: none;
        }
    
        .scrollable {
            overflow-y: scroll; width: 100%; height: 100%;
        }
    
        .impact {
            display: inline;
            padding-inline: .2em;
            vertical-align: baseline;
            font-weight: bolder;
            background: var(--purple-to-blue-horizontal-gradient);
        }
    }
}

@layer demo {
    .demo {
        display: flex;
        gap: 20px;
    }

    .editor,
    .preview {
        width: 50%;
        border: 1px solid #ccc;
        padding: 10px;
    }
}

@keyframes shadows {
    0% {
        text-shadow: none;
    }

    10% {
        transform: translate(-3px, -3px);
        text-shadow: 3px 3px 0 var(--color-secondary);
    }

    20% {
        transform: translate(-6px, -6px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary);
    }

    30% {
        transform: translate(-9px, -9px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary), 9px 9px var(--color-quaternary);
    }

    40% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary), 9px 9px var(--color-quaternary), 12px
            12px 0 var(--color-quinary);
    }

    50% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary), 9px 9px var(--color-quaternary), 12px
            12px 0 var(--color-quinary);
    }

    60% {
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary), 9px 9px var(--color-quaternary), 12px
            12px 0 var(--color-quinary);
    }

    70% {
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary), 9px 9px var(--color-quaternary);
    }

    80% {
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0
            var(--color-tertiary);
    }

    90% {
        text-shadow: 3px 3px 0 var(--color-secondary);
    }

    100% {
        text-shadow: none;
    }
}


/* Shiki Dual Themes - select による手動切り替え対応 */
/* color-scheme: only dark が設定されている場合 */
html:has(select option[value="dark"]:checked) pre.shiki,
html:has(select option[value="dark"]:checked) pre.shiki span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
}

/* color-scheme: only light が設定されている場合 */
html:has(select option[value="light"]:checked) pre.shiki,
html:has(select option[value="light"]:checked) pre.shiki span {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
}