/* MSTEIN / social medallions. Position, scale, opacity and depth remain JS-owned. */
.hero__stage .s2-icon{
  --s2-icon-size:92px;
  --s2-glyph-size:38px;
  --s2-accent:var(--neon,#d6bc88);
  box-sizing:border-box;width:var(--s2-icon-size);height:var(--s2-icon-size);
  margin:calc(var(--s2-icon-size)*-.5) 0 0 calc(var(--s2-icon-size)*-.5);
  display:grid;place-items:center;border-radius:50%;
  border:1px solid #ffffff45;color:#f8f6fa;
  background:radial-gradient(ellipse at 24% 10%,#ffffff24,transparent 48%),linear-gradient(155deg,#ffffff14,#ffffff02 60%),#15131cce;
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 1px 0 #ffffff65,inset 0 -1px 0 #ffffff0e,0 12px 28px #00000055,0 0 0 1px #00000025;
  text-decoration:none;overflow:visible;touch-action:manipulation;
  /* Never interpolate or replace the orbit's matrix on pointer interaction. */
  translate:none;rotate:none;animation:none;filter:none;
  transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s;
  -webkit-tap-highlight-color:transparent;
}
.hero__stage .s2-icon::before,.hero__stage .s2-icon::after{content:none;display:none;animation:none}
.hero__stage .s2-icon svg{
  display:block;width:var(--s2-glyph-size);height:var(--s2-glyph-size);flex-shrink:0;
  color:inherit;filter:none;pointer-events:none;
}
.hero__stage .s2-icon.on{
  border-width:1px;border-color:#ffffff70;
  border-color:color-mix(in srgb,var(--s2-accent) 55%,#ffffff55);
  background:radial-gradient(ellipse at 24% 10%,#ffffff2d,transparent 49%),linear-gradient(155deg,#ffffff16,#ffffff04 60%),#18151edb;
  box-shadow:inset 0 1px 0 #ffffff7a,inset 0 -1px 0 #ffffff17,0 14px 30px #00000065;
}
.hero__stage .s2-icon:hover,.hero__stage .s2-icon.is-inspected,.hero__stage .s2-icon:focus-visible{
  color:#ffffff;border-width:1px;border-color:#e8d7b5bb;
  border-color:color-mix(in srgb,var(--s2-accent) 64%,#ffffffbb);
  background:radial-gradient(ellipse at 24% 10%,#ffffff33,transparent 49%),linear-gradient(155deg,#ffffff1a,#ffffff05 60%),#1c1823eb;
  box-shadow:inset 0 1px 0 #ffffff8c,inset 0 -1px 0 #ffffff18,0 16px 34px #0000006b;
  animation:none;translate:none;rotate:none;
}
.hero__stage .s2-icon:focus-visible{outline:2px solid #f0d7aa;outline-offset:5px}
.hero__stage .s2-icon .s2-icon-name{
  position:absolute;top:calc(100% + 11px);left:50%;z-index:1;
  display:block;width:max-content;max-width:150px;margin:0;padding:6px 10px;
  border:1px solid #e8d5b12c;border-radius:8px;background:#100d16eb;
  color:#f1e8dc;font:500 11px/1.35 Body,Arial,sans-serif;letter-spacing:.015em;text-align:center;
  white-space:nowrap;text-transform:none;text-shadow:none;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,3px);
  box-shadow:0 5px 16px #0000003d;
  transition:opacity .16s,visibility .16s,transform .16s;
}
.hero__stage .s2-icon.on .s2-icon-name,
.hero__stage .s2-icon.is-inspected .s2-icon-name,
.hero__stage .s2-icon:focus-visible .s2-icon-name{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Keep the channel readout in the studio's champagne palette. */
.hero__stage .s2-chan li.on{color:#ddc99f}
.hero__stage .s2-chan li::before{background:#ddc99f}
/* Runtime pause control lives with the third scene's existing copy. */
.hero__stage .s2-orbit-toggle{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;
  margin:12px 0 0;padding:9px 13px;border:1px solid #d8c59f3b;border-radius:10px;
  background:linear-gradient(125deg,#ffffff09,#ffffff02),#13101aa3;color:#dbd2e2;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:400 11px/1.4 Body,Arial,sans-serif;letter-spacing:.015em;text-transform:none;
  box-shadow:inset 0 1px 0 #ffffff0a;cursor:pointer;touch-action:manipulation;
  transition:background-color .2s,border-color .2s,color .2s;
}
.hero__stage .s2-orbit-toggle:hover{background:#d7bc8913;border-color:#d8c59f72;color:#f0dfbd}
.hero__stage .s2-orbit-toggle[aria-pressed="true"]{border-color:#d8c59f5c;color:#ddc99f}
.hero__stage .s2-orbit-toggle:focus-visible{outline:2px solid #f0d7aa;outline-offset:4px}
@media(max-width:767px),(max-aspect-ratio:1/1){
  .hero__stage .s2-icon{--s2-icon-size:64px;--s2-glyph-size:28px;-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #ffffff0c,0 8px 20px #00000055}
  .hero__stage .s2-icon .s2-icon-name{top:calc(100% + 8px);font-size:11px;padding:5px 8px;border-radius:7px;max-width:130px}
  .hero__stage .s2-orbit-toggle{margin-top:9px;font-size:11px;min-height:44px}
  .hero__stage .s2-state[data-state="3"] .s2-chan{display:none}
}
/* The social note and pause action must fit within a short phone's bottom panel. */
@media(max-width:767px) and (max-height:680px){
  .hero__stage .s2-state[data-state="3"]{top:auto;bottom:12px}
  .hero__stage .s2-state[data-state="3"] .eyebrow{font-size:10px;line-height:1.3;margin-bottom:8px}
  .hero__stage .s2-state[data-state="3"] .s2-title{font-size:34px;line-height:1;margin-bottom:8px}
  .hero__stage .s2-state[data-state="3"] .s2-note{font-size:11px!important;line-height:1.45;margin-bottom:0}
  .hero__stage .s2-state[data-state="3"] .s2-orbit-toggle{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .hero__stage .s2-icon,.hero__stage .s2-icon .s2-icon-name,.hero__stage .s2-orbit-toggle{animation:none;transition:none}
}