:root{
    --bg:#fff; --bg-soft:#f5f6f8; --fg:#0a0b0e; --fg-mut:#585f6c;
    --line:#e3e6ea; --accent:#2b56d4; --max:66rem;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0a0b0e; --bg-soft:#121419; --fg:#f1f3f7; --fg-mut:#98a0ae;
      --line:#21252d; --accent:#7f9dff;
    }
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--fg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
  header{padding:2.5rem 0 0}
  .brand{display:flex;align-items:center;gap:.65rem;font-weight:660;letter-spacing:-.015em;font-size:1.05rem}
  .brand sup{font-size:.55em;font-weight:500;color:var(--fg-mut);top:-.7em;position:relative}
  main{padding:clamp(3.5rem,11vw,7rem) 0 0}
  h1{font-size:clamp(1.95rem,5.6vw,3.35rem);line-height:1.12;letter-spacing:-.035em;
     font-weight:680;margin:0 0 1.3rem;max-width:19ch}
  .lede{font-size:clamp(1.05rem,2.3vw,1.22rem);color:var(--fg-mut);max-width:52ch;margin:0}
  hr{height:1px;background:var(--line);border:0;margin:clamp(3rem,8vw,4.8rem) 0}
  h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-mut);
     font-weight:640;margin:0 0 1.9rem}
  .about{font-size:1.06rem;max-width:60ch;margin:0;color:var(--fg)}
  .about + .about{margin-top:1.1rem;color:var(--fg-mut);font-size:1rem}
  .grid{display:grid;gap:1.9rem 2.6rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
  .item h3{font-size:1.03rem;font-weight:630;margin:0 0 .4rem;letter-spacing:-.012em}
  .item p{margin:0;color:var(--fg-mut);font-size:.94rem;line-height:1.6}
  .contact{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
    padding:clamp(1.6rem,4vw,2.4rem);margin:clamp(3rem,8vw,4.8rem) 0 0}
  .contact p{margin:0 0 1.1rem;color:var(--fg-mut);max-width:46ch}
  a.mail{display:inline-block;color:var(--accent);text-decoration:none;font-weight:620;
    font-size:clamp(1.05rem,3vw,1.32rem);letter-spacing:-.015em;word-break:break-all;
    border-bottom:1.5px solid transparent;transition:border-color .15s}
  a.mail:hover,a.mail:focus-visible{border-bottom-color:var(--accent)}
  footer{margin-top:clamp(3.5rem,9vw,5.5rem);padding:1.8rem 0 3rem;border-top:1px solid var(--line);
    color:var(--fg-mut);font-size:.85rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
    justify-content:space-between}
  footer p{margin:0}

  .doc h1{font-size:clamp(1.7rem,4.5vw,2.4rem);max-width:24ch;margin-bottom:.6rem}
  .doc .upd{color:var(--fg-mut);font-size:.9rem;margin:0 0 2.5rem}
  .doc h2{font-size:1.02rem;text-transform:none;letter-spacing:-.01em;color:var(--fg);
     margin:2.4rem 0 .7rem;font-weight:640}
  .doc p,.doc li{color:var(--fg-mut);max-width:64ch}
  .doc p{margin:0 0 .9rem}
  .doc ul{margin:0 0 .9rem;padding-left:1.2rem}
  .doc li{margin-bottom:.4rem}
  .doc a{color:var(--accent)}
  .back{display:inline-block;margin-bottom:2.5rem;color:var(--fg-mut);text-decoration:none;font-size:.9rem}
  .back:hover{color:var(--accent)}
  footer nav{display:flex;gap:1.2rem}
  footer nav a{color:var(--fg-mut);text-decoration:none}
  footer nav a:hover{color:var(--accent)}