:root {
  --page-bg: #05070d;
  --phone-w: 430px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--page-bg);
}

.mockup-frame {
  position: relative;
  width: 100%;
  max-width: var(--phone-w);
  background: #06111f;
}

.mockup-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  pointer-events: none;
  user-select: none;
}

.hotspot {
  position: absolute;
  z-index: 50;
  display: block;
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}

.hotspot:focus {
  outline: 0;
}

.hotspot.is-active {
  outline: 3px solid rgba(255, 196, 61, 0.92);
  outline-offset: -3px;
}

.debug-hotspots .hotspot {
  border: 2px dashed rgba(255, 214, 92, 0.95);
  background: rgba(255, 214, 92, 0.18);
  color: #fff4c2;
  font-size: 11px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.debug-hotspots .hotspot.is-active {
  border-color: rgba(80, 220, 160, 0.98);
  background: rgba(80, 220, 160, 0.22);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hs-menu {
  left: 86.8%;
  top: 2.1%;
  width: 10.6%;
  height: 5.2%;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 196, 61, 0.92);
  border-radius: 8px;
  background: rgba(6, 17, 31, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.hs-menu::before {
  content: "";
  display: block;
  width: 52%;
  height: 2px;
  border-radius: 999px;
  background: #ffc43d;
  box-shadow: 0 -7px 0 #ffc43d, 0 7px 0 #ffc43d;
}

.hs-menu:hover,
.hs-menu:focus {
  background: rgba(13, 34, 58, 0.96);
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.hs-index-approfondisci {
  left: 0;
  top: 90.2%;
  width: 100%;
  height: 8.2%;
}

.hs-index-lang {
  top: 75.2%;
  width: 22.2%;
  height: 6.3%;
}

.hs-index-lang.hs-lang-it,
.hs-index-lang.hs-lang-de {
  left: 3.7%;
}

.hs-index-lang.hs-lang-en,
.hs-index-lang.hs-lang-ru {
  left: 27.7%;
}

.hs-index-lang.hs-lang-es,
.hs-index-lang.hs-lang-zh {
  left: 51.7%;
}

.hs-index-lang.hs-lang-fr,
.hs-index-lang.hs-lang-hi {
  left: 75%;
}

.hs-index-lang.hs-lang-de,
.hs-index-lang.hs-lang-ru,
.hs-index-lang.hs-lang-zh,
.hs-index-lang.hs-lang-hi {
  top: 82.6%;
}

.hs-supporto-elena {
  left: 7%;
  top: 41.2%;
  width: 42%;
  height: 32.8%;
}

.hs-supporto-alex {
  left: 51%;
  top: 41.2%;
  width: 42%;
  height: 32.8%;
}

.hs-supporto-continua {
  left: 6.8%;
  top: 88%;
  width: 86.4%;
  height: 6.4%;
}

.hs-supporto-lang,
.hs-teacher-lang {
  top: 79.3%;
  width: 9.7%;
  height: 6.8%;
}

.hs-supporto-lang.hs-lang-it,
.hs-teacher-lang.hs-lang-it {
  left: 6.4%;
}

.hs-supporto-lang.hs-lang-en,
.hs-teacher-lang.hs-lang-en {
  left: 17.5%;
}

.hs-supporto-lang.hs-lang-es,
.hs-teacher-lang.hs-lang-es {
  left: 28.7%;
}

.hs-supporto-lang.hs-lang-fr,
.hs-teacher-lang.hs-lang-fr {
  left: 39.9%;
}

.hs-supporto-lang.hs-lang-de,
.hs-teacher-lang.hs-lang-de {
  left: 51.3%;
}

.hs-supporto-lang.hs-lang-ru,
.hs-teacher-lang.hs-lang-ru {
  left: 62.5%;
}

.hs-supporto-lang.hs-lang-zh,
.hs-teacher-lang.hs-lang-zh {
  left: 73.8%;
}

.hs-supporto-lang.hs-lang-hi,
.hs-teacher-lang.hs-lang-hi {
  left: 85.1%;
}

.hs-teacher-lang {
  top: 60.6%;
}

.hs-maestro-voce {
  left: 6.4%;
  top: 68.4%;
  width: 87.2%;
  height: 5.2%;
}

.hs-maestro-prova {
  left: 6.4%;
  top: 74.3%;
  width: 87.2%;
  height: 5.2%;
}

.hs-maestro-pdf {
  left: 6.4%;
  top: 80.2%;
  width: 87.2%;
  height: 5.2%;
}

.hs-maestro-domande {
  left: 6.4%;
  top: 86.1%;
  width: 87.2%;
  height: 5.2%;
}

.hs-maestro-torna {
  left: 31%;
  top: 94.2%;
  width: 38%;
  height: 4.3%;
}

.alex .hs-maestro-voce {
  left: 6.4%;
  top: 68.4%;
  width: 87.2%;
  height: 5.2%;
}

.alex .hs-maestro-prova {
  left: 6.4%;
  top: 74.3%;
  width: 87.2%;
  height: 5.2%;
}

.alex .hs-maestro-pdf {
  left: 6.4%;
  top: 80.2%;
  width: 87.2%;
  height: 5.2%;
}

.alex .hs-maestro-domande {
  left: 6.4%;
  top: 86.1%;
  width: 87.2%;
  height: 5.2%;
}

.alex .hs-maestro-torna {
  left: 31%;
  top: 94.2%;
  width: 38%;
  height: 4.3%;
}

.hs-domande-continua {
  left: 6.3%;
  top: 93.6%;
  width: 87.6%;
  height: 5.8%;
}

.hs-registrazione-continua {
  left: 6.3%;
  top: 93.6%;
  width: 87.6%;
  height: 5.8%;
}

audio[hidden] {
  display: none;
}

.runtime-dropdown {
  position: absolute;
  z-index: 100;
  top: 7.2%;
  right: 3.6%;
  display: none;
  width: 58%;
  max-width: 250px;
  border: 1px solid rgba(255, 190, 55, 0.82);
  border-radius: 8px;
  background: rgba(6, 17, 31, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.runtime-dropdown.is-open {
  display: block;
}

.runtime-dropdown a {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 190, 55, 0.24);
  background: transparent;
  color: #fff;
  font: 700 15px/1.2 Arial, Helvetica, sans-serif;
  text-align: left;
  text-decoration: none;
}

.runtime-dropdown a:last-child {
  border-bottom: 0;
}

.runtime-dropdown a.is-current {
  color: #ffc43d;
}

.runtime-toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 16px;
  width: min(90vw, 380px);
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px solid rgba(255, 190, 55, 0.82);
  border-radius: 8px;
  background: rgba(6, 17, 31, 0.96);
  color: #fff;
  font: 700 14px/1.35 Arial, Helvetica, sans-serif;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}