:root{
      --bg:#050913;
      --card:rgba(17,24,36,.78);
      --card2:rgba(12,18,28,.92);
      --line:rgba(255,255,255,.085);
      --text:#f4f7fb;
      --muted:#9cabbe;
      --soft:#c8d2df;
      --cyan:#67dcff;
      --blue:#2c8cff;
      --violet:#9d7dff;
      --shadow:0 24px 80px rgba(0,0,0,.45);
      --radius:24px;
      --max:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 14% 0%, rgba(58,170,255,.24), transparent 27rem),
        radial-gradient(circle at 82% 18%, rgba(174,112,255,.20), transparent 31rem),
        radial-gradient(circle at 60% 100%, rgba(81,121,255,.11), transparent 24rem),
        linear-gradient(135deg, #07101b 0%, #0b1827 42%, #1d1334 100%);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
      min-height:100vh;
      overflow-x:hidden;
    }
    #code-rain{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      opacity:.38;
      mix-blend-mode:screen;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, black 0%, transparent 72%);
    }
    .site{position:relative;z-index:1}
    a{color:inherit;text-decoration:none}
    .wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
    .nav{
      position:sticky;top:0;z-index:30;backdrop-filter:blur(18px);
      background:rgba(7,10,16,.72);border-bottom:1px solid var(--line);
    }
    .nav-inner{
      min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}
    .mark{
      width:38px;height:38px;border-radius:12px;display:grid;place-items:center;position:relative;
      background:linear-gradient(145deg,rgba(104,224,255,.18),rgba(168,137,255,.18));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:inset 0 0 18px rgba(104,224,255,.08),0 10px 28px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .mark:before{
      content:"";width:15px;height:15px;border:2px solid var(--cyan);border-radius:5px;
      transform:rotate(45deg);box-shadow:9px 9px 0 -5px var(--violet);
    }
    .brand small{
      display:block;color:var(--muted);font-size:.67rem;font-weight:650;letter-spacing:.12em;
      text-transform:uppercase;margin-top:-2px;
    }
    .nav-links{display:flex;align-items:center;gap:26px;color:var(--muted);font-size:.92rem}
    .nav-links a:hover{color:var(--text)}
    .hero{
      min-height:660px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:64px;padding:92px 0 74px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:9px;color:var(--cyan);
      font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px;
    }
    .eyebrow:before{content:"";width:26px;height:1px;background:currentColor}
    h1{
      margin:0;font-size:clamp(3.35rem,7vw,6.8rem);line-height:.91;letter-spacing:-.068em;max-width:900px;
    }
    .hero-animated{
      display:block;
      width:100%;
      min-height:1.02em;
      font:inherit;
      font-size:1em;
      font-weight:inherit;
      line-height:inherit;
      letter-spacing:inherit;
      background:linear-gradient(90deg, #b5baff 0%, var(--violet) 36%, var(--cyan) 75%, #86baff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      filter:drop-shadow(0 0 14px rgba(120,140,255,.16));
    }

    .hero-animated::after{
      content:"";
      display:inline-block;
      width:3px;
      height:.82em;
      margin-left:.05em;
      vertical-align:-.02em;
      border-radius:2px;
      background:rgba(140,200,255,.9);
      box-shadow:0 0 10px rgba(120,180,255,.25);
      animation:heroCaret .85s step-end infinite;
    }

    @keyframes heroCaret{50%{opacity:0}}

    .lead{
      max-width:720px;margin:28px 0 0;color:var(--soft);font-size:clamp(1.06rem,1.7vw,1.3rem);
    }
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
    .button{
      display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;
      padding:12px 17px;color:var(--text);background:rgba(255,255,255,.035);transition:.2s ease;font-weight:700;font-size:.92rem;
    }
    .button:hover{transform:translateY(-2px);border-color:rgba(104,224,255,.35);background:rgba(104,224,255,.07)}
    .button.primary{background:linear-gradient(135deg,rgba(104,224,255,.17),rgba(168,137,255,.15));border-color:rgba(104,224,255,.25)}
    .terminal{
      background:linear-gradient(180deg,rgba(17,23,33,.92),rgba(10,14,21,.94));
      border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);box-shadow:var(--shadow);
      overflow:hidden;transform:rotate(1.1deg);position:relative;
    }
    .terminal:after{
      content:"";position:absolute;inset:auto -20% -50% 15%;height:230px;
      background:radial-gradient(circle,rgba(104,224,255,.11),transparent 65%);pointer-events:none;
    }
    .terminal-bar{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line)}
    .dot{width:10px;height:10px;border-radius:99px;background:#3a4350}
    .terminal-title{margin-left:8px;color:#728094;font:600 .73rem ui-monospace,SFMono-Regular,Menlo,monospace}
    pre{
      margin:0;
      padding:28px;
      white-space:pre-wrap;
      color:#d6dff0;
      font:500 .92rem/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      min-height:420px;
    }
    .terminal-code{
      position:relative;
    }
    .terminal-code::after{
      content:"";
      display:inline-block;
      width:9px;
      height:1.18em;
      margin-left:2px;
      vertical-align:-2px;
      border-radius:2px;
      background:rgba(159,208,255,.92);
      box-shadow:0 0 12px rgba(94,183,255,.35);
      animation: terminalCaret .9s step-end infinite;
    }
    @keyframes terminalCaret{50%{opacity:0}}
    .code-cyan{color:var(--cyan)}
    .code-purple{color:#c0aaff}
    .code-green{color:#75f1b8}
    .code-gray{color:#7c899b}
    section{padding:82px 0}
    .section-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:end;margin-bottom:38px}
    .kicker{color:var(--cyan);font:800 .76rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
    h2{font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.045em;margin:9px 0 0}
    .section-head p{margin:0;color:var(--muted);font-size:1.04rem;max-width:680px}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .card{
      min-height:250px;padding:25px;border-radius:var(--radius);border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(18,24,34,.72),rgba(10,14,21,.72));position:relative;overflow:hidden;transition:.22s ease;
    }
    .card:hover{transform:translateY(-4px);border-color:rgba(104,224,255,.21);background:linear-gradient(180deg,rgba(21,29,41,.82),rgba(10,15,23,.82))}
    .card:before{
      content:"";position:absolute;left:-35px;top:-45px;width:150px;height:150px;border-radius:50%;
      background:radial-gradient(circle,rgba(104,224,255,.09),transparent 66%);
    }
    .icon{
      width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.035);color:var(--cyan);font:800 .75rem ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:32px;
    }
    .card h3{margin:0 0 9px;font-size:1.17rem;letter-spacing:-.02em}
    .card p{margin:0;color:var(--muted);font-size:.93rem}
    .featured{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .project{
      min-height:285px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);
      background:linear-gradient(145deg,rgba(17,23,33,.84),rgba(10,14,20,.72));
      display:flex;flex-direction:column;justify-content:space-between;transition:.22s ease;position:relative;overflow:hidden;cursor:pointer;
    }
    .project:hover{transform:translateY(-4px);border-color:rgba(168,137,255,.26);box-shadow:0 12px 34px rgba(0,0,0,.24)}
    .project:after{
      content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;bottom:-145px;
      background:radial-gradient(circle,rgba(168,137,255,.12),transparent 66%);pointer-events:none;
    }
    .project-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .pill{
      font:800 .7rem ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em;
      color:var(--cyan);border:1px solid rgba(104,224,255,.18);background:rgba(104,224,255,.055);padding:7px 9px;border-radius:999px;
    }
    .project h3{font-size:1.65rem;margin:28px 0 8px;letter-spacing:-.035em}
    .project p{max-width:570px;margin:0;color:var(--muted)}
    .tech{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
    .tech span{color:#8794a5;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);padding:5px 8px;border-radius:8px;font-size:.72rem}
    .linkline{margin-top:18px;color:#d4def3;font-weight:700;font-size:.92rem}
    .linkline span{color:var(--cyan)}
    .games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
    .manifesto{
      padding:46px;border:1px solid var(--line);
      background:radial-gradient(circle at 88% 0%,rgba(168,137,255,.12),transparent 25rem),radial-gradient(circle at 0% 100%,rgba(104,224,255,.09),transparent 28rem),rgba(13,18,27,.76);
      border-radius:28px;box-shadow:var(--shadow);
    }
    .manifesto-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:start}
    .rules{display:grid;gap:0}
    .rule{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
    .rule:last-child{border-bottom:0}
    .rule-num{color:var(--cyan);font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;padding-top:3px}
    .rule strong{display:block;font-size:1.03rem;margin-bottom:2px}
    .rule span{color:var(--muted);font-size:.91rem}
    .quote{margin-top:17px;font-size:clamp(1.45rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.035em;color:#e9eef7}
    footer{padding:38px 0 48px;color:#7f8b9c;font-size:.84rem}
    .footer-inner{border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .tiny-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#667385}
    .reveal{opacity:0;transform:translateY(18px);transition:.55s ease}
    .reveal.visible{opacity:1;transform:none}
    @media(max-width:900px){
      .nav-links{display:none}
      .hero{grid-template-columns:1fr;gap:40px;padding-top:70px}
      .terminal{transform:none}
      .section-head,.manifesto-grid{grid-template-columns:1fr;gap:24px}
      .grid,.featured,.games-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:620px){
      .wrap{width:min(calc(100% - 26px),var(--max))}
      .hero{min-height:auto;padding:58px 0 48px}
      h1{font-size:clamp(3rem,16vw,4.6rem)}
      .grid,.featured,.games-grid{grid-template-columns:1fr}
      .card,.project{min-height:auto}
      .manifesto{padding:26px}
      section{padding:62px 0}
      pre{padding:21px;font-size:.76rem}
      .hero-animated{
        display:block;
        width:100%;
        min-height:1.9em;
        white-space:normal;
      }
      
    }
  

/* Shared interior pages and responsive navigation */
.nav-links a[aria-current="page"]{color:var(--text)}
.page-intro{padding:105px 0 42px}
.page-intro h1{font-size:clamp(3.35rem,7vw,6.8rem)}
.page-intro .lead{max-width:780px}
.page-section{padding-top:38px}
.page-section + .page-section{padding-top:56px}
.section-cta{margin-top:28px}
.feature-project{min-height:330px;background:radial-gradient(circle at 80% 20%,rgba(157,125,255,.18),transparent 45%),linear-gradient(145deg,rgba(17,23,33,.88),rgba(10,14,20,.8))}
.feature-project h3{font-size:clamp(2rem,4vw,3.2rem)}
.feature-project p{font-size:1.08rem;max-width:700px}
.project-links{display:flex;gap:18px;flex-wrap:wrap}
.project-links a{position:relative;z-index:2}
.project-links a:hover{text-decoration:underline}
.project.static{cursor:default}
.project.static:hover{transform:none}
@media(max-width:900px){.nav-links{display:flex;gap:16px;overflow-x:auto;white-space:nowrap}.nav-inner{flex-wrap:wrap;justify-content:center;padding:12px 0}.page-intro{padding-top:75px}}
@media(max-width:620px){.nav-links{width:100%;justify-content:center;gap:13px;font-size:.82rem}.page-intro{padding:64px 0 30px}.feature-project{min-height:280px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-animated::after,.terminal-code::after{animation:none}}