@property --pos {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --color--bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f4f4;
}
@property --color--ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}
@property --color--line {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9d9d9;
}
@property --color--muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #6b6b6b;
}
@property --color--invert {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --color--surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

  :host, :root {
  --pos: 0%;
  --color--bg: #f4f4f4;
  --color--ink: #111111;
  --color--line: #d9d9d9;
  --color--muted: #6b6b6b;
  --color--invert: #ffffff;
  --color--surface: #ffffff;
}
  
  
  [data-nc-theme~="Default"] {
  --pos: 0%;
  --color--bg: #f4f4f4;
  --color--ink: #111111;
  --color--line: #d9d9d9;
  --color--muted: #6b6b6b;
  --color--invert: #ffffff;
  --color--surface: #ffffff;
}
    


@layer base {
  
  body, :host {
    /* Color */
    
    /* Fonts */
    --font-sans: 'Inter',sans-serif;

    /* Font size */
    
    /* Font weight */
    
    /* Shadows */
    
    /* Border radius */
    
    /* Spacing */
    
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}


    .byauYm {
      gap:28px;
      color:inherit;
      width:100%;
      display:grid;
      font-size:inherit;
      max-width:900px;
      font-family:inherit;
      font-weight:inherit;
      flex-direction:row;
      grid-template-columns:1fr;
    }

    @media (min-width: 640px) {

    .byauYm {
      grid-template-columns:repeat(2, 1fr);
    }
    }

    .dvHBJW {
      color:inherit;
      display:flex;
      padding:64px 24px;
      font-size:inherit;
      background:var(--color--bg);
      min-height:100vh;
      align-items:center;
      font-family:Inter, sans-serif;
      font-weight:inherit;
      flex-direction:column;
    }

    .flRPVU {
      color:var(--color--ink);
      margin:0px;
      display:block;
      font-size:44px;
      font-family:inherit;
      font-weight:900;
      flex-direction:row;
      letter-spacing:-1px;
    }

    .cDXAYY {
      color:inherit;
      display:block;
      font-size:inherit;
      max-width:900px;
      text-align:center;
      font-family:inherit;
      font-weight:inherit;
      margin-bottom:56px;
      flex-direction:row;
    }

    .fdaoFL {
      gap:20px;
      color:inherit;
      border:1px solid var(--color--line);
      display:flex;
      padding:32px 24px;
      font-size:inherit;
      background:var(--color--surface);
      align-items:center;
      font-family:inherit;
      font-weight:inherit;
      border-radius:16px;
      flex-direction:column;
    }

    .cwEKBw {
      color:inherit;
      width:260px;
      border:1px solid var(--color--line);
      cursor:pointer;
      height:160px;
      display:flex;
      position:relative;
      font-size:inherit;
      background:var(--color--surface);
      align-items:center;
      font-family:inherit;
      font-weight:inherit;
      border-radius:12px;
      flex-direction:row;
      justify-content:center;
    }

    .eeFPdj {
      --pos:0%;
      color:transparent;
      display:block;
      font-size:56px;
      background:linear-gradient(90deg, #111111 0%, #d0d0d0 33%, #111111 66%, #d0d0d0 100%) text var(--pos) / 300% 100%;
      font-family:Inter, sans-serif;
      font-weight:900;
      animation-name:animation-bUKEev;
      flex-direction:row;
      letter-spacing:2px;
      animation-delay:0ms;
      background-clip:text;
      background-size:300% 100%;
      background-image:linear-gradient(90deg, #111111 0%, #d0d0d0 25%, #111111 50%, #d0d0d0 75%, #111111 100%);
      animation-duration:2s;
      animation-direction:normal;
      animation-fill-mode:forwards;
      background-position:var(--pos) 0;
      animation-play-state:running;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
    }

    @keyframes animation-bUKEev {
        0% {
          --pos: 0%;
        }

        100% {
          --pos: 100%;
        }
    }

    .dlYxfS {
      color:inherit;
      width:260px;
      border:1px solid var(--color--line);
      cursor:pointer;
      height:160px;
      display:block;
      overflow:hidden;
      position:relative;
      font-size:inherit;
      background:var(--color--surface);
      font-family:inherit;
      font-weight:inherit;
      border-radius:12px;
      flex-direction:row;
    }

    .eVuaUk {
      color:var(--color--ink);
      inset:0;
      display:flex;
      opacity:var(--op);
      position:absolute;
      font-size:15px;
      transition:opacity 0.3s ease;
      align-items:center;
      font-family:Inter, sans-serif;
      font-weight:600;
      flex-direction:row;
      letter-spacing:2px;
      justify-content:center;
    }

    .eWHmWR {
      color:var(--color--invert);
      inset:0;
      display:flex;
      position:absolute;
      clip-path:var(--clip);
      font-size:15px;
      background:var(--color--ink);
      transition:clip-path 0.55s cubic-bezier(0.77, 0, 0.175, 1);
      align-items:center;
      font-family:Inter, sans-serif;
      font-weight:700;
      flex-direction:row;
      letter-spacing:2px;
      justify-content:center;
    }

    .cBufyr {
      color:var(--color--muted);
      margin:16px 0 0;
      display:block;
      font-size:17px;
      font-family:inherit;
      font-weight:inherit;
      line-height:1.6;
      flex-direction:row;
    }

    .fDNEUA {
      color:inherit;
      width:260px;
      border:1px solid var(--color--line);
      cursor:pointer;
      height:160px;
      display:flex;
      overflow:hidden;
      position:relative;
      font-size:inherit;
      background:var(--color--surface);
      align-items:center;
      font-family:inherit;
      font-weight:inherit;
      border-radius:12px;
      flex-direction:row;
      justify-content:center;
    }

    .eOxfVc {
      color:#f5f5f5;
      display:block;
      position:relative;
      font-size:20px;
      font-family:Inter, sans-serif;
      font-weight:700;
      flex-direction:row;
      letter-spacing:3px;
      pointer-events:none;
    }

    .fvTvEt {
      color:inherit;
      inset:0;
      display:flex;
      position:absolute;
      clip-path:polygon(50% 15%, 85% 30%, 85% 70%, 50% 85%, 15% 70%, 15% 30%);
      font-size:inherit;
      background:#4a4a4a;
      transition:clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1), background 0.55s ease;
      align-items:center;
      font-family:inherit;
      font-weight:inherit;
      flex-direction:row;
      justify-content:center;
    }

    .fvTvEt:hover {
      clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
      background:#111111;
    }

    .brZnWI {
      color:inherit;
      width:220px;
      border:1px solid var(--color--line);
      cursor:pointer;
      height:220px;
      display:block;
      position:relative;
      clip-path:circle(50% at 50% 50%);
      font-size:inherit;
      background:var(--color--surface);
      font-family:inherit;
      font-weight:inherit;
      border-radius:50%;
      flex-direction:row;
    }

    .dVCHzR {
      left:0px;
      color:var(--color--ink);
      width:100%;
      bottom:26px;
      display:block;
      opacity:var(--op);
      position:absolute;
      font-size:18px;
      transform:translateY(var(--ty));
      text-align:center;
      transition:opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
      font-family:Inter, sans-serif;
      font-weight:700;
      flex-direction:row;
      letter-spacing:3px;
    }

    .bSogHq {
      top:0px;
      left:0px;
      color:inherit;
      width:100%;
      height:100%;
      display:block;
      position:absolute;
      clip-path:circle(50% at 50% var(--circleY));
      font-size:inherit;
      background:radial-gradient(circle at 50% 40%, #3a3a3a 0%, var(--color--ink) 70%);
      transition:clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      font-family:inherit;
      font-weight:inherit;
      flex-direction:row;
    }

    .dfgCBc {
      color:var(--color--muted);
      margin:0px;
      display:block;
      font-size:14px;
      text-align:center;
      font-family:inherit;
      font-weight:inherit;
      line-height:1.5;
      flex-direction:row;
    }

    .eKJEiH {
      color:var(--color--ink);
      margin:0px;
      display:block;
      font-size:18px;
      font-family:inherit;
      font-weight:700;
      flex-direction:row;
    }