/* Light theme: the site is built dark, so light mode inverts the page and
   re-inverts images and logos so their colours stay correct. */
html[data-theme="light"] { filter: invert(1) hue-rotate(180deg); background: #0b0b0f; }
html[data-theme="light"] img,
html[data-theme="light"] video { filter: invert(1) hue-rotate(180deg); }

.quotes-section { width: min(664px, calc(100% - 32px)); margin: 48px auto 32px; }
.quotes-title { font: 600 1.1rem Figtree, sans-serif; color: #fff; margin: 0 0 14px; }
.quotes-fade { opacity: 0; transition: opacity .25s ease; }
.quotes-card { transition: opacity .25s ease; }
.quotes-card { border: 1.5px dashed #333; padding: 22px; font-family: Figtree, sans-serif; min-height: 110px; }
.quotes-text { font-size: 1.05rem; line-height: 1.6; color: #fff; margin: 0 0 12px; }
.quotes-author { font-size: .85rem; color: #888; margin: 0; }
.twitter-followers { color: #888; margin-left: 6px; }
.navbar-theme { all: unset; cursor: pointer; display: inline-flex; align-items: center; margin-left: 12px; border-radius: 999px; }
.navbar-theme:focus-visible { outline: 2px solid #06f; outline-offset: 3px; }
.theme-track { position: relative; width: 64px; height: 30px; border-radius: 999px; overflow: hidden; background: linear-gradient(#0d1633, #22346b); box-shadow: inset 0 2px 5px #0009, 0 0 0 1px #2a2a33; transition: background .8s ease; }
.navbar-theme:hover .theme-track { box-shadow: inset 0 2px 5px #0009, 0 0 0 1px #5a5a66; }
.theme-stars { position: absolute; inset: 0; background: radial-gradient(1px 1px at 9px 7px, #fff, transparent), radial-gradient(1px 1px at 22px 19px, #ffffffcc, transparent), radial-gradient(1px 1px at 40px 6px, #fff, transparent), radial-gradient(1px 1px at 52px 20px, #ffffffaa, transparent), radial-gradient(1.2px 1.2px at 31px 12px, #fff, transparent); transition: opacity .8s ease; }
.theme-sun { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7b0, #ffc233 60%, #ff9d2e); box-shadow: 0 0 10px 3px #ffc23399; transition: transform .8s cubic-bezier(.45, 0, .25, 1), opacity .8s ease; }
.theme-moon { position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #d7dbe8 70%); box-shadow: 0 0 8px 2px #cfd8ff55; transition: transform .8s cubic-bezier(.45, 0, .25, 1), opacity .8s ease; }
.theme-moon::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b9c0d6; top: 5px; left: 5px; box-shadow: 6px 6px 0 -1px #c4cadd, 2px 9px 0 -1px #c4cadd; }
html[data-theme="light"] .theme-track { background: linear-gradient(#5fb8ef, #bfe6ff 60%, #ffd29a); }
html[data-theme="light"] .theme-stars { opacity: 0; }
html[data-theme="light"] .theme-sun { transform: translateY(0); opacity: 1; }
html[data-theme="light"] .theme-moon { transform: translateY(44px); opacity: 0; }
.theme-sun, .theme-moon { transform: translateY(0); }
.theme-sun { transform: translateY(44px); opacity: 0; }
.theme-moon { transform: translateY(0); opacity: 1; }
/* The light-mode page filter inverts everything; re-invert the switch so its sky and sun keep their colours. */
html[data-theme="light"] .navbar-theme { filter: invert(1) hue-rotate(180deg); }

/* Avatar: day sticker stays hidden; the photo is shown as a circle. */
.decoration { display: none !important; }
.hero-section-avatar { border-radius: 50% !important; overflow: hidden; }
.hero-section-avatar img { border-radius: 50% !important; }

/* Loading screen: 3x3 grid, one smooth 3s ripple cycle from the centre outward. */
.lx-grid { display: grid; grid-template-columns: repeat(3, 10px); gap: 6px; }
.lx-cell { width: 10px; height: 10px; border-radius: 2px; background: #e5e5e5; will-change: transform, opacity;
  animation: lx-ripple 3s ease-in-out infinite; }
.lx-cell:nth-child(5) { animation-delay: 0s; }
.lx-cell:nth-child(2), .lx-cell:nth-child(4), .lx-cell:nth-child(6), .lx-cell:nth-child(8) { animation-delay: .3s; }
.lx-cell:nth-child(1), .lx-cell:nth-child(3), .lx-cell:nth-child(7), .lx-cell:nth-child(9) { animation-delay: .6s; }
@keyframes lx-ripple {
  0%, 100% { transform: scale(.7); opacity: .2; }
  50% { transform: scale(1.3); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lx-cell { animation: none; opacity: .6; } }

/* Accent: red. Used for highlights, nav underline, link hover and text selection. */
:root { --accent: #ef4444; }
.bio-highlight { color: var(--accent); }
.navbar-link:hover, .navbar-link-active { color: var(--accent); }
.navbar-link:hover:after, .navbar-link-active:after { background-color: var(--accent); }
.uses-item-name a:hover { color: var(--accent); }
::selection { background: rgba(239, 68, 68, .35); color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Accent override: site styles load after this file, so these use !important. */
.bio-highlight { color: #ef4444 !important; }
.navbar-link:hover, .navbar-link-active { color: #ef4444 !important; }
.navbar-link:hover:after, .navbar-link-active:after { background-color: #ef4444 !important; }
.uses-item-name a:hover { color: #ef4444 !important; }
.exp-timeline-dot { background: #ef4444 !important; box-shadow: 0 0 6px rgba(239, 68, 68, .5) !important; }
.exp-status-badge { background: #2a0c0c !important; }
.exp-status-dot { color: #ef4444 !important; }