html {
  --font-vw: 100;
  --offset: 0;
  --min: initial;
  --max: initial;
}

em-box {  
  font-size: clamp(
    var(--low), 
    var(--offset-px) + (var(--font-vw, 100) * 1cqi), 
    var(--high, 9e9px)
  );
}

@layer reset, layout;

@layer layout {
  html {
    --view-port: 16;
    --vw: calc(var(--view-port) * 1px);
    --slope: calc(var(--font-vw) / 100);

    --offset-px: calc(var(--offset, 0) * 1px);
    --low: var(--offset-px);

    --line: white;
    --canvas: powderBlue;
    --fill: hotPink;
    --top-clamp: lch(from var(--canvas) l c h / 0.8);
    --clamped: lch(from var(--line) l c h / 0.25);

    --start: -2px;
    --end: 100%;
  }

  [apply-clamp=true] {
    --show-clamp-inputs: grid;
    --low: calc(max(var(--min, 0), var(--offset, 0)) * 1px);
    --high: calc(var(--max) * 1px); 
    --max-plus: calc(var(--max) * 1px + 10lh);

    --start: calc((var(--low) - var(--offset-px)) * (100 / var(--font-vw)));
    --end: calc((var(--high) - var(--offset-px)) * (100 / var(--font-vw)));
  }

  main {
    display: grid;
    padding: 1em;
  }

  main,
  clamp-inputs {
    gap: 0.5lh;  
  }

  clamp-inputs {
    display: var(--show-clamp-inputs, none);
  }

  grid-canvas {
    min-block-size: var(--max-plus, 50svh);
    display: grid;
    place-content: stretch start;
    position: relative;
    
    --graph-position: bottom calc(var(--offset) * 1px) left;
    --graph-size: 100vw calc(100vw * var(--slope));
    --graph: linear-gradient(
      to bottom right,
      transparent 0 50%,
      var(--fill) 0 50%
    ) var(--graph-position) / var(--graph-size) no-repeat;

    --max-high: max(var(--low, 0px), var(--high, 100%));
    --clamp: linear-gradient(
      to top,
      var(--fill) calc(var(--low, 0px) - 1px),
      green var(--low, 0px),
      transparent 0 var(--max-high),
      red 0 calc(var(--max-high) + 1px),
      var(--top-clamp) 0 100%
    );

    --clamp-range: linear-gradient(
      to right,
      var(--clamped) 0 var(--start),
      green 0 calc(var(--start) + 1px),
      transparent 0 var(--end),
      red 0 calc(var(--end) + 1px),
      var(--clamped) 0 100%
    );
    
    --grid: 
      repeating-linear-gradient(
        to right,
        var(--line, silver) 0 1px,
        transparent 0 10px
      ),
      repeating-linear-gradient(
        to top,
        var(--line, silver) 0 1px,
        transparent 0 10px
      )
    ;

    background: var(--clamp-range), var(--grid), var(--clamp), var(--graph);
    background-color: var(--canvas);
  }

  font-output {
    position: absolute;
    inset: 0 auto auto 0;
    margin: 0.25em;
    padding: 0.25em 1em;
    background: white;
    z-index: 10;
  }

  view-port {
    background-color: lch(from white l c h / 0.5);
    display: grid;
    inline-size: var(--vw, 300px);
    outline: medium solid maroon;
    box-shadow: 0 0 0.25em black inset;
  }

  zoom-doc {
    position: relative;
    container: viewport / inline-size;
    display: grid;
    place-content: end;
    zoom: var(--zoom, 1);
  }
  
  em-box {
    background: lch(from var(--fill) l c h / 0.5);
    display: inline-block;
    line-height: 1;
    min-inline-size: 1em;
    text-align: center;
    white-space: nowrap;
  }

  zoom-indicator {
    block-size: 10px;
    background: currentcolor;
    inline-size: 10px;
    inset: auto auto 0 0;
    position: absolute;
  }

  input-control {
    display: grid;
    grid-template: 'label output' auto 'input input' auto / 1fr auto;
  }

  input {
    grid-area: input;
  }
}

@layer reset {
  * { box-sizing: border-box; }
  html {
    block-size: 100%; 
    interpolate-size: allow-keywords;
    font-family: monospace, serif;
    background: white;
  }
  body { 
    margin: unset;
  }
  
  view-port,
  zoom-doc {
    display: block;
  }

  hr {
    border: unset;
    border-block-end: thin dotted;
    inline-size: 100%;
  }

  details > div {
    padding-block-start: 1lh;
  }
  
  label { display: block; }
  input { 
    width: 100%; 
    width: stretch; 
  }

  button, input {
    font: inherit;
  }

  [aria-pressed]::before {
    --emoji: '';
    content: var(--emoji);
    content: var(--emoji) / '';
  }

  [aria-pressed=true]::before {
    --emoji: ' ✅ ';
  }
}