@import "https://unpkg.com/open-props/fonts.min.css";

h1, h2, p {
  text-box: 
    var(--tbTrim, trim-both) 
    var(--tbEdgeOver, cap) 
    var(--tbEdgeUnder, alphabetic)
  ;
  font-family: var(--tbFont, var(--system-ui, sans-serif));
}







@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: light;
    
    --color-edge: #50FA7B;
    --color-over: #BD93F9;
    --color-under: #FF79C6;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    place-items: center;
    
    gap: 10vmin;
    padding: 10vmin;
  }
  
  output {
    font-size: 1rem;
    font-family: monospace;
    background: #222;
    color: #eee;
    padding: 1ch 1.5ch;
    border-radius: 1ch;
    white-space: nowrap;
    
    > #tbTrim       { color: var(--color-edge) }
    > #tbEdgeOver   { color: var(--color-over) }
    > #tbEdgeUnder  { color: var(--color-under) }
    
    > [id] { font-weight: bold }
  }
  
  select {
    field-sizing: content;
  }
  
  h1 {
    font-size: clamp(3rem, 20vw, 8rem);
  }
  
  h2 {
    font-size: clamp(2rem, 10vw, 6rem);
    max-inline-size: 12ch;
    line-height: 1.1cap;
  }
  
  p {
    max-inline-size: 40ch;
    text-wrap: pretty;
  }
  
  h1, h2, p {
    text-wrap: stable;
    color: #000b;
    border-image: 
      linear-gradient(
        to bottom in oklch, 
        var(--color-over) 2px, 
        #0000 0, 
        #0000 calc(100% - 2px), 
        var(--color-under) 0
      ) 
      fill 0//0 100vw
    ;
  }
  
  section {
    font-size: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    place-content: center;
    gap: 3ch 2ch;
    margin-block-end: 5vmin;
    
    @media (width <= 768px) {
      flex-direction: column;
      place-items: center;
    }
    
    label {
      text-box: trim-both cap alphabetic;
    }
  }
  
  select {
    background: none;
    border: none;
    font: inherit;
    font-weight: 200;
  }
  
  .intro {
    display: grid;
    place-items: center;
    gap: 1ch;
  }
  
  .stack {
    display: grid;
    place-items: center;
    gap: 10vw;
  }
  
  .edge-tip {
    position-anchor: --edge-tip-target;
    position-area: var(--_pos) left;
    position: fixed;
    left: -100vw;
    padding-inline-end: calc(10px + .5ch);
    
    &::after {
      display: block;
      content: "";
      
      position-anchor: --edge-tip-target;
      position: fixed;
    }
    
    &#tipOver {
      color: rebeccapurple;
      --_pos: top;
      
      &::after {
        left: calc(anchor(left) - 10px);
        bottom: anchor(top);
        right: anchor(left);
        top: calc(anchor(top) - 10px);
        border-top: 1px dashed var(--color-over);
        border-right: 1px dashed var(--color-over);
        border-radius: 0 3px 0 0;
      }
    }
    
    &#tipUnder {
      padding-block-start: .5ex;
      color: deeppink;
      --_pos: bottom;
      
      &::after {
        left: calc(anchor(left) - 10px);
        bottom: calc(anchor(bottom) - 10px - .5ex);
        right: anchor(left);
        top: anchor(bottom);
        border-bottom: 1px dashed var(--color-under);
        border-right: 1px dashed var(--color-under);
        border-radius: 0 0 3px 0;
      }
    }
  }
  
  :is(h1,h2,p):is(:hover,:focus-visible) {
    anchor-name: --edge-tip-target;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    :focus {
      transition: outline-offset .25s ease;
    }
    :focus:not(:active) {
      outline-offset: 3px;
    }
  }
}