/* Hero animation workshop (temporary) */
.lab-card{border:1px solid rgba(119,164,255,.22);border-radius:10px;background:radial-gradient(ellipse at 50% 40%,#17396a 0%,#0c1629 62%,#0a1222 100%);box-shadow:0 30px 80px -40px rgba(34,98,233,.55),inset 0 1px 0 rgba(255,255,255,.05);padding:22px 28px 14px;min-height:394px;display:flex;flex-direction:column;color:var(--text)}
.lab-card .graphic-facts{display:flex;justify-content:center;gap:24px;border-top:1px solid rgba(162,184,221,.2);padding-top:14px;margin-top:auto;font-size:12px;color:var(--muted)}
.lab-card .graphic-facts strong{font:600 17px var(--font-display);color:var(--text);margin-right:4px}
.lab-card .art-disclaimer{text-align:center;font-size:12px;color:#8e9cb4;margin:8px 0 0}

/* 1 stopwatch */
.sw-dial{position:relative;width:210px;height:210px;margin:6px auto 0}
.sw-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.sw-ring-bg{fill:none;stroke:rgba(162,184,221,.14);stroke-width:6}
.sw-ring-fg{fill:none;stroke:#77a4ff;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(119,164,255,.6))}
.sw-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sw-time{font:600 46px var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sw-unit{font-size:13px;color:var(--muted);margin-top:2px}
.sw-meta{display:flex;justify-content:center;gap:12px;align-items:center;margin:14px 0 18px;font-size:14px}
.sw-amount{font:600 16px var(--font-display)}
.sw-state{padding:5px 12px;border-radius:999px;border:1px solid rgba(119,164,255,.35);color:#9fc0ff;font-size:13px;transition:background .2s,color .2s}
.sw-card.done .sw-state{background:#2262e9;border-color:#2262e9;color:#fff}
.sw-card.done .sw-ring-fg{stroke:#9fc0ff}

/* 2 around the world */
.gl-map{width:100%;height:auto;display:block;margin-top:4px}
.gl-land{fill:rgba(156,188,236,.4)}
.gl-city{fill:#eef4ff;filter:drop-shadow(0 0 5px rgba(119,164,255,1))}
.gl-arc{fill:none;stroke:#77a4ff;stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(119,164,255,.8))}
.gl-arc.gl-fade{transition:opacity 1.2s ease!important;opacity:0}
.gl-ping{fill:none;stroke:#bcd3ff;stroke-width:1.5;animation:gl-ping .9s ease-out forwards}
@keyframes gl-ping{from{r:3;opacity:1}to{r:18;opacity:0}}
.gl-log{list-style:none;padding:0;margin:12px 0 16px;min-height:96px}
.gl-log li{display:flex;justify-content:space-between;align-items:center;padding:6px 2px;border-bottom:1px solid rgba(162,184,221,.1);font-size:14px;color:var(--muted);animation:mt-in .3s ease both}
.gl-log li:first-child{color:var(--text)}
.gl-log li .ico{width:14px;height:14px;min-width:14px;min-height:14px;vertical-align:-2px;opacity:.7}
.gl-log strong{font:600 14px var(--font-display);color:#9fc0ff;font-variant-numeric:tabular-nums}

/* 3 message thread */
.mt-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(162,184,221,.14)}
.mt-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2262e9;font:600 15px var(--font-display)}
.mt-head strong{display:block;font:600 15px var(--font-display)}
.mt-head small{font-size:12px;color:var(--muted)}
.mt-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px;min-height:236px;justify-content:flex-end;overflow:hidden}
.mt-msg{display:flex;flex-direction:column;max-width:75%;animation:mt-in .3s cubic-bezier(.2,.9,.3,1.2) both}
.mt-out{align-self:flex-end;align-items:flex-end}
.mt-in{align-self:flex-start;align-items:flex-start}
.mt-bubble{padding:9px 14px;border-radius:16px;display:flex;flex-direction:column;gap:1px}
.mt-out .mt-bubble{background:#2262e9;border-bottom-right-radius:4px}
.mt-in .mt-bubble{background:#16263f;border:1px solid rgba(162,184,221,.18);border-bottom-left-radius:4px}
.mt-bubble strong{font:600 16px var(--font-display)}
.mt-bubble span{font-size:13px;opacity:.85}
.mt-receipt{font-size:11px;color:#8e9cb4;margin-top:3px;transition:color .2s}
.mt-ok .mt-receipt{color:#9fc0ff}
.mt-receipt b{letter-spacing:-2px;margin-left:2px}
.mt-compose{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(162,184,221,.2);border-radius:999px;padding:9px 14px;font-size:13px;color:#8e9cb4;margin-bottom:4px}
.mt-compose .ico{color:#77a4ff}
@keyframes mt-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* picker */
.hero-lab{margin-top:14px;padding:12px;border:1px dashed rgba(119,164,255,.4);border-radius:10px;background:rgba(12,20,37,.6)}
.hero-lab-title{display:block;font:600 12px var(--font-display);color:#9fc0ff;margin-bottom:8px}
.hero-lab-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hero-lab-buttons button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:6px;padding:8px 4px;font:500 12px var(--font-body);cursor:pointer;min-height:40px}
.hero-lab-buttons button[aria-pressed=true]{border-color:#77a4ff;color:var(--text);background:#16263f}
.hero-lab-note{font-size:12px;color:var(--muted);margin:8px 0 0;min-height:34px;line-height:1.45}
@media (max-width:520px){.hero-lab-buttons{grid-template-columns:1fr 1fr}.lab-card{padding:18px 16px 12px}}
@media (prefers-reduced-motion:reduce){.mt-msg,.gl-log li{animation:none}}
/* float the picker so it does not change the page layout */
.hero-lab{position:fixed;right:20px;bottom:20px;width:380px;z-index:60;margin:0;background:rgba(10,18,34,.96);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);backdrop-filter:blur(6px)}
@media (max-width:520px){.hero-lab{left:12px;right:12px;bottom:12px;width:auto}.hero-lab-note{display:none}}
@media (max-width:520px){.hero-lab{padding:8px}.hero-lab-title{margin-bottom:6px}.hero-lab-buttons{grid-template-columns:repeat(4,1fr);gap:4px}.hero-lab-buttons button{font-size:11px;padding:4px 2px;min-height:36px}}
/* match the compact payment card height */
.lab-card{height:351px;overflow:hidden;padding:12px 24px 10px}
.sw-dial{width:150px;height:150px;margin-top:4px}
.sw-time{font-size:34px}
.sw-meta{margin:8px 0 10px}
.gl-map{max-height:150px}
.gl-log{margin:4px 0 8px}
.gl-log li{padding:3px 2px;font-size:13px}
.mt-head{padding-bottom:8px}
.mt-avatar{width:30px;height:30px;font-size:13px}
.mt-list{min-height:0;flex:1;margin:6px 0;gap:6px}
.mt-bubble{padding:6px 12px}
.mt-bubble strong{font-size:14px}
.mt-bubble span{font-size:12px}
.mt-compose{padding:6px 14px}
.lab-card .graphic-facts{padding-top:8px}
@media (max-width:520px){.lab-card{height:auto;overflow:visible}.mt-list{min-height:200px}}
.lab-card{box-sizing:border-box}
.visual-stage .hero-option.lab-card{height:351px!important;overflow:hidden}
.visual-stage .mt-list{flex:1 1 0;min-height:0}
@media (max-width:520px){.visual-stage .hero-option.lab-card{height:auto!important}}
.visual-stage .mt-list{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}