.portfolio-mode-switch > a, .portfolio-mode-switch > span { transition:background-color .15s ease, box-shadow .15s ease; }
@media(hover:hover) and (pointer:fine) {
 .portfolio-mode-switch > a:hover { background:#eaf3de; box-shadow:none; }
 .portfolio-mode-switch > [aria-current]:hover { background:#245f2e; }
 .portfolio-mode-switch.pixel-mode-switch > a:hover { background:#2c3573; color:#f4f0e0; box-shadow:inset 0 0 0 2px #a9b0e8; }
}
.portfolio-mode-switch > a:focus-visible { outline:3px solid #2d7a3a; outline-offset:3px; background:#eaf3de; }
.portfolio-mode-switch.pixel-mode-switch > a:focus-visible { outline-color:#f4f0e0; background:#2c3573; color:#f4f0e0; }
@media(prefers-reduced-motion:reduce) { .portfolio-mode-switch > a, .portfolio-mode-switch > span { transition:none; } }


@media(hover:hover) and (pointer:fine) {
 .portfolio-mode-switch:not(.pixel-mode-switch) > a:hover { background:#ece7f5; box-shadow:none; }
}

/* Preserve the icon contrast against page-specific link hover colors. */
.portfolio-mode-switch.pixel-mode-switch > a:is(:hover,:focus-visible) .mode-icon{color:#f4f0e0;}

/* Consistent selected state across Portfolio and Game modes. */
.portfolio-mode-switch>[aria-current]{background-color:#2d7a3a;}
@media(hover:hover) and (pointer:fine){
 .site-header .portfolio-mode-switch>[aria-current]:hover,
 .app>header .portfolio-mode-switch>[aria-current]:hover{background-color:#245f2e;}
 .toggle-state-pair .portfolio-mode-switch.mode-toggle-example>[aria-current]:hover{background-color:#2d7a3a;}
}