/* Badge scene: the swinging lanyard badge, scoped under .bk-scene.
   Themes set the --bk-* tokens on the scene element (see BadgeKit.THEMES). */
.bk-scene{
  /* defaults match the Midnight Violet theme in badge.js */
  --bk-bg-1:#190963; --bk-bg-2:#31119c; --bk-bg-3:#5b1cde;
  --bk-glow:rgba(172,152,245,.42);
  --bk-word:#ffffff; --bk-muted:rgba(255,255,255,.74);
  --bk-pop:#ff7ad9; --bk-on-pop:#2e1529; --bk-word-pop:#ff7ad9; --bk-band:#1b0866;
  --bk-ink:#1d0b4a; --bk-accent:#4519cf;
  --bk-card-1:#fdfbff; --bk-card-2:#f8f6fe; --bk-card-3:#f3effe;
  --bk-back-1:#1b0866; --bk-back-2:#2c10a0;
  --bk-strap:#160659; --bk-stitch:rgba(255,122,217,.75); --bk-strap-text:rgba(254,253,255,.92);
  --bk-ic-1:#ff7ad9; --bk-ic-2:#bf55d6; --bk-tag-line:rgba(255,122,217,.45);
  --bk-photo-1:#ff7ad9; --bk-photo-2:#4519cf; --bk-photo-3:#4519cf;

  position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;
  background-color:var(--bk-bg-1);
  /* one flat colour, a little lighter at the top and darker at the floor */
  background-image:linear-gradient(180deg, var(--bk-bg-3) 0%, var(--bk-bg-2) 38%, var(--bk-bg-2) 68%, var(--bk-bg-1) 118%);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--bk-word);
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}
.bk-scene *,.bk-scene *::before,.bk-scene *::after{box-sizing:border-box}
.bk-scene::after{ /* grain */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bk-glow{
  display:none; /* the soft orb read as generic; the badge shadow carries the depth now */
  position:absolute;left:50%;top:46%;width:min(70%,620px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--bk-glow) 0%, transparent 65%);filter:blur(20px);z-index:0;pointer-events:none;
}

