/* =========================================================
   Jiaye Fu — simple academic homepage
   Single-page layout with lightweight card interactivity
   Theming via CSS custom properties (light + dark).
   ========================================================= */

/* ---------- Theme tokens (light = default) ---------- */
:root {
    color-scheme: light;
    --page-bg:        #f3f4f6;   /* surround behind the content sheet */
    --body-bg:        #ffffff;   /* content sheet */
    --body-shadow:    rgba(0,0,0,0.05);
    --text:           #1a1a1a;
    --text-muted:     #555555;
    --text-faint:     #888888;
    --text-footer:    #808080;
    --heading:        #2a3f6b;
    --heading-sub:    #3a5ba0;
    --rule:           #527bbd;   /* h2 underline + links */
    --link:           #527bbd;
    --accent:         #3b82c4;   /* blue */
    --accent-rgb:     59, 130, 196;
    --border:         #e0e4ea;
    --border-left:    #d9dee6;
    --hover-border:   #c7d8e8;
    --nav-bg:         rgba(255,255,255,0.95);
    --card-bg:        #ffffff;
    --soft-bg:        #fbfbfd;   /* prop / honor rows */
    --hover-bg:       #f5f8fc;   /* blue-tinted hover */
    --active-bg:      #eef3fa;
    --chip-bg:        #e8edf5;   /* pub-tag / prop-id */
    --chip-text:      #2a3f6b;
    --chip-hover-bg:  #d8e4f0;
    --social-hover:   #e8f0f8;
}

/* ---------- Dark theme overrides ---------- */
[data-theme="dark"] {
    color-scheme: dark;
    --page-bg:        #07090e;
    --body-bg:        #0f1117;
    --body-shadow:    rgba(0,0,0,0.55);
    --text:           #e6e8ee;
    --text-muted:     #aab0bd;
    --text-faint:     #868d9c;
    --text-footer:    #7a8090;
    --heading:        #b6cdf2;
    --heading-sub:    #93b4ea;
    --rule:           #4f6da8;
    --link:           #8fb3ea;
    --accent:         #6ba3d6;
    --accent-rgb:     107, 163, 214;
    --border:         #262b36;
    --border-left:    #2f3542;
    --hover-border:   #3a5070;
    --nav-bg:         rgba(15,17,23,0.86);
    --card-bg:        #161922;
    --soft-bg:        #14171f;
    --hover-bg:       #1a2030;
    --active-bg:      #1e2838;
    --chip-bg:        #1f2530;
    --chip-text:      #b6cdf2;
    --chip-hover-bg:  #2a3a50;
    --social-hover:   #1e2a3a;
}

* { box-sizing: border-box; }

html { background-color: var(--page-bg); scroll-behavior: smooth; }

body {
    font-family: Georgia, "Source Serif Pro", serif;
    color: var(--text);
    background-color: var(--body-bg);
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 40px 60px;
    line-height: 1.5;
    box-shadow: 0 0 40px var(--body-shadow);
    transition: background-color 0.4s ease, color 0.4s ease;
}

img { max-width: 100%; border: none; }

a { color: var(--link); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); text-decoration: underline; }

h1, h2, h3 {
    color: var(--heading);
    margin: 1em 0 0.3em;
    padding: 0.3em 0 0.2em;
    line-height: 1.1;
}
h2 {
    font-size: 1.35em;
    border-bottom: 2px solid var(--rule);
    padding-bottom: 0.3em;
    margin-top: 1.8em;
}
h3 { font-size: 1.08em; color: var(--heading-sub); margin-top: 1.2em; }
h1 { font-size: 2em; margin-bottom: 0.1em; }

p  { margin: 0 0 0.7em 0; }
ul { padding-left: 1.2em; list-style-type: square; }
li { margin-bottom: 0.4em; }

.author-name { color: var(--accent); font-weight: bold; }

section { scroll-margin-top: 70px; }

/* ---------- Ph.D. application notice ---------- */
.phd-notice {
    margin-top: 1em;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--soft-bg);
    transition: background-color 0.2s, transform 0.2s;
}
.phd-notice:hover { background: var(--hover-bg); transform: translateX(3px); }
.phd-notice b { color: var(--heading); }
.phd-notice a { font-weight: bold; }

