:root {
    --bg-card: rgba(255, 255, 255, 1);
    --fg: #0d0d0d;
    --fg-dim: #5e5e5e;
    --border: #ebebeb;
    --accent: #1a52d5;
    --tag-bg: #f1f2f4;
    --tag-fg: #525252;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-card: rgba(26, 26, 30, 1);
        --fg: #f0f0f0;
        --fg-dim: #909090;
        --border: #2e2e2e;
        --accent: #5b8def;
        --tag-bg: #1f1f22;
        --tag-fg: #a0a0a0;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg-card: rgba(26, 26, 30, 0.95);
    --fg: #f0f0f0;
    --fg-dim: #909090;
    --border: #2e2e2e;
    --accent: #5b8def;
    --tag-bg: #1f1f22;
    --tag-fg: #a0a0a0;
    color-scheme: dark;
}

/* Reset & base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    min-height: 100%;
    background: #1d4a20;
    overflow-x: hidden;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 0;
}

/* Wallpaper bg */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    /*cursor: pointer;*/
}

.bg-img {
    position: absolute;
    inset: -6%;
    /* copyright friendly :), blurred version of the xp background */
    background: /* cloud puffs */ radial-gradient(ellipse 320px 110px at 20% 26%, rgba(255, 255, 255, .80) 0%, transparent 100%),
    radial-gradient(ellipse 200px 80px at 68% 18%, rgba(255, 255, 255, .70) 0%, transparent 100%),
    radial-gradient(ellipse 160px 65px at 52% 32%, rgba(255, 255, 255, .50) 0%, transparent 100%),
        /* hill dome */ radial-gradient(ellipse 160% 55% at 50% 115%,
            #4caf30 0%, #5cc838 20%, #6ad840 28%,
            transparent 78%
    ),
        /* sky */ linear-gradient(180deg,
            #1e5faa 0%,
            #3a80cc 18%,
            #5aa0de 38%,
            #82c0ee 58%,
            #aad8f4 74%,
            #c8ecfb 85%,
            #d8f0fb 100%
    );
    filter: blur(16px) brightness(0.68);
    transition: filter 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: filter;
}

.xp-active .bg-img {
    filter: blur(0px) brightness(1);
}

/* Page wrapper */
.page {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 52px 0 16px;
    transition: padding-bottom 0.35s ease;
    pointer-events: none;
}

.xp-active .page {
    padding-bottom: 70px;
}

/* Card / XP window */
.card {
    pointer-events: auto;
    width: 100%;
    max-width: 740px;
    background: var(--bg-card);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.13),
    0 24px 60px rgba(0, 0, 0, 0.18);
    transition: border-radius .35s ease,
    box-shadow .35s ease;
    will-change: transform;
}

.xp-active .card {
    border-radius: 8px 8px 3px 3px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0 0 2px #2262c8,
    0 0 0 3px #0a3ea0,
    0 0 0 4px rgba(160, 200, 255, .2),
    10px 12px 36px rgba(0, 0, 0, .65);
}

/* XP title bar */
.win-bar {
    height: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 4px 0 7px;
    gap: 5px;
    background: linear-gradient(180deg,
    #5cb8f0 0%, #3c9ae2 4%, #1878d2 10%,
    #0e6acc 50%, #0860be 88%, #3e98e2 100%);
    border-radius: 7px 7px 0 0;
    cursor: grab;
    user-select: none;
    transition: height .35s ease, opacity .22s ease;
    will-change: height, opacity;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.xp-active .win-bar {
    height: 30px;
    opacity: 1;
}

.win-bar:active {
    cursor: grabbing;
}

.win-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.title-bar-text {
    flex: 1;
    min-width: 0;
}

.win-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 4px;
}

.wbtn {
    width: 21px;
    height: 21px;
    border-radius: 3px;
    border: none;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-xp);
    transition: filter .1s;
}

.wbtn:hover {
    filter: brightness(1.25);
}

.wbtn:active {
    filter: brightness(.85);
    transform: scale(.95);
}

