.coupon{position:relative;display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;row-gap:2px;
  min-height:56px;padding:8px 22px;border:1.5px dashed var(--brand);border-radius:14px;background:color-mix(in srgb,var(--brand) 7%,var(--surface));
  color:var(--fg);font:inherit;cursor:pointer;transition:background var(--t),border-color var(--t),transform var(--t)}
.coupon{-webkit-mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px),radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px),radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px);
  mask-composite:intersect}
.coupon::before,.coupon::after{content:"";position:absolute;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
  box-sizing:border-box;background:none;border:1.5px dashed var(--brand);pointer-events:none}
.coupon::before{left:-10px}
.coupon::after{right:-10px}
.coupon.is-done::before,.coupon.is-done::after{border-style:solid;border-color:#19a974}
.coupon:hover{background:color-mix(in srgb,var(--brand) 13%,var(--surface))}
.coupon:active{transform:translateY(1px)}
.coupon:focus-visible{outline:3px solid var(--blue-lt);outline-offset:3px}
.coupon-l{grid-row:1;font-size:12.5px;font-weight:700;color:var(--fg-2)}
.coupon-c{grid-row:1 / 3;font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:800;letter-spacing:.12em;color:var(--brand)}
.coupon-h{grid-row:2;font-size:12px;color:var(--fg-3)}
.coupon.is-done{border-style:solid;border-color:#19a974}
.coupon.is-done .coupon-h{color:#19a974;font-weight:700}