/* ---------- Sticky top navigation ---------- */
.topnav {
    position: sticky;
    top: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    margin: 0 -40px 20px;
    padding: 10px 40px;
    display: flex;
    gap: 20px;
    font-size: 0.95em;
    align-items: center;
    flex-wrap: wrap;
}
.topnav a {
    color: var(--heading);
    font-weight: 500;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.topnav a:hover,
.topnav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}
.topnav .nav-name { font-weight: bold; margin-right: auto; color: var(--accent); }
/* keep the theme toggle from stretching the nav row */
.topnav .theme-switch { line-height: 0; }

/* ---------- Header / hero ---------- */
.hero {
    position: relative;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding-top: 1.2em;
}
.hero-photo, .hero-info { position: relative; z-index: 1; }
/* keep the name/bio legible over the dark-mode matrix backdrop */
[data-theme="dark"] .hero-info h1,
[data-theme="dark"] .hero-info > p { text-shadow: 0 1px 6px rgba(7, 9, 14, 0.85); }
.hero-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
.hero-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25);
}
.hero-info h1 { margin-top: 0; }
.hero-info p { margin-bottom: 0.5em; }

.socials a {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 4px;
    border-radius: 6px;
    transition: background-color 0.2s, transform 0.2s;
}
.socials a:hover {
    background-color: var(--social-hover);
    transform: translateY(-2px);
}
.socials img { vertical-align: middle; display: block; }

/* ---------- Hero matrix backdrop (dark mode only) ---------- */
.hero-matrix {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    border-radius: 10px;
    opacity: 0.5;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 130% at 70% 40%, #000 55%, transparent 100%);
            mask-image: radial-gradient(120% 130% at 70% 40%, #000 55%, transparent 100%);
}
[data-theme="dark"] .hero-matrix { display: block; }
.hero-matrix .jp-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    grid-auto-rows: 26px;
    font-size: 18px;
    color: rgba(0, 150, 255, 0.30);
    font-family: "Courier New", Courier, monospace;
    justify-content: center;
    align-content: start;
    overflow: hidden;
}
.hero-matrix .jp-matrix > span {
    text-align: center;
    text-shadow: 0 0 6px rgba(120, 180, 255, 0.45);
    user-select: none;
    transition: color 0.5s;
    line-height: 1.45;
}
.hero-matrix .jp-matrix > span:nth-child(19n + 2)  { animation: jp-pulse 3.5s ease-in-out infinite 0.2s; }
.hero-matrix .jp-matrix > span:nth-child(29n + 1)  { animation: jp-pulse 4.1s ease-in-out infinite 0.7s; }
.hero-matrix .jp-matrix > span:nth-child(11n)      { color: rgba(100, 200, 255, 0.7); animation: jp-pulse 2.9s ease-in-out infinite 1.1s; }
.hero-matrix .jp-matrix > span:nth-child(37n + 10) { animation: jp-pulse 5.3s ease-in-out infinite 1.5s; }
.hero-matrix .jp-matrix > span:nth-child(41n + 1)  { animation: jp-pulse 3.9s ease-in-out infinite 0.4s; }
.hero-matrix .jp-matrix > span:nth-child(17n + 9)  { animation: jp-pulse 2.8s ease-in-out infinite 0.9s; }
.hero-matrix .jp-matrix > span:nth-child(23n + 18) { animation: jp-pulse 4.3s ease-in-out infinite 1.3s; }
.hero-matrix .jp-matrix > span:nth-child(31n + 4)  { animation: jp-pulse 5.6s ease-in-out infinite 0.1s; }
.hero-matrix .jp-matrix > span:nth-child(43n + 20) { animation: jp-pulse 3.6s ease-in-out infinite 1.8s; }
.hero-matrix .jp-matrix > span:nth-child(13n + 6)  { animation: jp-pulse 3.2s ease-in-out infinite 1.2s; }
.hero-matrix .jp-matrix > span:nth-child(53n + 5)  { animation: jp-pulse 4.9s ease-in-out infinite 0.5s; }
.hero-matrix .jp-matrix > span:nth-child(47n + 15) { animation: jp-pulse 5.9s ease-in-out infinite 1s; }

