#mode-screen {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            box-sizing: border-box;
            background:
                radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.04), transparent 20%),
                radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.03), transparent 18%),
                linear-gradient(180deg, #202225, #16181b 46%, #121417 100%);
            pointer-events: auto;
            opacity: 1;
            transition: opacity 0.35s ease;
            overflow: hidden;
        }

        #mode-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #mode-screen::before,
        #mode-screen::after {
            content: '';
            position: absolute;
            width: 62vw;
            height: 62vw;
            min-width: 360px;
            min-height: 360px;
            border-radius: 999px;
            filter: blur(72px);
            opacity: 0.42;
            pointer-events: none;
        }

        #mode-screen::before {
            top: -24vh;
            left: -18vw;
            background:
                radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.08), transparent 34%),
                radial-gradient(circle, rgba(83, 89, 98, 0.12), transparent 66%);
            animation: drift-blue 20s ease-in-out infinite alternate;
        }

        #mode-screen::after {
            right: -18vw;
            bottom: -28vh;
            background:
                radial-gradient(circle at 32% 36%, rgba(255, 255, 255, 0.06), transparent 34%),
                radial-gradient(circle, rgba(67, 71, 78, 0.12), transparent 68%);
            animation: drift-violet 24s ease-in-out infinite alternate;
        }

        #mode-screen .mode-panel::before {
            content: '';
            position: absolute;
            inset: auto 0 106px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
            opacity: 1;
            pointer-events: none;
        }

        #mode-screen .mode-panel::after {
            content: '';
            position: absolute;
            inset: 120px 0 auto;
            height: 220px;
            border-radius: 36px;
            background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 72%);
            opacity: 0.5;
            pointer-events: none;
        }

        @keyframes drift-blue {
            from {
                transform: translate3d(0, 0, 0) scale(1);
            }
            to {
                transform: translate3d(10vw, 8vh, 0) scale(1.08);
            }
        }

        @keyframes drift-violet {
            from {
                transform: translate3d(0, 0, 0) scale(1);
            }
            to {
                transform: translate3d(-11vw, -7vh, 0) scale(1.1);
            }
        }

        @keyframes mode-card-pulse {
            0% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.08),
                    0 24px 42px rgba(0,0,0,0.32),
                    0 0 0 rgba(255,255,255,0);
            }
            35% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.16),
                    0 24px 42px rgba(0,0,0,0.32),
                    0 0 20px rgba(255,255,255,0.08);
            }
            70% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.11),
                    0 24px 42px rgba(0,0,0,0.32),
                    0 0 10px rgba(255,255,255,0.04);
            }
            100% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.08),
                    0 24px 42px rgba(0,0,0,0.32),
                    0 0 14px rgba(255,255,255,0.05);
            }
        }

        @keyframes mode-card-sheen {
            0% {
                transform: translateX(-155%) skewX(-22deg);
                opacity: 0;
            }
            18% {
                opacity: 0.18;
            }
            52% {
                opacity: 0.52;
            }
            100% {
                transform: translateX(155%) skewX(-22deg);
                opacity: 0;
            }
        }

        @keyframes mode-card-enter-press {
            0% {
                transform: translateY(-6px) scale(1);
            }
            36% {
                transform: translateY(-1px) scale(0.966);
            }
            68% {
                transform: translateY(-8px) scale(1.028);
            }
            100% {
                transform: translateY(-10px) scale(1.06);
            }
        }

        @keyframes theme-list-enter-press {
            0% {
                transform: translateY(-5px) scale(1);
            }
            36% {
                transform: translateY(-5px) scale(0.974);
            }
            68% {
                transform: translateY(-5px) scale(1.018);
            }
            100% {
                transform: translateY(-5px) scale(1.04);
            }
        }

        @keyframes mode-screen-exit {
            0% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: scale(1.018);
                filter: blur(8px);
            }
        }

        @keyframes theme-panel-exit-select {
            0% {
                opacity: 1;
                transform: translateX(-50%) scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: translateX(-50%) scale(1.018);
                filter: blur(8px);
            }
        }

        @keyframes theme-panel-exit-select-mobile {
            0% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: scale(1.018);
                filter: blur(8px);
            }
        }

        @keyframes floating-symbol-drift {
            0% {
                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
            }
            50% {
                transform: translate3d(28px, -34px, 0) rotate(9deg) scale(1.08);
            }
            100% {
                transform: translate3d(-18px, -82px, 0) rotate(-7deg) scale(0.94);
            }
        }

        @keyframes floating-symbol-pulse {
            0%, 100% {
                opacity: 0.56;
                filter: drop-shadow(0 0 6px rgba(255,255,255,0.14));
            }
            50% {
                opacity: 0.92;
                filter: drop-shadow(0 0 24px rgba(255,255,255,0.34));
            }
        }

        .floating-symbols {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .floating-symbol {
            --symbol-stroke: 1.8px;
            position: absolute;
            display: grid;
            place-items: center;
            color: rgba(255,255,255,0.58);
            text-shadow:
                0 0 12px rgba(255,255,255,0.18),
                0 0 28px rgba(255,255,255,0.14);
            animation:
                floating-symbol-drift var(--drift-duration, 18s) ease-in-out infinite alternate,
                floating-symbol-pulse var(--pulse-duration, 6s) ease-in-out infinite;
            animation-delay: var(--delay, 0s);
        }

        .floating-symbol.ps {
            width: var(--size, 72px);
            height: var(--size, 72px);
        }

        .floating-symbol.ps::before {
            content: attr(data-symbol);
            font-size: calc(var(--size, 72px) * 0.58);
            font-weight: 400;
            line-height: 1;
            -webkit-text-stroke: var(--symbol-stroke) currentColor;
            paint-order: stroke fill;
        }

        .floating-symbol.switch {
            width: var(--size, 56px);
            height: var(--size, 56px);
            border-radius: 999px;
            border: var(--symbol-stroke) solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.065);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.12),
                0 0 16px rgba(255,255,255,0.1),
                0 0 28px rgba(86, 180, 255, 0.08);
            font-size: calc(var(--size, 56px) * 0.42);
            font-weight: 600;
            letter-spacing: 0;
        }

        .floating-symbol.symbol-triangle {
            color: rgba(98, 208, 255, 0.78);
        }

        .floating-symbol.symbol-circle {
            color: rgba(255, 245, 163, 0.68);
        }

        .floating-symbol.symbol-cross {
            color: rgba(78, 241, 214, 0.76);
        }

        .floating-symbol.symbol-square {
            color: rgba(126, 147, 255, 0.76);
        }

        .floating-symbol.symbol-a {
            color: rgba(255,255,255,0.72);
        }

        .floating-symbol.symbol-b {
            color: rgba(255, 116, 116, 0.78);
        }

        .floating-symbol.symbol-x {
            color: rgba(94, 171, 255, 0.8);
        }

        .floating-symbol.symbol-y {
            color: rgba(74, 234, 186, 0.78);
        }

        .mode-panel {
            width: min(1180px, 100%);
            display: flex;
            flex-direction: column;
            gap: 34px;
            position: relative;
            z-index: 1;
            transform-origin: center center;
        }

        .mode-header {
            color: #f5fbff;
            text-align: center;
            max-width: 860px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }

        .mode-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 999px;
            background: rgba(255,255,255,0.04);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
            font-size: 11px;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.64);
        }

        .mode-eyebrow::before,
        .mode-eyebrow::after {
            content: '';
            width: 24px;
            height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.42));
        }

        .mode-eyebrow::after {
            background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
        }

        .mode-title {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-wrap: balance;
            line-height: 1;
            text-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
        }

        .mode-title-main {
            display: block;
            font-size: clamp(38px, 5vw, 68px);
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        .mode-header-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            font-size: 11px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.44);
        }

        .mode-header-meta span {
            position: relative;
            padding: 0 12px;
        }

        .mode-header-meta span::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -3px;
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: rgba(255,255,255,0.22);
            transform: translateY(-50%);
        }

        .mode-header-meta span:last-child::after {
            display: none;
        }

        .mode-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            width: min(940px, 100%);
            margin: 0 auto;
            align-items: stretch;
        }

        .mode-card {
            position: relative;
            min-height: 304px;
            padding: 30px 24px 20px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 28px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
                linear-gradient(180deg, #2f3338, #22262b 58%, #1b1f23 100%);
            background-clip: padding-box, padding-box;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.06),
                0 18px 36px rgba(0,0,0,0.24);
            color: #fff;
            text-align: left;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            transition:
                transform 0.26s ease,
                opacity 0.26s ease,
                border-color 0.26s ease,
                box-shadow 0.26s ease,
                background 0.26s ease,
                filter 0.26s ease;
            overflow: hidden;
        }

        .mode-card-body {
            position: relative;
            z-index: 4;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            flex: 1;
            justify-content: flex-start;
            padding-top: 8px;
        }

        .mode-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: 1px solid rgba(255,255,255,0.07);
            opacity: 1;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.06), transparent 20%),
                linear-gradient(0deg, rgba(255,255,255,0.03), transparent 24%);
            transition: opacity 0.26s ease, border-color 0.26s ease, transform 0.26s ease;
            pointer-events: none;
            z-index: 1;
        }

        .mode-card::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.95;
            pointer-events: none;
            z-index: 0;
        }

        .mode-card > .mode-card-border-glow,
        .mode-card > .mode-card-border-glow-blur {
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.22s ease, transform 0.22s ease;
        }

        .mode-card > .mode-card-border-glow {
            z-index: 2;
            inset: -3px;
            border-radius: 31px;
            border: 3px solid transparent;
            border-top-color: rgba(126, 246, 255, 0.98);
            border-right-color: rgba(63, 136, 255, 0.98);
            border-bottom-color: rgba(255, 146, 224, 0.94);
            border-left-color: rgba(88, 217, 255, 0.98);
            box-shadow:
                0 0 0 1px rgba(68, 203, 255, 0.28),
                0 0 18px rgba(48, 144, 255, 0.2);
        }

        .mode-card > .mode-card-border-glow-blur {
            z-index: 1;
            inset: -4px;
            border-radius: 32px;
            border: 5px solid transparent;
            border-top-color: rgba(125, 245, 255, 0.34);
            border-right-color: rgba(68, 203, 255, 0.26);
            border-bottom-color: rgba(255, 146, 224, 0.22);
            border-left-color: rgba(94, 171, 255, 0.28);
            filter: blur(8px);
        }

        .mode-card > .mode-card-sheen {
            position: absolute;
            top: -18%;
            left: -28%;
            width: 40%;
            height: 136%;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
            transform: translateX(-155%) skewX(-22deg);
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            z-index: 2;
        }

        .mode-card-footer {
            position: relative;
            z-index: 4;
        }

        .mode-card[data-mode="free-play"]::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.05), transparent 44%),
                radial-gradient(circle at 84% 18%, rgba(0, 206, 201, 0.18), transparent 22%);
        }

        .mode-card[data-mode="absolute-pitch"]::before {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.05), transparent 44%),
                radial-gradient(circle at 84% 18%, rgba(72, 127, 255, 0.18), transparent 22%);
        }

        .mode-card:hover,
        .mode-card:focus-visible {
            transform: translateY(-6px);
            border: 3px solid transparent;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)) padding-box,
                linear-gradient(180deg, #2f3338, #22262b 58%, #1b1f23 100%) padding-box,
                linear-gradient(
                    135deg,
                    rgba(120, 245, 255, 0.98) 0%,
                    rgba(64, 207, 255, 0.98) 20%,
                    rgba(38, 118, 255, 0.99) 54%,
                    rgba(76, 94, 255, 0.97) 76%,
                    rgba(255, 168, 229, 0.95) 100%
                ) border-box;
            background-clip: padding-box, padding-box, border-box;
            box-shadow:
                0 24px 42px rgba(0,0,0,0.3),
                0 0 0 1px rgba(95, 219, 255, 0.22),
                0 0 18px rgba(63, 143, 255, 0.22),
                0 0 32px rgba(255, 154, 223, 0.12);
            filter: brightness(1.03);
        }

        .mode-card:hover::after,
        .mode-card:focus-visible::after {
            opacity: 0.32;
            border-color: transparent;
        }

        .mode-card:hover > .mode-card-border-glow,
        .mode-card:hover > .mode-card-border-glow-blur,
        .mode-card:focus-visible > .mode-card-border-glow,
        .mode-card:focus-visible > .mode-card-border-glow-blur {
            opacity: 1;
            transform: scale(1.01);
        }

        .mode-card:hover > .mode-card-sheen,
        .mode-card:focus-visible > .mode-card-sheen {
            animation: mode-card-sheen 0.7s ease;
        }

        .mode-panel.is-transitioning .mode-header,
        .mode-panel.is-transitioning .floating-symbols {
            transition: opacity 0.2s ease;
        }

        .mode-panel.is-transitioning .mode-header {
            opacity: 0.72;
        }

        .mode-panel.is-transitioning .mode-card {
            pointer-events: none;
        }

        .mode-panel.is-transitioning .mode-card.is-muted {
            transition:
                opacity 0.28s ease,
                transform 0.28s ease,
                filter 0.28s ease;
            opacity: 0.2;
            transform: translateY(8px) scale(0.965);
            filter: blur(1px);
        }

        .mode-panel.is-transitioning .mode-card.is-selected {
            z-index: 2;
            border-color: rgba(255,255,255,0.22);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.12),
                0 30px 56px rgba(0,0,0,0.34),
                0 0 18px rgba(255,255,255,0.08);
            animation: mode-card-enter-press 0.56s cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
        }

        .mode-panel.is-transitioning .mode-card.is-selected::after {
            border-color: rgba(255,255,255,0.22);
        }

        .mode-panel.is-transitioning .mode-card.is-selected > .mode-card-sheen {
            animation: mode-card-sheen 0.82s ease;
        }

        .mode-panel.is-transitioning.is-exiting {
            animation: mode-screen-exit 0.34s ease forwards;
        }

        .mode-card:focus-visible {
            outline: none;
        }

        .mode-card-label {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            margin-bottom: 16px;
            border-radius: 999px;
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.8);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border: 1px solid rgba(255,255,255,0.06);
            transform: translateY(16px);
        }

        .mode-card-title {
            margin: 0;
            margin-bottom: 14px;
            min-height: 2.1em;
            font-size: clamp(25px, 2.5vw, 34px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.01em;
            transform: translateY(24px);
        }

        .mode-card-copy {
            margin: 0;
            min-height: 4.2em;
            max-width: 32ch;
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255,255,255,0.68);
            padding-bottom: 18px;
        }

        .mode-card-footer {
            width: 100%;
            margin-top: auto;
            padding-top: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(255,255,255,0.72);
            font-size: 12px;
            text-shadow: 0 1px 10px rgba(0,0,0,0.28);
            border-top: 1px solid rgba(255,255,255,0.06);
        }