/* role words */
.bk-word{
  position:absolute;z-index:7;margin:0;pointer-events:none;
  font-family:var(--bk-disp,"Archivo Black","Arial Black",Impact,sans-serif);font-weight:var(--bk-disp-w,400);
  font-size:40px;letter-spacing:.02em;line-height:1;color:var(--bk-word);
  text-shadow:0 3px 0 rgba(0,0,0,.14);
  opacity:0;animation:bkWordIn .9s cubic-bezier(.2,.8,.2,1) forwards;
  user-select:none;white-space:nowrap;
}
.bk-word.bk-wrap{white-space:pre;line-height:.95}
.bk-w0.bk-wrap,.bk-w2.bk-wrap{text-align:right}
.bk-w1,.bk-w2{color:var(--bk-word-pop)} /* the pop colour on the diagonal pair */
.bk-w0{animation-delay:.55s}
.bk-w1{animation-delay:.7s}
.bk-w2{animation-delay:.85s}
.bk-w3{animation-delay:1s}
@keyframes bkWordIn{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.bk-strap{position:absolute;inset:0;z-index:1;pointer-events:none}
/* hand-written "tap me" note */
.bk-tap{
  position:absolute;z-index:8;display:flex;align-items:flex-start;gap:2px;pointer-events:none;
  color:var(--bk-word);opacity:0;transition:opacity .6s;white-space:nowrap;
}
.bk-tap[hidden]{display:none}
/* the HeyBadge "Hey" bubble (badge.js placeHey): the logo's orange bubble with a tail towards the card */
.bk-hey{position:absolute;z-index:8;pointer-events:none;padding:6px 15px 8px;border-radius:16px;background:#ff6b1a;color:#141414;box-shadow:0 0 0 2.5px #fff,0 8px 18px rgba(0,0,0,.22);
  font:800 26px/1 "Barlow Condensed",Inter,system-ui,sans-serif;letter-spacing:.01em;transform-origin:100% 100%;transform:scale(0) rotate(-12deg);opacity:0}
.bk-hey::after{content:"";position:absolute;right:10px;bottom:-9px;width:16px;height:14px;background:#ff6b1a;clip-path:polygon(0 0,100% 0,100% 100%);box-shadow:none}
.bk-hey::before{content:"";position:absolute;right:8.5px;bottom:-12.5px;width:19px;height:17px;background:#fff;clip-path:polygon(0 0,100% 0,100% 100%)}
.bk-hey-rtl{transform-origin:0 100%}
.bk-hey-rtl::after{right:auto;left:10px;clip-path:polygon(0 0,100% 0,0 100%)}
.bk-hey-rtl::before{right:auto;left:8.5px;clip-path:polygon(0 0,100% 0,0 100%)}
.bk-hey-ar{font:700 22px/1.25 var(--bk-disp-ar,"Reem Kufi"),"Noto Kufi Arabic",system-ui,sans-serif;padding:4px 14px 7px}
.bk-hey-sm{font-size:18px;padding:4px 10px 6px;border-radius:12px}
.bk-hey-sm::after{bottom:-7px;width:12px;height:10px;right:8px}.bk-hey-sm::before{bottom:-10px;width:15px;height:13px;right:6.5px}
.bk-hey-sm.bk-hey-rtl::after{left:8px}.bk-hey-sm.bk-hey-rtl::before{left:6.5px}
.bk-hey-sm.bk-hey-ar{font-size:15px}
.bk-hey.bk-on{opacity:1;transform:rotate(-6deg);animation:bk-hey-pop .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bk-hey-pop{0%{opacity:0;transform:scale(0) rotate(-14deg)}60%{opacity:1;transform:scale(1.12) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.bk-hey[hidden]{display:none}
/* the easter egg (badge.js tapHey): the bubble takes taps, bounces on each, and the 10th sends out little Hey bubbles */
.bk-hey.bk-on{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.bk-hey.bk-on.bk-bump{animation:bk-hey-bump .4s cubic-bezier(.3,1.8,.5,1) both}
.bk-hey-rtl.bk-on.bk-bump{animation-name:bk-hey-bump-r}
@keyframes bk-hey-bump{0%{transform:scale(.82) rotate(-12deg)}100%{transform:scale(1) rotate(-6deg)}}
@keyframes bk-hey-bump-r{0%{transform:scale(.82) rotate(12deg)}100%{transform:scale(1) rotate(6deg)}}
.bk-hey.bk-hey-bit{z-index:9;pointer-events:none;font-size:15px;padding:3px 8px 4px;border-radius:9px;box-shadow:0 0 0 1.5px #fff;opacity:1;transform:translate(-50%,-50%)}
.bk-hey.bk-hey-bit::after,.bk-hey.bk-hey-bit::before{display:none}
.bk-hey-rtl.bk-on{transform:rotate(6deg);animation-name:bk-hey-pop-r}
@keyframes bk-hey-pop-r{0%{opacity:0;transform:scale(0) rotate(14deg)}60%{opacity:1;transform:scale(1.12) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.bk-hey.bk-on,.bk-hey.bk-on.bk-bump{animation:none}}
.bk-tap svg{flex:0 0 54px;width:54px;height:34px;margin-top:22px;transform:rotate(-12deg);overflow:visible;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-tap path{stroke-dasharray:90;stroke-dashoffset:90}
.bk-tap{color:var(--bk-word-pop)}
.bk-tap-txt{display:block;transform:rotate(-5deg);transform-origin:0 50%;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.bk-tap b{display:block;font-size:28px;font-weight:700;line-height:1}
.bk-tap small{display:block;font-size:18px;font-weight:600;line-height:1.1;color:var(--bk-tap-small,currentColor)} /* solid, picked to read on the theme (badge.js vars) */
.bk-tap.bk-on{opacity:1;animation:bkNudge 2.6s 1s ease-in-out infinite}
.bk-tap.bk-on .bk-tap-line{animation:bkDraw .7s .15s ease-out forwards}
.bk-tap.bk-on .bk-tap-head{animation:bkDraw .3s .8s ease-out forwards}
@keyframes bkDraw{to{stroke-dashoffset:0}}
@keyframes bkNudge{0%,100%{transform:none}50%{transform:translateX(-5px)}}
/* narrow screens: the note sits beside the strap, above the badge */
.bk-tap.bk-tap-sm svg{flex-basis:40px;width:40px;height:30px;margin-top:16px;transform:rotate(-30deg)}
.bk-tap.bk-tap-sm b{font-size:22px}
.bk-tap.bk-tap-sm small{font-size:14.5px;white-space:normal;max-width:9em}
.bk-tap.bk-tap-sm .bk-tap-txt{min-width:0}
/* Arabic: mirror the arrow, use a hand-lettered Arabic face */
.bk-tap.bk-tap-ar .bk-tap-txt{font-family:"Aref Ruqaa","IBM Plex Sans Arabic",serif;transform:rotate(4deg);transform-origin:100% 50%}
.bk-tap.bk-tap-ar b{font-size:26px;line-height:1.3}
.bk-tap.bk-tap-ar small{font-size:18px;line-height:1.5}
.bk-tap.bk-tap-ar svg{transform:scaleX(-1) rotate(-12deg)}
.bk-tap.bk-tap-ar.bk-tap-sm svg{transform:scaleX(-1) rotate(-30deg)}
.bk-tap.bk-tap-one small{display:none}
.bk-tap.bk-tap-sm.bk-tap-one svg{flex-basis:30px;width:30px;height:20px;margin-top:8px}
.bk-tap.bk-tap-one b{line-height:1.15}
.bk-tap.bk-tap-ar.bk-tap-sm b{font-size:22px} .bk-tap.bk-tap-ar.bk-tap-sm small{font-size:15px}
.bk-scene[dir="rtl"] .bk-tap.bk-on{animation-name:bkNudgeR}
@keyframes bkNudgeR{0%,100%{transform:none}50%{transform:translateX(5px)}}
.bk-fx{position:absolute;inset:0;z-index:0;pointer-events:none}

/* badge */
.bk-badge{
  position:absolute;left:0;top:0;z-index:6;width:250px;height:384px; /* above the grain, so the photo stays untouched */
  transform-origin:125px 0;will-change:transform;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline:none;
}
.bk-badge.bk-dragging{cursor:grabbing}
.bk-badge.bk-still{cursor:pointer}
/* hanging still (badge.js adds bk-rest): drawn flat and at its real size, so even the small lettering is sharp */
.bk-badge.bk-rest{will-change:auto}
/* no 3D at all: the swing is a flat 2D turn and the flip a 2D squeeze (badge.js), so the browser draws the lettering itself at every frame */
.bk-badge:focus-visible .bk-face{outline:3px solid #fff;outline-offset:4px}
.bk-clip{position:absolute;left:0;top:0;width:250px;height:40px;z-index:3;pointer-events:none}
.bk-ring{
  position:absolute;left:50%;top:-3px;width:32px;height:21px;margin-left:-16px;border-radius:50%;
  border:4px solid #dcdee8;box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(0,0,0,.35);
}
/* Metal strap clip: the plate sits over the card's top edge and its tongue goes down into the slot */
.bk-clamp{
  position:absolute;left:50%;top:12px;width:42px;height:25px;margin-left:-21px;border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg,#f6f7fb 0%,#d3d6e0 40%,#9a9eae 72%,#dfe1ea 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(70,72,90,.35);
}
.bk-clamp::before{ /* tongue: behind the plate, disappearing into the slot */
  content:"";position:absolute;z-index:-1;left:8px;right:8px;top:18px;height:19px;
  background:linear-gradient(180deg,#c9ccd7 0%,#b4b8c6 40%,#80849a 70%,#3a3848 88%,#16121f 100%);
  box-shadow:-1px 0 1px rgba(0,0,0,.18),1px 0 1px rgba(0,0,0,.18);
}
.bk-clamp::after{ /* rivet */
  content:"";position:absolute;left:50%;top:9px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#a3a7b5 60%,#6c7080);box-shadow:0 1px 1px rgba(0,0,0,.35);
}
/* the other clips (badge.js clipArt): drawn in badge coordinates, the ring and clamp give way */
.bk-clip-art{position:absolute;left:85px;top:-14px;width:80px;height:70px;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.32))}
.bk-scene:not([data-clip="metal"]) .bk-ring,.bk-scene:not([data-clip="metal"]) .bk-clamp{display:none}
.bk-card{position:absolute;left:0;top:34px;width:250px;height:350px;--sheen:50}
.bk-face{
  position:absolute;inset:0;border-radius:20px;overflow:hidden;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.6),0 12px 18px -12px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.35) inset;
}
.bk-sheen{ /* keep it covering the whole face: it also lines the face's lettering up with the card's corner (see bk-rest) */
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.08) 54%,transparent 64%);
  background-size:260% 100%;background-position:calc(var(--sheen) * 1%) 0;mix-blend-mode:screen;opacity:.75;
}
.bk-slot{position:absolute;z-index:1;left:50%;top:11px;width:56px;height:9px;margin-left:-28px;border-radius:6px;background:rgba(0,0,0,.5);box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35)}

.bk-front{
  background:linear-gradient(170deg,var(--bk-card-1),var(--bk-card-2) 70%,var(--bk-card-3));
  color:var(--bk-ink);
}
/* dark lettering on a light card: the system's normal smoothing (on a Mac, "antialiased" draws it thinner and paler) */
.bk-scene:not([data-tone="dark"]):not([data-mat="pcb"]) .bk-front{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.bk-front::before{ /* the coloured band printed across the top of a real ID card, where the slot is punched */
  content:"";position:absolute;left:0;right:0;top:0;height:26px;background:var(--bk-band);
}
.bk-photo{position:absolute;z-index:2;left:16px;right:16px;top:32px;height:168px;border-radius:13px;overflow:hidden;background:var(--bk-photo-2)}
.bk-front .bk-sheen{z-index:1} /* the shine passes under the photo, never over it */
.bk-info,.bk-foot{z-index:2} /* nor over the words: the shine washed out the location and company */
.bk-photo svg,.bk-photo img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;filter:none}
/* name, title and company share the space between the photo and the foot; the name grows into whatever is free */
.bk-info{position:absolute;left:10px;right:10px;top:204px;bottom:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.bk-name{
  margin:0;
  max-width:100%;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:34px;letter-spacing:.01em;line-height:1.05;
  white-space:nowrap;overflow:hidden;overflow-wrap:normal;text-wrap:balance;
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility; /* real letter shapes: no faked bold, no squeeze */
}
.bk-name.bk-wrap2{white-space:normal} /* only a name too long for one line even at 22px takes two (fitName) */
/* the card's lettering waits for its fonts (at most 2.5 s), so it never shows in a stand-in font and jumps */
.bk-scene.bk-fontwait .bk-info,.bk-scene.bk-fontwait .bk-meta{visibility:hidden}
.bk-role{flex:0 0 auto;max-width:100%;font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.005em;line-height:1.3;color:var(--bk-role,color-mix(in srgb,var(--bk-accent) 62%,var(--bk-ink)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-company{flex:0 0 auto;max-width:100%;font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.005em;line-height:1.3;color:var(--bk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-foot{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-idno{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:var(--bk-ink);opacity:.6}
.bk-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-loc{display:flex;align-items:center;gap:4px;font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.005em;color:var(--bk-ink);opacity:1;min-width:0}
.bk-loc>span{overflow:hidden;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2} /* a long place name takes a second line beside the barcode */
.bk-loc:has(>span:not(:only-child)){align-items:flex-start}
.bk-loc svg{margin-top:1px}
.bk-loc svg{flex:0 0 11px;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-foot.has-loc .bk-barcode{flex-basis:78px}
/* company logo, in the barcode's place */
.bk-flogo{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;min-width:0;max-width:calc(110px * var(--logo-k,1));height:calc(30px * var(--logo-k,1))} /* --logo-k: the owner's logo size */
.bk-front[style*="--logo-k"] .bk-info{bottom:calc(50px + max(0, var(--logo-k) - 1) * 30px)} /* a bigger logo keeps clear of the words */
.bk-flogo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bk-flogo.bk-flogo-dark{padding:4px 8px;border-radius:8px;background:var(--bk-ink)}
/* on a dark badge colour: a white logo sits straight on the card, any other logo on a white pin so it still shows */
.bk-scene[data-tone="dark"] .bk-flogo.bk-flogo-dark{padding:0;background:none}
.bk-scene[data-tone="dark"] .bk-flogo:not(.bk-flogo-dark){padding:4px 8px;border-radius:8px;background:#fff}
.bk-scene[data-tone="dark"][data-mat="plastic"] .bk-front .bk-sheen{opacity:.35} /* on a dark badge colour the shine would wash out the light lettering */
/* status sticker in the top corner, beside the slot */
.bk-status{
  position:absolute;z-index:3;left:6px;top:4px;height:18px;max-width:90px;display:flex;align-items:center;gap:4px; /* sits inside the top band */
  padding:0 8px 0 7px;border-radius:999px;background:var(--st);color:#fff;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;box-shadow:0 2px 5px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.25); /* upright: tilted small text blurs */
}
.bk-status i{flex:0 0 5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.bk-status span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-barcode{flex:0 0 96px;height:22px;opacity:.75;background:repeating-linear-gradient(90deg,var(--bk-ink) 0 2px,transparent 2px 4px,var(--bk-ink) 4px 5px,transparent 5px 8px,var(--bk-ink) 8px 11px,transparent 11px 12px)}

.bk-card .bk-back{transform:scaleX(-1);visibility:hidden} /* mirrored, so it reads right once the card has turned over */
.bk-card.bk-over .bk-back{visibility:visible} .bk-card.bk-over .bk-front{visibility:hidden}
.bk-back{
  background:linear-gradient(170deg,var(--bk-back-1),var(--bk-back-2));color:#fff;
  padding:34px 18px 14px;display:flex;flex-direction:column;
}
.bk-back>*{flex-shrink:0} /* so too much content shows as overflow, which renderCard in badge.js removes */
.bk-scene .bk-back .bk-sheen{opacity:0 !important} /* no shine on the back: it stays plain behind the links */
.bk-back>:not(.bk-sheen):not(.bk-slot){position:relative;z-index:1} /* the shine passes under the words on the back too */
.bk-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px}
.bk-tag{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:transparent;color:var(--bk-pop);border:1px solid var(--bk-tag-line);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bk-links{display:flex;flex-direction:column;gap:6px}
.bk-row{
  display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:12px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);transition:background .2s,border-color .2s;cursor:pointer;
}
.bk-row:hover{background:rgba(255,255,255,.14);border-color:var(--bk-tag-line)}
.bk-row:focus-visible,.bk-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bk-ic{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bk-pop)}
.bk-ic svg{width:16px;height:16px;fill:none;stroke:var(--bk-on-pop);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-txt{display:flex;flex-direction:column;min-width:0}
.bk-txt small{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.84);line-height:1.2} /* not faded: it reads on every theme */
.bk-txt b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* no skills: the space they'd take goes to bigger icons along the bottom */
.bk-noskills .bk-tags{display:none}
.bk-noskills .bk-back-foot{gap:9px}
.bk-noskills .bk-chip{width:38px;height:38px}
.bk-noskills .bk-chip svg{width:18px;height:18px}
.bk-back-foot{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;min-height:30px;font-size:11.5px;color:rgba(255,255,255,.84);text-align:center}
.bk-chip{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.bk-chip svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-chip:hover{background:rgba(255,255,255,.18)}
.bk-chip[data-k="whatsapp"]{background:#25d366;border-color:#25d366} .bk-chip[data-k="whatsapp"]:hover{background:#1fbd5a}
.bk-meet{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:8px 12px;border-radius:12px;
  background:var(--bk-pop);color:var(--bk-on-pop);text-decoration:none;font-size:12.5px;font-weight:700;
  box-shadow:0 3px 0 rgba(0,0,0,.28);transition:filter .2s;
}
.bk-meet:hover{filter:brightness(1.1)}
.bk-meet:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bk-meet svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-empty{margin:auto 0;text-align:center;font-size:12px;font-weight:500;color:rgba(255,255,255,.84);line-height:1.5}

/* event headline: a pill centred above the bottom line */
.bk-headline{
  position:absolute;z-index:7;left:50%;bottom:calc(clamp(50px,9%,84px) + var(--bk-dock,0px));transform:translateX(-50%);margin:0;
  max-width:calc(100% - 32px);padding:9px 18px;border-radius:999px;
  background:var(--bk-pop);border:0;box-shadow:0 4px 0 rgba(0,0,0,.22);
  font:700 17px/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:.03em;color:var(--bk-on-pop);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  animation:bkHeadIn .7s 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.bk-headline::before{content:"✦";margin-right:9px;color:currentColor}
/* event mode: where to find you, with a pin, and the event link under it */
.bk-headline.bk-ev::before{content:none}
.bk-headline svg{width:16px;height:16px;margin-right:8px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* event name with where to find you under it */
.bk-headline.bk-two{border-radius:20px;padding:8px 20px 9px;line-height:1.25}
.bk-headline.bk-two>span{display:block;overflow:hidden;text-overflow:ellipsis}
.bk-headline.bk-two .bk-hl2{margin-top:2px;font-size:.82em;font-weight:500;opacity:.92;letter-spacing:.02em}
.bk-headline.bk-two .bk-hl2 svg{width:.95em;height:.95em;margin-right:5px;vertical-align:-2px}
.bk-scene[dir="rtl"] .bk-headline.bk-two .bk-hl2 svg{margin-right:0;margin-left:5px}
.bk-evlink{
  position:absolute;z-index:8;left:50%;bottom:calc(clamp(50px,9%,84px) + var(--bk-dock,0px));transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;height:38px;max-width:calc(100% - 32px);padding:0 18px;border-radius:999px;
  background:#fff;color:var(--bk-ink);text-decoration:none;white-space:nowrap;box-shadow:0 10px 28px -10px rgba(0,0,0,.5);
  font:600 14px/1 "Space Grotesk",system-ui,sans-serif;animation:bkHeadIn .7s 1.35s cubic-bezier(.2,.8,.2,1) both;
}
.bk-evlink[hidden]{display:none}
.bk-evlink span{overflow:hidden;text-overflow:ellipsis}
.bk-evlink svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--bk-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-evlink:hover{filter:brightness(.96)}
.bk-evlink:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bk-scene.bk-has-evlink .bk-headline{bottom:calc(clamp(50px,9%,84px) + var(--bk-dock,0px) + 46px)}
@keyframes bkHeadIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:420px){ .bk-headline{font-size:13px;padding:8px 14px} .bk-evlink{height:36px;font-size:13px;padding:0 15px} .bk-scene.bk-has-evlink .bk-headline{bottom:calc(clamp(50px,9%,84px) + var(--bk-dock,0px) + 44px)} }
/* low phone stage (bk-low, set in layout) with a greeting: the pill takes the typing line's place at the bottom */
.bk-scene.bk-low.bk-has-hl .bk-typer,.bk-scene.bk-low.bk-has-hl .bk-hint{display:none}
.bk-scene.bk-low.bk-has-hl .bk-headline,.bk-scene.bk-low.bk-has-hl .bk-evlink{bottom:calc(clamp(12px,3%,24px) + var(--bk-dock,0px))}
.bk-scene.bk-low.bk-has-hl.bk-has-evlink .bk-headline{bottom:calc(clamp(12px,3%,24px) + var(--bk-dock,0px) + 44px)}
/* phones in event mode: the event takes the bottom line's place, so the badge keeps its size */
@media (max-width:700px){
  .bk-scene.bk-event .bk-typer,.bk-scene.bk-event .bk-hint{display:none}
  .bk-scene.bk-event .bk-headline,.bk-scene.bk-event .bk-evlink{bottom:calc(clamp(18px,4%,40px) + var(--bk-dock,0px))}
  .bk-scene.bk-event.bk-has-evlink .bk-headline{bottom:calc(clamp(18px,4%,40px) + var(--bk-dock,0px) + 44px)}
}

/* bottom UI */
.bk-typer{
  position:absolute;left:clamp(16px,4%,48px);bottom:max(calc(clamp(18px,4%,40px) + var(--bk-dock,0px)),var(--bk-ground-t,0px));z-index:7;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--bk-typer,var(--bk-muted));
}
.bk-typer .bk-cursor{display:inline-block;width:8px;height:15px;margin-left:2px;vertical-align:-3px;background:var(--bk-pop);animation:bkBlink 1s steps(1) infinite}
@keyframes bkBlink{50%{opacity:0}}
.bk-hint{
  position:absolute;right:clamp(16px,4%,48px);bottom:max(calc(clamp(18px,4%,40px) + var(--bk-dock,0px)),var(--bk-ground-h,0px));z-index:7;
  font-size:13px;color:var(--bk-typer,var(--bk-muted));transition:opacity .6s;opacity:0;animation:bkWordIn .8s 1.8s forwards;
}

@media (max-width:700px){
  .bk-typer,.bk-hint{font-size:12px}
}
/* --bk-ground-t / -h: the height of a holiday scene's bottom-corner props under the typing line / hint (badge.js groundFx), so they sit above them.
   when the typing line and the hint can't share the bottom row (bk-stack, badge.js stackBottom), the typing line moves up a row */
.bk-scene.bk-stack .bk-typer{bottom:calc(max(calc(clamp(18px,4%,40px) + var(--bk-dock,0px)),var(--bk-ground-t,0px),var(--bk-ground-h,0px)) + 22px)}
@media (prefers-reduced-motion: reduce){
  .bk-tap.bk-on{animation:none} .bk-tap path{stroke-dashoffset:0 !important;animation:none !important}
  .bk-word,.bk-hint,.bk-headline,.bk-evlink{animation-duration:.01s;animation-delay:0s}
  .bk-typer .bk-cursor{animation:none}
}

/* Arabic: mirror the bottom line; letter-spacing breaks joined letters, so drop it */
.bk-scene[dir="rtl"] .bk-typer{left:auto;right:clamp(16px,4%,48px)}
.bk-scene[dir="rtl"] .bk-hint{right:auto;left:clamp(16px,4%,48px)}
.bk-scene[dir="rtl"] .bk-status{left:auto;right:6px;padding:0 7px 0 8px}
.bk-scene .bk-status.bk-tight{padding:0 5px;gap:0;letter-spacing:0} /* up to the slot's edge (97px), so a phone's slightly wider lettering still fits */ .bk-scene .bk-status.bk-tight i{display:none} /* a long label keeps 11.5px */
.bk-scene[dir="rtl"] .bk-headline::before{margin-right:0;margin-left:9px}
.bk-scene[dir="rtl"] .bk-headline svg{margin-right:0;margin-left:8px}
.bk-scene[dir="rtl"] .bk-evlink{font-family:"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif}
.bk-scene[dir="rtl"] .bk-role,.bk-scene[dir="rtl"] .bk-headline,.bk-scene[dir="rtl"] .bk-word{letter-spacing:0}
/* Arabic text: Arabic font first and no letter-spacing, so letters stay joined in every browser */
.bk-scene .bk-ar{font-family:"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif;letter-spacing:0 !important;font-feature-settings:normal}
/* Arabic letters reach further below the line than Latin ones, so these boxes get more height */
.bk-scene .bk-ar{line-height:1.6}
.bk-scene .bk-word.bk-ar,.bk-scene .bk-name.bk-ar{font-family:var(--bk-disp-ar,"Cairo","IBM Plex Sans Arabic",sans-serif);font-weight:var(--bk-disp-ar-w,800);line-height:1.5}
.bk-scene .bk-word.bk-ar.bk-wrap{line-height:1.2;padding-top:.15em}
.bk-scene .bk-name.bk-ar{line-height:1.35;padding-bottom:5px}
.bk-scene .bk-tag.bk-ar{padding-block:3px}
.bk-scene .bk-loc .bk-ar{line-height:1.35} /* room for Arabic marks, and two lines still clear the company line */
.bk-scene .bk-status .bk-ar{line-height:1.25}
/* Arabic letters look smaller than Latin ones at the same size, so the small lines are a size up in Arabic */
.bk-scene .bk-role.bk-ar{font-size:15px} .bk-scene .bk-company.bk-ar{font-size:13.5px}
.bk-scene .bk-tag.bk-ar,.bk-scene .bk-txt small.bk-ar{font-size:12.5px;line-height:18.4px} /* the rows keep their height, so the back holds as many */
/* (the place name stays 11.5px: two lines of it must clear the company line) */
.bk-scene[dir="rtl"] *{letter-spacing:0}

/* short, wide screens (a phone held sideways; badge.js sets bk-short): the pill sits on the bottom line, beside the
   event link, in place of the typing line, so the badge can hang above it */
.bk-scene.bk-short.bk-has-hl .bk-typer,.bk-scene.bk-short.bk-has-hl .bk-hint{display:none}
.bk-scene.bk-short.bk-has-hl .bk-headline,.bk-scene.bk-short.bk-has-evlink .bk-evlink{bottom:calc(clamp(12px,3%,24px) + var(--bk-dock,0px));font-size:14px}
.bk-scene.bk-short.bk-has-hl .bk-headline{padding:8px 15px}
.bk-scene.bk-short.bk-has-evlink .bk-headline{left:auto;right:calc(50% + 6px);transform:none;max-width:calc(50% - 22px);animation-name:bkHeadInS}
.bk-scene.bk-short.bk-has-evlink .bk-evlink{left:calc(50% + 6px);transform:none;max-width:calc(50% - 22px);height:35px;animation-name:bkHeadInS}
.bk-scene.bk-short.bk-has-evlink[dir="rtl"] .bk-headline{right:auto;left:calc(50% + 6px)}
.bk-scene.bk-short.bk-has-evlink[dir="rtl"] .bk-evlink{left:auto;right:calc(50% + 6px)}
@keyframes bkHeadInS{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- lettering per theme family (badge.js TYPES sets --bk-disp) ---------- */
.bk-scene[data-type="mono"] .bk-word{letter-spacing:-.01em}
.bk-scene[data-type="condensed"] .bk-word{letter-spacing:.01em;line-height:.95}
.bk-scene[data-type="serif"] .bk-word{letter-spacing:0}
.bk-scene[data-type="rounded"] .bk-word{letter-spacing:.01em}

/* ---------- materials: what the badge is made of (badge.js LOOK sets data-mat). Both faces share it. ---------- */
/* plastic: the default PVC card; its back takes the theme's own colour, darkest at the top */
.bk-back{background:linear-gradient(172deg,var(--bk-back-1) 0%,var(--bk-back-2) 55%,color-mix(in srgb,var(--bk-back-2) 60%,var(--bk-bg-2)) 100%)}
.bk-back::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:rgba(0,0,0,.22)} /* the band carries round to the back */
.bk-back>.bk-slot{z-index:1}
/* artwork of the main themes (badge.js ART): a layer behind everything on the stage, sized to it with container units,
   and a printed layer on the back under the links. Neither takes a tap. */
.bk-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size}
.bk-art-piece{position:absolute;aspect-ratio:1}
.bk-art-piece svg,.bk-back-art svg{display:block;width:100%;height:100%}
.bk-scene .bk-back>.bk-back-art{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}

/* paper: thick matte card stock; the back is printed solid in the theme's accent */
.bk-scene[data-mat="paper"] .bk-front{background:var(--bk-card-1)}
.bk-scene[data-mat="paper"] .bk-front,.bk-scene[data-mat="paper"] .bk-back,
.bk-scene[data-mat="kraft"] .bk-front,.bk-scene[data-mat="kraft"] .bk-back{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
.bk-scene[data-mat="paper"] .bk-back{background-color:color-mix(in srgb,var(--bk-accent) 78%,#000)} /* a deeper print, so the white words read */
.bk-scene[data-mat="paper"] .bk-tag{color:#fff;border-color:color-mix(in srgb,var(--bk-pop) 70%,transparent)}
.bk-scene[data-mat="paper"] .bk-sheen,.bk-scene[data-mat="kraft"] .bk-sheen{opacity:.16}
.bk-scene[data-mat="paper"] .bk-face,.bk-scene[data-mat="kraft"] .bk-face{border-radius:14px;box-shadow:0 30px 50px -22px rgba(0,0,0,.6),0 10px 16px -12px rgba(0,0,0,.35)}

/* kraft: brown recycled board with fibres; ink prints dark and a little uneven */
.bk-scene[data-mat="kraft"] .bk-card{--bk-ink:#35210f} /* on the card, since the theme sets --bk-ink inline on the scene */
.bk-scene[data-mat="kraft"] .bk-front{background-color:#cfab7e}
.bk-scene[data-mat="kraft"] .bk-front::before{mix-blend-mode:multiply;opacity:.92}
.bk-scene[data-mat="kraft"] .bk-role{color:color-mix(in srgb,var(--bk-back-2) 70%,#35210f)} /* the theme's own deep colour, printed on the board */
.bk-scene[data-mat="kraft"] .bk-back{background-color:var(--bk-back-2)} /* the back is printed solid in the theme colour (Forest: deep green), fibres still showing */
.bk-scene[data-mat="kraft"] .bk-tag{color:#fff1dc;border-color:rgba(255,241,220,.45)}
.bk-scene[data-mat="kraft"] .bk-front .bk-photo{box-shadow:0 0 0 3px rgba(255,248,236,.5)}

/* foil: a holographic card whose rainbow shifts as the badge turns (--sheen follows the swing) */
.bk-scene[data-mat="foil"] .bk-front{
  background:
    linear-gradient(115deg,#ffc9ec 0%,#bfe6ff 16%,#ffeaa3 32%,#c4ffd6 48%,#dcc6ff 64%,#ffc9ec 80%,#bfe6ff 100%);
  background-size:320% 100%;background-position:calc(var(--sheen) * 1.6%) 0;
}
.bk-scene[data-mat="foil"] .bk-back{background:linear-gradient(172deg,var(--bk-back-1),var(--bk-back-2))} /* plain behind the links, like every back */
.bk-scene[data-mat="foil"] .bk-sheen{opacity:1}
.bk-scene[data-mat="foil"] .bk-back::before{ /* the holographic band, seen from behind */
  background:linear-gradient(115deg,#ffc9ec,#bfe6ff 20%,#ffeaa3 40%,#c4ffd6 60%,#dcc6ff 80%,#ffc9ec);background-size:320% 100%;background-position:calc(var(--sheen) * 1.6%) 0;opacity:.9}

/* metal: smooth satin aluminium, with the band and back anodised in the theme colour */
.bk-scene[data-mat="metal"] .bk-card{--bk-ink:#1d2026}
.bk-scene[data-mat="metal"] .bk-front{
  background:linear-gradient(180deg,#f1f3f6 0%,#cfd3da 46%,#b9bec7 54%,#e7e9ed 100%);
}
.bk-scene[data-mat="metal"] .bk-back{
  background:linear-gradient(172deg,color-mix(in srgb,var(--bk-back-1) 75%,#5a5f68),color-mix(in srgb,var(--bk-back-2) 65%,#2a2d33));
}
.bk-scene[data-mat="metal"] .bk-sheen{background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.1) 52%,transparent 70%);background-size:300% 100%;background-position:calc(var(--sheen) * 1%) 0;opacity:.5}
.bk-scene[data-mat="metal"] .bk-face{border-radius:16px}

/* ticket: an event pass on thick paper, with a perforated tear line and two punched notches */
.bk-scene[data-mat="ticket"] .bk-front{background:var(--bk-card-1)}
.bk-scene[data-mat="ticket"] .bk-face{border-radius:10px}
.bk-scene[data-mat="ticket"] .bk-face::after{
  content:"";position:absolute;z-index:4;left:-9px;right:-9px;top:291px;height:18px;pointer-events:none;
  background:
    radial-gradient(circle at 9px 50%,var(--bk-bg-2) 0 8.5px,transparent 9px),
    radial-gradient(circle at calc(100% - 9px) 50%,var(--bk-bg-2) 0 8.5px,transparent 9px);
}
.bk-scene[data-mat="ticket"] .bk-front::after{
  background:
    radial-gradient(circle at 9px 50%,var(--bk-bg-2) 0 8.5px,transparent 9px),
    radial-gradient(circle at calc(100% - 9px) 50%,var(--bk-bg-2) 0 8.5px,transparent 9px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--bk-ink) 30%,transparent) 0 5px,transparent 5px 10px) 22px 50%/calc(100% - 44px) 1.5px no-repeat;
}
.bk-scene[data-mat="ticket"] .bk-info{bottom:56px}
.bk-scene[data-mat="ticket"] .bk-foot{bottom:14px}
.bk-scene[data-mat="ticket"] .bk-sheen{opacity:.3}

/* acrylic: frosted clear plastic, so the colour behind shows through */
.bk-scene[data-mat="acrylic"] .bk-front{
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.66) 60%,rgba(255,255,255,.74));
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
}
.bk-scene[data-mat="acrylic"] .bk-back{background:linear-gradient(172deg,var(--bk-back-a),color-mix(in srgb,var(--bk-back-a) 80%,transparent));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bk-scene[data-mat="acrylic"] .bk-face{border-radius:22px;box-shadow:0 30px 56px -22px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.7),inset 0 0 0 5px rgba(255,255,255,.18)}

/* pcb: a circuit-board badge, the hacker-conference tradition: solder mask, copper traces, white silkscreen */
.bk-scene[data-mat="pcb"] .bk-card{--bk-ink:#eef8ee}
.bk-scene[data-mat="pcb"] .bk-front,.bk-scene[data-mat="pcb"] .bk-back{
  background-color:#0b4a24;
  background-image:
    radial-gradient(circle at 14px 14px,#d9b45a 0 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#d9b45a 0 4px,transparent 4.5px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='%2366c27a' stroke-opacity='.32' stroke-width='2'><path d='M0 22h34l10 10v34h52M58 0v14l10 10h28M12 96V78l12-12h18M74 96V82l8-8h14'/><g fill='%23d9b45a' fill-opacity='.55' stroke='none'><circle cx='44' cy='66' r='3.2'/><circle cx='68' cy='24' r='3.2'/><circle cx='42' cy='66' r='0'/><circle cx='24' cy='66' r='3.2'/></g></svg>");
}
.bk-scene[data-mat="pcb"] .bk-front::before{background:#062a14}
.bk-scene[data-mat="pcb"] .bk-role{color:var(--bk-pop)}
.bk-scene[data-mat="pcb"] .bk-front .bk-photo{box-shadow:0 0 0 2px #0b4a24,0 0 0 3.5px rgba(238,248,238,.85)}
.bk-scene[data-mat="pcb"] .bk-sheen{opacity:.3}
.bk-scene[data-mat="pcb"] .bk-face{border-radius:12px}

/* Words that depend on the device: "click" with a mouse, "tap" on a touch screen */
.if-touch{display:none}
@media (pointer: coarse){ .if-touch{display:inline} .if-mouse{display:none} }

/* printing (the editor's Print sheet, badge.js printCopy): both faces flat, with a thin grey edge; the sheet sets their size */
.bk-scene.bk-print{width:auto;height:auto;overflow:visible;background:none;display:flex;justify-content:center;gap:12mm;padding:0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.bk-scene.bk-print::after{display:none}
.bk-print .bk-print-card{position:relative;width:250px;height:350px;zoom:.96;flex:none} /* 250px x .96 = 240px = 2.5in */
.bk-print .bk-face{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:0 0 0 .6px #9a9a9a!important}
.bk-print .bk-sheen,.bk-print .bk-slot{display:none}

/* read by screen readers only (badge.js: the words around the badge, in order) */
.bk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 3D badge style (badge3d.js): WebGL draws the badge and strap; the real card stays in place, invisible, for taps, links and screen readers */
.bk-gl{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.bk-scene.bk-3d .bk-strap{visibility:hidden}
.bk-scene.bk-3d .bk-card,.bk-scene.bk-3d .bk-clip{opacity:0}
.bk-scene.bk-3d .bk-badge:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:20px}
/* the still copy of both faces that badge3d.js paints from: real size, off screen, nothing turned or hidden */
.bk-scene.bk-snap{position:fixed;left:-6000px;top:0;width:540px;height:350px;overflow:visible;background:none;display:flex;gap:20px;pointer-events:none;z-index:-1}
.bk-scene.bk-snap::after{display:none}
.bk-snap .bk-card.bk-snap-card{position:relative;left:auto;top:auto;flex:none}
.bk-snap .bk-card .bk-front,.bk-snap .bk-card .bk-back{transform:none;visibility:visible;box-shadow:none}
/* event clip: a small round-ended hole just big enough for its hook, like the one on Vercel's event badge, instead of the wide slot */
.bk-scene[data-clip="tag"] .bk-slot{width:9px;height:6px;margin-left:-4.6px;top:15.5px;border-radius:3px} /* just round the hook where it meets the card (badge3d.js HOLE_MID) */
.bk-scene[data-clip="metal"] .bk-slot{display:none} /* the metal clip grips the card's edge, so no hole */
.bk-scene[data-clip="snap"] .bk-slot{width:12px;height:8px;margin-left:-6px;top:15px;border-radius:4px} /* just round the snap hook where it meets the card (badge3d.js snapG, HOLE_MID) */
.bk-scene[data-clip="chrome"] .bk-slot{width:28px;margin-left:-14px} /* just wider than the chrome clamp's plates where they grip (badge3d.js chromeG) */