/* color-only pulse (static glow) — avoids per-frame blur-radius repaints */
@keyframes jp-pulse {
    0%, 100% { color: rgba(0, 150, 255, 0.40); }
    30%      { color: rgba(100, 200, 255, 0.95); }
    50%      { color: rgba(255, 105, 180, 0.95); }
    70%      { color: rgba(255, 255, 255, 0.95); }
}

/* ---------- Tabs (Papers / Proposals) ---------- */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin: 0.5em 0 1.2em;
}
.tab-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1em;
    color: var(--heading-sub);
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.tab-btn:hover { background-color: var(--hover-bg); color: var(--accent); }
.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: bold;
}
.tab-panel { display: none; animation: fadein 0.3s ease; }
.tab-panel.active { display: block; }

@keyframes fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tab-bar.compact { margin: 0.2em 0 0.8em; border-bottom-width: 1px; }
.tab-bar.compact .tab-btn { padding: 6px 14px; font-size: 0.92em; }

/* ---------- Publication cards ---------- */
.pub-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 12px;
    margin: 0 0 1.2em;
}
.pub-item {
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-left);
    background-color: var(--card-bg);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s,
                transform 0.2s, box-shadow 0.2s;
}
.pub-item:hover {
    border-color: var(--hover-border);
    border-left-color: var(--accent);
    background-color: var(--hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.12);
}
.pub-item.active {
    border-color: var(--accent);
    border-left-color: var(--accent);
    background-color: var(--active-bg);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.22);
    transform: translateY(-2px);
}
.pub-item .pub-tag {
    display: inline-block;
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: 0.78em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s, color 0.2s;
}
.pub-item:hover .pub-tag,
.pub-item.active .pub-tag { background: var(--chip-hover-bg); color: var(--accent); }
.pub-title {
    font-weight: bold;
    color: var(--heading);
    transition: color 0.2s;
}
.pub-title:hover { color: var(--accent); text-decoration: underline; }
.pub-item.active .pub-title { color: var(--accent); }
.pub-authors { display: block; margin-top: 4px; font-size: 0.95em; }
.pub-venue { font-style: italic; color: var(--text-muted); }
.pub-links { margin-left: 6px; font-size: 0.9em; }
#publications h4 {
    font-size: 0.95em; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 1.2em 0 0.6em; padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}
.pub-links a { margin-right: 4px; }

/* Highlight the author's own name in paper lists */
.author-self {
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.10);
    padding: 0 4px;
    border-radius: 3px;
}

/* Full paper list page header */
.page-header {
    padding-top: 1.2em;
    margin-bottom: 0.5em;
}
.page-header h1 {
    margin-top: 0;
    margin-bottom: 0.2em;
}
.back-link { font-size: 0.95em; }
.back-link a { font-weight: 500; }

/* Full paper list button inside the Papers tab */
.btn-full-list {
    display: inline-block;
    margin: 0.6em 0 1em;
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--active-bg);
    color: var(--accent);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-full-list:hover {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}

