:root {
      color-scheme: dark;
      --bg: #0d0f14;
      --surface: #12151c;
      --surface-raised: #171b24;
      --border: #292e39;
      --text: #e7eaf0;
      --muted: #9ba3b4;
      --blue: #78a9ff;
      --green: #86d7a1;
      --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      isolation: isolate;
      margin: 0;
      background:
        radial-gradient(ellipse 75% 55% at 12% 4%, rgb(44 92 180 / 20%), transparent 75%),
        radial-gradient(ellipse 55% 45% at 92% 36%, rgb(45 72 155 / 15%), transparent 75%),
        radial-gradient(ellipse 70% 45% at 52% 100%, rgb(20 50 105 / 14%), transparent 78%),
        linear-gradient(rgb(120 169 255 / 2%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(120 169 255 / 2%) 1px, transparent 1px),
        var(--bg);
      background-size: auto, auto, auto, 56px 56px, 56px 56px, auto;
      color: var(--text);
      font: 16px/1.7 var(--sans);
    }
    body::before {
      position: fixed;
      z-index: -1;
      inset: 0;
      background-image: radial-gradient(circle, rgb(160 193 255 / 28%) 1px, transparent 1.3px);
      background-size: 24px 24px;
      content: "";
      pointer-events: none;
    }
    body::after {
      position: fixed;
      z-index: -1;
      top: 8%;
      right: -18rem;
      width: 44rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgb(40 100 220 / 18%), rgb(25 61 145 / 8%) 38%, transparent 70%);
      content: "";
      filter: blur(18px);
      pointer-events: none;
    }
    a { color: inherit; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 4px;
    }
    .container { width: min(100% - 64px, 1200px); margin-inline: auto; }

    .site-header {
      position: sticky;
      z-index: 5;
      top: 0;
      border-bottom: 1px solid rgb(41 46 57 / 85%);
      background: rgb(13 15 20 / 88%);
      backdrop-filter: blur(14px);
    }
    .nav-wrap {
      display: flex;
      min-height: 66px;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      color: var(--text);
      font: 700 15px/1.2 var(--mono);
      text-decoration: none;
      white-space: nowrap;
    }
    .brand span { color: var(--blue); }
    .site-nav { display: flex; align-items: center; gap: 26px; }
    .site-nav a {
      color: var(--muted);
      font: 13px var(--mono);
      text-decoration: none;
      transition: color 160ms ease;
    }
    .site-nav a:hover, .site-nav a[aria-current="location"], .site-nav button:hover { color: var(--blue); }
    .site-nav .nav-contact {
      padding: 0;
      border: 0;
      background: none;
      color: var(--muted);
      font: 13px var(--mono);
      cursor: pointer;
      transition: color 160ms ease;
    }

    .hero {
      display: flex;
      min-height: calc(100vh - 66px);
      min-height: calc(100svh - 66px);
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding-block: clamp(72px, 10vh, 120px);
    }
    .eyebrow, .section-title, .group-label {
      color: var(--blue);
      font-family: var(--mono);
    }
    .eyebrow { font-size: 14px; }
    .hero h1 {
      margin: 16px 0 4px;
      font-size: clamp(48px, 8vw, 76px);
      letter-spacing: -0.065em;
      line-height: 1.05;
    }
    .hero-role { margin: 8px 0 14px; color: #c5cad5; font: 16px var(--mono); }
    .hero-copy { max-width: 610px; color: var(--muted); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
    .button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      border: 1px solid var(--border);
      border-radius: 7px;
      color: var(--text);
      font: 13px var(--mono);
      text-decoration: none;
      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }
    .button:hover { transform: translateY(-2px); border-color: #52617c; background: var(--surface-raised); }
    .button.primary { border-color: #5a82c8; background: #1b2b48; color: #d9e6ff; }

    .section {
      display: grid;
      min-height: calc(100vh - 66px);
      min-height: calc(100svh - 66px);
      align-items: center;
      padding-block: clamp(72px, 10vh, 120px);
      border-top: 1px solid var(--border);
    }
    #skills { align-items: start; padding-top: clamp(52px, 7vh, 80px); }
    .section-title { margin: 0 0 28px; font-size: 22px; letter-spacing: -0.03em; }
    .section-title::before { content: "## "; color: #65718a; }
    .about-grid { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: clamp(40px, 7vw, 88px); align-items: center; }
    .profile-card {
      display: grid;
      aspect-ratio: 1;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 14px;
      background:
        radial-gradient(circle at 50% 40%, rgb(120 169 255 / 19%), transparent 56%),
        var(--surface);
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
    }
    .profile-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 42%;
    }
    .about-copy { color: #c0c6d2; }
    .about-copy p:first-child { margin-top: 0; }
    .about-copy a { color: var(--blue); text-decoration-color: #526c99; text-underline-offset: 3px; }
    .skill-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .skill-group, .video-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: linear-gradient(145deg, rgb(255 255 255 / 2%), transparent 60%), var(--surface);
    }
    .skill-group { min-height: 230px; padding: 28px; }
    .group-label { margin: 0 0 22px; font-size: 14px; }
    .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px; }
    .chip {
      display: flex;
      min-height: 112px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 10px;
      border: 1px solid #303746;
      border-radius: 9px;
      color: #c8ced9;
      font: 13px var(--mono);
      text-align: center;
      background: rgb(255 255 255 / 2%);
      transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    }
    .skill-icon { width: 40px; height: 40px; object-fit: contain; transition: transform 180ms ease; }
    @media (hover: hover) {
      .chip:hover {
        transform: translateY(-5px);
        border-color: rgb(120 169 255 / 55%);
        background-color: rgb(120 169 255 / 8%);
        box-shadow: 0 10px 28px rgb(0 0 0 / 22%), 0 0 18px rgb(72 125 230 / 12%);
      }
      .chip:hover .skill-icon { transform: scale(1.12); }
    }
    .skill-icon.github-icon { filter: invert(1); }
    .skill-icon.uiux-icon { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
    .game-grid, .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .game-card {
      position: relative;
      display: flex;
      min-height: 88px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      overflow: hidden;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: linear-gradient(145deg, rgb(255 255 255 / 4%), transparent 58%), var(--surface);
      color: inherit;
      text-align: center;
      text-decoration: none;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .game-card::before {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, var(--game-glow), transparent 70%);
      content: "";
      opacity: .8;
      pointer-events: none;
    }
    .game-art {
      position: relative;
      display: block;
      width: 32px;
      height: 32px;
      object-fit: contain;
      transition: transform 180ms ease;
    }
    .game-genshin { --game-accent: #e9c98b; --game-glow: rgb(212 162 76 / 18%); }
    .game-wuthering { --game-accent: #94d8e1; --game-glow: rgb(55 162 180 / 18%); }
    .game-valorant { --game-accent: #ff6a73; --game-glow: rgb(230 55 72 / 18%); }
    .game-growtopia { --game-accent: #9ee28b; --game-glow: rgb(88 190 82 / 18%); }
    .game-starrail { --game-accent: #c5a7ff; --game-glow: rgb(131 94 212 / 20%); }
    @media (hover: hover) {
      .game-card:hover {
        transform: translateY(-5px);
        border-color: var(--game-accent);
        box-shadow: 0 14px 36px rgb(0 0 0 / 25%), 0 0 24px var(--game-glow);
      }
      .game-card:hover .game-art { transform: scale(1.04); }
    }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .section-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }
    .section-heading .section-title { margin-bottom: 0; }
    .section-heading p { margin: 0; color: var(--muted); font-size: 14px; }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .video-card { overflow: hidden; }
    .video-card { display: block; color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
    .video-card:hover { transform: translateY(-3px); border-color: #52617c; }
    .video-thumb {
      position: relative;
      display: grid;
      min-height: 240px;
      place-items: center;
      background:
        radial-gradient(ellipse at 50% 100%, rgb(85 119 190 / 23%), transparent 55%),
        linear-gradient(135deg, #1a202c, #11141b 70%);
    }
    .video-thumb img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
    .play-icon {
      position: absolute;
      z-index: 1;
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      padding-left: 3px;
      border: 1px solid rgb(255 255 255 / 22%);
      border-radius: 50%;
      background: rgb(13 15 20 / 58%);
      color: #fff;
      font-size: 16px;
    }
    .video-caption { padding: 14px 15px 16px; }
    .video-caption strong { display: block; font-size: 14px; }
    .video-caption span { color: var(--muted); font: 11px var(--mono); }
    .contact-dialog {
      width: min(760px, calc(100% - 32px));
      max-width: none;
      max-height: min(90vh, 760px);
      padding: 26px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
    }
    .contact-dialog::backdrop { background: rgb(5 7 11 / 76%); backdrop-filter: blur(5px); }
    .contact-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .contact-dialog-heading .section-title { margin-bottom: 20px; }
    .contact-close {
      display: grid;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface-raised);
      color: var(--muted);
      font: 24px/1 var(--sans);
      cursor: pointer;
    }
    .contact-close:hover { border-color: #52617c; color: var(--text); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
    .contact-copy { color: var(--muted); }
    .contact-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
    .contact-list .contact-social { display: flex; align-items: center; }
    .contact-icon { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
    .contact-icon-link { display: inline-flex; border-radius: 3px; }
    .contact-icon-link:hover { opacity: 0.72; }
    .contact-icon-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
    .contact-icon .icon-dot { fill: var(--blue); stroke: none; }
    .contact-icon.github-contact-icon { stroke: var(--text); }
    .contact-icon.youtube-icon { stroke: #ff6b6b; }
    .contact-icon .youtube-play { fill: #ff6b6b; stroke: none; }
    .contact-icon.whatsapp-icon { stroke: var(--green); }
    .contact-list span { color: var(--blue); }
    .contact-form { display: grid; gap: 12px; }
    .contact-form label { display: grid; gap: 6px; color: var(--muted); font: 12px var(--mono); }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: #10131a;
      color: var(--text);
      font: 14px var(--sans);
    }
    .contact-form textarea { min-height: 112px; resize: vertical; }
    .contact-form .button { justify-self: start; cursor: pointer; }
    .form-note { margin: 0; color: #858e9f; font-size: 12px; }
    footer { padding-block: 22px; border-top: 1px solid var(--border); color: var(--muted); font: 12px var(--mono); }
    footer .container { display: flex; justify-content: space-between; gap: 12px; }
    footer a { color: var(--blue); text-decoration: none; }

    @media (max-width: 700px) {
      .container { width: min(100% - 36px, 620px); }
      .nav-wrap { min-height: 60px; flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 13px; }
      .site-nav { width: 100%; gap: 22px; overflow-x: auto; padding-bottom: 2px; }
      .site-nav a { flex: 0 0 auto; }
      .hero { min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); padding-block: 68px; }
      .hero-copy { font-size: 15px; }
      .hero-role { font-size: 13px; }
      .section { min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); padding-block: 56px; }
      #skills { padding-top: 40px; }
      .about-grid { grid-template-columns: 1fr; gap: 22px; }
      .profile-card { width: min(190px, 55vw); }
      .skill-groups, .contact-grid { grid-template-columns: 1fr; }
      .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      .game-card { min-height: 72px; padding: 12px; }
      .skill-group { min-height: 0; padding: 22px; }
      .chips { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
      .chip { min-height: 100px; }
      .skill-icon { width: 36px; height: 36px; }
      .video-grid { grid-template-columns: 1fr; }
      .video-thumb { min-height: 220px; }
      .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
      footer .container { flex-direction: column; }
      .contact-dialog { padding: 20px; }
    }
    @media (max-width: 380px) {
      .game-grid { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: 0.01ms !important; }
    }