/* =================================================================
   simulai.dev // pixel-art / portfolio-grid / spring / aurora
   Palette:
     #1A1A2E  desktop wallpaper (deep indigo)
     #F4F0E8  window body (warm off-white)
     #E040A0  primary magenta
     #40E0B0  complementary teal
     #FFD93D  arcade yellow
     #FF6B6B  pixel red
     #A0FFD0  bright mint text-on-dark
     #2A2A3A  deep navy text-on-light
     Extras: #8A8AAA (window hi-light), #1A1A2A (hard shadow), #6BCB77 (traffic-light green)
   Fonts: Silkscreen (display), Press Start 2P (labels), Chakra Petch (body)
   ================================================================= */

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

:root {
    --bg: #1A1A2E;
    --win-body: #F4F0E8;
    --magenta: #E040A0;
    --teal: #40E0B0;
    --yellow: #FFD93D;
    --red: #FF6B6B;
    --mint: #A0FFD0;
    --navy: #2A2A3A;
    --hi: #8A8AAA;
    --hard-shadow: #1A1A2A;
    --green: #6BCB77;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body { height: 100%; }

body {
    background: #1A1A2E;
    color: #A0FFD0;
    font-family: "Chakra Petch", "Courier New", monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 56px; /* room for taskbar */
}

img { max-width: 100%; display: block; }

/* ============ BACKGROUND LAYERS ============ */

.wallpaper-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 20% 25%, rgba(224, 64, 160, 0.22), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 30%, rgba(64, 224, 176, 0.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 90%, rgba(255, 217, 61, 0.10), transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(255, 107, 107, 0.12), transparent 40%),
        conic-gradient(from 210deg at 60% 60%, rgba(160, 255, 208, 0.05), rgba(224, 64, 160, 0.07), rgba(64, 224, 176, 0.06), rgba(160, 255, 208, 0.05));
    filter: saturate(1.1);
}

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.aurora-band {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 22%;
    filter: blur(28px);
    opacity: 0.9;
    mix-blend-mode: screen;
}
.aurora-band.band-1 {
    top: 10%;
    background: linear-gradient(90deg, transparent, rgba(224, 64, 160, 0.35), transparent);
    animation: aurora-drift 12s var(--spring) infinite alternate;
}
.aurora-band.band-2 {
    top: 32%;
    background: linear-gradient(90deg, transparent, rgba(64, 224, 176, 0.30), transparent);
    animation: aurora-drift 14s var(--spring) infinite alternate;
    animation-delay: -3s;
}
.aurora-band.band-3 {
    top: 58%;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 61, 0.22), transparent);
    animation: aurora-drift 16s var(--spring) infinite alternate;
    animation-delay: -6s;
}
.aurora-band.band-4 {
    top: 78%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.22), transparent);
    animation: aurora-drift 18s var(--spring) infinite alternate;
    animation-delay: -9s;
}

@keyframes aurora-drift {
    0%   { transform: translate3d(-4%, -20px, 0) scaleY(0.9); }
    50%  { transform: translate3d(3%, 15px, 0) scaleY(1.1); }
    100% { transform: translate3d(-2%, 25px, 0) scaleY(0.95); }
}

.pixel-grid {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(160, 255, 208, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(160, 255, 208, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0.05) 1px,
        rgba(0, 0, 0, 0.05) 2px
    );
    mix-blend-mode: multiply;
}

/* ============ SPRITES (CSS pixel art) ============ */

