.splash{display:none!important}

/* Extracted from the original index.html; original declarations retained. */

    :root {
      --bg: #050505; --panel: rgba(255,255,255,.035); --panel-2: rgba(255,255,255,.06); --line: rgba(255,255,255,.10);
      --ink: #f3f3f3; --muted: #8f8f8f; --dim: #5d5d5d; --white: #fff; --ok: #4ade80;
      --display: "Syne", "Arial Black", Impact, sans-serif;
      --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
      --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      color-scheme: dark;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    body:before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 78%); }
    a { color: inherit; }
    :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
    .skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: #fff; color: #000; font-weight: 600; border-radius: 8px; }
    .skip-link:focus { top: 12px; }
    .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
    .mono { font-family: var(--mono); }
    .label { font: 400 .78rem var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }

    /* splash */
    .splash { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; text-align: center; transition: opacity .7s ease, visibility .7s; cursor: pointer; }
    .splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
    /* Safety net: even if the script never runs, the intro screen leaves on its own. */
    .splash { animation: splash-out .7s 3.2s forwards; }
    @keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
    .splash-icons { display: flex; gap: 16px; justify-content: center; margin-bottom: 22px; }
    .splash-icons i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 .8rem var(--mono); color: #bbb; font-style: normal; background: #0d0d0d; }
    .splash h2 { font: 800 clamp(1.5rem, 4vw, 2.3rem)/1.2 var(--display); margin: 0 0 14px; letter-spacing: -.01em; }
    .splash p { margin: 0 auto; width: max-content; max-width: 90vw; padding: 5px 16px; border-radius: 999px; font: 400 .72rem var(--mono); color: var(--dim); background: #0d0d0d; border: 1px solid var(--line); }
    .splash-in { opacity: 0; animation: rise .9s .2s ease forwards; }
    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    /* floating nav */
    .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; pointer-events: none; }
    .nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .pill { pointer-events: auto; background: rgba(12,12,12,.72); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    .brand { padding: 10px 20px; font: 500 .85rem var(--mono); text-decoration: none; color: #cfcfcf; }
    .nav ul { display: flex; gap: 6px; margin: 0; padding: 6px 10px; list-style: none; }
    .nav li a { display: block; padding: 6px 14px; font: 400 .8rem var(--mono); color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
    .nav li a:hover { color: #fff; }
    .nav li a[aria-current="true"] { color: #fff; border-bottom-color: #fff; }

    /* hero */
    .hero { overflow-x: clip; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 60px; position: relative; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 40px; align-items: center; width: 100%; }
    .hero-copy { min-width: 0; container-type: inline-size; }
    .status { display: inline-flex; align-items: center; gap: 10px; font: 400 .75rem var(--mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
    .status:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
    /* Sized from the column it sits in (cqw), so the widest line can never be wider than its box. */
    h1 { font: 800 clamp(1.9rem, 10.6cqw, 6rem)/1 var(--display); letter-spacing: -.02em; margin: 0 0 22px; }
    h1 span { display: block; white-space: nowrap; }
    /* The gradient is only painted inside this box, so it gets room for descenders (the p) and the last letter. */
    h1 .grad { width: fit-content; max-width: 100%; padding: 0 .08em .2em 0; margin-bottom: -.2em; background: linear-gradient(180deg, #9a9a9a, #4b4b4b); -webkit-background-clip: text; background-clip: text; color: transparent; }
    @supports not (width: 1cqw) { h1 { font-size: clamp(1.9rem, 5.2vw, 4.4rem); } }
    .typed { font: 400 1.05rem var(--mono); color: #bdbdbd; min-height: 1.8em; margin: 0 0 14px; }
    .typed:after { content: "_"; animation: blink 1s steps(1) infinite; }
    @keyframes blink { 50% { opacity: 0; } }
    .hero p.desc { color: var(--muted); max-width: 34em; margin: 0 0 22px; font-weight: 300; font-size: 1.04rem; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
    .chips li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font: 400 .78rem var(--mono); color: #b5b5b5; }
    .hints { font: 400 .78rem/1.9 var(--mono); color: var(--dim); margin: 0; padding: 0; list-style: none; }
    .hints li:before { content: "/ "; }
    .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font: 400 .72rem var(--mono); color: var(--dim); letter-spacing: .14em; text-decoration: none; }

    /* lanyard */
    .lanyard { position: relative; height: 560px; pointer-events: none; user-select: none; -webkit-user-select: none; }
    .stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
    .stage, .stage * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    body.lanyard-drag, body.lanyard-drag * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
    .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    .badge { position: absolute; left: 0; top: 0; width: 214px; padding: 12px 12px 14px; background: #f5f5f5; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.6); cursor: grab; pointer-events: auto; touch-action: none; transform-origin: 50% 50%; will-change: transform; visibility: hidden; }
    .stage.ready .badge { visibility: visible; }
    .clip { position: absolute; top: -14px; left: 50%; width: 26px; height: 16px; margin-left: -13px; background: linear-gradient(#d4d4d4, #9a9a9a); border-radius: 3px 3px 6px 6px; }
    .badge:active { cursor: grabbing; }
    .gyro-btn { position: absolute; z-index: 6; pointer-events: auto; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,12,12,.8); color: #d6d6d6; font: 400 .75rem var(--mono); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .gyro-btn[hidden] { display: none; }
    .photo { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #1b1b1b; display: grid; place-items: center; font: 800 3rem var(--display); color: #666; }
    .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); pointer-events: none; }
    .badge-name { margin-top: 10px; color: #111; font: 700 .86rem/1.2 var(--display); text-align: center; }
    .badge-role { color: #555; font: 400 .66rem var(--mono); text-align: center; margin-top: 2px; }

    /* sections */
    .block { padding: 100px 0; }
    .center { text-align: center; }
    h2.big { font: 800 clamp(1.9rem, 4.4vw, 3.2rem)/1.08 var(--display); letter-spacing: -.02em; margin: 6px 0 12px; }
    h2.big.name { font-size: clamp(2.3rem, 5.6vw, 4.4rem); max-width: 7em; }
    .sub { color: var(--muted); font-weight: 300; max-width: 36em; margin: 0 auto; }
    .about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 48px; align-items: center; }
    .about-grid p { color: var(--muted); font-weight: 300; max-width: 36em; }
    .quote { display: inline-block; margin: 8px 0 26px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: italic 400 .88rem var(--sans); color: #d6d6d6; }
    .btns { display: flex; flex-wrap: wrap; gap: 10px; }
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: #fff; font: 500 .85rem var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
    .btn:hover { border-color: rgba(255,255,255,.45); }
    .btn.solid { background: #fff; color: #000; border-color: #fff; }
    .btn.solid:hover { background: #dcdcdc; }
    .portrait { width: min(300px, 70vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #151515; position: relative; display: grid; place-items: center; font: 800 4rem var(--display); color: #555; }
    .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
    .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
    .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; backdrop-filter: blur(6px); }
    .stat strong { display: block; font: 800 2rem/1.2 var(--display); }
    .stat span { font: 400 .72rem var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
    .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
    .cards.two h3 { margin: 0 0 4px; font: 700 1.05rem var(--display); }
    .cards.two p { margin: 0; color: var(--muted); font-size: .92rem; }
    .cards.two .label { display: block; margin-bottom: 10px; }

    /* featured */
    .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 36px; margin-top: 44px; }
    .case-lead { font-size: 1.15rem; font-weight: 300; color: #d0d0d0; max-width: 38em; margin: 0 0 30px; }
    .arch-row { display: grid; gap: 12px; }
    .arch-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .arch-box { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
    .arch-box.hot { border-color: rgba(255,255,255,.5); }
    .arch-box strong { display: block; font: 700 .95rem var(--display); margin-bottom: 4px; }
    .arch-box span { color: var(--muted); font-size: .88rem; line-height: 1.5; display: block; }
    .arch-link { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 10px 0; text-align: center; font: 400 .72rem var(--mono); color: var(--dim); }
    .arch-link span:before { content: "\2193  "; color: #fff; }
    .arch-rule { margin: 14px 0 28px; font: 400 .8rem var(--mono); color: var(--muted); }
    .arch-rule strong { color: #fff; font-weight: 500; }
    .facts { display: grid; grid-template-columns: 7rem 1fr; margin: 0 0 24px; }
    .facts dt, .facts dd { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
    .facts dt { font: 400 .78rem var(--mono); color: #fff; letter-spacing: .08em; text-transform: uppercase; padding-right: 16px; }
    .facts dd { color: var(--muted); font-weight: 300; }

    /* showcase */
    .tabs { display: flex; width: min(520px, 100%); margin: 36px auto 40px; padding: 5px; gap: 4px; }
    .tabs button { flex: 1; padding: 10px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 400 .82rem var(--mono); cursor: pointer; }
    .tabs button:hover { color: #fff; }
    .tabs button[aria-selected="true"] { background: rgba(255,255,255,.1); color: #fff; }
    [role="tabpanel"] { animation: fade .35s ease; }
    @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
    .pcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: border-color .2s, transform .2s; }
    .pcard:hover { border-color: rgba(255,255,255,.3); transform: translateY(-3px); }
    .pcard-top { display: flex; justify-content: space-between; gap: 8px; font: 400 .72rem var(--mono); color: var(--dim); margin-bottom: 26px; }
    .pcard-top .lang { color: #cfcfcf; padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; }
    .pcard h3 { margin: 0 0 8px; font: 700 1.15rem/1.25 var(--display); overflow-wrap: anywhere; }
    .pcard p { margin: 0 0 22px; color: var(--muted); font-size: .92rem; font-weight: 300; flex: 1; }
    .pcard .btn { align-self: flex-end; padding: 8px 16px; background: rgba(255,255,255,.08); border-color: transparent; }
    .pcard .btn:hover { background: rgba(255,255,255,.16); }
    .more { text-align: center; margin-top: 28px; font: 400 .8rem var(--mono); }
    .more a { color: var(--muted); }
    .certificate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
    .certificate-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
    .cert-open { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; }
    .certificate-card img { display: block; width: 100%; height: 170px; object-fit: cover; }
    .pdf-thumb { height: 170px; display: grid; place-items: center; background: #111; color: #777; font: 800 1.6rem var(--display); }
    .certificate-info { padding: 14px 16px 16px; }
    .certificate-info h3 { margin: 0; font: 700 .98rem/1.3 var(--display); }
    .certificate-info p { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
    .empty-certificates { grid-column: 1 / -1; margin: 0; padding: 26px; text-align: center; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
    .tech { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
    .tech li { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; font: 400 .74rem var(--mono); color: var(--muted); }
    .tech li b { font: 800 1.5rem var(--display); color: #fff; letter-spacing: -.02em; }
    .tech li:hover { border-color: rgba(255,255,255,.35); }
    dialog { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
    dialog::backdrop { background: rgba(0,0,0,.86); }
    dialog img { display: block; max-width: 92vw; max-height: 88vh; border-radius: 10px; background: #fff; }
    #cert-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 1.1rem; cursor: pointer; }

    .managed-content { padding: 20px 0 80px; }
    .managed-content h3 { text-transform: capitalize; margin: 28px 0 14px; font: 700 1.1rem var(--display); }
    .managed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .managed-card { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
    .managed-card img { width: 100%; max-height: 170px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; filter: grayscale(1); }
    .managed-card h4 { margin: 0 0 6px; font: 700 1rem var(--display); }
    .managed-card p { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
    .managed-card small { color: var(--dim); font-family: var(--mono); }

    /* contact */
    .contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; max-width: 900px; margin: 44px auto 0; padding: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; }
    .contact-panel h3 { margin: 0 0 8px; font: 700 1.5rem var(--display); }
    .contact-panel p { color: var(--muted); font-weight: 300; margin: 0 0 20px; }
    #contact-links { display: grid; gap: 10px; align-content: start; }
    #contact-links p { margin: 0; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--muted); font-size: .9rem; }
    #contact-links strong { color: #fff; font-weight: 600; }
    #contact-links a { text-decoration: none; overflow-wrap: anywhere; text-align: right; }
    #contact-links a:hover { text-decoration: underline; }
    footer { padding: 36px 0 44px; text-align: center; color: var(--dim); font: 400 .74rem var(--mono); border-top: 1px solid var(--line); }


    /* ---------- additions ---------- */
    .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; pointer-events: none; }
    .progress i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
    .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; padding: 10px 16px; font: 400 .78rem var(--mono); text-decoration: none; color: #cfcfcf; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
    .to-top.show { opacity: 1; visibility: visible; transform: none; }
    .to-top:hover { color: #fff; border-color: rgba(255,255,255,.4); }
    .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .js .reveal.in { opacity: 1; transform: none; }
    .filters { display: grid; gap: 12px; margin: 0 0 22px; }
    .filters input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 400 .88rem var(--mono); }
    .filters input::placeholder { color: var(--dim); }
    .fchips { display: flex; flex-wrap: wrap; gap: 8px; }
    .fchip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 400 .78rem var(--mono); cursor: pointer; }
    .fchip small { color: var(--dim); font-size: .72rem; }
    .fchip:hover { color: #fff; border-color: rgba(255,255,255,.35); }
    .fchip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
    .fchip[aria-pressed="true"] small { color: #444; }
    .fcount { margin: 0; font: 400 .74rem var(--mono); color: var(--dim); }
    .activity { margin-top: 14px; }
    .activity ul { list-style: none; margin: 10px 0 0; padding: 0; }
    .activity li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font: 400 .84rem var(--mono); color: var(--muted); }
    .activity li a { color: #fff; text-decoration: none; overflow-wrap: anywhere; }
    .activity li a:hover { text-decoration: underline; }
    .activity .when { color: var(--dim); white-space: nowrap; }
    .stars { color: #cfcfcf; }
    dialog { position: relative; }
    .cert-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: #d6d6d6; font: 400 .8rem var(--mono); }
    .cert-bar button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 1.1rem; cursor: pointer; flex: none; }
    .cert-bar span { text-align: center; overflow-wrap: anywhere; }

    @media (max-width: 900px) {
      .hero-grid, .about-grid { grid-template-columns: 1fr; }
      .lanyard { height: 470px; order: -1; margin-top: -30px; }
        .hero { padding-top: 100px; }
      .about-grid .portrait { order: -1; }
      .cards, .cards.two { grid-template-columns: 1fr; }
      .arch-row.three, .arch-link { grid-template-columns: 1fr; }
      .arch-link { text-align: left; gap: 4px; }
      .contact-panel { grid-template-columns: 1fr; padding: 26px; }
      .panel { padding: 24px; }
      .block { padding: 72px 0; }
      .wrap { padding: 0 20px; }
      .brand { display: none; }
      .nav .wrap { justify-content: center; }
      .nav ul { gap: 0; padding: 5px 6px; }
      .nav li a { padding: 6px 9px; font-size: .72rem; }
    }
    @media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dt { border-bottom: 0; padding-bottom: 0; } .facts dd { border-top: 0; padding-top: 4px; } .scroll-cue { display: none; } .tabs button { font-size: .72rem; } }
    @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .to-top { transition: none; } .splash { animation: none; } html { scroll-behavior: auto; } .splash-in { animation: none; opacity: 1; } .typed:after { animation: none; } [role="tabpanel"] { animation: none; } .pcard { transition: none; } .splash { transition: none; } }
    @media print {
      :root { --bg: #fff; --panel: #fff; --line: #bbb; --ink: #000; --muted: #333; --dim: #555; }
      body:before, .splash, .nav, .lanyard, .scroll-cue, .tabs, .btns, .more, footer, .progress, .to-top, .filters, dialog { display: none !important; }
      .js .reveal { opacity: 1 !important; transform: none !important; }
      [role="tabpanel"][hidden] { display: block !important; }
      h1 span { color: #000; background: none; }
      .hero { min-height: 0; padding: 20px 0; } .block { padding: 24px 0; }
      .arch-box strong, .stat strong, .tech li b, .facts dt, .contact-panel h3, #contact-links strong { color: #000; }
      a { text-decoration: none; }
    }
  
/* ===== Reference theme visual integration (Davin Yoga portfolio theme) ===== */
:root{
 --theme-violet:#6c63ff;--theme-cyan:#00e5ff;--theme-pink:#ff4d9d;
 --theme-glass:rgba(255,255,255,.045);--theme-glass-line:rgba(255,255,255,.09);
}
body{
 background-color:#050816!important;
 background-image:radial-gradient(ellipse at 15% 8%,rgba(108,99,255,.14),transparent 38%),
 radial-gradient(ellipse at 85% 28%,rgba(0,229,255,.08),transparent 36%),
 radial-gradient(ellipse at 50% 85%,rgba(255,77,157,.055),transparent 42%)!important;
}
body:before{
 background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important;
 background-size:48px 48px!important;
 -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 80%)!important;
 mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 80%)!important;
}
.nav .wrap{gap:14px}
.nav .pill{background:rgba(9,12,28,.72);border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 40px rgba(0,0,0,.12)}
.nav li a{border-radius:999px;border-bottom:0!important;transition:background .3s,color .3s}
.nav li a:hover,.nav li a[aria-current="true"]{background:rgba(255,255,255,.07);color:#fff}
.brand{color:#fff!important;font-weight:700;letter-spacing:-.03em}
h1 .grad{background:linear-gradient(100deg,#6c63ff 0%,#00e5ff 58%,#ff4d9d 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
h2.big{background:linear-gradient(100deg,#fff 15%,#b8b5ff 62%,#80f3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.status:before{background:var(--theme-cyan)!important;box-shadow:0 0 14px var(--theme-cyan)!important}
.chips li,.quote,.card,.panel,.pcard,.certificate-card,.tech li,.arch-box,.contact-panel,.stat{
 background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.085)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.card,.panel,.pcard,.certificate-card,.contact-panel,.tech li{box-shadow:0 16px 45px rgba(0,0,0,.13);transition:transform .35s,border-color .35s,box-shadow .35s}
.card:hover,.pcard:hover,.certificate-card:hover,.tech li:hover{transform:translateY(-4px);border-color:rgba(108,99,255,.42)!important;box-shadow:0 18px 45px rgba(108,99,255,.08)}
.btn{border-radius:999px!important;transition:transform .3s,background .3s,border-color .3s!important}
.btn:hover{transform:translateY(-2px);border-color:rgba(0,229,255,.45)!important}
.btn.solid{background:linear-gradient(120deg,#6c63ff,#514ac7)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 28px rgba(108,99,255,.22)}
.pcard .btn{background:rgba(108,99,255,.12)!important;color:#e7e5ff!important;border:1px solid rgba(108,99,255,.2)!important}
.pcard .btn:hover{background:rgba(0,229,255,.12)!important;border-color:rgba(0,229,255,.25)!important}
.tabs button[aria-selected="true"]{background:linear-gradient(120deg,rgba(108,99,255,.23),rgba(0,229,255,.12))!important;border:1px solid rgba(108,99,255,.25)}
.pill.brand,.nav ul,.theme-toggle{box-shadow:0 8px 32px rgba(0,0,0,.16)}
.theme-toggle{border-color:rgba(108,99,255,.42)!important;background:linear-gradient(120deg,rgba(108,99,255,.18),rgba(0,229,255,.09))!important;color:#fff!important;font:500 .78rem var(--mono);padding:8px 14px!important}
.theme-toggle:hover{border-color:rgba(0,229,255,.65)!important;box-shadow:0 0 24px rgba(108,99,255,.16)}
.theme-toggle .theme-icon{color:#00e5ff}
.progress{background:linear-gradient(90deg,#6c63ff,#00e5ff,#ff4d9d)!important}
a:focus-visible,button:focus-visible{outline-color:#00e5ff!important}
::selection{background:#6c63ff;color:#fff}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6c63ff,#00e5ff)!important}
@keyframes themeReveal{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
body:not(.theme-ready) main{animation:themeReveal .85s cubic-bezier(.22,1,.36,1) both}
body.theme-ready main{animation:none}
@media(prefers-reduced-motion:reduce){body:not(.theme-ready) main{animation:none}}
@media(max-width:720px){
 .nav .wrap{gap:7px}
 .nav ul{gap:0;padding:4px 5px}
 .nav li a{padding:6px 8px;font-size:.69rem}
 .theme-toggle{padding:7px 10px!important;gap:5px;font-size:.68rem}
}