.swp{
  --swp-app:#0A0A0A;
  --swp-raised:#141413;
  --swp-fill:#1F1F1E;
  --swp-rule:#262625;
  --swp-ink:#F5F4F0;
  --swp-ink-2:#93938C;
  --swp-outline-on:rgba(245,244,240,.55);
  --swp-progress:#C7E85C;
  --swp-on-light:#0A0A0A;
  --swp-display:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --swp-text:'Inter Tight',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  position:fixed;inset:0;z-index:99999;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;
  color:var(--swp-ink);font-family:var(--swp-text);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
.swp[hidden]{display:none}

.swp :where(*){box-sizing:border-box;margin:0;padding:0}
.swp :where(input,button){font:inherit;color:inherit;border:none;background:none;outline:none}
.swp :where(button){cursor:pointer}
.swp svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.swp-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.86);
  animation:swp-fade 200ms cubic-bezier(.2,0,0,1) both}

.swp-panel{position:relative;width:480px;max-width:100%;
  max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;
  background:var(--swp-raised);padding:32px;
  display:flex;flex-direction:column;gap:24px;
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  animation:swp-rise 200ms cubic-bezier(.2,0,0,1) both}

@keyframes swp-fade{from{opacity:0}to{opacity:1}}
@keyframes swp-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.swp-backdrop,.swp-panel{animation:none}}

/* type */
.swp-mark{font:500 11px/14px var(--swp-text);letter-spacing:.22em;
  text-transform:uppercase;color:var(--swp-ink-2);display:block}
.swp-mark-progress{color:var(--swp-progress)}
.swp-d2{font-family:var(--swp-display);font-weight:800;font-style:italic;
  font-size:34px;line-height:36px;letter-spacing:.02em;text-transform:uppercase;
  transform:skewX(-4deg);transform-origin:left;margin-right:.09em;color:var(--swp-ink)}
.swp-lede{font:400 16px/24px var(--swp-text);color:var(--swp-progress);text-wrap:pretty}

/* header */
.swp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.swp-head-copy{display:flex;flex-direction:column;gap:12px}
.swp-close{width:44px;height:44px;display:grid;place-items:center;flex:none;
  color:var(--swp-ink-2);margin:-10px -12px 0 0}
.swp-close:focus-visible{color:var(--swp-ink);box-shadow:inset 0 0 0 1px var(--swp-outline-on)}

/* receipt row */
.swp-receipt{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--swp-rule);border-bottom:1px solid var(--swp-rule)}
.swp-email{font:500 15px var(--swp-text);color:var(--swp-ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tester checkbox */
.swp-tester{display:flex;flex-direction:column;gap:24px}
.swp-check{display:flex;gap:14px;align-items:flex-start;min-height:44px;cursor:pointer;position:relative}
.swp-check-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.swp-box{position:relative;flex:none;width:24px;height:24px;display:grid;place-items:center;
  color:transparent;box-shadow:inset 0 0 0 1.5px var(--swp-outline-on);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:transform 120ms cubic-bezier(.2,0,0,1)}
.swp-check:active .swp-box{transform:scale(.94)}
.swp-check-input:checked + .swp-box{background:var(--swp-ink);color:var(--swp-on-light);box-shadow:none}
.swp-check-input:focus-visible + .swp-box{box-shadow:inset 0 0 0 2px var(--swp-ink)}
.swp-check-input:disabled ~ *{cursor:default}
.swp-check-copy{display:flex;flex-direction:column;gap:4px}
.swp-check-title{font:600 15px/20px var(--swp-text);color:var(--swp-progress)}
.swp-check-sub{font:400 14px/20px var(--swp-text);color:var(--swp-ink-2)}

/* action slab */
.swp-pill{width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--swp-ink);color:var(--swp-on-light);
  font:800 14px var(--swp-display);text-transform:uppercase;letter-spacing:.16em;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:transform 120ms cubic-bezier(.2,0,0,1)}
.swp-pill:active{transform:scale(.98)}
.swp-pill[disabled]{opacity:.6;cursor:default}
.swp-pill:focus-visible{outline:2px solid var(--swp-ink);outline-offset:3px}
.swp-done{font:500 15px/22px var(--swp-text);color:var(--swp-ink);min-height:56px;display:flex;align-items:center}
.swp-done[hidden]{display:none}

/* share */
.swp-share{display:flex;flex-direction:column;gap:10px}
.swp-link{display:flex;align-items:center;gap:12px;background:var(--swp-fill);
  padding:0 8px 0 16px;min-height:48px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.swp-link-url{flex:1;min-width:0;font:400 15px var(--swp-text);color:var(--swp-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swp-textbtn{min-height:44px;padding:0 12px;flex:none;
  font:600 12px var(--swp-text);letter-spacing:.18em;text-transform:uppercase;color:var(--swp-ink)}
.swp-textbtn:focus-visible{box-shadow:inset 0 0 0 1px var(--swp-outline-on)}

/* lock page scroll while open */
html.swp-lock,html.swp-lock body{overflow:hidden}

@media (max-width:520px){
  .swp{padding:16px}
  .swp-panel{padding:24px 20px}
  .swp-d2{font-size:30px;line-height:32px}
}

.swp-pill[hidden]{display:none}