:root{
    --bg: #ffffff;
    --fg: #0a0a0a;
    --line: #dcdcda;
    --grey-1: #6b6b6b;
    --grey-2: #b9b9b6;
  }

  .darkmode{
    --bg: #0a0a0a;
    --fg: #ffffff;
    --line: #2c2c2c;
    --grey-1: #a3a3a3;
    --grey-2: #454545;
  }

  *{ box-sizing: border-box; }
  html, body{ height: 100%; }
  body{
    margin: 0;
    background-color: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, dashed, rgba(128,128,128,0.15) 1px, transparent 0);
    background-size: 28px 28px;
    color: var(--fg);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .mono{ font-family: 'JetBrains Mono', monospace; }
  .dot-face{ font-family: 'Silkscreen', monospace; }

  /* ---------- Header ---------- */
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px clamp(20px, 5vw, 56px);
    z-index: 10;
  }
  .brand{
    font-family: 'Silkscreen', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  #theme-switch{
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 20px;
    right: 20px;
    border: 2px solid var(--fg);
    outline: none;
  }
  #theme-switch svg{
    fill: var(--fg);
  }
  #theme-switch svg:last-child{
    display: none;
  }
  .darkmode #theme-switch svg:first-child{
    display: none;
  }
  .darkmode #theme-switch svg:last-child{
    display: block;
  }

  /* ---------- Hero / stage ---------- */
  main{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 24px 0;
    position: relative;
  }

  .stage{
    width: 300px;
    height: 300px;
    position: relative;
    margin-bottom: 8px;
    touch-action: none;
  }
  .ring{
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    pointer-events: none;
  }
  .ring.r2{ inset: 30px; }
  .ring.r3{ inset: 60px; border-style: dashed; }

  .stage canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  h1{
    font-family: 'Silkscreen', monospace;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 10px 0 12px;
    text-transform: uppercase;
  }
  h1 .last{ color: var(--grey-1); }

  .tagline{
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--grey-1);
    letter-spacing: 0.03em;
    margin: 0 0 4px;
  }
  .tagline .cursor{
    display: inline-block;
    width: 7px;
    background: var(--fg);
    margin-left: 2px;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity: 0; } }

  /* ---------- Contact footer ---------- */
  footer{
    padding: 28px clamp(20px, 5vw, 56px) 36px;
    z-index: 10;
  }
  .contact-row{
    max-width: 620px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
  }
  .contact-item{
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--grey-1);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .contact-item .label{
    color: var(--grey-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .contact-item a{
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.2s, color 0.2s;
  }
  .contact-item a:hover,
  .contact-item a:focus-visible{
    color: var(--fg);
    border-color: var(--fg);
  }

  .contact-item a:focus-visible{
    outline: 2px solid var(--fg);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    .tagline .cursor{ animation: none; }
  }