*{box-sizing:border-box}

body{
  margin:0;
}

:root{
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-16:64px;
  --space-18:72px;
  --motion-fast:.16s;
  --motion-standard:.24s;
  --motion-emphasis:.78s;
  --focus-ring: color-mix(in oklch, var(--ember) 56%, transparent);
  --focus-shadow: 0 0 0 2px color-mix(in oklch, var(--ember) 20%, transparent);
}

@keyframes gpcRise{
  from{transform:translateY(22px)}
  to{transform:none}
}

@keyframes gpcSectionRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

:where(a[href], button, input, select, textarea, [role="button"]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  box-shadow: var(--focus-shadow);
}

.gpc-section-shell{
  animation:gpcSectionRise var(--motion-emphasis) cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--gpc-section-delay,0s);
}

[data-gpc-card]{
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  transition:transform var(--motion-standard),border-color var(--motion-standard),background var(--motion-standard),box-shadow var(--motion-standard),filter var(--motion-standard);
  --img-scale:1;
}

[data-gpc-card]:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:0 1px 0 color-mix(in oklch, var(--ink) 15%, transparent) inset,0 18px 42px -28px color-mix(in oklch, var(--ink) 22%, transparent);
}

[data-gpc-card]:hover{
  --mark:1;
  --img-scale:1.06;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
  }

  .gpc-section-shell{
    animation:none;
    opacity:1;
    transform:none;
  }

  [data-gpc-card]{
    transition:none!important;
    transform:none!important;
  }

  [data-gpc-card]:hover{
    --img-scale:1;
    box-shadow:none;
    transform:none;
  }
}