:root {
    --accent: 310;
    accent-color: hsl(var(--accent) 90% 60%);
  }
  
  *,
  *:after,
  *:before {
      box-sizing: border-box;
  }
  
  body {
      display: grid;
      place-items: center;
      min-height: 200vh;
      background: hsl(0 0% 0%);
      color: hsl(0 0% 98%);
      font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
  }
  
  label {
    position: fixed;
    top: 1rem;
    right: 2.5rem;
    z-index: 9999;
  }
  
  [type=checkbox] {
    position: fixed;
    top: 1.125rem;
    right: 1rem;
  }
  
  section {
      position: fixed;
      top: 0;
      left: 50%;
      display: grid;
      justify-content: start;
      align-content: center;
      translate: -50% 0;
      height: 100vh;
      width: 600px;
      max-width: calc(100% - 4rem);
      gap: 1rem;
  }
  
  :is(a, p) {
      margin: 0;
      font-size: 1rem;
      font-weight: 400;
      font-size: clamp(1rem, 0.75vw + 1rem, 1.25rem);
  }
  
  .actions {
      display: flex;
      gap: 6ch;
      flex-wrap: wrap;
  }
  
  :is(p:nth-of-type(2), a) {
      opacity: 0;
      animation: fade-in both linear;
      animation-timeline: scroll(root);
      animation-range: 75vh 90vh;
  }
  
  p:nth-of-type(2) {
      --opacity: 0.65;
  }
  
  a {
      display: flex;
      gap: 1ch;
      align-items: center;
      color: hsl(0 0% 98%);
      text-decoration-line: none;
  }
  
  a:is(:hover, :focus-visible) {
      text-decoration-line: underline;
      text-decoration-thickness: 0.4ch;
      text-underline-offset: 0.5ch;
  }
  
  a svg {
      width: 24px;
      stroke-width: 2;
  }
  
  @keyframes fade-in {
      to {
          opacity: var(--opacity, 1);
      }
  }
  
  h1 {
    position: fixed;
    margin: 0;
    bottom: 1rem;
    right: 1rem;
  }
  
  p:nth-of-type(1) {;
      font-size: clamp(1rem, 3vw + 1rem, 2rem);
      font-weight: 600;
      background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%);
      background-size: 400% 600%;
      -webkit-background-clip: text;
      background-position: 50% 0;
      color: transparent;
    opacity: 0;
      animation: move-bg both linear, fade-in both linear;
      animation-timeline: scroll(root);
      animation-range: 0 100vh, 40vh 100vh;
  }
  
  @keyframes move-bg {
      to { background-position: 50% 100%; }
  }
  
  #clipper:checked ~ section p:first-of-type {
    -webkit-background-clip: unset;
    outline: 4px dashed hsl(0 0% 100%);
  }
  
  p:first-of-type {
    transition: all 0.2s;
  }