@charset "utf-8";
/* main CSS Document dia-ai.site */

  :root{
    --paper:#F7F6F3;
    --ink:#1E2226;
    --slate:#5B6470;
    --bronze:#8C7A5E;
    --line:#DAD5CC;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    height:100%;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', -apple-system, sans-serif;
  }

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:2rem;
  }

  .toggle{
    position:fixed;
    top:2rem;
    right:2rem;
    display:flex;
    gap:0;
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden;
  }

  .toggle button{
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:0.06em;
    background:transparent;
    border:none;
    color:var(--slate);
    padding:8px 16px;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease;
  }

  .toggle button + button{
    border-left:1px solid var(--line);
  }

  .toggle button.active{
    background:var(--ink);
    color:var(--paper);
  }

  .container{
    max-width:560px;
    width:100%;
    text-align:center;
  }

  .eyebrow{
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--bronze);
    margin-bottom:1.75rem;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(2rem, 5vw, 2.75rem);
    line-height:1.25;
    margin:0 0 1.5rem;
    color:var(--ink);
  }

  .divider{
    width:48px;
    height:1px;
    background:var(--line);
    margin:0 auto 1.5rem;
  }

  p.body{
    font-size:16px;
    line-height:1.7;
    color:var(--slate);
    margin:0 0 2.25rem;
  }

  .status{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--slate);
  }

  .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--bronze);
    animation:breathe 3.2s ease-in-out infinite;
  }

  @keyframes breathe{
    0%, 100%{ opacity:0.35; transform:scale(0.85); }
    50%{ opacity:1; transform:scale(1); }
  }

  .lang-block{
    display:none;
  }

  .lang-block.active{
    display:block;
  }

  @media (prefers-reduced-motion: reduce){
    .dot{ animation:none; opacity:0.75; }
  }

  @media (max-width: 480px){
    .toggle{ top:1.25rem; right:1.25rem; }
  }