* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    background: transparent;
    color: var(--text);
}

/* Background stars */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(var(--star-color) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.2;
}

/* Theme color variables: dark is default; html.light overrides for light theme */
:root {
    /* darker midnight-blue gradient (deeper, less contrast to avoid appearing black) */
    --bg: radial-gradient(circle at 20% 30%, #050719 0%, #000617 60%, #00010b 100%);
    --text: #f1f1f1;
    --star-color: #ffffff15;
    --muted: #bbb;

    --navbar-bg: rgba(255,255,255,0.08);
    --navbar-text: #ddd;
    --link-hover: #fff;
    --active-bg: rgba(255,255,255,0.12);
    --active-text: #fff;

    --primary-bg: rgba(255,255,255,0.15);
    --primary-hover: rgba(255,255,255,0.25);
    --primary-text: var(--text);

    --toggle-bg: rgba(255,255,255,0.08);
    --toggle-color: #ddd;

    --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.35);
    --shadow-sm: 0 6px 14px rgba(0,0,0,0.06);

    --focus-outline: rgba(255,255,255,0.12);
        --nav-offset: 120px; /* space used for sticky tops and nav offsets */
    /* page surface color (approximation used to derive chip background) */
    --page-surface: #000617; /* darker midnight-blue surface */
    /* chip defaults fallback: semi-transparent darker than page */
    --chip-bg-default-fallback: rgba(0,0,0,0.18);
    --chip-text-default: var(--text); /* match main text color in dark mode */
    /* CV timeline and entry colors */
    --cv-line-start: rgba(255,255,255,0.12);
    --cv-line-end: rgba(255,255,255,0.04);
    --cv-entry-border: rgba(255,255,255,0.04);
    /* shot background */
    --shot-bg: rgba(255,255,255,0.03);
}

html.light {
    /* slightly darker light background with a circular radial gradient (similar to dark theme) */
        --bg: radial-gradient(circle at 20% 30%, #dfe6f5 0%, #eef3fb 45%, #f9fbff 100%);
    --text: #111;
    --star-color: #00000012;
    --muted: #666;

    /* Make navbar/toggle box background darker in light theme for better contrast */
    --navbar-bg: rgba(0,0,0,0.10);
    --navbar-text: #333;
    --link-hover: #000;
    --active-bg: rgba(0,0,0,0.06);
    --active-text: #111;

    --primary-bg: rgba(0,0,0,0.06);
    --primary-hover: rgba(0,0,0,0.08);
    --primary-text: var(--text);

    --toggle-bg: rgba(0,0,0,0.08);
    --toggle-color: #333;

    --shadow-lg: 0 6px 22px rgba(0,0,0,0.06);
    --shadow-md: 0 6px 14px rgba(0,0,0,0.06);
    --shadow-sm: 0 6px 14px rgba(0,0,0,0.06);

    --focus-outline: rgba(0,0,0,0.06);
    --page-surface: #eef3fb;
    /* chip defaults for light theme (fallback) */
    --chip-bg-default-fallback: #efefef; /* light gray background in light mode */
    --chip-text-default: #000000; /* text black in light mode */
    /* CV timeline and entry colors for light mode */
    --cv-line-start: rgba(0,0,0,0.12);
    --cv-line-end: rgba(0,0,0,0.06);
    --cv-entry-border: rgba(0,0,0,0.06);
    /* shot background in light mode */
    --shot-bg: rgba(0,0,0,0.04);
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    /* small nudge to account for rendering/zoom differences (Opera GX etc.) */
    transform: translateX(calc(-50% + 1px));
    background: var(--navbar-bg);
    backdrop-filter: blur(15px);
    border-radius: 999px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-lg);
}

.navbar a {
    text-decoration: none;
    color: var(--navbar-text);
    font-size: 14px;
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    /* Keep padding/height consistent so the navbar doesn't resize when active changes */
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}

.navbar a:hover {
    color: var(--link-hover);
}

