*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg-deep:    #0e0e0e;
      --bg-base:    #111111;
      --bg-raised:  #1a1a1a;
      --bg-high:    #222222;
      --border:     rgba(255,255,255,0.08);
      --border-mid: rgba(255,255,255,0.13);
      --blue:       #2f6de4;
      --blue-light: #5b8ff0;
      --blue-glow:  rgba(47,109,228,0.28);
      --blue-tint:  rgba(47,109,228,0.08);
      --text:       #f2f2f2;
      --text-2:     #dcdcf1;
      --text-3:     #8787ac;
      --ff-head:    'Jost', sans-serif;
      --ff-body:    'DM Sans', sans-serif;
      --r:          12px;
      --r-lg:       20px;
      --r-xl:       28px;
      --nav-h:      64px;
      --ease:       cubic-bezier(.16,1,.3,1);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--ff-body);
      background:
        radial-gradient(ellipse 90% 80% at 105% -5%, rgba(47,109,228,.6) 0%, rgba(47,109,228,.1) 50%, transparent 68%),
        radial-gradient(ellipse 65% 55% at -5% 108%, rgba(26,50,180,.32) 0%, rgba(26,50,180,.05) 46%, transparent 64%),
        radial-gradient(ellipse 50% 40% at 55% 95%, rgba(15,35,130,.18) 0%, transparent 55%),
        linear-gradient(160deg, #090e1c 0%, #0c0c16 50%, #0a0d1a 100%);
      background-attachment: fixed;
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    html[data-theme="light"] body {
      background:
        radial-gradient(ellipse 90% 80% at 105% -5%, rgba(47,109,228,.5) 0%, rgba(47,109,228,.12) 52%, transparent 70%),
        radial-gradient(ellipse 65% 55% at -5% 108%, rgba(47,109,228,.25) 0%, rgba(47,109,228,.04) 48%, transparent 65%),
        linear-gradient(160deg, #d8e4ff 0%, #eaefff 40%, #f0f0f6 100%);
      background-attachment: fixed;
    }
    ::selection { background: var(--blue); color: #fff; }
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg-base); }
    ::-webkit-scrollbar-thumb { background: var(--bg-high); border-radius: 3px; }
    img { max-width: 100%; height: auto; display: block; }
    h1,h2,h3,h4 { font-family: var(--ff-head); line-height: 1.1; color: var(--text); }
    h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; }
    h3 { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 600; }
    p  { color: var(--text-2); font-weight: 300; font-size: clamp(.9rem, 2vw, 1rem); }
    .wrap    { max-width: 860px;  margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2.5rem); }
    .wrap-w  { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2.5rem); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: .55rem;
      font-family: var(--ff-head); font-size: .7rem; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 1rem;
    }
    .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blue); border-radius: 2px; flex-shrink: 0; }
    .chip { display: inline-block; padding: .25rem .72rem; border: 1px solid var(--border); border-radius: 99px; font-size: .75rem; color: var(--text-2); }
    .divider { height: 1px; background: var(--border); }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      min-height: 48px; padding: 0 1.6rem; border-radius: 99px;
      font-family: var(--ff-head); font-size: .9rem; font-weight: 700;
      text-decoration: none; border: none; cursor: pointer; transition: all .25s var(--ease);
      white-space: nowrap; -webkit-tap-highlight-color: transparent;
    }
    .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
    .btn-primary { background: var(--blue); color: #fff; }
    .btn-primary:hover { background: var(--blue-light); box-shadow: 0 0 28px 2px var(--blue-glow); transform: translateY(-2px); }
    .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-mid); }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue-light); transform: translateY(-2px); }
    .grad { background: linear-gradient(130deg, var(--blue-light), #7eb3ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    /* NAV */
    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h);
      display: flex; align-items: center;
      background: rgba(14,14,14,.88); backdrop-filter: blur(24px) saturate(1.5);
      -webkit-backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      max-width: 1160px; margin: 0 auto;
      padding: 0 clamp(1.1rem, 5vw, 2.5rem);
      display: flex; align-items: center; justify-content: space-between; width: 100%;
    }
    .nav-logo img { height: 30px; width: auto; }
    .nav-back {
      display: inline-flex; align-items: center; gap: .5rem;
      font-family: var(--ff-head); font-size: .84rem; font-weight: 600;
      color: var(--text-2); text-decoration: none; transition: color .2s;
    }
    .nav-back:hover { color: var(--text); text-decoration: none; }
    .nav-back svg { width: 14px; height: 14px; }

    /* LIGHT MODE */
    html[data-theme="light"] {
      --bg-deep:    #f0f0f4;
      --bg-base:    #ffffff;
      --bg-raised:  #f7f8fc;
      --bg-high:    #eceef7;
      --border:     rgba(0,0,0,0.08);
      --border-mid: rgba(0,0,0,0.14);
      --blue-light: #1f5ccc;
      --blue-glow:  rgba(47,109,228,0.15);
      --blue-tint:  rgba(47,109,228,0.07);
      --text:       #0d0d12;
      --text-2:     #48485e;
      --text-3:     #7d7d93;
    }
    html[data-theme="light"] #nav { background: rgba(255,255,255,.92); }
    .logo-light-mode { display: none; }
    html[data-theme="light"] .logo-dark-mode { display: none; }
    html[data-theme="light"] .logo-light-mode { display: block; }

    /* THEME TOGGLE */
    .theme-toggle {
      width: 36px; height: 36px; border-radius: 9px;
      background: var(--bg-base); border: 1px solid var(--border);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0; color: var(--text-2);
      transition: border-color .2s, color .2s, background .2s;
      -webkit-tap-highlight-color: transparent;
    }
    .theme-toggle:hover { border-color: var(--blue); color: var(--blue-light); background: rgba(47,109,228,0.07); }
    .theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }
    html[data-theme="dark"]  .icon-moon { display: none; }
    html[data-theme="light"] .icon-sun  { display: none; }

    /* HERO */
    html[data-theme="light"] .proj-hero { background: transparent; }
    .proj-hero {
      padding: calc(var(--nav-h) + 3.5rem) 0 4rem;
      background: var(--bg-deep); position: relative; overflow: hidden;
    }
    .proj-hero-glow {
      position: absolute; pointer-events: none;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(47,109,228,.14) 0%, transparent 70%);
      top: -150px; right: -150px;
    }
    .proj-hero .wrap { position: relative; z-index: 1; }
    .proj-chips-top { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .proj-title {
      font-size: clamp(2.8rem, 9vw, 5.5rem); font-weight: 800;
      letter-spacing: -.04em; line-height: 1; margin-bottom: 1.25rem;
    }
    .proj-lead {
      font-size: clamp(.95rem, 2.5vw, 1.15rem); color: var(--text-2); font-weight: 300;
      max-width: 620px; margin-bottom: 2.5rem; line-height: 1.75;
    }
    .proj-meta-bar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem; padding: 1.75rem 0;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .meta-lbl { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-family: var(--ff-head); margin-bottom: .3rem; }
    .meta-val { font-size: .92rem; color: var(--text); font-weight: 500; }

    @media (max-width: 640px) {
      .proj-meta-bar { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 360px) {
      .proj-meta-bar { grid-template-columns: 1fr; }
    }

    /* COVER */
    .proj-cover {
      width: 100%; aspect-ratio: 16/9;
      border-radius: var(--r-xl); overflow: hidden;
      border: 1px solid var(--border); background: var(--bg-base);
    }
    .proj-cover img { width: 100%; height: 100%; object-fit: cover; }
    .cover-phone {
      width: 28%; max-width: 170px; flex-shrink: 0;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      transform: rotate(-3deg) translateY(10px);
      transition: transform .4s;
    }
    .cover-phone:nth-child(2) {
      width: 32%; max-width: 200px;
      transform: translateY(-8px);
      z-index: 1;
    }
    .cover-phone:nth-child(3) {
      transform: rotate(3deg) translateY(10px);
    }
    .cover-phone img { width: 100%; height: auto; display: block; }
    @media (max-width: 640px) {
      .proj-cover { border-radius: var(--r-lg); }
    }

    /* CONTENT */
    .proj-content { padding: 4rem 0; background: transparent; }
    .content-block { margin-bottom: 3.5rem; }
    .content-block:last-child { margin-bottom: 0; }
    .content-block h2 { margin-bottom: 1.1rem; }
    .content-block p { margin-bottom: .9rem; }
    .content-block p:last-child { margin-bottom: 0; }

    /* two col callout */
    .split-cards {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0;
    }
    .split-card {
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.5rem;
    }
    .split-card-ico { font-size: 1.4rem; margin-bottom: .7rem; }
    .split-card h3 { font-size: .98rem; margin-bottom: .55rem; }
    .split-card p { font-size: .88rem; }
    @media (max-width: 540px) { .split-cards { grid-template-columns: 1fr; } }

    /* feature list */
    .feat-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; margin: 1.25rem 0; }
    .feat-list li {
      display: flex; gap: .85rem; align-items: flex-start;
      font-size: .92rem; color: var(--text-2);
    }
    .feat-list li::before {
      content: ''; flex-shrink: 0; margin-top: .52rem;
      width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
    }

    /* screenshots */
    .screenshots { margin: 2rem 0; }
    .shots-label { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-family: var(--ff-head); margin-bottom: 1rem; }
    .shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
    .shot {
      background: var(--bg-base); border: 1px solid var(--border);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: var(--text-3); font-size: .75rem; text-align: center; padding: 1rem; gap: .4rem;
    }
    .shot img { width: 100%;object-fit: cover; }
    @media (max-width: 480px) { .shots-grid { grid-template-columns: repeat(2, 1fr); } }

    /* tech block */
    .tech-block {
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.75rem; margin: 2rem 0;
    }
    .tech-block h3 { font-size: 1rem; margin-bottom: 1.1rem; }
    .tech-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
    .tech-pill {
      display: flex; align-items: center; gap: .45rem;
      padding: .4rem .9rem; border-radius: 99px;
      background: var(--bg-high); border: 1px solid var(--border);
      font-size: .82rem; color: var(--text-2);
    }
    .tech-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

    /* result callout */
    .result-box {
      background: linear-gradient(135deg, rgba(47,109,228,.08), rgba(91,143,240,.05));
      border: 1px solid rgba(47,109,228,.2); border-radius: var(--r-lg);
      padding: 2rem; margin: 2rem 0;
    }
    .result-box-label { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-light); font-family: var(--ff-head); margin-bottom: .75rem; }
    .result-box p { font-size: 1rem; color: var(--text); font-weight: 300; line-height: 1.75; }

    /* games grid */
    .games-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0;
    }
    .game-card {
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.5rem;
    }
    .game-card-label {
      font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
      color: var(--text-3); font-family: var(--ff-head); margin-bottom: .6rem;
    }
    .game-card h3 { font-size: .98rem; margin-bottom: .5rem; }
    .game-card p { font-size: .88rem; }
    @media (max-width: 540px) { .games-grid { grid-template-columns: 1fr; } }

    /* DeWitts badge callout */
    .badge-callout {
      background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(251,191,36,.04));
      border: 1px solid rgba(245,158,11,.22);
      border-radius: var(--r-lg); padding: 2rem; margin: 1.75rem 0;
    }
    .badge-callout-label {
      font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
      color: #f59e0b; font-family: var(--ff-head); margin-bottom: .6rem;
    }
    .badge-callout h3 { font-size: 1.05rem; margin-bottom: .75rem; color: var(--text); }
    .badge-callout p { font-size: .92rem; margin-bottom: .9rem; }
    .badge-callout p:last-child { margin-bottom: 0; }

    /* stat row */
    .stat-pills { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
    .stat-pill {
      display: flex; flex-direction: column; gap: .15rem;
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--r); padding: .75rem 1.25rem;
    }
    .stat-pill-n { font-family: var(--ff-head); font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1; }
    .stat-pill-l { font-size: .75rem; color: var(--text-3); }

    /* blockquote */
    blockquote {
      border-left: 3px solid var(--blue); padding-left: 1.4rem; margin: 2rem 0;
    }
    blockquote p { font-style: italic; color: var(--text); font-size: .95rem; }
    blockquote cite { display: block; font-size: .85rem; color: var(--text-3); margin-top: .5rem; font-style: normal; }

    /* divider */
    .c-divider { height: 1px; background: var(--border); margin: 3rem 0; }

    /* project nav */
    .proj-nav {
      display: flex; justify-content: space-between; align-items: center;
      padding: 3rem 0 0; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 1rem;
    }
    .pnav-link { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; }
    .pnav-dir { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-family: var(--ff-head); }
    .pnav-name { font-family: var(--ff-head); font-size: 1rem; font-weight: 700; color: var(--text); transition: color .2s; }
    .pnav-link:hover .pnav-name { color: var(--blue-light); }

    /* footer */
    footer { background: transparent; border-top: 1px solid var(--border); padding: 1.75rem 0; }
    .foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .foot-logo img { height: 26px; width: auto; opacity: .65; }
    .foot-copy { font-size: .76rem; color: var(--text-3); }

    /* reveal */
    .r { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
    .r.on { opacity: 1; transform: none; }
    .r.d1 { transition-delay: .08s; } .r.d2 { transition-delay: .16s; }