.spotify-placeholder[hidden], #spotify-track[hidden], [hidden] { display: none !important; }
.activity-header-toggle { min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--outline); border-radius: 2rem; background: transparent; color: var(--on-surface); font: 600 .8rem 'DM Sans',sans-serif; cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.activity-header-toggle:hover { border-color: var(--primary); background: var(--primary-container); color: var(--on-primary-container); }
.activity-header-toggle:active, .theme-toggle:active, .activity-reopen:active { transform: scale(.97); }
.repo-description { color: var(--on-surface-variant); }
.repo-description p { margin: .6rem 0 0; font-size: .9rem; }
.repo-description p:first-child { margin-top: .75rem; }
.repo-description strong { color: var(--on-surface); }
.repo-description code { padding: .1rem .3rem; border-radius: .3rem; background: var(--surface-variant); color: var(--on-surface); font-size: .85em; }
.repo-description a { font-weight: 700; }
.activity-drawer { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 15; width: min(25rem, calc(100% - 2rem)); max-height: min(70vh, 34rem); overflow: auto; padding: var(--space-4); border: 1px solid var(--outline); border-radius: var(--radius-lg); background: var(--surface-container); box-shadow: var(--shadow-2); transition: opacity .2s var(--ease-out), transform .3s var(--ease-drawer), visibility 0s linear .3s; }
.activity-drawer.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(100% + 2rem)); transition-delay: 0s, 0s, 0s; }
.activity-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #8f909933; }
.activity-drawer__header .icon-button { min-width: 2.5rem; min-height: 2.5rem; }
.activity-reopen { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 14; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--outline); border-radius: 2rem; background: var(--primary); color: var(--on-primary); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); }
.activity-reopen { bottom: 5.75rem; }
.live-toast { position: fixed; top: 5.5rem; left: 50%; z-index: 30; display: flex; align-items: center; gap: 1rem; max-width: min(34rem, calc(100% - 2rem)); padding: .75rem 1rem .75rem 1.15rem; border: 1px solid var(--primary); border-radius: 2rem; background: var(--primary-container); color: var(--on-primary-container); box-shadow: var(--shadow-2); transform: translateX(-50%); transition: opacity .2s var(--ease-out), transform .25s var(--ease-drawer); }
.live-toast[hidden] { display: none !important; }
.live-toast.is-hidden { opacity: 0; transform: translate(-50%, -1rem); }
.live-toast__close { border: 0; background: transparent; color: inherit; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 560px) { .activity-drawer { right: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); max-height: 60vh; }.activity-reopen { right: .75rem; bottom: 5.25rem; }.live-toast { top: 5rem; border-radius: var(--radius-md); } }
@media (max-width: 800px) { .activity-header-toggle { margin-left: .25rem; } }
@media (max-width: 560px) { .activity-header-toggle { width: 3rem; overflow: hidden; padding: .55rem .4rem; font-size: 0; }.activity-header-toggle::before { content: '●'; font-size: 1rem; } }
.project-browser-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-top: var(--space-4); }.project-browser-controls .form-control { background: var(--surface-container); }.project-pagination { display: flex; align-items: center; gap: .6rem; }.project-pagination .button { min-height: 2.75rem; padding: .6rem .9rem; font-size: .8rem; }.project-pagination .button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.project-pagination .button:disabled { background: var(--surface-variant); border-color: var(--outline); color: var(--on-surface-variant); opacity: .9; }
.journey-item--current .journey-marker { animation: journey-heartbeat 1.8s ease-in-out infinite; }
@keyframes journey-heartbeat { 0%, 100% { box-shadow: 0 0 0 0 #b9c5ff00; transform: scale(1); } 15% { box-shadow: 0 0 0 .35rem #b9c5ff44; transform: scale(1.12); } 30% { box-shadow: 0 0 0 .12rem #b9c5ff22; transform: scale(1); } 45% { box-shadow: 0 0 0 .3rem #b9c5ff33; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .journey-item--current .journey-marker { animation: none; } }
@media (max-width: 700px) { .project-browser-controls { grid-template-columns: 1fr; }.project-pagination { justify-content: space-between; }.project-pagination .button { flex: 1; }.project-pagination .supporting { min-width: 4rem; text-align: center; } }
.repo-description { max-width: 100%; max-height: 13rem; overflow: auto; overflow-wrap: anywhere; }.repo-description h4 { margin: .75rem 0 .35rem; color: var(--on-surface); font: 600 1rem/1.3 'Space Grotesk', sans-serif; }.repo-description ul { margin: .6rem 0 0; padding-left: 1.2rem; }.repo-description li { margin-top: .3rem; }.repo-description pre { max-width: 100%; overflow-x: auto; padding: .75rem; border-radius: var(--radius-sm); background: var(--surface-variant); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }.readme-diagram { display: grid; gap: .25rem; margin-top: .75rem; padding: .75rem; border: 1px dashed var(--outline); border-radius: var(--radius-sm); background: var(--surface-variant); color: var(--on-surface); }.readme-diagram span { color: var(--on-surface-variant); font-size: .8rem; }

/* Keep M3 surfaces readable when the light scheme is active. */
[data-theme="light"] .app-bar { background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom-color: #75778055; }
[data-theme="light"] .section-container--raised { background: var(--surface-container); }
[data-theme="light"] .featured-card, [data-theme="light"] .info-panel { background: var(--surface-container); border-color: #75778055; }
[data-theme="light"] .project-card, [data-theme="light"] .repo-card, [data-theme="light"] .spotify-widget { background: var(--surface-container); border-color: #75778055; }
[data-theme="light"] .featured-card:hover, [data-theme="light"] .info-panel:hover, [data-theme="light"] .project-card:hover, [data-theme="light"] .repo-card:hover { box-shadow: var(--shadow-1); }
[data-theme="light"] .activity-drawer { border-color: #75778077; }
[data-theme="light"] .form-control { background: var(--surface); }

body { transition: background-color .25s ease, color .25s ease; }
.app-bar__inner { min-width: 0; }
.brand { min-width: 0; }
@media (max-width: 1000px) { .hero__grid { gap: var(--space-5); }.display { font-size: clamp(2.6rem, 6vw, 4.2rem); }.hero__projects { min-width: 0; } }
@media (max-width: 800px) { .app-bar__inner { gap: .5rem; }.brand { font-size: .9rem; line-height: 1.2; }.navigation { z-index: 2; }.activity-header-toggle { position: relative; z-index: 3; } }
@media (max-width: 560px) { .hero__grid { gap: var(--space-6); }.profile-image { width: 7.5rem; }.headline { font-size: clamp(2rem, 10vw, 2.75rem); }.section { padding: var(--space-6) 0; }.project-card__body, .featured-card, .info-panel, .repo-card { padding: 1.25rem; }.journey-item { grid-template-columns: 1.25rem minmax(0,1fr); gap: .75rem; }.journey-content h3 { font-size: 1rem; }.activity-drawer__header .title { font-size: 1rem; } }

/* Keep README detail scroll areas and the Activity popover consistent with M3 surfaces. */
.repo-description { scrollbar-width: thin; scrollbar-color: var(--outline) transparent; }
.repo-description::-webkit-scrollbar, .activity-drawer::-webkit-scrollbar { width: .45rem; }
.repo-description::-webkit-scrollbar-track, .activity-drawer::-webkit-scrollbar-track { background: transparent; }
.repo-description::-webkit-scrollbar-thumb, .activity-drawer::-webkit-scrollbar-thumb { border-radius: 1rem; background: var(--outline); }
.activity-drawer { top: 5.25rem; right: max(1.25rem, calc((100vw - 1200px) / 2)); bottom: auto; max-height: calc(100vh - 6.5rem); }
.activity-pagination { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #8f909933; }.activity-pagination .button { min-height: 2.5rem; padding: .55rem .8rem; font-size: .75rem; }.activity-pagination .button:disabled { background: var(--surface-variant); border-color: var(--outline); color: var(--on-surface-variant); opacity: .9; }
@media (max-width: 560px) { .activity-drawer { top: 4.75rem; right: .75rem; bottom: auto; width: calc(100% - 1.5rem); max-height: calc(100vh - 5.75rem); } }
.project-pagination .button, .activity-pagination .button { appearance: none; -webkit-appearance: none; background: transparent; color: var(--on-surface); }
.project-pagination .button:disabled, .activity-pagination .button:disabled { appearance: none; -webkit-appearance: none; background: var(--surface-variant) !important; border-color: var(--outline) !important; color: var(--on-surface-variant) !important; opacity: .95; }