.subtext {
    margin-top: 25px;
    color: var(--muted);
    font-size: 1.1rem;
}

.profile-line {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.primary-btn {
    background: var(--primary-bg);
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 500;
    text-decoration: none;
    color: var(--primary-text);
    transition: 0.3s ease;
}

.primary-btn:hover {
    background: var(--primary-hover);
}

/* Theme toggle (top-right) */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--toggle-bg);
    backdrop-filter: blur(15px);
    border-radius: 999px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--toggle-color);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.12s ease;
}

.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { display: block; width: 20px; height: 20px; }

/* Theme colors are provided via CSS custom properties in :root and html.light above. */

/* Scroll / Sections / Active link */
html {
    scroll-behavior: smooth;
    background: var(--bg);
    color: var(--text);
}

/* Ensure content is not hidden behind the fixed navbar */
main {
    padding-top: 120px;
}

section {
    min-height: 100vh;
    padding: 40px 20px 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.section-inner {
    width: 100%;
    max-width: 980px;
}

/* Skills chips (GitHub-like language badges) */
.skills-grid {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px; /* less rounded, more square */
    /* Use same frosted box style as the navbar (same color & transparency) */
    background: var(--navbar-bg);
    backdrop-filter: blur(15px);
    color: var(--navbar-text);
    border: none;
    cursor: default;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.08s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

button.skill-chip:hover,
button.skill-chip:focus {
    /* only interactive buttons should show hover/focus motion */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.skill-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    background: var(--chip-color, #ddd);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}

/* language-specific color variables (approx. GitHub Linguist colors) */
.lang-js { --chip-color: #f1e05a; --chip-bg: rgba(241,224,90,0.12); --chip-text: #000; }
.lang-python { --chip-color: #3572A5; --chip-bg: rgba(53,114,165,0.12); --chip-text: #fff; }
.lang-html { --chip-color: #e34c26; --chip-bg: rgba(227,76,38,0.12); --chip-text: #fff; }
.lang-css { --chip-color: #563d7c; --chip-bg: rgba(86,61,124,0.12); --chip-text: #fff; }
.lang-ts { --chip-color: #2b7489; --chip-bg: rgba(43,116,137,0.12); --chip-text: #fff; }
.lang-react { --chip-color: #61dafb; --chip-bg: rgba(97,218,251,0.12); --chip-text: #000; }
.lang-node { --chip-color: #68a063; --chip-bg: rgba(104,160,99,0.12); --chip-text: #000; }
.lang-rust { --chip-color: #dea584; --chip-bg: rgba(222,165,132,0.12); --chip-text: #000; }

/* Additional language colors for core/subskills */
.lang-java { --chip-color: #b07219; --chip-bg: rgba(176,114,25,0.12); --chip-text: #fff; }
.lang-unity { --chip-color: #000000; --chip-bg: rgba(0,0,0,0.12); --chip-text: #fff; }
.lang-windows { --chip-color: #00a4ef; --chip-bg: rgba(0,164,239,0.08); --chip-text: #000; }
.lang-csharp { --chip-color: #178600; --chip-bg: rgba(23,134,0,0.12); --chip-text: #fff; }
.lang-sql { --chip-color: #e38c00; --chip-bg: rgba(227,140,0,0.12); --chip-text: #000; }
.lang-msoffice { --chip-color: #d24726; --chip-bg: rgba(210,71,38,0.10); --chip-text: #fff; }
.lang-java-swing { --chip-color: #b07219; --chip-bg: rgba(176,114,25,0.08); --chip-text: #fff; }

/* layout for skill sections */
.skills-section {
    display: block;
}
.skills-section-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--muted);
}
.skills-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Projects */
.projects-container {
    margin-top: 18px;
    display: block;
    gap: 32px;
    padding-top: 30px;
}

.project-group {
    display: flex;
    gap: 24px;
    align-items: stretch; /* ensure left and right columns span the same group height */
    width: 100%;
    max-width: 980px; /* keep group constrained to the section width */
    margin: 0 auto; /* center the combined left+right content */
    padding-bottom: 30px;
}

.project-left { flex: 1; }
.project-right { flex: 0 0 320px; position: relative; display: flex; flex-direction: column; }

.shot {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 18px;
    overflow: hidden;
    padding-bottom: 12px;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.shot-caption {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--muted);
    text-align: center;
    width: 100%;
}

.project-panel {
    position: sticky;
    top: var(--nav-offset);
    align-self: flex-start; /* keep panel aligned to the top of the right column */
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* When a project-panel has .unstick, it should stop being sticky and scroll away */
/* Removed .project-panel.unstick; JS now animates sticky `top` inline to smoothly move panels away. */

.project-title { margin: 0 0 8px 0; font-size: 1.05rem; }
.project-link { text-decoration: none; color: var(--link-hover); font-size: 0.95rem; }
.project-desc { margin: 8px 0 0 0; color: var(--muted); }

@media (max-width: 880px) {
    .projects-container { flex-direction: column; }
    .projects-left, .projects-right { width: 100%; }
    .project-panel { position: static; top: auto; }
}

/* top-blur removed: overlay/blur handled by no CSS (removed) */

/* make navbar always on top */
.navbar { z-index: 1000; }

/* Sticky section headings (fix at nav offset while their section is in view) */
.stuck {
    position: fixed;
    z-index: 880; /* below navbar */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 20px; /* keep same left spacing as content */
    box-sizing: border-box;
}

.navbar a.active {
    background-color: var(--active-bg);
    color: var(--active-text);
    box-shadow: var(--shadow-md);
}

/* Improve focus visibility for keyboard users */
.navbar a:focus {
    outline: 2px solid var(--focus-outline);
}

/* Provide a scroll offset for in-page anchors in browsers that don't use scrollMarginTop from JS */
section {
    scroll-margin-top: 120px;
}

/* CV layout styles */
.cv-list { margin-top: 18px; position: relative; /* timeline variables */ --cv-left: 140px; --cv-dot-size: 16px; }
.cv-list h2 { margin: 18px 0 8px; font-size: 1.05rem; }

/* Timeline vertical line */
.cv-list::before {
    content: '';
    position: absolute;
    left: var(--cv-left); /* align with the right edge of the period column */
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--cv-line-start), var(--cv-line-end));
    border-radius: 2px;
}

/* (CV timeline colors are now controlled via variables in :root / html.light) */

.cv-entry {
    display: grid;
    grid-template-columns: var(--cv-left) 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--cv-entry-border);
    position: relative;
}

/* Intro block at the top of the CV: align visually with other CV entries */
.cv-intro {
    display: block;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--cv-entry-border);
    text-align: left; /* match About section alignment */
}

/* make the intro heading and list match the CV details styling */
.cv-intro .cv-details,
.cv-intro h2 {
    margin: 18px 0 8px; /* match .cv-list h2 spacing */
    font-size: 1.05rem; /* match .cv-list h2 size */
}

.cv-intro ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.cv-intro .cv-details {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: var(--muted);
}

.cv-period { color: var(--muted); font-weight: 600; }
.cv-details h3 { margin: 0 0 6px 0; font-size: 1rem; }
.cv-details ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* nested list inside CV details */
.cv-details ul.submodules { margin-top: 6px; padding-left: 18px; list-style-type: disc; }
.cv-details ul.submodules li { margin: 6px 0; color: var(--muted); font-size: 0.95rem; }

/* Marker dot on the timeline for each entry (removed) */
.cv-entry::before { display: none; }

@media (max-width: 880px) {
    .cv-list::before { display: none; }
    .cv-entry { display: block; padding-left: 0; }
    .cv-period { margin-bottom: 6px; }
    .cv-entry::before { display: none; }
    .cv-intro { display: block; padding-left: 0; }
    .cv-intro > * { grid-column: auto; }
}