.sprite-field {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.sprite {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: sprite-float 6s var(--spring) infinite alternate;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}
.sprite-heart {
    background: transparent;
    box-shadow:
        3px 0 0 #FF6B6B, 6px 0 0 #FF6B6B, 12px 0 0 #FF6B6B, 15px 0 0 #FF6B6B,
        0 3px 0 #FF6B6B, 3px 3px 0 #FFD93D, 6px 3px 0 #FF6B6B, 9px 3px 0 #FF6B6B,
        12px 3px 0 #FF6B6B, 15px 3px 0 #FFD93D, 18px 3px 0 #FF6B6B,
        3px 6px 0 #FF6B6B, 6px 6px 0 #FF6B6B, 9px 6px 0 #FF6B6B, 12px 6px 0 #FF6B6B, 15px 6px 0 #FF6B6B,
        6px 9px 0 #FF6B6B, 9px 9px 0 #FF6B6B, 12px 9px 0 #FF6B6B,
        9px 12px 0 #FF6B6B;
    width: 3px;
    height: 3px;
}
.sprite-star {
    background: transparent;
    box-shadow:
        9px 0 0 #FFD93D,
        6px 3px 0 #FFD93D, 9px 3px 0 #FFD93D, 12px 3px 0 #FFD93D,
        0 6px 0 #FFD93D, 3px 6px 0 #FFD93D, 6px 6px 0 #FFD93D, 9px 6px 0 #FFD93D, 12px 6px 0 #FFD93D, 15px 6px 0 #FFD93D, 18px 6px 0 #FFD93D,
        3px 9px 0 #FFD93D, 6px 9px 0 #FFD93D, 9px 9px 0 #FFD93D, 12px 9px 0 #FFD93D, 15px 9px 0 #FFD93D,
        6px 12px 0 #FFD93D, 12px 12px 0 #FFD93D,
        3px 15px 0 #FFD93D, 15px 15px 0 #FFD93D;
    width: 3px;
    height: 3px;
}
.sprite-gem {
    background: transparent;
    box-shadow:
        3px 0 0 #40E0B0, 6px 0 0 #A0FFD0, 9px 0 0 #40E0B0, 12px 0 0 #40E0B0,
        0 3px 0 #40E0B0, 3px 3px 0 #A0FFD0, 6px 3px 0 #A0FFD0, 9px 3px 0 #40E0B0, 12px 3px 0 #40E0B0, 15px 3px 0 #40E0B0,
        3px 6px 0 #40E0B0, 6px 6px 0 #40E0B0, 9px 6px 0 #40E0B0, 12px 6px 0 #40E0B0,
        6px 9px 0 #40E0B0, 9px 9px 0 #40E0B0;
    width: 3px;
    height: 3px;
}
.sprite-arrow {
    background: transparent;
    box-shadow:
        12px 0 0 #E040A0,
        9px 3px 0 #E040A0, 12px 3px 0 #E040A0,
        0 6px 0 #E040A0, 3px 6px 0 #E040A0, 6px 6px 0 #E040A0, 9px 6px 0 #E040A0, 12px 6px 0 #E040A0,
        9px 9px 0 #E040A0, 12px 9px 0 #E040A0,
        12px 12px 0 #E040A0;
    width: 3px;
    height: 3px;
}
.sprite-key {
    background: transparent;
    box-shadow:
        3px 0 0 #FFD93D, 6px 0 0 #FFD93D,
        0 3px 0 #FFD93D, 9px 3px 0 #FFD93D,
        3px 6px 0 #FFD93D, 6px 6px 0 #FFD93D,
        6px 9px 0 #FFD93D,
        6px 12px 0 #FFD93D, 9px 12px 0 #FFD93D,
        6px 15px 0 #FFD93D;
    width: 3px;
    height: 3px;
}

@keyframes sprite-float {
    from { transform: translate3d(0, 0, 0) rotate(-4deg); }
    to   { transform: translate3d(0, -18px, 0) rotate(6deg); }
}

/* ============ DESKTOP GRID OF WINDOWS ============ */

.desktop {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.window {
    position: relative;
    z-index: var(--z, 1);
    background: #F4F0E8;
    border: 2px solid #2A2A3A;
    border-top-color: #8A8AAA;
    border-left-color: #8A8AAA;
    box-shadow: 4px 4px 0 #1A1A2A;
    color: #2A2A3A;
    transform: translateY(40px) rotate(var(--tilt, 0deg));
    opacity: 0;
    transition:
        transform 0.7s var(--spring),
        opacity 0.7s ease,
        box-shadow 0.35s var(--spring),
        margin 0.35s var(--spring);
    margin-top: var(--lift, 0px);
    will-change: transform, box-shadow;
}
.window.in {
    transform: translateY(0) rotate(var(--tilt, 0deg));
    opacity: 1;
}
.window.wide { grid-column: 1 / -1; }

.window:hover {
    transform: translateY(-3px) rotate(var(--tilt, 0deg));
    box-shadow: 6px 6px 0 #1A1A2A;
}
.window.dragging {
    transform: translateY(-4px) rotate(var(--tilt, 0deg));
    box-shadow: 8px 8px 0 #1A1A2A;
}

.window-chrome {
    height: 24px;
    background: #E040A0;
    border-bottom: 2px solid #2A2A3A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-family: "Press Start 2P", "Silkscreen", monospace;
    font-size: 10px;
    color: #F4F0E8;
    cursor: grab;
    user-select: none;
    text-shadow: 1px 1px 0 #1A1A2A;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 30%, rgba(0,0,0,0) 100%),
        repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,0.08) 3px 4px);
}
.window-chrome.chrome-alt {
    background: #40E0B0;
    color: #2A2A3A;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}
.window-chrome:active { cursor: grabbing; }

.window-title {
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
}
.window-controls {
    display: inline-flex;
    gap: 4px;
}
.ctrl {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #2A2A3A;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.35), inset 1px 1px 0 rgba(255,255,255,0.35);
}
.ctrl-red    { background: #FF6B6B; }
.ctrl-yellow { background: #FFD93D; }
.ctrl-green  { background: #6BCB77; }

.window-body {
    padding: 16px;
    color: #2A2A3A;
    font-family: "Chakra Petch", "Courier New", monospace;
    font-size: 15px;
    line-height: 1.6;
}

.window-body p + p { margin-top: 10px; }

/* HERO WINDOW */
.window-hero { grid-column: 1 / -1; }
.window-body-hero {
    position: relative;
    padding: 20px 20px 24px;
    background:
        radial-gradient(circle at 85% 20%, rgba(224, 64, 160, 0.08), transparent 50%),
        radial-gradient(circle at 15% 90%, rgba(64, 224, 176, 0.08), transparent 50%),
        #F4F0E8;
    overflow: hidden;
}

.preline {
    font-family: "Press Start 2P", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #E040A0;
    margin-bottom: 18px;
}
.blink {
    display: inline-block;
    animation: blink 1.05s steps(2, end) infinite;
    color: #E040A0;
    margin-left: 2px;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-title {
    font-family: "Silkscreen", "Press Start 2P", monospace;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 0.95;
    color: #2A2A3A;
    margin-bottom: 14px;
    text-shadow:
        3px 3px 0 #40E0B0,
        6px 6px 0 #E040A0;
}

.hero-sub {
    max-width: 52ch;
    font-size: 17px;
    margin-bottom: 18px;
    color: #2A2A3A;
}

.hero-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tag {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    padding: 6px 8px;
    border: 2px solid #2A2A3A;
    box-shadow: 2px 2px 0 #1A1A2A;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}
.tag-magenta { background: #E040A0; color: #F4F0E8; text-shadow: 1px 1px 0 #1A1A2A; }
.tag-teal    { background: #40E0B0; color: #2A2A3A; }
.tag-yellow  { background: #FFD93D; color: #2A2A3A; }

/* Pixel mascot (CSS sprite robot) */
.pixel-mascot {
    position: absolute;
    right: 28px;
    bottom: 20px;
    width: 120px;
    height: 140px;
    pointer-events: none;
    animation: mascot-bob 2.6s var(--spring) infinite alternate;
}
.mascot-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    /* build robot from box-shadows: head, antenna, eyes, body, arms, legs */
    box-shadow:
        /* antenna */
        56px 0 0 #FF6B6B,
        56px 8px 0 #FFD93D,
        /* head top */
        32px 16px 0 #8A8AAA, 40px 16px 0 #8A8AAA, 48px 16px 0 #8A8AAA, 56px 16px 0 #8A8AAA, 64px 16px 0 #8A8AAA, 72px 16px 0 #8A8AAA, 80px 16px 0 #8A8AAA,
        /* head sides */
        24px 24px 0 #8A8AAA, 32px 24px 0 #2A2A3A, 40px 24px 0 #F4F0E8, 48px 24px 0 #40E0B0, 56px 24px 0 #2A2A3A, 64px 24px 0 #40E0B0, 72px 24px 0 #F4F0E8, 80px 24px 0 #2A2A3A, 88px 24px 0 #8A8AAA,
        24px 32px 0 #8A8AAA, 32px 32px 0 #2A2A3A, 40px 32px 0 #E040A0, 48px 32px 0 #E040A0, 56px 32px 0 #2A2A3A, 64px 32px 0 #E040A0, 72px 32px 0 #E040A0, 80px 32px 0 #2A2A3A, 88px 32px 0 #8A8AAA,
        24px 40px 0 #8A8AAA, 32px 40px 0 #2A2A3A, 40px 40px 0 #2A2A3A, 48px 40px 0 #2A2A3A, 56px 40px 0 #2A2A3A, 64px 40px 0 #2A2A3A, 72px 40px 0 #2A2A3A, 80px 40px 0 #2A2A3A, 88px 40px 0 #8A8AAA,
        32px 48px 0 #8A8AAA, 40px 48px 0 #8A8AAA, 48px 48px 0 #8A8AAA, 56px 48px 0 #8A8AAA, 64px 48px 0 #8A8AAA, 72px 48px 0 #8A8AAA, 80px 48px 0 #8A8AAA,
        /* neck */
        48px 56px 0 #2A2A3A, 56px 56px 0 #2A2A3A, 64px 56px 0 #2A2A3A,
        /* body */
        16px 64px 0 #E040A0, 24px 64px 0 #E040A0, 32px 64px 0 #E040A0, 40px 64px 0 #E040A0, 48px 64px 0 #E040A0, 56px 64px 0 #F4F0E8, 64px 64px 0 #E040A0, 72px 64px 0 #E040A0, 80px 64px 0 #E040A0, 88px 64px 0 #E040A0, 96px 64px 0 #E040A0,
        16px 72px 0 #E040A0, 24px 72px 0 #40E0B0, 32px 72px 0 #E040A0, 40px 72px 0 #E040A0, 48px 72px 0 #E040A0, 56px 72px 0 #FFD93D, 64px 72px 0 #E040A0, 72px 72px 0 #E040A0, 80px 72px 0 #E040A0, 88px 72px 0 #40E0B0, 96px 72px 0 #E040A0,
        16px 80px 0 #E040A0, 24px 80px 0 #E040A0, 32px 80px 0 #E040A0, 40px 80px 0 #E040A0, 48px 80px 0 #E040A0, 56px 80px 0 #F4F0E8, 64px 80px 0 #E040A0, 72px 80px 0 #E040A0, 80px 80px 0 #E040A0, 88px 80px 0 #E040A0, 96px 80px 0 #E040A0,
        16px 88px 0 #E040A0, 24px 88px 0 #E040A0, 32px 88px 0 #E040A0, 40px 88px 0 #E040A0, 48px 88px 0 #E040A0, 56px 88px 0 #E040A0, 64px 88px 0 #E040A0, 72px 88px 0 #E040A0, 80px 88px 0 #E040A0, 88px 88px 0 #E040A0, 96px 88px 0 #E040A0,
        /* legs */
        32px 96px 0 #2A2A3A, 40px 96px 0 #2A2A3A,
        72px 96px 0 #2A2A3A, 80px 96px 0 #2A2A3A,
        32px 104px 0 #2A2A3A, 40px 104px 0 #2A2A3A,
        72px 104px 0 #2A2A3A, 80px 104px 0 #2A2A3A,
        24px 112px 0 #8A8AAA, 32px 112px 0 #2A2A3A, 40px 112px 0 #2A2A3A, 48px 112px 0 #8A8AAA,
        64px 112px 0 #8A8AAA, 72px 112px 0 #2A2A3A, 80px 112px 0 #2A2A3A, 88px 112px 0 #8A8AAA;
}
.mascot-shadow {
    position: absolute;
    left: 16px;
    bottom: 0;
    width: 88px;
    height: 6px;
    background: rgba(26, 26, 42, 0.35);
    filter: blur(3px);
    animation: shadow-bob 2.6s var(--spring) infinite alternate;
}
@keyframes mascot-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}
@keyframes shadow-bob {
    from { transform: scaleX(1); opacity: 0.5; }
    to   { transform: scaleX(0.82); opacity: 0.3; }
}

/* ============ SECTION WINDOWS ============ */

.window-heading {
    font-family: "Silkscreen", "Press Start 2P", monospace;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    color: #2A2A3A;
    margin: 12px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px dashed #E040A0;
}

/* Gradient-mesh image previews */
.mesh-preview {
    width: 100%;
    height: 180px;
    border: 2px solid #2A2A3A;
    box-shadow: 3px 3px 0 #1A1A2A;
    background-size: 200% 200%;
    animation: mesh-shift 8s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}
.mesh-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 8px 8px;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.mesh-garden {
    background-image:
        radial-gradient(circle at 20% 30%, #40E0B0, transparent 50%),
        radial-gradient(circle at 80% 40%, #FFD93D, transparent 55%),
        radial-gradient(circle at 50% 80%, #E040A0, transparent 55%),
        linear-gradient(135deg, #A0FFD0, #40E0B0);
}
.mesh-neon {
    height: 220px;
    background-image:
        conic-gradient(from 180deg at 50% 100%, #E040A0, #FFD93D, #40E0B0, #E040A0),
        radial-gradient(circle at 50% 100%, #FFD93D, transparent 40%),
        linear-gradient(to bottom, #1A1A2E 0%, #2A2A3A 50%, #E040A0 100%);
    background-blend-mode: screen, normal, normal;
}
@keyframes mesh-shift {
    from { background-position: 0% 0%; }
    to   { background-position: 100% 100%; }
}

/* grid-two: image + copy side by side */
.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.grid-two-copy p + p { margin-top: 10px; }

.stat-line {
    list-style: none;
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stat-line li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1A1A2E;
    color: #A0FFD0;
    border: 2px solid #2A2A3A;
    box-shadow: 2px 2px 0 #E040A0;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
}
.stat-line .lk { color: #FFD93D; }
.stat-line .lv { color: #A0FFD0; }

.mono-note {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: #E040A0;
    padding: 6px 8px;
    background: #1A1A2E;
    color: #40E0B0;
    border: 2px solid #2A2A3A;
    box-shadow: 2px 2px 0 #E040A0;
    margin: 10px 0;
    display: inline-block;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    font-family: "Chakra Petch", monospace;
    font-weight: 600;
    font-size: 13px;
    padding: 3px 10px;
    background: #FFD93D;
    color: #2A2A3A;
    border: 2px solid #2A2A3A;
    box-shadow: 2px 2px 0 #1A1A2A;
}
.chip:nth-child(2) { background: #40E0B0; }
.chip:nth-child(3) { background: #E040A0; color: #F4F0E8; text-shadow: 1px 1px 0 #1A1A2A; }
.chip:nth-child(4) { background: #FF6B6B; color: #F4F0E8; text-shadow: 1px 1px 0 #1A1A2A; }

/* LOG window */
.log-body {
    background:
        repeating-linear-gradient(to bottom, #F4F0E8 0 22px, #E8E3D8 22px 24px);
    padding: 14px 16px;
}
.log-line {
    font-family: "Chakra Petch", monospace;
    font-size: 14px;
    line-height: 24px;
    color: #2A2A3A;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.log-line + .log-line { margin-top: 0; }
.log-stamp {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    color: #E040A0;
    padding: 2px 4px;
    background: #1A1A2E;
    border: 1px solid #2A2A3A;
    box-shadow: 1px 1px 0 #E040A0;
    flex-shrink: 0;
}

/* ENGINE window */
.spec-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin-top: 10px;
    padding: 12px;
    background: #1A1A2E;
    color: #A0FFD0;
    border: 2px solid #2A2A3A;
    box-shadow: 3px 3px 0 #40E0B0;
}
.spec-list dt {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    color: #FFD93D;
    letter-spacing: 0.08em;
    padding-top: 2px;
}
.spec-list dd {
    font-family: "Chakra Petch", monospace;
    font-size: 14px;
    color: #A0FFD0;
}

.progress-pixel {
    margin-top: 14px;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 10px;
}
.progress-label, .progress-pct {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #2A2A3A;
}
.progress-track {
    height: 16px;
    background: #1A1A2E;
    border: 2px solid #2A2A3A;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background-image:
        linear-gradient(90deg, #E040A0 0 50%, #FFD93D 50% 100%),
        repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.15) 6px 8px);
    background-blend-mode: multiply;
    transition: width 0.5s var(--spring);
}

/* INBOX window */
.inbox-list {
    list-style: none;
    margin-top: 12px;
    display: grid;
    gap: 6px;
}
.inbox-list li {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    background: #1A1A2E;
    border: 2px solid #2A2A3A;
    box-shadow: 2px 2px 0 #FFD93D;
}
.inbox-list .lk {
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    color: #FFD93D;
    letter-spacing: 0.08em;
}
.inbox-list .lv {
    font-family: "Chakra Petch", monospace;
    font-size: 14px;
    color: #A0FFD0;
}

/* Per-window chrome recolors */
.window-hero .window-chrome  { background: #E040A0; color: #F4F0E8; }
.window-sim  .window-chrome  { background: #40E0B0; color: #2A2A3A; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }
.window-log  .window-chrome  { background: #FFD93D; color: #2A2A3A; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }
.window-engine .window-chrome{ background: #2A2A3A; color: #A0FFD0; text-shadow: 1px 1px 0 #000; }
.window-inbox .window-chrome { background: #FF6B6B; color: #F4F0E8; }

/* ============ TASKBAR + START MENU ============ */

.taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: #2A2A3A;
    border-top: 2px solid #8A8AAA;
    box-shadow: 0 -4px 0 #1A1A2A;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    z-index: 50;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    color: #A0FFD0;
}

.start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #40E0B0;
    color: #2A2A3A;
    border: 2px solid #2A2A3A;
    border-top-color: #A0FFD0;
    border-left-color: #A0FFD0;
    box-shadow: 2px 2px 0 #1A1A2A;
    padding: 4px 10px;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}
.start-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #1A1A2A;
}
.start-btn:active,
.start-btn.active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #1A1A2A;
    background: #E040A0;
    color: #F4F0E8;
}
.start-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #FFD93D;
    box-shadow:
        0 -4px 0 #FF6B6B,
        4px 0 0 #E040A0,
        0 4px 0 #40E0B0,
        -4px 0 0 #6BCB77;
}

.taskbar-clock {
    background: #1A1A2E;
    color: #40E0B0;
    border: 2px inset #8A8AAA;
    padding: 4px 8px;
    letter-spacing: 0.1em;
}
.taskbar-spacer { flex: 1; }

.taskbar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1A1A2E;
    border: 2px inset #8A8AAA;
    color: #A0FFD0;
}
.led {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: led-blink 1.8s steps(2, end) infinite;
}
.led-green {
    background: #6BCB77;
    box-shadow: 0 0 6px #6BCB77, inset -1px -1px 0 rgba(0,0,0,0.4);
}
@keyframes led-blink {
    0%, 70% { opacity: 1; }
    71%, 100% { opacity: 0.45; }
}

.start-menu {
    position: fixed;
    left: 10px;
    bottom: 48px;
    width: 280px;
    background: #F4F0E8;
    border: 2px solid #2A2A3A;
    border-top-color: #8A8AAA;
    border-left-color: #8A8AAA;
    box-shadow: 4px 4px 0 #1A1A2A;
    z-index: 55;
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s var(--spring), opacity 0.25s ease;
    font-family: "Chakra Petch", monospace;
}
.start-menu.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.start-menu-head {
    background: linear-gradient(90deg, #E040A0, #40E0B0);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #2A2A3A;
    color: #F4F0E8;
    text-shadow: 1px 1px 0 #1A1A2A;
}
.menu-brand {
    font-family: "Silkscreen", monospace;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.menu-sub {
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.menu-list { list-style: none; padding: 6px 0; }
.menu-list li { margin: 0; }
.menu-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    font-family: "Press Start 2P", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #2A2A3A;
    border-left: 4px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--spring);
}
.menu-list a:hover {
    background: #40E0B0;
    border-left-color: #E040A0;
    transform: translateX(4px);
}
.mi {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.mi-heart { background: #FF6B6B; clip-path: polygon(50% 100%, 0 35%, 15% 15%, 35% 15%, 50% 35%, 65% 15%, 85% 15%, 100% 35%); }
.mi-star  { background: #FFD93D; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mi-gem   { background: #40E0B0; clip-path: polygon(50% 0, 100% 30%, 80% 100%, 20% 100%, 0 30%); }
.mi-arrow { background: #E040A0; clip-path: polygon(0 35%, 60% 35%, 60% 15%, 100% 50%, 60% 85%, 60% 65%, 0 65%); }
.mi-key   { background: #FFD93D; clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 100% 70%, 70% 70%, 70% 90%, 55% 90%, 55% 70%, 30% 70%); }

.menu-foot {
    border-top: 2px solid #2A2A3A;
    padding: 8px 12px;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: #E040A0;
    letter-spacing: 0.08em;
    background: #1A1A2E;
    text-align: center;
}

/* Highlight pulse when a window is navigated to */
.window.flash {
    animation: flash-glow 1.2s var(--spring) 1;
}
@keyframes flash-glow {
    0%   { box-shadow: 4px 4px 0 #1A1A2A, 0 0 0 0 rgba(255, 217, 61, 0); }
    30%  { box-shadow: 8px 8px 0 #1A1A2A, 0 0 0 8px rgba(255, 217, 61, 0.55); }
    100% { box-shadow: 4px 4px 0 #1A1A2A, 0 0 0 0 rgba(255, 217, 61, 0); }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 780px) {
    .desktop {
        grid-template-columns: 1fr;
        padding: 32px 14px 120px;
    }
    .window, .window.wide { grid-column: 1 / -1; margin-top: 0; }
    .grid-two { grid-template-columns: 1fr; }
    .pixel-mascot { position: relative; right: auto; bottom: auto; margin: 18px auto 0; }
    .hero-title { text-shadow: 2px 2px 0 #40E0B0, 4px 4px 0 #E040A0; }
    .start-menu { width: calc(100vw - 20px); }
    .taskbar-status { display: none; }
}