.wbtn-min, .wbtn-max {
    background: linear-gradient(180deg, #5eaadf 0%, #3c8aca 40%, #2c7ac0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .25);
}

.wbtn-max {
    opacity: .55;
    cursor: not-allowed;
}

.wbtn-close {
    background: linear-gradient(180deg, #dd5555 0%, #c02222 40%, #a81414 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .25);
    margin-left: 2px;
}

/* Card body */
.card-body {
    padding: 50px 56px;
    border-radius: inherit;
    transition: padding .32s ease, max-height .32s ease;
}

.xp-active .card-body {
    padding: 28px 44px 36px;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #b0cce0;
    max-height: calc(100vh - 106px);
    overflow-y: auto;
    overflow-x: hidden;
}

.xp-minimized .card-body {
    display: none;
}

/* XP scrollbar */
.xp-active .card-body::-webkit-scrollbar {
    width: 16px;
}

.xp-active .card-body::-webkit-scrollbar-track {
    background: #f0f0ea;
    border-left: 1px solid #ccc;
}

.xp-active .card-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8cce4, #aac0dc);
    border: 1px solid #8dacc8;
    border-radius: 2px;
}

/* Header */
header {
    margin-bottom: 40px;
}

.name {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--fg);
    line-height: 1.08;
    margin-bottom: 14px;
}

.name span {
    color: var(--accent);
    font-weight: 400;
}

.bio {
    font-size: .9375rem;
    color: var(--fg-dim);
    line-height: 1.68;
}

.bio + .bio {
    margin-top: 2px;
}

.bio-link {
    color: var(--accent);
    text-underline-offset: 2px;
}

/* Section label */
.section-label {
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #c4c4c4;
    margin: 40px 0 14px;
}

/* Projects */
.project {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.project:last-child {
    border-bottom: none;
}

.project-left {
    flex: 1;
    min-width: 0;
}

.project-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 7px;
}

a.project-title {
    color: var(--accent);
    text-decoration: none;
}

a.project-title:hover {
    text-decoration: underline;
}

.project-desc {
    font-size: .875rem;
    color: var(--fg-dim);
    line-height: 1.62;
    margin-bottom: 4px;
}

.project-desc:last-of-type {
    margin-bottom: 0;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.tag {
    font-size: .69rem;
    font-weight: 600;
    background: var(--tag-bg);
    color: var(--tag-fg);
    padding: 3px 8px;
    border-radius: 5px;
}

.project-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 1px;
}

