:root {
            --bg: #0a0e14;
            --card-bg: #111622;
            --text-main: #b3b9c5;
            --text-heading: #f0f6fc;
            --cyan-accent: #00f2fe;
            --purple-accent: #9d4edd;
            --border-color: #1f293d;
            --green-glow: #39ff14;
            --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg);
            background-image: linear-gradient(rgba(31, 41, 61, 0.2) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(31, 41, 61, 0.2) 1px, transparent 1px);
            background-size: 20px 20px;
            color: var(--text-main);
            line-height: 1.6;
            margin: 0;
            padding: 40px 20px;
        }

        .container {
            max-width: 850px;
            margin: 0 auto;
        }

        header {
            background: var(--card-bg);
            border-left: 4px solid var(--cyan-accent);
            border-top: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            border-radius: 0 8px 8px 0;
            padding: 32px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }


        h1 { 
            margin: 0 0 5px 0; 
            font-size: 2.3rem; 
            color: var(--text-heading); 
            letter-spacing: -0.5px;
            font-weight: 800;
        }

        .title-subheading {
            font-family: var(--font-mono);
            font-size: 1.15rem;
            color: var(--cyan-accent);
            margin: 0 0 20px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .about-text { font-size: 1.05rem; color: #9aa2b1; margin-bottom: 24px; }
        
        .skills-container { margin: 24px 0; }
        .skills-label {
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 0.8rem;
            margin-bottom: 12px;
            color: var(--purple-accent);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .badge-group { display: flex; flex-wrap: wrap; gap: 8px; }
        .badge {
            background-color: rgba(0, 242, 254, 0.05);
            color: var(--cyan-accent);
            font-family: var(--font-mono);
            font-size: 0.82rem;
            padding: 6px 14px;
            border-radius: 4px;
            border: 1px solid rgba(0, 242, 254, 0.2);
            transition: all 0.2s ease;
        }
        .badge:hover {
            background-color: rgba(0, 242, 254, 0.15);
            box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
        }

        .cta-group { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            font-family: var(--font-mono);
        }
        .btn-primary {
            background: linear-gradient(135deg, #00b4db, #00f2fe);
            color: #050510;
        }
        .btn-primary:hover { 
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
        }
        .btn-secondary {
            background-color: transparent;
            color: var(--text-heading);
            border: 1px solid var(--border-color);
        }
        .btn-secondary:hover { 
            background-color: #171e2e;
            border-color: var(--purple-accent);
            box-shadow: 0 0 15px rgba(157, 78, 221, 0.2);
        }

        .profile-row { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
        .profile-photo {
            width: 112px; height: 112px; flex: 0 0 112px;
            object-fit: cover; border-radius: 50%;
            border: 2px solid var(--cyan-accent);
            box-shadow: 0 0 18px rgba(0, 242, 254, 0.16);
        }
        .profile-details { min-width: 0; }
        .name-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
        .name-row h1 { margin: 0; }
        .socials { display: flex; gap: 10px; }
        .language-controls { display: flex; justify-content: flex-end; margin-bottom: 18px; }
        .language-toggle {
            background: transparent; color: var(--cyan-accent);
            border: 1px solid var(--border-color); border-radius: 6px;
            padding: 8px 12px; font-family: var(--font-mono); cursor: pointer;
        }
        .language-toggle:hover { border-color: var(--cyan-accent); }
        .social {
            width: 38px; height: 38px;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--border-color); border-radius: 6px;
            color: var(--text-heading);
            transition: all 0.2s ease;
        }
        .social:hover {
            color: var(--cyan-accent);
            border-color: var(--cyan-accent);
            box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
        }
        .social svg { width: 22px; height: 22px; fill: currentColor; }

        h2 { 
            margin-top: 50px; 
            border-bottom: 1px solid var(--border-color); 
            padding-bottom: 12px; 
            font-size: 1.5rem; 
            color: var(--text-heading);
            font-family: var(--font-mono);
            letter-spacing: -0.5px;
        }
        .repo-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
        @media(min-width: 600px) { .repo-grid { grid-template-columns: 1fr 1fr; } }
        
        .repo-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .repo-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.4);
            border-color: var(--cyan-accent);
        }
        .repo-name {
            font-weight: 700;
            color: var(--text-heading);
            text-decoration: none;
            font-size: 1.15rem;
            word-break: break-all;
            font-family: var(--font-mono);
        }
        .repo-card:hover .repo-name { color: var(--cyan-accent); }
        .repo-desc { font-size: 0.92rem; color: #8a95a5; margin: 12px 0 24px 0; flex-grow: 1; }
        
        .repo-meta {
            font-size: 0.8rem;
            color: #727e91;
            display: flex;
            gap: 16px;
            font-weight: 600;
            border-top: 1px solid rgba(31, 41, 61, 0.6);
            padding-top: 12px;
            font-family: var(--font-mono);
        }
        .repo-lang-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--purple-accent);
            display: inline-block;
            margin-right: 6px;
            box-shadow: 0 0 8px var(--purple-accent);
        }
        .meta-item { display: inline-flex; align-items: center; }
        .repo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .repo-action { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px; border: 1px solid #354761; color: #dcecff; text-decoration: none; font-size: .82rem; font-weight: 650; line-height: 1.3; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
        .repo-action:hover, .repo-action:focus-visible { background: #172a43; border-color: #79c7ff; color: #fff; transform: translateY(-1px); outline: none; }
        .repo-action-live { background: rgba(121,199,255,.12); border-color: rgba(121,199,255,.45); color: #bfe6ff; }
        .repo-action-live:hover, .repo-action-live:focus-visible { background: rgba(121,199,255,.2); }

        .bio-section {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--purple-accent);
            border-radius: 0 8px 8px 0;
            padding: 28px 32px;
            margin: 30px 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        }
        .bio-section h2 {
            margin-top: 0;
            font-size: 1.35rem;
        }
        .bio-section p {
            margin: 0 0 16px;
            color: var(--text-main);
        }
        .bio-section p:last-child { margin-bottom: 0; }
        .focus-section {
            background: var(--card-bg); border: 1px solid var(--border-color);
            border-left: 4px solid var(--cyan-accent); border-radius: 0 8px 8px 0;
            padding: 28px 32px; margin: 30px 0; box-shadow: 0 8px 32px rgba(0,0,0,.25);
        }
        .focus-section h2 { margin-top: 0; }
        .focus-intro { margin-top: -2px; color: #9aa2b1; }
        .focus-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
        .focus-card { background: rgba(0,242,254,.025); border: 1px solid var(--border-color); border-radius: 6px; padding: 18px; }
        .focus-card h3 { color: var(--text-heading); font-family: var(--font-mono); font-size: 1rem; margin: 0 0 10px; }
        .focus-card p { margin: 0; font-size: .92rem; }
        .focus-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
        .focus-tags span { border: 1px solid rgba(157,78,221,.35); border-radius: 4px; padding: 4px 8px; color: #c8a2e8; font-family: var(--font-mono); font-size: .76rem; }
        .page-layout {
            display: grid;
            grid-template-columns: 150px minmax(0, 850px);
            gap: 20px;
            width: 100%;
            max-width: 1020px;
            margin: 0 auto;
            justify-content: center;
            align-items: start;
        }
        .container { width: 100%; min-width: 0; }
        .side-nav {
            position: sticky;
            top: 28px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 14px 10px;
            background: rgba(17, 22, 34, 0.94);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
        }
        .side-nav-label {
            color: var(--purple-accent);
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 5px 10px 9px;
        }
        .side-nav a {
            display: block;
            color: var(--text-main);
            text-decoration: none;
            border: 1px solid transparent;
            border-radius: 5px;
            padding: 9px 10px;
            font-size: 0.88rem;
            line-height: 1.35;
            transition: color .2s ease, background .2s ease, border-color .2s ease;
        }
        .side-nav a:hover, .side-nav a:focus-visible {
            color: var(--cyan-accent);
            background: rgba(0, 242, 254, 0.06);
            border-color: rgba(0, 242, 254, 0.25);
            outline: none;
        }
        .side-nav a.active,
        .side-nav a[aria-current="location"] {
            color: var(--cyan-accent);
            background: rgba(0, 242, 254, 0.12);
            border-color: var(--cyan-accent);
            box-shadow: inset 3px 0 0 var(--cyan-accent), 0 0 14px rgba(0, 242, 254, 0.08);
            font-weight: 700;
        }
        html[dir="rtl"] .side-nav a.active,
        html[dir="rtl"] .side-nav a[aria-current="location"] {
            box-shadow: inset -3px 0 0 var(--cyan-accent), 0 0 14px rgba(0, 242, 254, 0.08);
        }
        html { scroll-behavior: smooth; scroll-padding-top: 24px; }
        section[id], header[id] { scroll-margin-top: 24px; }
        html[dir="rtl"] .focus-section { border-left: 1px solid var(--border-color); border-right: 4px solid var(--cyan-accent); border-radius: 8px 0 0 8px; }
        @media (max-width: 600px) { .focus-section { padding: 22px; } .focus-grid { grid-template-columns: 1fr; } }
        html[dir="rtl"] body { direction: rtl; }
        html[dir="rtl"] header { border-left: 1px solid var(--border-color); border-right: 4px solid var(--cyan-accent); border-radius: 8px 0 0 8px; }
        html[dir="rtl"] .bio-section { border-left: 1px solid var(--border-color); border-right: 4px solid var(--purple-accent); border-radius: 8px 0 0 8px; }
        @media (max-width: 1050px) {
            .page-layout { grid-template-columns: 150px minmax(0, 850px); gap: 18px; }
            body { padding: 28px 16px; }
        }
        @media (max-width: 900px) {
            .page-layout { grid-template-columns: minmax(0, 850px); gap: 14px; }
            .side-nav {
                position: sticky;
                top: 8px;
                z-index: 20;
                flex-direction: row;
                align-items: center;
                gap: 4px;
                overflow-x: auto;
                padding: 8px;
                white-space: nowrap;
                scrollbar-width: thin;
            }
            .side-nav-label { display: none; }
            .side-nav a { flex: 0 0 auto; padding: 8px 10px; font-size: 0.82rem; }
        }
        @media (max-width: 600px) {
            .bio-section { padding: 22px; }
            header { padding: 26px 22px; }
            .profile-row { align-items: flex-start; gap: 14px; }
            .profile-photo { width: 76px; height: 76px; flex-basis: 76px; }
            .name-row { gap: 10px; }
            h1 { font-size: 1.8rem; }
        }


        /* Clean, recruiter-friendly visual system */
        :root {
            --bg: #0b1220;
            --card-bg: #111b2d;
            --text-main: #b8c4d6;
            --text-heading: #f4f7fb;
            --cyan-accent: #79c7ff;
            --purple-accent: #9aaee8;
            --border-color: #26364d;
            --green-glow: #39ff14;
            --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }
        * { box-sizing: border-box; }
        body {
            background: radial-gradient(ellipse at 50% -20%, rgba(58, 105, 163, .18), transparent 55%), var(--bg);
            background-image: none;
            color: var(--text-main);
            line-height: 1.72;
            padding: 32px 24px 64px;
            -webkit-font-smoothing: antialiased;
        }
        .page-layout { max-width: 1240px; grid-template-columns: 190px minmax(0, 920px); gap: 30px; }
        .container { max-width: 920px; }
        .side-nav {
            top: 24px; gap: 4px; padding: 12px;
            background: rgba(17, 27, 45, .88); border-color: #26364d;
            border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.16);
            backdrop-filter: blur(14px);
        }
        .side-nav-label { color: #9aaee8; letter-spacing: .08em; }
        .side-nav a { border-radius: 8px; padding: 10px 12px; }
        .side-nav a:hover, .side-nav a:focus-visible { color: #d7edff; background: rgba(121,199,255,.08); border-color: rgba(121,199,255,.25); }
        .side-nav a.active, .side-nav a[aria-current="location"] {
            color: #d7edff; background: rgba(121,199,255,.11); border-color: rgba(121,199,255,.35);
            box-shadow: inset 3px 0 0 var(--cyan-accent); font-weight: 650;
        }
        .language-controls { margin-bottom: 14px; }
        .language-toggle { color: #d7edff; background: #111b2d; border-color: #31445f; border-radius: 999px; padding: 8px 15px; font-family: inherit; font-size: .9rem; }
        .language-toggle:hover { border-color: var(--cyan-accent); background: #16243a; }
        header {
            padding: clamp(26px, 4vw, 44px); margin-bottom: 26px;
            background: linear-gradient(145deg, rgba(20,33,54,.98), rgba(15,24,40,.98));
            border: 1px solid #2b3c55; border-left: 4px solid var(--cyan-accent);
            border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.2);
        }
        .profile-row { align-items: center; gap: 24px; margin-bottom: 24px; }
        .profile-photo { width: 104px; height: 104px; flex-basis: 104px; border: 2px solid #79c7ff; box-shadow: 0 0 0 6px rgba(121,199,255,.07); }
        h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -.045em; }
        .name-row { gap: 14px; margin-bottom: 8px; }
        .title-subheading { color: #9bd8ff; font-family: inherit; font-size: clamp(.95rem, 1.6vw, 1.08rem); font-weight: 650; letter-spacing: .015em; text-transform: none; margin-bottom: 20px; }
        .about-text { max-width: 72ch; color: #c0ccdc; font-size: 1.04rem; line-height: 1.8; margin-bottom: 22px; }
        .skills-container { margin: 28px 0 0; }
        .skills-label { color: #aebfe9; font-family: inherit; font-size: .76rem; letter-spacing: .12em; }
        .badge-group { gap: 8px; }
        .badge { background: rgba(121,199,255,.07); color: #c7e7ff; border-color: rgba(121,199,255,.2); border-radius: 999px; font-family: inherit; font-size: .82rem; padding: 6px 12px; }
        .badge:hover { background: rgba(121,199,255,.12); box-shadow: none; }
        .cta-group { gap: 10px; margin-top: 28px; }
        .btn { border-radius: 9px; padding: 11px 17px; font-family: inherit; font-size: .91rem; }
        .btn-primary { background: #9bd8ff; color: #0b1726; box-shadow: none; }
        .btn-primary:hover { background: #c0e7ff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(121,199,255,.13); }
        .btn-secondary { border-color: #354761; color: #e1eaf5; }
        .btn-secondary:hover { background: #17253b; border-color: #79c7ff; box-shadow: none; }
        h2 { margin-top: 0; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #2a3a52; font-family: inherit; font-size: clamp(1.35rem, 2.4vw, 1.65rem); letter-spacing: -.025em; }
        section[id] { margin: 28px 0; }
        .bio-section, .focus-section {
            margin: 26px 0; padding: clamp(22px, 3vw, 32px);
            background: rgba(17,27,45,.82); border: 1px solid #26364d;
            border-left: 3px solid #9aaee8; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.12);
        }
        .focus-section { border-left-color: #79c7ff; }
        .bio-section p { line-height: 1.8; }
        .focus-intro { max-width: 76ch; line-height: 1.75; color: #b8c4d6; }
        .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
        .focus-card { background: rgba(8,16,29,.4); border: 1px solid #2a3a52; border-radius: 11px; padding: 20px; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
        .focus-card:hover { border-color: #47617f; background: rgba(19,34,54,.7); transform: translateY(-2px); }
        .focus-card h3 { font-family: inherit; font-size: 1rem; letter-spacing: -.01em; margin-bottom: 9px; }
        .focus-card p { font-size: .92rem; line-height: 1.7; }
        .focus-tags { gap: 6px; }
        .focus-tags span { color: #c7d6f5; border-color: #354660; background: rgba(154,174,232,.05); border-radius: 999px; font-family: inherit; font-size: .72rem; padding: 4px 9px; }
        #projects h2 { margin-top: 0; }
        .repo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
        .repo-card { min-width: 0; background: rgba(17,27,45,.82); border: 1px solid #26364d; border-radius: 12px; padding: 21px; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
        .repo-card:hover { transform: translateY(-3px); border-color: #79c7ff; background: #142139; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
        .repo-name { color: #e7f0fb; font-family: inherit; font-size: 1.02rem; line-height: 1.4; overflow-wrap: anywhere; word-break: normal; }
        .repo-card:hover .repo-name { color: #9bd8ff; }
        .repo-desc { color: #b1bfd1; line-height: 1.65; font-size: .9rem; margin: 12px 0 22px; }
        .repo-meta { color: #98a9bf; border-top-color: #293b53; font-family: inherit; font-size: .78rem; padding-top: 13px; }
        .repo-lang-dot { background: #9aaee8; box-shadow: none; }
        a { text-underline-offset: 3px; }
        a:focus-visible, button:focus-visible, textarea:focus-visible { outline: 2px solid #9bd8ff; outline-offset: 3px; }
        html[dir="rtl"] body { direction: rtl; }
        html[dir="rtl"] header { border-left: 1px solid #2b3c55; border-right: 4px solid var(--cyan-accent); border-radius: 18px; }
        html[dir="rtl"] .bio-section { border-left: 1px solid #26364d; border-right: 3px solid #9aaee8; border-radius: 14px; }
        html[dir="rtl"] .focus-section { border-left: 1px solid #26364d; border-right: 3px solid #79c7ff; border-radius: 14px; }
        html[dir="rtl"] .side-nav a.active, html[dir="rtl"] .side-nav a[aria-current="location"] { box-shadow: inset -3px 0 0 var(--cyan-accent); }
        @media (max-width: 1050px) { .page-layout { grid-template-columns: 170px minmax(0, 920px); gap: 18px; } }
        @media (max-width: 900px) {
            body { padding: 18px 16px 48px; }
            .page-layout { grid-template-columns: minmax(0, 920px); gap: 16px; }
            .side-nav { top: 8px; border-radius: 12px; }
        }
        @media (max-width: 600px) {
            body { padding: 12px 12px 36px; }
            .side-nav { margin-bottom: 2px; }
            .side-nav a { padding: 8px 10px; }
            header { padding: 24px 19px; border-radius: 14px; }
            .profile-row { align-items: flex-start; gap: 14px; }
            .profile-photo { width: 76px; height: 76px; flex-basis: 76px; }
            .name-row { align-items: flex-start; }
            h1 { font-size: 1.8rem; }
            .socials { margin-top: 4px; }
            .cta-group { display: grid; grid-template-columns: 1fr; }
            .btn { width: 100%; }
            .bio-section, .focus-section { padding: 21px 18px; border-radius: 12px; }
            .focus-grid, .repo-grid { grid-template-columns: 1fr; }
            .focus-card, .repo-card { padding: 18px; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }


        /* Editorial portfolio redesign: light canvas, warm gradient, wide layouts */
        :root {
            --bg: #faf9f6;
            --card-bg: rgba(255,255,255,.82);
            --text-main: #51515d;
            --text-heading: #171821;
            --cyan-accent: #355ee8;
            --purple-accent: #8c66cb;
            --border-color: #e7e5e1;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }
        html { scroll-behavior:smooth; scroll-padding-top:100px; }
        body {
            padding: 0 28px 80px; color:var(--text-main); line-height:1.75;
            background: radial-gradient(ellipse at 18% 0%, rgba(176,192,255,.35), transparent 32%),
                        radial-gradient(ellipse at 58% 0%, rgba(255,190,183,.35), transparent 31%),
                        #faf9f6;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .page-layout { display:block; max-width:1160px; margin:0 auto; }
        .container { max-width:none; width:100%; }
        .side-nav.top-nav {
            position:sticky; top:0; z-index:50; display:flex; flex-direction:row; align-items:center;
            justify-content:space-between; gap:26px; width:100%; margin:0 auto; padding:22px 0 18px;
            background:rgba(250,249,246,.82); border:0; border-radius:0; box-shadow:none; backdrop-filter:blur(18px);
        }
        .nav-brand { color:#171821!important; font-size:1.35rem!important; font-weight:850; letter-spacing:-.09em; text-decoration:none; padding:6px 0!important; }
        .nav-brand span { color:#355ee8; }
        .nav-links { display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.6vw,34px); }
        .side-nav .nav-links a { border:0; border-radius:0; padding:8px 0; color:#62616a; font-size:.86rem; font-weight:550; background:transparent; box-shadow:none; }
        .side-nav .nav-links a:hover,.side-nav .nav-links a:focus-visible,.side-nav .nav-links a.active,.side-nav .nav-links a[aria-current="location"] { color:#1d2436; background:transparent; border-color:transparent; box-shadow:inset 0 -2px #355ee8; outline-offset:5px; }
        .language-controls { display:none; }
        .language-toggle { flex:0 0 auto; color:#252631; background:rgba(255,255,255,.65); border:1px solid #e1dfda; border-radius:999px; padding:8px 13px; font-family:inherit; font-size:.8rem; cursor:pointer; }
        .language-toggle:hover { background:#fff; border-color:#355ee8; }
        header#top {
            position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr);
            align-items:center; gap:36px; min-height:430px; margin:24px 0 72px; padding:clamp(32px,6vw,76px);
            background:rgba(255,255,255,.53); border:1px solid rgba(255,255,255,.85); border-radius:30px;
            box-shadow:0 24px 80px rgba(54,49,78,.06); backdrop-filter:blur(12px);
        }
        header#top:before { content:""; position:absolute; width:360px; height:360px; right:-100px; top:-160px; border-radius:50%; background:linear-gradient(135deg,rgba(139,159,255,.24),rgba(255,183,174,.24)); filter:blur(12px); pointer-events:none; }
        .hero-eyebrow { display:flex; align-items:center; gap:10px; color:#656b7c; font-size:.72rem; font-weight:750; letter-spacing:.14em; margin-bottom:18px; }
        .availability-dot { width:8px; height:8px; border-radius:50%; background:#4b9b79; box-shadow:0 0 0 4px rgba(75,155,121,.12); }
        .profile-row { position:relative; gap:0; margin:0 0 16px; }
        .profile-photo { display:none; }
        .profile-details { width:100%; }
        .name-row { display:block; }
        h1 { max-width:720px; color:#171821; font-size:clamp(2.6rem,5.6vw,5.3rem); line-height:1.02; letter-spacing:-.065em; font-weight:780; margin:0 0 20px; }
        .socials { margin-top:18px; }
        .social { background:#fff; border:1px solid #e7e5e1; border-radius:50%; width:38px; height:38px; }
        .social svg { fill:#282936; }
        .title-subheading { color:#355ee8; font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:0; text-transform:none; margin:0 0 18px; }
        .about-text { max-width:700px; color:#555663; font-size:1.04rem; line-height:1.85; margin:0 0 24px; }
        .skills-container { margin:24px 0; }
        .skills-label { color:#777583; font-family:inherit; font-size:.7rem; letter-spacing:.12em; }
        .badge-group { gap:8px; }
        .badge { color:#42465a; background:rgba(255,255,255,.72); border:1px solid #e6e4e2; border-radius:999px; padding:7px 12px; font-family:inherit; font-size:.78rem; }
        .badge:hover { background:#fff; box-shadow:0 5px 18px rgba(53,94,232,.1); }
        .cta-group { gap:10px; margin-top:28px; }
        .btn { border-radius:999px; padding:12px 19px; font-family:inherit; font-size:.85rem; }
        .btn-primary { background:#20212b; color:#fff; border:1px solid #20212b; }
        .btn-primary:hover { background:#355ee8; border-color:#355ee8; box-shadow:0 8px 22px rgba(53,94,232,.2); }
        .btn-secondary { color:#272936; border:1px solid #dedde0; background:rgba(255,255,255,.65); }
        .btn-secondary:hover { color:#355ee8; background:#fff; border-color:#aab9f4; }
        .bio-section,.focus-section { padding:clamp(24px,4vw,44px); margin:0 0 56px; background:rgba(255,255,255,.6); border:1px solid rgba(226,224,220,.9); border-radius:24px; box-shadow:0 12px 40px rgba(54,49,78,.035); }
        .bio-section { border-left:1px solid rgba(226,224,220,.9); }
        .bio-section h2, section h2 { color:#1b1c25; font-family:inherit; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.2; letter-spacing:-.045em; border:0; margin:0 0 20px; padding:0; }
        .bio-section p,.focus-intro { color:#5e5d68; font-size:.98rem; }
        #projects { margin:0 0 64px; }
        #projects h2 { display:flex; align-items:end; justify-content:space-between; border:0; margin:0 0 24px; }
        #projects h2:after { content:"SELECTED WORK"; color:#8a8792; font-size:.65rem; letter-spacing:.15em; font-weight:750; }
        .repo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:0; }
        .repo-card { min-height:200px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:rgba(255,255,255,.78); border:1px solid #e6e4e1; border-radius:18px; box-shadow:0 8px 24px rgba(33,34,48,.025); transition:transform .2s,box-shadow .2s,border-color .2s; }
        .repo-card:hover { transform:translateY(-4px); border-color:#c9d2fb; box-shadow:0 16px 34px rgba(48,57,105,.09); }
        .repo-name { color:#20212b; font-family:inherit; font-size:1.02rem; font-weight:750; letter-spacing:-.02em; }
        .repo-name:hover { color:#355ee8!important; }
        .repo-desc { color:#666572; font-size:.86rem; line-height:1.65; }
        .repo-meta { border-top:1px solid #eeece9; padding-top:13px; color:#797783; font-family:inherit; font-size:.75rem; }
        .repo-lang-dot { background:#8c66cb; }
        .focus-section { border-left:1px solid rgba(226,224,220,.9); }
        .focus-intro { max-width:780px; margin:0 0 24px; }
        .focus-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
        .focus-card { padding:24px; background:rgba(255,255,255,.7); border:1px solid #e8e6e3; border-radius:18px; }
        .focus-card h3 { color:#22232d; font-family:inherit; font-size:1rem; letter-spacing:-.02em; }
        .focus-card p { color:#666572; font-size:.88rem; }
        .focus-tags span { color:#515d8b; background:#f5f6fc; border:1px solid #e5e8f8; border-radius:999px; font-family:inherit; font-size:.7rem; }
        html[dir="rtl"] body { direction:rtl; }
        html[dir="rtl"] header#top { border:1px solid rgba(255,255,255,.85); }
        html[dir="rtl"] .bio-section,html[dir="rtl"] .focus-section { border:1px solid rgba(226,224,220,.9); }
        html[dir="rtl"] .nav-links { direction:rtl; }
        @media(max-width:900px) {
            body { padding:0 18px 56px; }
            .page-layout { display:block; }
            .side-nav.top-nav { gap:16px; padding:15px 0; }
            .nav-links { gap:14px; overflow-x:auto; }
            .side-nav .nav-links a { font-size:.78rem; }
            header#top { grid-template-columns:1fr; min-height:0; margin:20px 0 48px; padding:clamp(26px,5vw,48px); }
            .repo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .focus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
        @media(max-width:600px) {
            body { padding:0 14px 42px; }
            .side-nav.top-nav { flex-wrap:wrap; gap:10px; padding:12px 0; }
            .nav-brand { margin-right:auto; }
            .nav-links { order:3; width:100%; justify-content:flex-start; padding:2px 0 5px; }
            .side-nav .nav-links a { font-size:.78rem; }
            header#top { border-radius:22px; padding:26px 22px; margin:18px 0 40px; }
            h1 { font-size:clamp(2.45rem,12vw,3.5rem); }
            .about-text { font-size:.96rem; }
            .cta-group { display:flex; }
            .btn { width:auto; flex:1 1 auto; }
            .repo-grid,.focus-grid { grid-template-columns:1fr; }
            .repo-card { min-height:160px; }
            .bio-section,.focus-section { padding:24px 20px; margin-bottom:38px; border-radius:20px; }
            #projects h2:after { display:none; }
        }
        @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

        /* Automatic dark mode follows the visitor's operating-system preference. */
        @media (prefers-color-scheme: dark) {
            :root { color-scheme: dark; --bg:#10131b; --card-bg:rgba(28,33,46,.88); --text-main:#c5cad6; --text-heading:#f4f5fa; --cyan-accent:#8eb8ff; --purple-accent:#c2a2ff; --border-color:#30384a; }
            body {
                color:var(--text-main);
                background:radial-gradient(ellipse at 18% 0%,rgba(70,91,160,.25),transparent 34%),
                           radial-gradient(ellipse at 58% 0%,rgba(123,71,105,.19),transparent 31%), #10131b;
            }
            .side-nav.top-nav { background:rgba(16,19,27,.86); }
            .nav-brand { color:#f4f5fa!important; }
            .nav-brand span { color:#8eb8ff; }
            .side-nav .nav-links a { color:#b1b8c8; }
            .side-nav .nav-links a:hover,.side-nav .nav-links a:focus-visible,.side-nav .nav-links a.active,.side-nav .nav-links a[aria-current="location"] { color:#fff; box-shadow:inset 0 -2px #8eb8ff; }
            .language-toggle { color:#e8ebf4; background:#202637; border-color:#394157; }
            .language-toggle:hover { background:#293249; border-color:#8eb8ff; }
            header#top { background:rgba(27,32,45,.78); border-color:rgba(87,100,128,.45); box-shadow:0 24px 80px rgba(0,0,0,.18); }
            header#top:before { background:linear-gradient(135deg,rgba(91,119,226,.24),rgba(184,103,145,.16)); }
            .hero-eyebrow { color:#b3bbcc; }
            h1,.bio-section h2,section h2,.focus-card h3 { color:#f4f5fa; }
            .title-subheading { color:#9dc5ff; }
            .about-text,.bio-section p,.focus-intro { color:#c1c7d5; }
            .skills-label { color:#a8b1c4; }
            .badge { color:#dce5f7; background:rgba(35,43,60,.86); border-color:#3a455d; }
            .badge:hover { background:#2c3650; box-shadow:0 5px 18px rgba(70,106,205,.15); }
            .social { background:#252c3d; border-color:#414a60; }
            .social svg { fill:#edf2ff; }
            .btn-primary { background:#e8efff; color:#172039; border-color:#e8efff; }
            .btn-primary:hover { background:#a8c6ff; border-color:#a8c6ff; }
            .btn-secondary { color:#e4e9f5; border-color:#414a60; background:rgba(34,40,56,.8); }
            .btn-secondary:hover { color:#fff; background:#2b344a; border-color:#8eb8ff; }
            .bio-section,.focus-section { background:rgba(27,32,45,.76); border-color:#343c50; box-shadow:0 12px 40px rgba(0,0,0,.12); }
            .bio-section { border-left-color:#343c50; }
            .repo-card { background:rgba(28,34,48,.9); border-color:#353e53; box-shadow:0 8px 24px rgba(0,0,0,.12); }
            .repo-card:hover { border-color:#667fbd; box-shadow:0 16px 34px rgba(0,0,0,.22); }
            .repo-name { color:#f0f3fa; }
            .repo-name:hover { color:#9dc5ff!important; }
            .repo-desc { color:#bec5d4; }
            .repo-meta { border-top-color:#3a4357; color:#a8b1c4; }
            .repo-lang-dot { background:#b59af4; }
            .focus-section { border-left-color:#343c50; }
            .focus-card { background:rgba(34,40,56,.78); border-color:#3a4358; }
            .focus-card p { color:#bec5d4; }
            .focus-tags span { color:#d0dcff; background:#252e43; border-color:#3b4763; }
            #projects h2:after { color:#9aa5bb; }
            html[dir="rtl"] header#top { border-color:rgba(87,100,128,.45); }
            html[dir="rtl"] .bio-section,html[dir="rtl"] .focus-section { border-color:#343c50; }
            ::selection { background:#4566ad; color:#fff; }
        }


        /* Layout correction: keep the hero content in normal flow and restore the portrait. */
        header#top {
            display: block;
            min-height: 0;
            overflow: hidden;
            padding: clamp(30px, 5vw, 64px);
        }
        .hero-eyebrow { margin-bottom: 22px; }
        .profile-row {
            display: flex;
            align-items: center;
            gap: 24px;
            margin: 0 0 18px;
        }
        .profile-photo {
            display: block;
            width: clamp(96px, 14vw, 150px);
            height: clamp(96px, 14vw, 150px);
            flex: 0 0 auto;
            object-fit: cover;
            object-position: center;
            border-radius: 50%;
            border: 2px solid #8eb8ff;
            box-shadow: 0 0 0 7px rgba(121, 158, 255, .10);
        }
        .profile-details { min-width: 0; width: auto; flex: 1; }
        .name-row { display: block; }
        h1 { max-width: 900px; overflow-wrap: anywhere; }
        .about-text { max-width: 850px; }
        .skills-container { max-width: 900px; }
        .cta-group { display: flex; flex-wrap: wrap; }
        @media (max-width: 600px) {
            header#top { padding: 28px 22px; }
            .profile-row { align-items: flex-start; gap: 16px; }
            .profile-photo { width: 78px; height: 78px; }
            h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
            .cta-group { display: flex; }
        }
    
        /* Light-mode contrast fix: keep skill cards readable on hover/focus. */
        @media (prefers-color-scheme: light) {
            .focus-card,
            .focus-card:hover,
            .focus-card:focus-within {
                background: #ffffff !important;
                color: #292b35 !important;
                border-color: #dedfe7 !important;
                box-shadow: 0 10px 28px rgba(35, 42, 70, 0.07) !important;
            }
            .focus-card h3,
            .focus-card h3 *,
            .focus-card strong {
                color: #222431 !important;
            }
            .focus-card p,
            .focus-card li {
                color: #555968 !important;
            }
            .focus-tags span {
                color: #35436e !important;
                background: #f0f3ff !important;
                border-color: #d9e0fb !important;
            }
            .focus-card:hover {
                transform: translateY(-2px);
            }
            /* Light-mode contrast fix for project cards and their hover state. */
            #projects .repo-card,
            #projects .repo-card:hover,
            #projects .repo-card:focus-within {
                background: #ffffff !important;
                color: #292b35 !important;
                border-color: #dedfe7 !important;
                box-shadow: 0 10px 28px rgba(35, 42, 70, 0.07) !important;
            }
            #projects .repo-name,
            #projects .repo-name:visited {
                color: #222431 !important;
            }
            #projects .repo-card:hover .repo-name,
            #projects .repo-name:hover,
            #projects .repo-name:focus-visible {
                color: #244fc5 !important;
            }
            #projects .repo-desc {
                color: #555968 !important;
            }
            #projects .repo-meta {
                color: #555968 !important;
                border-top-color: #e2e4eb !important;
            }
            #projects .repo-lang-dot {
                outline: 1px solid rgba(30, 35, 50, .15);
            }
            .badge {
                color: #35436e !important;
                background: #f0f3ff !important;
                border-color: #d9e0fb !important;
            }
            .badge:hover {
                color: #26345e !important;
                background: #e5ebff !important;
            }
        }



        /* Keep the English name on one line without changing the Hebrew heading. */
        html[lang="en"] .name-row h1 {
            font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
            line-height: 1.08;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: keep-all;
            max-width: 100%;
        }
        @media (max-width: 600px) {
            html[lang="en"] .name-row h1 {
                font-size: clamp(1.35rem, 5.6vw, 2.2rem) !important;
                letter-spacing: -0.045em;
            }
        }


        /* Featured monitoring and alerting project */
        .project-showcase {
            margin: 0 0 64px;
            padding: clamp(24px, 4vw, 44px);
            background: rgba(255,255,255,.68);
            border: 1px solid rgba(226,224,220,.95);
            border-radius: 24px;
            box-shadow: 0 12px 40px rgba(54,49,78,.035);
        }
        .project-showcase h2 {
            color: #1b1c25; font-family: inherit;
            font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1.2;
            letter-spacing: -.045em; border: 0; margin: 0 0 18px; padding: 0;
        }
        .project-showcase-intro, .project-showcase-note {
            max-width: 82ch; color: #5e5d68; font-size: .98rem;
        }
        .project-showcase-intro { margin: 0 0 24px; }
        .project-demo-grid {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
        }
        .project-demo-card {
            background: rgba(255,255,255,.78); border: 1px solid #e7e5e1;
            border-radius: 14px; padding: 20px; min-width: 0;
        }
        .project-demo-card h3 {
            color: #20212b; font-size: 1rem; line-height: 1.4;
            letter-spacing: -.015em; margin: 0 0 9px;
        }
        .project-demo-card p {
            color: #5e5d68; font-size: .9rem; line-height: 1.7; margin: 0;
        }
        .project-demo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
        .project-demo-tags span {
            padding: 4px 9px; border: 1px solid #dedde8; border-radius: 999px;
            background: rgba(53,94,232,.045); color: #42465a; font-size: .73rem;
        }
        .project-showcase-note {
            margin: 20px 0 0; padding-top: 16px;
            border-top: 1px solid #e7e5e1; font-size: .84rem;
        }
        .monitoring-demo-access {
            margin-top: 22px; padding: 18px 20px;
            border: 1px solid #e2e0dc; border-radius: 14px;
            background: rgba(255,255,255,.74);
        }
        .monitoring-demo-access h3 {
            color: #20212b; font-size: .98rem; margin: 0 0 7px;
        }
        .monitoring-demo-access p {
            margin: 0 0 13px; color: #5e5d68; font-size: .86rem;
        }
        .monitoring-demo-link-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .monitoring-demo-link-list a {
            display: inline-flex; align-items: center; gap: 6px;
            border: 1px solid #d7dbe7; border-radius: 999px; padding: 8px 12px;
            background: #fff; color: #263b89; font-size: .83rem; font-weight: 650;
            text-decoration: none;
        }
        .monitoring-demo-link-list a:hover,
        .monitoring-demo-link-list a:focus-visible {
            border-color: #355ee8; background: #f5f7ff; color: #1d3280;
        }
        .monitoring-demo-notifications { margin-top: 12px !important; }
        html[dir="rtl"] .project-showcase { direction: rtl; }
        @media (max-width: 600px) {
            .project-showcase { padding: 21px 18px; border-radius: 12px; }
            .project-demo-grid { grid-template-columns: 1fr; }
            .project-demo-card { padding: 18px; }
        }

    

/* Multi-page subpage header */
.subpage-hero {
    margin: 24px 0 42px;
    padding: clamp(26px, 4vw, 44px);
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(226,224,220,.95);
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(54,49,78,.035);
}
.subpage-hero .hero-eyebrow { margin-bottom: 12px; }
.subpage-hero h1 {
    max-width: none;
    margin: 0 0 15px;
    color: #171821 !important;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -.05em;
    white-space: normal;
}
.subpage-hero p {
    max-width: 75ch;
    margin: 0;
    color: #5e5d68;
    font-size: 1rem;
}
.page-footer {
    margin: 56px 0 12px;
    padding: 18px 0;
    border-top: 1px solid #e7e5e1;
    color: #6a6974;
    font-size: .84rem;
}
.page-footer a { color: #355ee8; }

/* Previously, the monitoring section's light-theme declarations came after
   the dark-mode block. Reapply dark theme to the complete showcase here. */
@media (prefers-color-scheme: dark) {
    .project-showcase {
        background: rgba(27,32,45,.82) !important;
        border-color: #343c50 !important;
        box-shadow: 0 12px 40px rgba(0,0,0,.16) !important;
        color: #c1c7d5 !important;
    }
    .project-showcase h2,
    .project-demo-card h3,
    .monitoring-demo-access h3 {
        color: #f4f5fa !important;
    }
    .project-showcase-intro,
    .project-showcase-note,
    .project-demo-card p,
    .monitoring-demo-access p {
        color: #c1c7d5 !important;
    }
    .project-demo-card,
    .monitoring-demo-access {
        background: rgba(34,40,56,.78) !important;
        border-color: #3a4358 !important;
    }
    .project-demo-tags span {
        color: #d0dcff !important;
        background: #252e43 !important;
        border-color: #3b4763 !important;
    }
    .project-showcase-note { border-top-color: #3a4357 !important; }
    .monitoring-demo-link-list a {
        color: #e1e9ff !important;
        background: #252c3d !important;
        border-color: #414a60 !important;
    }
    .monitoring-demo-link-list a:hover,
    .monitoring-demo-link-list a:focus-visible {
        color: #fff !important;
        background: #2b344a !important;
        border-color: #8eb8ff !important;
    }
    .subpage-hero {
        background: rgba(27,32,45,.82);
        border-color: #343c50;
        box-shadow: 0 12px 40px rgba(0,0,0,.16);
    }
    .subpage-hero h1 { color: #f4f5fa !important; }
    .subpage-hero p { color: #c1c7d5; }
    .page-footer { border-top-color: #343c50; color: #a8b1c4; }
    .page-footer a { color: #9dc5ff; }
}
@media (max-width: 600px) {
    .subpage-hero { margin: 16px 0 28px; padding: 23px 18px; border-radius: 14px; }
    .subpage-hero h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
}

/* Embedded live monitoring interfaces: Grafana public dashboards and Alerta (no Alertmanager iframe). */
.monitoring-embedded-section,
.grafana-demo-access {
    margin-top: 26px;
    padding: clamp(18px, 2.5vw, 28px);
    border: 1px solid #e2e0dc;
    border-radius: 16px;
    background: rgba(255,255,255,.76);
}
.monitoring-embedded-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 18px;
}
.monitoring-embedded-heading h3,
.grafana-demo-access h3 {
    margin: 0 0 7px;
    color: #20212b;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}
.monitoring-embedded-heading p,
.monitoring-embed-note,
.grafana-demo-access > p {
    margin: 0;
    color: #5e5d68;
    font-size: .9rem;
    line-height: 1.65;
}
.monitoring-open-link,
.monitoring-embed-card-heading a {
    color: #263b89;
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
}
.monitoring-open-link:hover,
.monitoring-embed-card-heading a:hover {
    text-decoration: underline;
}
.monitoring-embed-card {
    overflow: hidden;
    margin-top: 16px;
    border: 1px solid #dedde8;
    border-radius: 12px;
    background: #fff;
}
.monitoring-embed-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 15px;
    padding: 13px 16px;
    border-bottom: 1px solid #e8e7ed;
}
.monitoring-embed-card-heading h4 {
    margin: 0;
    color: #20212b;
    font-size: .98rem;
}
.monitoring-embed-card iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: 0;
    background: #fff;
}
#alerta-live .monitoring-embed-card iframe {
    height: 690px;
}
.monitoring-embed-note {
    margin-top: 12px;
    font-size: .82rem;
}
.grafana-demo-access > p { margin: 0 0 12px; }
.grafana-demo-credentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 12px;
}
.grafana-demo-credentials > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e2e0dc;
    border-radius: 10px;
    background: rgba(250,250,252,.85);
}
.grafana-demo-credentials dt {
    margin-bottom: 6px;
    color: #5e5d68;
    font-size: .8rem;
}
.grafana-demo-credentials dd { margin: 0; color: #20212b; }
.grafana-demo-credentials code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    overflow-wrap: anywhere;
}
.grafana-demo-access .grafana-demo-security-note {
    padding-top: 12px;
    border-top: 1px solid #e2e0dc;
    font-size: .82rem;
}
html[dir="rtl"] .monitoring-embed-card-heading,
html[dir="rtl"] .monitoring-embedded-heading { direction: rtl; }
@media (max-width: 700px) {
    .monitoring-embedded-section,
    .grafana-demo-access { padding: 18px 14px; border-radius: 12px; }
    .monitoring-embed-card iframe { height: 520px; }
    #alerta-live .monitoring-embed-card iframe { height: 560px; }
    .grafana-demo-credentials { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
    .monitoring-embedded-section,
    .grafana-demo-access { background: rgba(22,26,37,.78); border-color: #30384a; }
    .monitoring-embedded-heading h3,
    .grafana-demo-access h3,
    .monitoring-embed-card-heading h4,
    .grafana-demo-credentials dd { color: #eef1f8; }
    .monitoring-embedded-heading p,
    .monitoring-embed-note,
    .grafana-demo-access > p,
    .grafana-demo-credentials dt { color: #b9c0d0; }
    .monitoring-embed-card { background: #fff; border-color: #30384a; }
    .monitoring-embed-card-heading { background: #fbfbfd; border-bottom-color: #e8e7ed; }
    .grafana-demo-credentials > div { background: rgba(12,15,22,.55); border-color: #30384a; }
}



/* ===== Navigation: pages in the top bar, sections in the left "On this page" list ===== */
:root {
    --topbar-h: 56px;
    --nav-fg: #62616a; --nav-fg-strong: #1d2436; --nav-muted: #777583;
    --nav-accent: #355ee8; --nav-line: #e7e5e1;
    --nav-hover-bar: #b9bccb; --nav-active-bg: rgba(53,94,232,.10);
    --nav-bar-bg: rgba(250,249,246,.88);
}
@media (prefers-color-scheme: dark) {
    :root {
        --nav-fg: #b9c0d0; --nav-fg-strong: #f4f5fa; --nav-muted: #9fa9bd;
        --nav-accent: #8eb8ff; --nav-line: #30384a;
        --nav-hover-bar: #5b6680; --nav-active-bg: rgba(142,184,255,.12);
        --nav-bar-bg: rgba(16,19,27,.88);
    }
}
html { scroll-padding-top: calc(var(--topbar-h) + 20px); }
section[id], header[id] { scroll-margin-top: 0; } /* scroll-padding handles the offset; avoids double spacing */

.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
    height: var(--topbar-h); max-width: 1320px; margin: 0 auto;
    background: var(--nav-bar-bg); border-bottom: 1px solid var(--nav-line);
    backdrop-filter: blur(18px);
}
.topbar .language-toggle { align-self: center; }
.topbar-links { display: flex; align-items: stretch; gap: clamp(18px, 3vw, 36px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar-links::-webkit-scrollbar { display: none; }
.topbar-links a {
    position: relative; display: flex; align-items: center;
    color: var(--nav-fg); font-size: .92rem; font-weight: 550; text-decoration: none; white-space: nowrap;
    transition: color .2s ease;
}
.topbar-links a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
    background: var(--nav-accent); opacity: 0; transition: opacity .2s ease;
}
.topbar-links a[aria-current="page"] { color: var(--nav-fg-strong); }
.topbar-links a[aria-current="page"]::after { opacity: 1; }
.topbar-links a:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -4px; border-radius: 6px; }
@media (hover: hover) {
    .topbar-links a:not([aria-current]):hover { color: var(--nav-fg-strong); }
    .topbar-links a:not([aria-current]):hover::after { opacity: .35; }
}

.page-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 32px; width: 100%; max-width: 1320px; margin: 0 auto; }
.page-layout--single { grid-template-columns: minmax(0, 1fr); }

.section-nav { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.section-nav-heading { padding: 0 12px 8px; color: var(--nav-muted); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-nav a {
    display: block; padding: 8px 12px; border-inline-start: 2px solid var(--nav-line);
    color: var(--nav-fg); font-size: .86rem; line-height: 1.35; text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.section-nav a.active { color: var(--nav-fg-strong); border-inline-start-color: var(--nav-accent); background: var(--nav-active-bg); }
.section-nav a:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
@media (hover: hover) and (min-width: 901px) {
    .section-nav a:not(.active):hover { color: var(--nav-fg-strong); border-inline-start-color: var(--nav-hover-bar); }
}

@media (max-width: 900px) {
    html { scroll-padding-top: calc(var(--topbar-h) + 12px); }
    .page-layout { display: block; }
    .section-nav { position: static; flex-direction: row; gap: 6px; margin: 14px 0 0; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
    .section-nav::-webkit-scrollbar { display: none; }
    .section-nav-heading { display: none; }
    .section-nav a { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--nav-line); border-radius: 999px; font-size: .8rem; white-space: nowrap; }
    .section-nav a.active { border-color: var(--nav-accent); }
}
@media (max-width: 480px) { .topbar-links { gap: 16px; } .topbar-links a { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .topbar-links a, .topbar-links a::after, .section-nav a { transition: none; } }

.book-fallback { margin: 14px 0 0; font-size: .88rem; }
.book-fallback a { color: var(--nav-accent); }
#book .calendly-inline-widget { border-radius: 12px; overflow: hidden; }

/* Project cards: game download menu + demo video dialog */
.repo-action[hidden] { display: none; }
.repo-download { display: inline-block; }
.repo-download summary { cursor: pointer; list-style: none; }
.repo-download summary::-webkit-details-marker { display: none; }
.repo-download-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.repo-download-menu a {
    padding: 6px 12px; border: 1px solid var(--nav-line); border-radius: 10px;
    color: var(--nav-fg-strong); font-size: .82rem; text-decoration: none;
}
.repo-download-menu a:hover, .repo-download-menu a:focus-visible { border-color: var(--nav-accent); outline: none; }
.demo-dialog { width: min(900px, 94vw); padding: 0; border: 1px solid var(--nav-line); border-radius: 14px; background: #000; overflow: hidden; }
.demo-dialog::backdrop { background: rgba(5,8,14,.8); }
.demo-dialog video { display: block; width: 100%; max-height: 80vh; }
.demo-dialog-close {
    position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}


/* Project-card polish: consistent footer alignment, readable technology labels and clear action hierarchy. */
#projects .repo-grid { align-items: stretch; }
#projects .repo-card {
    min-width: 0;
    min-height: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
}
#projects .repo-card-content { flex: 1 1 auto; min-width: 0; }
#projects .repo-name { display: block; overflow-wrap: anywhere; word-break: normal; }
#projects .repo-desc { margin: 12px 0 0; }
#projects .repo-card-footer { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
#projects .repo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; }
#projects .repo-action { min-height: 36px; padding: 8px 12px; border-radius: 999px; font: inherit; font-size: .8rem; line-height: 1.25; }
#projects .repo-action-live { background: rgba(121,199,255,.12); border-color: rgba(121,199,255,.55); color: #bfe6ff; }
#projects .repo-action:not(.repo-action-live) { background: rgba(255,255,255,.06); border-color: #526078; color: #e4eaf4; }
#projects .repo-action:focus-visible { outline: 2px solid #9bd8ff; outline-offset: 3px; }
#projects .repo-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; padding-top: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#projects .repo-meta .meta-item:first-child { max-width: 100%; }
@media (max-width: 900px) { #projects .repo-card { min-height: 230px; } }
@media (max-width: 600px) { #projects .repo-card { min-height: 0; } }
@media (prefers-color-scheme: dark) {
    #projects .repo-action:not(.repo-action-live) { background: rgba(255,255,255,.06); color: #e4eaf4; border-color: #526078; }
}


/* ---- Shared status message (repo grid, certificates) ---- */
.repo-msg, .cert-msg { grid-column: 1 / -1; margin: 0; padding: 24px 0; color: var(--text-main); opacity: .75; font-family: var(--font-mono); }

/* ---- Certificates page ---- */
.cert-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 28px 0 8px; }
.cert-search { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--text-heading); font: inherit; font-size: .92rem; }
.cert-search:focus-visible, .cert-chip:focus-visible, .cert-dialog-close:focus-visible { outline: 2px solid var(--cyan-accent); outline-offset: 2px; }
.cert-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-filters[hidden] { display: none; }
.cert-chip { padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-main); font: inherit; font-size: .82rem; cursor: pointer; }
.cert-chip:hover { border-color: var(--purple-accent); }
.cert-chip[aria-pressed="true"] { border-color: var(--cyan-accent); color: var(--cyan-accent); }
.cert-count { margin: 8px 0 0; color: var(--text-main); opacity: .75; font-family: var(--font-mono); font-size: .8rem; }
.cert-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
@media (min-width: 600px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
.cert { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.cert-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--text-heading) 5%, transparent); }
.cert-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-ext { color: var(--purple-accent); font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; }
.cert-body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
.cert-title { margin: 0; color: var(--text-heading); font-size: 1.02rem; overflow-wrap: anywhere; }
.cert-meta { flex: 1; margin: 6px 0 14px; color: var(--text-main); opacity: .8; font-size: .86rem; overflow-wrap: anywhere; }
.cert-actions { display: flex; gap: 10px; }
.cert-actions .btn { flex: 1; width: auto; padding: 9px 12px; font-size: .85rem; text-align: center; }
.cert-dialog { max-width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.cert-dialog::backdrop { background: rgba(5, 8, 14, .85); }
.cert-dialog img { display: block; max-width: 100%; max-height: 92vh; }
.cert-dialog-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--text-heading); font-size: 1.3rem; line-height: 1; cursor: pointer; }