:root {--badge-width:min(360px,38vw,calc((100dvh - 210px)*.72));}
#main > #home.scene-active {animation:none!important;}
/* The original homepage photo sits exactly behind the new badge. */
#home .portrait {
  position:absolute;right:2%;top:50%;height:auto;width:var(--badge-width)!important;
  max-width:none;margin:0;aspect-ratio:.72;transform:translateY(-50%)!important;
  opacity:1!important;z-index:1;overflow:hidden;border-radius:18px;
}
#home .portrait img {height:100%;width:100%;object-fit:cover;
  mask:none!important;-webkit-mask:none!important;filter:none;opacity:1!important;}
#home .portrait::before,#home .portrait::after {display:none;}
#badge-layer {position:fixed;inset:0;z-index:40;pointer-events:none;}
body:not([data-scene="home"]) #badge-layer {display:none;}
.badge-straps {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.lanyard-shadow {stroke:#0008;stroke-width:27;fill:none;filter:blur(4px);}
.lanyard-edge {stroke:#6496b3;stroke-width:21;fill:none;}
.lanyard-webbing {stroke:url(#lanyard-ink);stroke-width:18;fill:none;}
.lanyard-stitch {stroke:#9fc9dc66;stroke-width:1;fill:none;stroke-dasharray:1 3;}
.badge-rig {position:absolute;left:0;top:0;width:var(--badge-width);aspect-ratio:.72;
  transform-origin:50% -26px;pointer-events:auto;touch-action:none;user-select:none;
  -webkit-user-select:none;cursor:grab;outline:none;will-change:transform;}
.badge-rig.is-dragging {cursor:grabbing;}
.badge-rig:focus-visible .metal-card {outline:2px solid #b8ecff;outline-offset:5px;}
.badge-clip {position:absolute;top:-47px;left:calc(50% - 16px);width:32px;height:62px;
  z-index:3;pointer-events:none;}
.clip-ring {position:absolute;left:6px;top:0;width:20px;height:30px;border:4px solid #b1bfcb;
  border-radius:10px;box-shadow:inset 1px 0 2px #fff,1px 1px 2px #0009;}
.clip-link {position:absolute;top:24px;left:8px;width:17px;height:32px;border-radius:5px 5px 7px 7px;
  background:linear-gradient(90deg,#526673,#eff5f6 24%,#9fabb7 44%,#fafdfd 57%,#72818c 80%,#d1dbe0);
  border:1px solid #4c5961;box-shadow:1px 2px 4px #0008;}
.clip-link::after {content:'';position:absolute;top:8px;left:5px;height:15px;width:5px;
  background:#101b27;border-radius:4px;box-shadow:inset 1px 1px 2px #000;}
.metal-card {position:absolute;inset:0;border-radius:19px;padding:10px;
  background:linear-gradient(125deg,#e9f1f5 0%,#788d9a 9%,#e6edf1 18%,#a9bbc6 32%,#eff5f9 49%,#7f96a3 67%,#d8e5ec 80%,#607987 100%);
  border:1px solid #d4e5ee;box-shadow:0 25px 55px #0009,4px 6px 0 #1a2c39,
    inset 1px 1px 0 #fff,inset -2px -2px 2px #526773;
  overflow:hidden;
}
.metal-card::before {content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#111c2a09 1px 2px);
  border-radius:inherit;padding:10px;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;}
.metal-card::after {content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(118deg,transparent 20%,#fff2 39%,#fff0 48%,transparent 70%);
  border-radius:inherit;opacity:.5;}
.badge-insert {position:relative;height:100%;border-radius:11px;overflow:hidden;
  display:flex;flex-direction:column;background:#0c2033;border:1px solid #354d5e;
  box-shadow:0 0 0 1px #f0f8fc88,inset 0 0 8px #0008;}
.badge-top {height:13.5%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:6px 17px 0;color:#bfd6e6;font:8px/1.4 Consolas,monospace;letter-spacing:1.5px;
  background:radial-gradient(ellipse at 10% 0,#29556c,#0c2033 80%);}
.badge-top b {font:bold 22px Arial,sans-serif;letter-spacing:-1px;color:#f0f7fa;}
.badge-top b span {color:#70d9fa;}
.badge-photo {position:relative;margin:0 11px;aspect-ratio:1;flex-shrink:0;
  border:1px solid #93a77c55;overflow:hidden;border-radius:5px;background:#58603b;}
.badge-photo img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;pointer-events:none;-webkit-user-drag:none;}
.badge-photo img[data-active="true"] {opacity:1;visibility:visible;}
.badge-info {flex:1;min-height:0;padding:10px 16px 12px;position:relative;}
.badge-name {display:block;font:500 clamp(24px,2.8vw,37px)/1.05 Arial,sans-serif;
  color:#f4f8fb;letter-spacing:-1.5px;}
.badge-role {display:block;margin-top:7px;font:8px/1.5 Consolas,monospace;letter-spacing:1.6px;color:#b2c6d7;}
.badge-bottom {display:flex;align-items:center;justify-content:space-between;margin-top:13px;
  border-top:1px solid #a0cbe52a;padding-top:7px;color:#789bb5;font:7px/1.5 Consolas,monospace;letter-spacing:1px;}
.badge-bottom i {display:inline-block;width:5px;height:5px;border-radius:50%;background:#90deb4;
  margin-right:4px;box-shadow:0 0 7px #90deb477;}
.badge-screw {position:absolute;width:4px;height:4px;border-radius:50%;z-index:6;
  background:linear-gradient(135deg,#fff,#57707d);box-shadow:0 1px 2px #0007;}
.badge-screw::after {content:'';position:absolute;left:1px;right:1px;top:2px;height:1px;background:#5b727e;}
.badge-screw.tl {top:4px;left:5px;}.badge-screw.tr {top:4px;right:5px;}
.badge-screw.bl {bottom:4px;left:5px;}.badge-screw.br {bottom:4px;right:5px;}
.badge-tools {position:fixed;right:5%;bottom:103px;pointer-events:auto;display:flex;align-items:center;
  gap:3px;padding:5px;border:1px solid #91b5cc55;border-radius:24px;background:#091b2be8;backdrop-filter:blur(16px);}
.badge-tools button {display:grid;place-items:center;width:29px;height:29px;border:0;border-radius:50%;
  background:transparent;color:#abc9db;font:14px Arial,sans-serif;cursor:pointer;}
.badge-tools button[aria-pressed="true"] {background:#5c8da957;color:#effaff;}
.badge-tools button:hover {background:#72aac83d;}
.badge-tools button:focus-visible {outline:2px solid #b1e9ff;outline-offset:2px;}
.badge-tools #badge-reset {width:auto;padding:0 11px;margin-left:5px;border-radius:20px;
  border-left:1px solid #6d9ab54d;font:10px Arial,sans-serif;}
.badge-tip {position:fixed;left:6%;bottom:122px;color:#c2d6e4;font:10px/1.5 Arial,sans-serif;
  letter-spacing:.4px;text-shadow:0 1px 5px #000;pointer-events:none;}
.badge-preview-label {position:fixed;left:6%;top:77px;z-index:10;font:9px/1.5 Arial,sans-serif;
  color:#bfd6e7;letter-spacing:.5px;}
.badge-preview-label::before {content:'';display:inline-block;width:5px;height:5px;margin-right:6px;
  background:#9bc7d9;border-radius:50%;}
@media(max-width:760px) {
  :root {--badge-width:min(65vw,265px);}
  #main > #home.scene-active {display:flex!important;flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:22px;overflow-y:auto!important;overflow-x:hidden;scrollbar-width:thin;
    scrollbar-color:#7091a955 transparent;padding:23px 0 12px!important;}
  #home .portrait {position:relative;top:auto;right:auto;height:auto;flex-shrink:0;order:-1;
    align-self:center;transform:none!important;width:var(--badge-width)!important;max-width:none;
    border-radius:18px;}
  /* Give the full portrait its own space; scroll the copy, never the photo. */
  body.badge-full-reveal #main > #home.scene-active {
    overflow:hidden!important;gap:14px;
  }
  body.badge-full-reveal #main > #home.scene-active .portrait {
    position:relative;top:0;z-index:1;
    width:min(65vw,265px,max(145px,calc((100dvh - 450px)*.72)))!important;
  }
  body.badge-full-reveal #main > #home.scene-active > div:not(.hero-coordinate):not(.city-portals) {
    flex:1 1 0!important;min-height:0;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7091a955 transparent;
  }
  #home>div:not(.hero-coordinate):not(.city-portals) {position:relative;align-self:stretch!important;
    flex-shrink:0;padding:0 0 12px!important;}
  #home h1 {margin:8px 0 12px!important;}
  #home .hello {margin-top:4px!important;}
  .badge-top {padding:3px 12px 0;font-size:6px;letter-spacing:1px;}
  .badge-top b {font-size:18px;}
  .metal-card {padding:8px;border-radius:16px;}
  .badge-photo {margin:0 8px;}
  .badge-info {padding:9px 12px;}
  .badge-name {font-size:29px;letter-spacing:-1px;}
  .badge-role {font-size:6px;margin-top:5px;letter-spacing:1.2px;}
  .badge-bottom {font-size:6px;margin-top:8px;padding-top:6px;}
  .badge-tools {bottom:99px;right:5%;padding:4px;}
  .badge-tools button {width:25px;height:25px;font-size:13px;}
  .badge-tools #badge-reset {font-size:9px;padding:0 8px;}
  .badge-tip {bottom:140px;font-size:9px;right:5%;left:auto;}
  .badge-preview-label {top:62px;left:5%;font-size:8px;}
}
@media(prefers-reduced-motion:reduce) {.badge-rig {will-change:auto;}}