.link {
    font-size: .84rem;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.link:hover {
    text-decoration: underline;
}

.link-arrow {
    opacity: .6;
}

.recording-light {
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    flex-shrink: 0;
    animation: blink 2.2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
}

/* Footer */
footer {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.footer-link {
    font-size: .84rem;
    color: #aaa;
    text-decoration: none;
    transition: color .14s;
}

.footer-link:hover {
    color: var(--fg);
}

/* Taskbar */
.taskbar {
    position: fixed;
    inset: auto 0 0 0;
    height: 38px;
    z-index: 1000;
    display: flex;
    align-items: center;
    pointer-events: auto;
    background: linear-gradient(180deg, #2a72ce 0%, #2468c8 2px, #2060be 50%, #1a58b6 100%);
    border-top: 1px solid #5292e0;
    box-shadow: 0 -1px 0 #0838a0, 0 -6px 18px rgba(0, 0, 0, .22);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.xp-active .taskbar {
    transform: translateY(0);
}

/* Start button */
.start-btn {
    height: 32px;
    padding: 0 14px 0 9px;
    margin: 0 3px;
    background: linear-gradient(180deg, #68d05e 0%, #4aba3c 28%, #3caa28 65%, #309020 100%);
    border: 1px solid #1a6010;
    border-radius: 0 12px 12px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 4px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-xp);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
    transition: filter .1s;
}

.start-btn:hover {
    filter: brightness(1.1);
}

.start-btn:active {
    filter: brightness(.88);
}

body:not(.xp-active) .start-btn {
    animation: startGlow 4s ease-in-out infinite 2.5s;
}

@keyframes startGlow {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 4px rgba(0, 0, 0, .3);
    }
    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 20px rgba(90, 220, 70, .72), 0 1px 4px rgba(0, 0, 0, .3);
    }
}

.taskbar-mid {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 6px;
    height: 100%;
}

/* Window chip */
.win-chip {
    display: none;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 12px;
    background: rgba(0, 36, 110, .48);
    border: 1px solid rgba(120, 170, 255, .26);
    border-radius: 2px;
    color: #d8eeff;
    font-family: var(--font-xp);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    max-width: 300px;
    text-overflow: ellipsis;
    transition: background .12s;
}

.win-chip:hover {
    background: rgba(0, 55, 150, .65);
}

.xp-active .win-chip {
    display: flex;
}

/* Clock tray */
.taskbar-tray {
    height: 100%;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: rgba(0, 0, 0, .1);
    border-left: 1px solid rgba(255, 255, 255, .07);
    color: #cce0f8;
    font-family: var(--font-xp);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Desktop icons (XP mode only) */
.d-icon {
    position: fixed;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 74px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
    user-select: none;
}

.d-icon-2 {

}

.xp-active .d-icon {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.d-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.d-icon span {
    color: #fff;
    font-size: 11px;
    font-family: var(--font-xp);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .5);
    line-height: 1.3;
}

.icon-cat {
    bottom: 48px;
    right: 22px;
    transition-delay: .45s;
}

.icon-disco {
    bottom: 162px;
    right: 22px;
    transition-delay: .62s;
}

.icon-recycle {
    top: 48px;
    right: 22px;
    transition-delay: .62s;
}

/* Disco */
.disco-ball-overlay {
    position: fixed;
    top: 14px;
    left: 10%;
    transform: translateX(-50%);
    z-index: 900;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

body.disco-mode .disco-ball-overlay {
    opacity: 1;
}

.bg-disco {
    position: absolute;
    inset: -6%;
    opacity: 0;
    transition: opacity 0.8s ease;
    animation: discoHue 6s linear infinite;
    background: linear-gradient(180deg, #1e5faa, #82c0ee);
    mix-blend-mode: hue;
}

body.disco-mode .bg-disco {
    opacity: 1;
}

@keyframes discoHue {
    0% {
        filter: blur(0px) brightness(0.7) hue-rotate(0deg);
    }
    25% {
        filter: blur(0px) brightness(0.7) hue-rotate(90deg);
    }
    50% {
        filter: blur(0px) brightness(0.7) hue-rotate(180deg);
    }
    75% {
        filter: blur(0px) brightness(0.7) hue-rotate(270deg);
    }
    100% {
        filter: blur(0px) brightness(0.7) hue-rotate(360deg);
    }
}

@keyframes discoHueBlur {
    0% {
        filter: blur(16px) brightness(0.7) hue-rotate(0deg);
    }
    25% {
        filter: blur(16px) brightness(0.7) hue-rotate(90deg);
    }
    50% {
        filter: blur(16px) brightness(0.7) hue-rotate(180deg);
    }
    75% {
        filter: blur(16px) brightness(0.7) hue-rotate(270deg);
    }
    100% {
        filter: blur(0px) brightness(0.7) hue-rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 620px) {
    .card-body {
        padding: 32px 22px;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }

    .xp-active .card-body {
        padding: 20px 18px 28px;
    }

    .project {
        flex-direction: column;
        gap: 12px;
    }

    .project-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .icon-cat, .icon-disco {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/*  Cat.gif  */
.cat-popup {
    position: fixed;
    bottom: 48px;
    right: 22px;
    z-index: 800;
    width: 200px;
    opacity: 0;
    pointer-events: none;
}

.cat-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.xp-active .cat-popup {
    bottom: 86px;
}

/*  Recycle bin  */
.recycle-popup {
    opacity: 0;
    pointer-events: none;
}

.recycle-popup.visible {
    opacity: 1;
    pointer-events: auto;
}