/* Status badges for publications & proposals */
.badge {
    display: inline-block;
    font-size: 0.72em;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.badge-adopt   { background: #d9f2e4; color: #1f7a3d; }
.badge-review  { background: #fff0d6; color: #a15a00; }
.badge-revise  { background: #f2e4d9; color: #8a4a1a; }
.badge-first   { background: #fce0ea; color: #cc4f7a; }
.badge-ccfa    { background: #e8e0ff; color: #4a2f9e; }
.badge-ccfb    { background: #e0ecff; color: #1f4a8a; }
.badge-ccfc    { background: #e8f5e9; color: #2e7d32; }
.badge-sci     { background: #fff3e0; color: #ef6c00; }
/* dim the badges slightly on dark so they read as chips, not glare */
[data-theme="dark"] .badge { filter: brightness(0.92) saturate(1.05); }

/* ---------- Standards proposals: compact list ---------- */
.prop-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2em;
    display: grid;
    gap: 6px;
}
.prop-item {
    padding: 8px 14px;
    border-left: 3px solid var(--border-left);
    background: var(--soft-bg);
    border-radius: 4px;
    font-size: 0.93em;
    transition: border-left-color 0.2s, background-color 0.2s, transform 0.2s;
}
.prop-item:hover {
    border-left-color: var(--accent);
    background-color: var(--hover-bg);
    transform: translateX(3px);
}
.prop-id {
    font-family: "SF Mono", Consolas, monospace;
    font-size: 0.88em;
    font-weight: bold;
    color: var(--chip-text);
    margin-right: 8px;
    padding: 1px 6px;
    background: var(--chip-bg);
    border-radius: 3px;
}
.prop-tag {
    display: inline-block;
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: 0.78em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s, color 0.2s;
}
.prop-item:hover .prop-id,
.prop-item:hover .prop-tag { background: var(--chip-hover-bg); color: var(--accent); }
.prop-title { color: var(--text); }
.prop-meta  { color: var(--text-faint); font-size: 0.88em; margin-left: 6px; }

/* ---------- News scroll window ---------- */
.news-scroll {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 18px;
    background: var(--soft-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.news-scroll::-webkit-scrollbar { width: 6px; }
.news-scroll::-webkit-scrollbar-track { background: transparent; }
.news-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.news-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.93em;
    line-height: 1.5;
}
.news-list li:last-child { border-bottom: none; }
.news-date {
    display: inline-block;
    font-weight: bold;
    color: var(--accent);
    min-width: 80px;
}

/* ---------- Education / honors / service list ---------- */
.edu-list { list-style: none; padding: 0; }
.edu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 8px;
    border-bottom: 1px dashed var(--border);
    transition: background-color 0.2s, padding-left 0.2s;
}
.edu-item:hover { background-color: var(--hover-bg); padding-left: 14px; }
.edu-item:last-child { border-bottom: none; }
.edu-left { display: flex; align-items: center; gap: 14px; }
.edu-logo {
    width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
    filter: grayscale(100%); opacity: 0.85;
    transition: filter 0.25s, opacity 0.25s, transform 0.25s;
}
.edu-logo-text {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: -0.5px;
}
.edu-item:hover .edu-logo { filter: grayscale(0%); opacity: 1; transform: scale(1.06); }
/* logos are dark-ink artwork; lift them onto a chip so they stay visible on dark */
[data-theme="dark"] .edu-logo {
    filter: grayscale(100%) invert(0.9) brightness(1.1);
    opacity: 0.8;
}
[data-theme="dark"] .edu-item:hover .edu-logo {
    filter: grayscale(100%) invert(0.9) brightness(1.18);
    opacity: 1;
}
.edu-main b { color: var(--heading); }
.edu-date { color: var(--text-faint); font-size: 0.9em; white-space: nowrap; margin-left: 12px; }

.honor-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.honor-list li {
    padding: 8px 12px;
    border-left: 3px solid var(--border-left);
    background: var(--soft-bg);
    border-radius: 4px;
    transition: border-left-color 0.2s, background-color 0.2s, transform 0.2s;
    font-size: 0.95em;
}
.honor-list li:hover {
    border-left-color: var(--accent);
    background-color: var(--hover-bg);
    transform: translateX(3px);
}
.honor-year { color: var(--text-faint); font-size: 0.88em; margin-right: 8px; }

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 0.5em;
}
.service-grid h3 { margin-top: 0; }
.rev-subhead { font-size: 1.02em; color: var(--heading-sub); margin: 1em 0 0.3em; font-weight: 600; }
.rev-subhead + ul { margin-top: 0; }

/* ---------- Footer ---------- */
.footer {
    text-align: center;
    font-size: 0.88em;
    color: var(--text-footer);
    border-top: 1px solid var(--border);
    margin-top: 3em;
    padding-top: 0.8em;
}

/* ---------- Visitor map (mapmyvisitors) ---------- */
/* Outer box defines the on-page footprint; inner box holds the widget
   at its natural size and is scaled down to fit. ~4x smaller. */
.visitor-map {
    width: 240px;
    height: 160px;
    margin: 1em auto 0;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    position: relative;
}
.visitor-map:hover { opacity: 1; }
[data-theme="dark"] .visitor-map { opacity: 0.6; }
[data-theme="dark"] .visitor-map:hover { opacity: 0.85; }
.visitor-map-inner {
    width: 960px;
    height: 640px;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
}
/* Enlarge widget text (visitors count / date labels) so it stays
   readable after the 0.25 scale is applied. Canvas-rendered map
   content is not affected by font-size. */
.visitor-map-inner #mapmyvisitors-widget,
.visitor-map-inner #mapmyvisitors-widget div,
.visitor-map-inner #mapmyvisitors-widget span,
.visitor-map-inner .mapmyvisitors-map-container,
.visitor-map-inner .mapmyvisitors-visitors,
.visitor-map-inner .mpmvs {
    font-size: 48px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* ---------- Theme switch (Uiverse by mamyapro123), sized for the nav ---------- */
.theme-switch {
  --toggle-size: 11px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 0.38em;
  --container-light-bg: #5caad4;
  --container-night-bg: #1b1e36;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #f5c518;
  --moon-bg: #d8d4c0;
  --spot-color: #9b9787;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff8e1;
  --clouds-color: #f4f4f4;
  --back-clouds-color: #bacfe0;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-image: linear-gradient(to bottom, var(--container-light-bg) 0%, #4a92bd 100%);
  transition: all var(--transition);
  box-shadow: 0 0 0 1.6px #1a1a1a, 2px 2.5px 0 1.6px rgba(26, 26, 26, 0.18);
  transform: rotate(-0.7deg);
  filter: url(#sketchy);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: repeating-linear-gradient(-50deg, transparent, transparent 7px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.04) 8px);
  border-radius: inherit;
  pointer-events: none;
}

/* visually hidden but still focusable + in the a11y tree (keyboard toggling) */
.theme-switch__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__circle-container::before {
  content: "";
  position: absolute;
  width: calc(var(--circle-container-diameter) + 1.5em);
  height: calc(var(--circle-container-diameter) + 1.5em);
  left: -0.75em;
  top: -0.75em;
  border-radius: 50%;
  background: conic-gradient(transparent 0deg, transparent 8deg, rgba(245, 197, 24, 0.52) 8deg, rgba(245, 197, 24, 0.52) 22deg, transparent 22deg, transparent 53deg, rgba(245, 197, 24, 0.52) 53deg, rgba(245, 197, 24, 0.52) 67deg, transparent 67deg, transparent 98deg, rgba(245, 197, 24, 0.52) 98deg, rgba(245, 197, 24, 0.52) 112deg, transparent 112deg, transparent 143deg, rgba(245, 197, 24, 0.52) 143deg, rgba(245, 197, 24, 0.52) 157deg, transparent 157deg, transparent 188deg, rgba(245, 197, 24, 0.52) 188deg, rgba(245, 197, 24, 0.52) 202deg, transparent 202deg, transparent 233deg, rgba(245, 197, 24, 0.52) 233deg, rgba(245, 197, 24, 0.52) 247deg, transparent 247deg, transparent 278deg, rgba(245, 197, 24, 0.52) 278deg, rgba(245, 197, 24, 0.52) 292deg, transparent 292deg, transparent 323deg, rgba(245, 197, 24, 0.52) 323deg, rgba(245, 197, 24, 0.52) 337deg, transparent 337deg, transparent 360deg);
  animation: rotateSunRays 14s linear infinite;
  opacity: 1;
  transition: opacity var(--transition);
  pointer-events: none;
  filter: url(#sketchy-sm);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container::before { opacity: 0; }

@keyframes rotateSunRays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset, 0.1em 0.13em 0 0.04em #1a1a1a;
  filter: url(#sketchy-sm) drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
  transform: scale(1);
}

.theme-switch__sun-moon-container:hover { transform: scale(1.1) rotate(5deg); }

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: all var(--transition), transform 0.3s ease;
  position: relative;
}

.theme-switch__moon:hover { transform: rotate(15deg); }

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  transition: background-color 0.3s ease;
  filter: url(#sketchy-sm);
}

.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.theme-switch__moon:hover .theme-switch__spot { background-color: #7a7f8c; }

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  filter: url(#sketchy-sm);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
  background-image: linear-gradient(to bottom, var(--container-night-bg) 0%, #252a4a 100%);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { top: 50%; transform: translateY(-50%); }
.theme-switch__container:hover .theme-switch__clouds { transform: translateX(15px) scale(1.02); }

.theme-switch__sun-moon-container::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.theme-switch__sun-moon-container:hover::after { opacity: 1; }

.theme-switch__shooting-star { position: absolute; width: 2px; height: 2px; background: white; top: 20%; left: -10%; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__shooting-star-2 { position: absolute; width: 1px; height: 1px; background: white; top: 35%; left: -10%; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__meteor { position: absolute; width: 3px; height: 3px; background: #ffd700; border-radius: 50%; top: -10%; left: 50%; opacity: 0; filter: blur(1px); transition: opacity 0.3s ease; }

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__shooting-star { animation: shootingStar 2s linear infinite; opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__shooting-star-2 { animation: shootingStar 3s linear infinite 1s; opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__meteor { animation: meteor 4s linear infinite 2s; opacity: 1; }

@keyframes shootingStar {
  0% { transform: translateX(0) translateY(0) rotate(45deg); opacity: 1; }
  100% { transform: translateX(150px) translateY(150px) rotate(45deg); opacity: 0; }
}
@keyframes meteor {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(150px) scale(0.3); opacity: 0; }
}

.theme-switch__stars-cluster { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__stars-cluster .star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 0 0 4px 1px white; }
.theme-switch__stars-cluster .star:nth-child(1) { top: 20%; left: 20%; animation: twinkle 1s infinite ease-in-out; }
.theme-switch__stars-cluster .star:nth-child(2) { top: 30%; left: 55%; animation: twinkle 1s infinite ease-in-out 0.3s; }
.theme-switch__stars-cluster .star:nth-child(3) { top: 40%; left: 80%; animation: twinkle 1s infinite ease-in-out 0.6s; }
.theme-switch__stars-cluster .star:nth-child(4) { top: 60%; left: 30%; animation: twinkle 1s infinite ease-in-out 0.9s; }
.theme-switch__stars-cluster .star:nth-child(5) { top: 70%; left: 65%; animation: twinkle 1s infinite ease-in-out 1.2s; }

.theme-switch__aurora {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.2) 25%, rgba(128, 0, 255, 0.2) 50%, rgba(0, 255, 255, 0.2) 75%, rgba(0, 255, 255, 0) 100%);
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-100%);
  transition: opacity 0.3s ease;
}

.theme-switch__comets { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__comets .comet { position: absolute; width: 2px; height: 2px; background: linear-gradient(90deg, white 0%, transparent 90%); border-radius: 50%; filter: blur(1px); }
.theme-switch__comets .comet:nth-child(1) { top: 30%; left: -10%; animation: cometMove 4s linear infinite; }
.theme-switch__comets .comet:nth-child(2) { top: 50%; left: -10%; animation: cometMove 6s linear infinite 2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes cometMove {
  0% { transform: translateX(0) translateY(0) rotate(-45deg) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(200px) translateY(200px) rotate(-45deg) scale(0.2); opacity: 0; }
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-cluster { opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__aurora { opacity: 1; animation: auroraWave 8s linear infinite; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__comets { opacity: 1; }

@keyframes auroraWave {
  0% { transform: translateY(-100%) translateX(-50%); }
  100% { transform: translateY(-100%) translateX(50%); }
}

/* ---------- Reduced motion: calm the ambient animations ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-matrix .jp-matrix > span,
    .theme-switch__circle-container::before,
    .theme-switch__shooting-star,
    .theme-switch__shooting-star-2,
    .theme-switch__meteor,
    .theme-switch__stars-cluster .star,
    .theme-switch__aurora,
    .theme-switch__comets .comet { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body { padding: 0 20px 40px; }
    .topnav { margin: 0 -20px 16px; padding: 10px 20px; gap: 14px; }
    .hero { flex-direction: column; align-items: center; text-align: center; }
    .hero-info { text-align: left; width: 100%; }
    .edu-item { flex-direction: column; }
    .edu-date { margin-left: 0; }
}