:root{
  --sf-ag-accent:#D7F352;
  --sf-ag-deep:#101315;
  --sf-ag-border:#454c50;
  --sf-ag-muted:#b7bfc2;
}

.sf-agegate[hidden],
.sf-agegate [hidden]{
  display:none!important;
}

.sf-agegate{
  position:fixed;
  inset:0;
  z-index:2147483645;
  display:grid;
  place-items:center;
  padding:16px;
  isolation:isolate;
}

.sf-agegate__shade{
  position:absolute;
  inset:0;
  background:rgba(3,7,8,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.sf-agegate__modal{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(510px,100%);
  aspect-ratio:1/1;
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:28px 40px 24px;
  border:1px solid rgba(180,195,197,.32);
  border-radius:22px;

  background:
    radial-gradient(ellipse at 50% 26%,
      rgba(123,166,38,.09),transparent 43%),
    linear-gradient(155deg,#191d20,#101315 67%);

  box-shadow:
    0 28px 90px rgba(0,0,0,.65),
    inset 0 1px rgba(255,255,255,.055);

  color:#fff;
  text-align:center;
  font-family:inherit;
  outline:none;
}

.sf-agegate__eyebrow{
  letter-spacing:.25em;
  font-size:10px;
  font-weight:750;
  color:#909a9e;
  white-space:nowrap;
  margin-bottom:23px;
}

.sf-agegate__eyebrow span:first-child{
  color:var(--sf-ag-accent);
}

.sf-agegate__dot{
  padding:0 5px;
}

.sf-agegate__symbol{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:104px;
  border:3px solid var(--sf-ag-accent);
  border-radius:50%;
  font-size:53px;
  font-weight:850;
  letter-spacing:-.07em;
  color:var(--sf-ag-accent);
  text-shadow:0 0 24px rgba(215,243,82,.24);
  box-shadow:
    0 0 0 6px rgba(215,243,82,.045),
    0 0 30px rgba(172,236,38,.26);
  line-height:1;
}

.sf-agegate__symbol span{
  font-size:.65em;
  margin-left:1px;
}

.sf-agegate__modal h2{
  margin:22px 0 10px;
  font-size:clamp(23px,4.7vw,29px);
  line-height:1.17;
  font-weight:800;
  letter-spacing:-.035em;
  color:#fff;
}

.sf-agegate__description{
  max-width:365px;
  margin:0 0 20px;
  color:#bfc6c8;
  font-size:14px;
  line-height:1.55;
}

.sf-agegate__actions{
  width:100%;
  display:grid;
  gap:10px;
}

.sf-agegate__actions button{
  width:100%;
  min-height:47px;
  border-radius:11px;
  font:inherit;
  font-size:14px;
  font-weight:760;
  cursor:pointer;
  transition:background .18s,transform .18s;
}

.sf-agegate__actions button:focus-visible{
  outline:3px solid white;
  outline-offset:3px;
}

.sf-agegate__yes{
  background:var(--sf-ag-accent);
  border:1px solid var(--sf-ag-accent);
  color:#151a1e;
  position:relative;
}

.sf-agegate__yes span{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
}

.sf-agegate__yes:hover{
  background:#e6ff77;
}

.sf-agegate__no{
  background:rgba(255,255,255,.035);
  color:#e3e7e8;
  border:1px solid #697276;
}

.sf-agegate__no:hover{
  background:rgba(255,255,255,.09);
}

.sf-agegate__footer{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid rgba(175,191,196,.20);
  display:flex;
  align-items:flex-start;
  gap:11px;
  text-align:left;
  color:#9da7aa;
  font-size:10px;
  line-height:1.5;
  width:100%;
}

.sf-agegate__denied{
  margin:14px 0 10px;
  color:#e6ebed;
  font-size:15px;
  font-weight:650;
  line-height:1.6;
}

html.sf-agegate-locked,
body.sf-agegate-locked{
  overflow:hidden!important;
}

@media(max-width:560px){
  .sf-agegate{padding:12px}
  .sf-agegate__modal{
    width:min(430px,100%);
    padding:22px 22px 18px;
    max-height:calc(100dvh - 24px);
    border-radius:20px;
  }
  .sf-agegate__symbol{
    width:94px;
    height:94px;
    font-size:46px;
  }
  .sf-agegate__eyebrow{
    font-size:9px;
    margin-bottom:19px;
  }
  .sf-agegate__modal h2{
    font-size:clamp(21px,6vw,26px);
    margin:19px 0 9px;
  }
  .sf-agegate__description{
    font-size:13px;
    margin-bottom:17px;
  }
  .sf-agegate__actions button{
    min-height:45px;
  }
  .sf-agegate__footer{
    font-size:9px;
    margin-top:15px;
  }
}

@media(max-width:360px),(max-height:610px){
  .sf-agegate__modal{
    aspect-ratio:auto;
    justify-content:flex-start;
  }
  .sf-agegate__symbol{
    width:76px;
    height:76px;
    font-size:39px;
  }
}

@media(prefers-reduced-motion:reduce){
  .sf-agegate__actions button{
    transition:none;
  }
}
