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

        :root {
            --bg:        #0d0d0f;
            --surface:   #131316;
            --surface2:  #1a1a1e;
            --border:    #242428;
            --text:      #cdd6f4;
            --dim:       #585b70;
            --dimmer:    #313244;
            --green:     #a6e3a1;
            --green-b:   #00ff7f;
            --blue:      #89b4fa;
            --cyan:      #89dceb;
            --yellow:    #f9e2af;
            --red:       #f38ba8;
            --mauve:     #cba6f7;
            --peach:     #fab387;
        }

        html { scroll-behavior: smooth; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
            font-size: 14px;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--dim); }


        /* ══════════════════════════════════════════
           BOOT SCREEN
        ══════════════════════════════════════════ */
        #boot {
            position: fixed;
            inset: 0;
            background: #000;
            color: #a0a0a0;
            font-family: inherit;
            font-size: 13px;
            line-height: 1.35;
            padding: 14px 20px;
            overflow-y: scroll;
            scrollbar-width: none;
            z-index: 9999;
            transition: opacity 0.9s ease;
        }
        #boot::-webkit-scrollbar { display: none; }
        #boot.fade-out { opacity: 0; pointer-events: none; }

        .bl { margin-bottom: 1px; }
        .b-ok   { color: #22c55e; font-weight: bold; }
        .b-info { color: #3b82f6; }
        .b-warn { color: #eab308; }
        .b-err  { color: #f43f5e; }
        .b-dim  { color: #444; }
        .b-w    { color: #fff; }
        .b-cy   { color: #06b6d4; }
        .b-mv   { color: #a78bfa; }

        #boot-cursor {
            display: inline-block;
            width: 8px; height: 14px;
            background: #ccc;
            animation: blink 1s step-end infinite;
            vertical-align: text-bottom;
        }


        /* ══════════════════════════════════════════
           PORTFOLIO WRAPPER
        ══════════════════════════════════════════ */
        #portfolio {
            opacity: 0;
            transition: opacity 1.1s ease 0.3s;
        }
        #portfolio.visible { opacity: 1; }


        /* ── Nav ── */
        nav {
            position: sticky;
            top: 0;
            background: rgba(13,13,15,0.92);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 10px 32px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 200;
        }

        .nav-ps { color: var(--green); white-space: nowrap; user-select: none; }
        .nav-ps .at  { color: var(--dim); }
        .nav-ps .dir { color: var(--blue); }

        .nav-links {
            display: flex;
            list-style: none;
            margin-left: 8px;
            gap: 2px;
        }
        .nav-links a {
            color: var(--dim);
            text-decoration: none;
            padding: 3px 10px;
            border-radius: 3px;
            font-size: 12px;
            transition: color 0.15s, background 0.15s;
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--text);
            background: var(--surface2);
        }

        .nav-clock {
            margin-left: auto;
            color: var(--dim);
            font-size: 12px;
        }


        /* ── Hero ── */
        #hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 64px;
            position: relative;
            overflow: hidden;
        }

        /* CRT scanlines */
        #hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.06) 2px,
                rgba(0,0,0,0.06) 4px
            );
            pointer-events: none;
            z-index: 0;
        }

        /* Ambient glow */
        #hero::after {
            content: '';
            position: absolute;
            top: 30%; left: 0;
            width: 600px; height: 600px;
            background: radial-gradient(ellipse at center,
                rgba(139,180,250,0.04) 0%,
                transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .hero-inner { position: relative; z-index: 1; }

        .hero-tag {
            color: var(--dim);
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        /* Glitch name */
        .hero-name {
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight: 700;
            color: var(--text);
            line-height: 1;
            display: inline-block;
            position: relative;
        }
        .hero-name::before,
        .hero-name::after {
            content: attr(data-text);
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            font-size: inherit;
            font-weight: inherit;
        }
        .hero-name::before {
            color: var(--cyan);
            animation: glitch-a 4s 2s infinite;
            clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
        }
        .hero-name::after {
            color: var(--red);
            animation: glitch-b 4s 2s infinite;
            clip-path: polygon(0 65%, 100% 65%, 100% 82%, 0 82%);
        }

        @keyframes glitch-a {
            0%,89%,100%  { transform: translateX(0);   opacity: 0; }
            90%          { transform: translateX(-4px); opacity: 1; }
            92%          { transform: translateX(4px);  opacity: 1; }
            94%          { transform: translateX(-2px); opacity: 1; }
            96%          { transform: translateX(0);    opacity: 0; }
        }
        @keyframes glitch-b {
            0%,86%,100%  { transform: translateX(0);   opacity: 0; }
            87%          { transform: translateX(4px);  opacity: 1; }
            90%          { transform: translateX(-4px); opacity: 1; }
            93%          { transform: translateX(2px);  opacity: 1; }
            95%          { transform: translateX(0);    opacity: 0; }
        }

        .hero-sub {
            color: var(--mauve);
            font-size: clamp(1rem, 2.2vw, 1.35rem);
            margin-top: 14px;
            min-height: 1.8em;
        }

        .tcursor { display: inline-block; animation: blink 1s step-end infinite; }

        .hero-desc {
            color: var(--dim);
            max-width: 560px;
            margin-top: 24px;
            font-size: 13px;
            line-height: 1.9;
        }

        .hero-ctas {
            display: flex;
            gap: 12px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 9px 20px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 13px;
            text-decoration: none;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.18s;
        }
        .btn-p {
            background: var(--green);
            color: #000;
            border-color: var(--green);
            font-weight: 700;
        }
        .btn-p:hover {
            background: var(--green-b);
            border-color: var(--green-b);
            box-shadow: 0 0 20px rgba(0,255,127,0.2);
        }
        .btn-g {
            background: transparent;
            color: var(--text);
        }
        .btn-g:hover {
            background: var(--surface2);
            border-color: var(--dim);
        }

        /* scroll indicator */
        .scroll-hint {
            position: absolute;
            bottom: 32px; left: 64px;
            color: var(--dimmer);
            font-size: 12px;
            animation: pulse 2.5s ease-in-out infinite;
        }
        @keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:.7} }


        /* ── Section shell ── */
        .section-wrap {
            max-width: 920px;
            margin: 0 auto;
            padding: 80px 32px;
        }

        .sh {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 36px;
            font-size: 14px;
        }
        .sh-prompt { color: var(--green); }
        .sh-cmd    { color: var(--text); }
        .sh-arg    { color: var(--blue); }
        .sh-flag   { color: var(--yellow); }
        .sh-line   { flex: 1; height: 1px; background: var(--border); margin-left: 12px; }


        /* ── About ── */
        .file-block {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
        }
        .file-titlebar {
            background: var(--surface2);
            border-bottom: 1px solid var(--border);
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--dim);
        }
        .file-body { padding: 24px; line-height: 2.1; }
        .fc  { color: var(--dim); }
        .fk  { color: var(--mauve); }
        .fv  { color: var(--text); }
        .fs  { color: var(--green); }
        .fn  { color: var(--peach); }
        .fb  { color: var(--blue); }


        /* ── Skills / lsmod ── */
        .lsmod-header {
            display: grid;
            grid-template-columns: 200px 80px 1fr;
            gap: 8px;
            padding: 0 0 8px;
            border-bottom: 1px solid var(--border);
            color: var(--dim);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .skill-row {
            display: grid;
            grid-template-columns: 200px 80px 1fr;
            gap: 8px;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--dimmer);
            transition: background 0.15s;
        }
        .skill-row:hover { background: var(--surface); margin: 0 -8px; padding: 6px 8px; border-radius: 3px; border-bottom-color: transparent; }
        .skill-row:last-child { border-bottom: none; }

        .sk-name { color: var(--cyan); font-weight: 700; }
        .sk-size { color: var(--peach); font-size: 12px; }
        .sk-bar-wrap { display: flex; align-items: center; gap: 10px; }
        .sk-bar-bg {
            flex: 1;
            height: 5px;
            background: var(--dimmer);
            border-radius: 3px;
            overflow: hidden;
        }
        .sk-bar-fill {
            height: 100%;
            border-radius: 3px;
            width: 0;
            transition: width 1.3s cubic-bezier(0.4,0,0.2,1);
        }
        .sk-pct { color: var(--dim); font-size: 11px; width: 30px; text-align: right; }

        .col-g { background: var(--green); }
        .col-b { background: var(--blue); }
        .col-c { background: var(--cyan); }
        .col-m { background: var(--mauve); }
        .col-p { background: var(--peach); }
        .col-r { background: var(--red); }


        /* ── Projects ── */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 14px;
        }

        .pcard {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 22px;
            transition: border-color 0.2s, transform 0.2s;
        }
        .pcard:hover {
            border-color: var(--mauve);
            transform: translateY(-3px);
        }

        .pcard-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        .pcard-name { color: var(--blue); font-weight: 700; font-size: 15px; }
        .pcard-path { color: var(--dim); font-size: 11px; margin-top: 2px; }
        .pcard-lang {
            background: var(--surface2);
            color: var(--dim);
            border: 1px solid var(--border);
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 11px;
            flex-shrink: 0;
        }
        .pcard-desc { color: var(--text); font-size: 13px; line-height: 1.75; }
        .pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
        .ptag {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            border: 1px solid;
        }
        .pt-c    { color: var(--blue);  border-color: var(--blue);  background: rgba(137,180,250,.07); }
        .pt-rs   { color: var(--peach); border-color: var(--peach); background: rgba(250,179,135,.07); }
        .pt-py   { color: var(--green); border-color: var(--green); background: rgba(166,227,161,.07); }
        .pt-asm  { color: var(--red);   border-color: var(--red);   background: rgba(243,139,168,.07); }
        .pt-go   { color: var(--cyan);  border-color: var(--cyan);  background: rgba(137,220,235,.07); }
        .pt-gen  { color: var(--dim);   border-color: var(--dimmer);background: transparent; }

        .pcard-foot {
            display: flex;
            gap: 16px;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            color: var(--dim);
            font-size: 12px;
        }


        /* ── Contact ── */
        .contact-block {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
            max-width: 580px;
        }
        .ct-row {
            display: flex;
            gap: 20px;
            padding: 14px 24px;
            border-bottom: 1px solid var(--border);
            align-items: center;
        }
        .ct-row:last-child { border-bottom: none; }
        .ct-key { color: var(--cyan); width: 90px; flex-shrink: 0; font-size: 13px; }
        .ct-val { color: var(--text); font-size: 13px; }
        .ct-val a { color: var(--blue); text-decoration: none; }
        .ct-val a:hover { text-decoration: underline; }


        /* ── Career / git log ── */
        .gitlog { display: flex; flex-direction: column; gap: 0; }

        .gl-entry {
            display: grid;
            grid-template-columns: 20px 1fr;
            gap: 0 16px;
        }

        .gl-pipe {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 2px;
        }
        .gl-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            border: 2px solid var(--green);
            background: var(--bg);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }
        .gl-dot.head { border-color: var(--mauve); box-shadow: 0 0 8px rgba(203,166,247,0.4); }
        .gl-dot.current { border-color: var(--cyan); box-shadow: 0 0 8px rgba(137,220,235,0.3); }

        .gl-line {
            width: 2px;
            flex: 1;
            background: var(--border);
            margin-top: 2px;
        }
        .gl-entry:last-child .gl-line { display: none; }

        .gl-body { padding: 0 0 32px; }

        .gl-hash { color: var(--peach); font-size: 12px; margin-bottom: 6px; }
        .gl-hash .ref {
            padding: 1px 7px;
            border-radius: 3px;
            font-size: 11px;
            margin-left: 6px;
        }
        .gl-hash .ref-head    { background: rgba(203,166,247,0.15); color: var(--mauve); border: 1px solid var(--mauve); }
        .gl-hash .ref-current { background: rgba(137,220,235,0.1);  color: var(--cyan);  border: 1px solid var(--cyan); }
        .gl-hash .ref-past    { background: rgba(88,91,112,0.2);    color: var(--dim);   border: 1px solid var(--dimmer); }

        .gl-title {
            color: var(--text);
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 4px;
        }
        .gl-sub {
            color: var(--blue);
            font-size: 13px;
            margin-bottom: 8px;
        }
        .gl-meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            color: var(--dim);
            font-size: 12px;
        }
        .gl-meta .period { color: var(--yellow); }
        .gl-note {
            margin-top: 8px;
            color: var(--dim);
            font-size: 12px;
            line-height: 1.8;
        }
        .gl-note .nc { color: var(--dim); }
        .gl-note .ns { color: var(--green); }


        /* ── Footer ── */
        footer {
            border-top: 1px solid var(--border);
            padding: 24px 32px;
            text-align: center;
            color: var(--dim);
            font-size: 12px;
        }


        /* ── Scroll fade-in ── */
        .fi {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .fi.vis { opacity: 1; transform: none; }


        /* ── Blink keyframe (shared) ── */
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }


        /* ── Responsive ── */
        @media (max-width: 680px) {
            #hero { padding: 0 24px; }
            .section-wrap { padding: 60px 20px; }
            nav { padding: 10px 20px; }
            .nav-clock { display: none; }
            .projects-grid { grid-template-columns: 1fr; }
            .lsmod-header, .skill-row { grid-template-columns: 140px 60px 1fr; }
            .scroll-hint { left: 24px; }
        }