.reference-metal{
    --h: 52px;                            /* a normal control height */
    --u: calc(var(--h) / 516);
    --bw: calc(1407 * var(--u));
    --bh: var(--h);
    /* The canvas is the stage, so this has to clear the bloom's full reach
       (~4 sigma) or the halo gets cut off against a visible rectangle. */
    --pad: calc(900 * var(--u));
    position:relative;
    width:calc(var(--bw) + 2 * var(--pad));
    height:calc(var(--bh) + 2 * var(--pad));
    display:grid;place-items:center;
    touch-action:manipulation;
  }

  /* the button's own solid body, and the shadow it casts on the pool */
  .reference-metal .plate{
    position:absolute;
    width:var(--bw);height:var(--bh);
    border-radius:999px;
    background:#0c0c0c;
    box-shadow:
      0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.72),
      0 calc(var(--h) * 0.30) calc(var(--h) * 0.66) rgba(0,0,0,.62),
      0 calc(var(--h) * 0.62) calc(var(--h) * 1.30) rgba(0,0,0,.42);
    transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
               background .38s cubic-bezier(.22,.61,.36,1);
  }
  /* deepen it while the metal is lit, so the bright face keeps its edge */
  .reference-metal.hot .plate{
    background:#090909;
    box-shadow:
      0 calc(var(--h) * 0.12) calc(var(--h) * 0.26) rgba(0,0,0,.80),
      0 calc(var(--h) * 0.40) calc(var(--h) * 0.86) rgba(0,0,0,.72),
      0 calc(var(--h) * 0.86) calc(var(--h) * 1.80) rgba(0,0,0,.55);
  }

  #button-fx{position:absolute;inset:0;width:100%;height:100%;display:block}

  .reference-btn{
    position:relative;
    width:var(--bw);height:var(--bh);
    border:0;background:none;padding:0;
    border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    gap:calc(88 * var(--u));
    color:#fff;
    font-family:inherit;
    font-weight:500;
    font-size:calc(207 * var(--u));
    line-height:1;
    letter-spacing:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    outline:none;
  }
  .reference-btn:focus-visible{outline:calc(4 * var(--u)) solid rgba(255,255,255,.55);outline-offset:calc(10 * var(--u))}
  .reference-btn .ico{
    width:calc(115 * var(--u));height:calc(115 * var(--u));
    display:block;flex:none;overflow:visible;
  }
  /* descenders pull the flex box up — nudge back so the cap box, not the
     em box, is what sits centred on the pill (measured, not guessed) */
  .reference-btn .lbl{display:block;transform:translateY(calc(2 * var(--u)))}

  /* pressed: the button settles onto the surface, so the shadow tightens */
  .reference-metal.press .plate{
    background:#080808;
    box-shadow:
      0 calc(var(--h) * 0.05) calc(var(--h) * 0.13) rgba(0,0,0,.82),
      0 calc(var(--h) * 0.16) calc(var(--h) * 0.40) rgba(0,0,0,.70),
      0 calc(var(--h) * 0.34) calc(var(--h) * 0.80) rgba(0,0,0,.50);
    transition-duration:.10s;
  }

.reference-metal{--h:52px;--bw:216px;width:216px;height:52px;overflow:visible;flex:none}
#button-fx{inset:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));height:calc(100% + 2 * var(--pad));pointer-events:none}
.reference-btn{font-family:'DM Sans',sans-serif;font-size:14px;text-decoration:none;gap:26px}
.reference-btn:focus-visible{outline:2px solid #ffffff;outline-offset:6px}
.reference-metal .plate{pointer-events:none}