/* Exercises: final component styles and responsive variants.
   Shared project variables remain the source of truth for typography and colors. */
body:has(.exercises-root) {
  height: 100dvh;
  overflow: hidden;
}

.lesson-content.exercises-root {
  position: fixed;
  inset: var(--ex-top,86px) 0 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lesson-mode .workspace.ex-workspace {
  --ex-bottom-offset: 30px;
  --ex-copy-width: min(395px,28vw);
  --ex-copy-right: clamp(76px,8vw,136px);
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--ex-copy-width);
  gap: clamp(24px,4vw,64px);
  height: 100%;
  min-height: 0;
  padding: clamp(54px,8vh,100px) var(--ex-copy-right) 28px 104px;
}

/* Match the chapter copy offset; the scene stays centered in the remaining grid column. */
@media(min-width:1181px) {
  .lesson-mode .workspace.ex-workspace {
    --ex-copy-right: calc(clamp(76px,8vw,136px) - 40px);
  }
}

.ex-workspace > * {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

.ex-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.ex-panel {
  --ex-body-size: clamp(12px,1.03vw,17px);
  --ex-caption-size: 12px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  gap: 14px;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 48px;
  padding-bottom: var(--ex-bottom-offset);
  margin-right: -48px;
  font-family: var(--plain);
  color: rgba(24,24,24,.82);
}

.ex-panel h1,.ex-list h2 {
  color: #000;
  font-family: var(--heading);
  font-weight: var(--heading-weight);
  line-height: var(--chapter-heading-line-height);
  -webkit-text-stroke: var(--heading-stroke-width) currentColor;
}

.exercises-root .ex-panel .ex-close-exercise,
.exercises-root .ex-panel .ex-close-exercise:is(:hover,:focus-visible,:active) {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 24px;
  margin-top: calc(var(--chapter-heading-size) * .1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: #222738;
  box-shadow: none;
  font-family: var(--plain);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.ex-close-exercise svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}
.ex-close-exercise:hover svg {stroke-width:2.2;}

.ex-panel h1 {
  font-size: var(--chapter-heading-size);
  text-transform: uppercase;
  margin: 0;
}

.ex-panel p {
  margin: 0;
  font-size: var(--ex-body-size);
  font-weight: 300;
  line-height: 1.35;
}

.ex-panel:has(.ex-close-exercise) .ex-task-content > h1 + p {
  margin-bottom: 20px;
}

.ex-panel h3 {
  font-family: var(--plain);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
}

.ex-panel small {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.exercises-root button:disabled {
  opacity: .45;
  cursor: default;
}

.exercises-root button[hidden] {
  display: none;
}

.ex-panel label {display:block;}
.ex-panel label,
.ex-panel .ex-overall h3,
.ex-panel .ex-overall .ex-reset-rating,
.ex-panel .ex-scoring small:not(.ex-score-totals),
.ex-panel .ex-storage-status {
  font-family: var(--plain);
  font-size: var(--ex-caption-size);
  font-weight: 300;
  line-height: 1.3;
  color: inherit;
}

.ex-panel label[hidden] {
  display: none;
}

.ex-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.exercises-root .ex-scene .lesson-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  transform: none;
  margin: 0;
  touch-action: none;
}

.ex-controls {
  display: grid;
  gap: 10px;
}

.ex-controls label {
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}

.ex-controls .figure-optics-slider {
  display: block;
}

.ex-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ex-panel > .ex-task-content {
  display:flex;
  flex-direction:column;
  gap:inherit;
  flex:1 1 0;
  min-height:0;
  overflow:visible;
}

.ex-task-footer {
  display: grid;
  grid-template-rows: minmax(40px,auto) 120px;
  gap: 24px;
  margin-top: auto;
}

.ex-task-footer > .ex-task-actions {
  position: relative;
  top: 40px;
  align-content: center;
  padding-block: 0;
}

.ex-task-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: visible;
}

.ex-task-results > * {flex-shrink:0;}
.ex-task-results > .ex-scoring {margin-top:auto;padding-top:0;}

@media(max-height:560px) {
  .ex-task-footer {grid-template-rows:minmax(40px,auto) 120px;gap:20px;}
  .ex-task-footer > .ex-task-actions {padding-block:0;}
  .ex-task-results {gap:8px;}
}



.ex-panel .ex-feedback:empty {
  display: none;
}

.ex-panel .ex-feedback {
  font-size: 12px;
  min-height: 32px;
}


body:has(.exercises-root) > .mobile-device-notice {
  display: none;
}

body:has(.exercises-root) > .site-header {
  display: flex !important;
}

body:has(.exercises-root) > .app-shell {
  display: block !important;
  min-height: 0;
}

@media(max-width:1050px) {
  .lesson-mode .workspace.ex-workspace {
    grid-template-columns: minmax(0,1fr) var(--ex-copy-width);
    padding: 30px var(--ex-copy-right) 80px 80px;
    gap: 24px;
  }

  .ex-panel {
    gap: 10px;
  }

  .ex-panel h1 {
    font-size: 28px;
  }

}

@media(max-width:599px) {
  .lesson-mode .workspace.ex-workspace {
    grid-template-columns: minmax(0,1fr) minmax(160px,44%);
    padding: 16px 12px 74px;
    gap: 12px;
  }

  .ex-panel {
    gap: 8px;
  }

  .ex-panel h1 {
    font-size: 21px;
  }

  .ex-panel {
    --ex-body-size: 11px;
  }

  .ex-panel h3 {
    font-size: 12px;
  }

  .ex-controls {
    gap: 6px;
  }

}

@media(max-height:740px) {
  .lesson-mode .workspace.ex-workspace {
    padding-bottom: 62px;
  }

  .ex-panel {
    gap: 8px;
  }

  .ex-panel h1 {
    font-size: 26px;
  }

  .ex-panel {
    --ex-body-size: 12px;
  }

  .ex-controls {
    gap: 4px;
  }

  .ex-controls label {
    gap: 10px;
    padding-bottom: 6px;
  }

  .ex-panel .ex-feedback {
    min-height: 0;
  }

}

@media(max-height:560px) {
  .ex-panel {
    gap: 5px;
  }

  .ex-panel h1 {
    font-size: 20px;
  }

  .ex-panel {
    --ex-body-size: 10px;
  }

  .ex-panel {
    --ex-caption-size: 10px;
  }

  .ex-controls {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 10px;
  }

  .ex-panel .ex-feedback {
    font-size: 10px;
  }

}

@media(max-height:560px) {
  .lesson-mode .workspace.ex-workspace {
    padding-top: 12px;
    padding-bottom: 14px;
  }

}

.ex-panel .figure-pose-select {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.exercises-root .ex-actions .ex-action-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: width 320ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
 .exercises-root .ex-task-actions .ex-action-icon:not(.ex-action-primary) {
  background: rgba(255,255,255,.8);
  color: #222738;
  box-shadow: 0 2px 4px rgba(34,39,56,.16);
}
 .exercises-root .ex-task-actions .ex-action-icon:not(:disabled,.ex-action-primary):hover {
  box-shadow: 0 5px 7px rgba(34,39,56,.28);
}

.exercises-root .ex-task-actions .ex-action-primary {
  --check-shadow-color: 34,39,56;
  display: inline-grid;
  place-items: center;
  width: 80px;
  padding: 9px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(var(--check-shadow-color),.25);
}
.exercises-root .ex-task-actions .ex-action-primary:not(.is-incorrect,.is-correct):hover {
  --check-shadow-color: 38,152,242;
}
.exercises-root .ex-task-actions .ex-action-primary:not(.is-incorrect,.is-correct):is(:hover,:focus-visible) {
  box-shadow: 0 5px 7px rgba(var(--check-shadow-color),.38);
}
.ex-action-primary > span {display:none;}

.exercises-root .ex-task-actions .ex-action-icon.is-recommended {
  background: #222738;
  color: #fff;
  box-shadow: 0 2px 4px rgba(34,39,56,.16);
}
/* The recommended action inherits the width released by the successful check. */
.exercises-root .ex-task-actions .ex-action-primary:is(.is-correct,.is-incorrect) {width:40px;}
.exercises-root .ex-task-actions .ex-action-icon.is-recommended {width:80px;}
.exercises-root .ex-task-actions [data-action="nextExercise"].is-recommended {
  animation: ex-next-expand 320ms ease both;
}
@keyframes ex-next-expand {from {width:40px;} to {width:80px;}}
@media(prefers-reduced-motion:reduce) {
  .exercises-root .ex-task-actions .ex-action-icon {transition:none;animation:none;}
}

.ex-scoring .ex-score-total-value strong,
.ex-scoring .ex-score-result-value {font-weight: 600;}
.ex-overall .ex-score-total-value strong {font-weight: inherit;}

.ex-action-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercises-root .ex-correct {
  --round-control-border: #69a800;
  --round-control-ink: #69a800;
}

.exercises-root .ex-incorrect {
  --round-control-border: #c43d3d;
  --round-control-ink: #c43d3d;
}

.ex-control-feedback[hidden] {
  display: none;
}

.ex-controls label:has(.ex-control-feedback:not([hidden])) {
  row-gap: 8px;
}

.ex-stage.ex-catalogue {
  margin-bottom: var(--ex-bottom-offset);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(24px,3vw,72px) 0 clamp(80px,10vw,200px);
  padding-top: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 720px;
}

.ex-list li {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ex-list li:first-child {
  padding-top: 0;
}

.ex-list h2 {
  margin: 0;
  font-size: clamp(22px,1.6vw,26px);
}

.ex-list p {
  margin: 0;
  max-width: 420px;
  font-family: var(--plain);
  font-size: clamp(12px,1.03vw,17px);
  font-weight: 300;
  line-height: 1.35;
}

@media(max-width:700px) {
  .ex-stage.ex-catalogue {
    padding-inline: 0;
  }

  .ex-list li {
    grid-template-columns: 24px minmax(0,1fr);
    gap: 12px;
    padding: 12px 0;
  }

  .ex-list .reset-button {
    grid-column: 2;
    justify-self: start;
  }

  .ex-list h2 {
    font-size: 20px;
  }

  .ex-list p {
    font-size: 11px;
  }

}

.ex-list-number {
  align-self: center;
  justify-self: center;
  padding-top: 0;
  color: var(--muted);
  font-family: var(--heading);
  font-size: clamp(22px,1.6vw,26px);
  font-weight: var(--heading-weight);
  line-height: var(--chapter-heading-line-height);
  font-variant-numeric: tabular-nums;
}

@media(max-height:560px) {
  .lesson-mode .workspace.ex-workspace {
    padding-top: 24px;
  }

  .ex-list li {
    padding-block: 10px;
  }

  .ex-list li:first-child {
    padding-top: 0;
  }

}

.exercises-root button:not(:disabled,.is-incorrect,.is-correct,.cw-tool,.cw-swatch,.cw-toggle):is(:hover,:focus-visible) {
  background: #53b7f9;
  color: #fff;
  border-color: transparent;
}

.ex-scoring {
  display: grid;
  gap: 0;
  padding-top: 20px;
}

.ex-panel .ex-scoring p,
.ex-panel .ex-scoring small.ex-score-totals {
  font-family: var(--plain);
  font-size: var(--ex-body-size);
  font-weight: 300;
  line-height: 1.35;
  color: inherit;
}

.ex-panel .ex-scoring small:not(.ex-score-totals) {
  margin-top: 10px;
}


@media(min-width:701px) and (max-width:1050px) {
  .ex-stage.ex-catalogue {
    padding-left: 48px;
    padding-right: 16px;
  }

}

@media(max-height:740px) {
  .ex-scoring {
    padding-top: 16px;
  }


}

.ex-selected .edge,.ex-selected .hand-main {
  stroke: #2698f2 !important;
}

.ex-controls > div {
  display: grid;
  gap: 8px;
}

.ex-controls > div[hidden] {
  display: none;
}

.exercises-root .ex-controls select {
  width: 100%;
  margin: 4px 0 8px;
}

.ex-list li[hidden] {
  display: none;
}

.ex-list {
  flex-shrink: 0;
}

.exercises-root .ex-ink {
  fill: none;
  stroke: rgba(28,27,24,.94);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ex-scene.is-drawing .lesson-svg {
  cursor: crosshair;
}

.ex-controls > .ex-actions {
  display: flex;
}

.ex-panel .ex-overall p {
  font-size: clamp(16px,1.25vw,20px);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.ex-panel .ex-overall small {
  font-size: clamp(13px,1vw,16px);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.exercises-root .horizon.basics-horizon {
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.exercises-root .handle-group .handle {
  vector-effect: non-scaling-stroke;
}

.exercises-root .lesson-svg :is(line,path,polyline) {
  vector-effect: non-scaling-stroke;
}

.ex-horizon-ellipses :is(.hand-side,.hand-accent) {
  display: none;
}

.ex-street-lamps :is(.hand-side,.hand-accent) {
  display: none;
}

.ex-street-lamps [style*="--exercise-line-width"] :is(.hand-main,.hand-side,.hand-accent),.ex-street-lamps .edge[style*="--exercise-line-width"] {
  stroke-width: var(--exercise-line-width)!important;
}

.exercises-root :is(.construction-vertical,.construction-diagonal),.exercises-root :is(.construction-vertical,.construction-diagonal) .hand-main {
  stroke-width: 1!important;
}

@media(max-width:700px) {
  .ex-list-actions {
    grid-column: 2;
    gap: 12px;
  }

}

.ex-list-score[hidden] {
  display: inline-block;
  visibility: hidden;
}

.exercises-root .ex-list .reset-button {
  background: #fff;
  color: #222738;
  box-shadow: 0 2px 5px rgba(34,39,56,.13);
}
.exercises-root .ex-list .reset-button:is(:hover,:focus-visible) {
  background: #53b7f9;
  color: #fff;
  box-shadow: 0 3px 7px rgba(38,152,242,.2);
}

.ex-list-actions {
  display: grid;
  align-items: center;
  gap: 14px;
  grid-template-columns: max-content 5ch;
}

 .exercises-root .ex-task-actions .ex-action-primary:is(.is-correct,.is-incorrect),
.exercises-root .ex-task-actions .ex-action-primary:is(.is-correct,.is-incorrect):is(:hover,:focus-visible,:active) {
  transform: none;
}

.exercises-root .ex-task-actions button.is-incorrect {
  --check-shadow-color: 196,61,61;
  background: #c43d3d;
  color: #fff;
}

.exercises-root button.is-correct:disabled {
  background: #69a800;
  --check-shadow-color: 105,168,0;
  color: #fff;
  opacity: 1;
}

.ex-completed .ex-selected :is(.edge,.hand-main),.ex-completed .ex-ink {
  stroke: #69a800!important;
}

.ex-verification-horizon {
  stroke: #69a800;
  stroke-width: 1.1;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ex-target-guide {
  fill: none;
  stroke: #69a800;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ex-hint-note[hidden] {
  display: none;
}

.ex-panel .ex-hint-note {
  color: #69a800;
  font-size: 12px;
  line-height: 1.4;
}

.ex-target-cross {
  stroke-dasharray: none;
  stroke-width: 2;
}

.exercises-root .lesson-svg .scene-move-control.ex-correct .handle {
  fill: #69a800!important;
  stroke: #69a800!important;
}

.exercises-root .lesson-svg .scene-move-control.ex-incorrect .handle {
  fill: #c43d3d!important;
  stroke: #c43d3d!important;
}

.exercises-root .lesson-svg .scene-move-control:is(.ex-correct,.ex-incorrect) .handle-core {
  fill: #fff!important;
}

/* Use the shared Perspective tooltip appearance; allow longer exercise hints to wrap. */
.exercises-root .svg-tooltip {
  padding: 8px 16px;
  border-radius: 20px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px,calc(100vw - 32px));
  white-space: normal;
}

.exercises-root .svg-tooltip::first-letter {
  text-transform: lowercase;
}

.ex-hint-tooltip {
  position: fixed;
  transform: translate(-50%,-100%);
  z-index: 1000;
  max-width: 260px;
  white-space: normal;
  pointer-events: none;
}

/* Reserve shadow space inside the scroll viewport without moving its content. */
.ex-panel:has(> .ex-overall) {
  padding-left: 12px;
  margin-left: -12px;
}

.exercises-root .ex-overall :is(.ex-reset-score,.ex-reset-confirm .reset-button) {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  transform: none;
  align-self: start;
  justify-self: start;
  background: transparent;
  color: var(--round-control-ink);
  border: 1px solid currentColor;
  box-shadow: none;
  filter: none;
}

.exercises-root .ex-overall :is(.ex-reset-score,.ex-reset-confirm .reset-button):not(:disabled,.ex-delete-score):is(:hover,:focus-visible) {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: 0 3px 7px rgba(0,0,0,.22);
  filter: none;
}

.exercises-root .ex-overall .ex-reset-confirm .ex-delete-score:not(:disabled):is(:hover,:focus-visible) {
  background: #c43d3d;
  color: #fff;
  border-color: #c43d3d;
  box-shadow: 0 3px 7px rgba(196,61,61,.24);
  filter: none;
}

.ex-reset-confirm {
  display: grid;
  gap: 10px;
}

.ex-reset-actions {display:grid;justify-items:start;margin-top:20px;}
.ex-reset-actions > * {grid-area:1 / 1;align-self:start;}
.ex-panel .ex-overall .ex-reset-rating {display:grid;}
.ex-reset-rating > span {grid-area:1 / 1;}
.ex-reset-rating > span[hidden],
.ex-reset-actions > .ex-reset-confirm[hidden],
.exercises-root .ex-reset-actions > .ex-reset-score[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.ex-reset-confirm > small:empty {display:none;}

.ex-panel .ex-reset-confirm p {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 300;
}

.exercises-root .lesson-svg .scene-move-control {
  transform: none!important;
}

.exercises-root .lesson-svg .scene-move-control :is(.handle,.handle-shadow,.handle-core) {
  transform: none!important;
}

.exercises-root .lesson-svg .scene-move-control .handle-shadow {
  pointer-events: none!important;
}

.exercises-root .lesson-svg .scene-move-control,
.exercises-root .lesson-svg .scene-move-control * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ex-panel > .ex-scoring {
  margin-top: auto;
}
.ex-panel > * {flex-shrink:0;}
.ex-panel .ex-storage-status:empty {display:none;}

.ex-panel .ex-overall h3 {margin:0 0 6px;}


.exercises-root .ex-task-shadow {
  fill: rgba(44,52,69,.21);
  stroke: rgba(44,52,69,.31);
}

.exercises-root .ex-light-source {
  fill: #f0af00;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ex-list-score.is-perfect {
  color: #2799df;
}

.ex-panel .ex-overall .ex-score-totals {
  font-family: var(--heading);
  font-weight: var(--heading-weight);
}

.ex-score-totals > span + span {
  margin-left: .3em;
}

.ex-overall .ex-score-total-label {
  color: var(--muted);
}

.ex-overall .ex-score-total-value {
  color: var(--round-control-ink);
  -webkit-text-stroke: .2px currentColor;
}

.ex-list-score {
  min-width: 5ch;
  font-family: var(--heading);
  font-size: 21px;
  font-weight: var(--heading-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 5ch;
  text-align: right;
  -webkit-text-stroke: .3px currentColor;
}

.ex-list-score.is-empty {
  color: #a4a7ad;
  font-weight: var(--heading-weight);
}

.ex-panel .ex-overall p.ex-score-totals {
  font-size: clamp(25px,1.95vw,31px);
}

@media(max-width:700px) {
  .ex-list-number {
    font-size: 20px;
  }

}

 .exercises-root .ex-overall .ex-reset-score {
  margin-top: 0;
}

.exercises-root .ex-overall .ex-reset-confirm .reset-button {
  margin-top: 0;
}


.exercises-root .ex-drawn-check {stroke:#8d9ba5;opacity:.55;}

.exercises-root .ex-drawn-solution {stroke:#69a800;stroke-width:1;stroke-dasharray:5 4;opacity:.9;}

/* Exercise controls and score text do not create nested scroll regions. */
.ex-panel:has(> .ex-task-footer) {overflow:visible;}

.ex-overall-actions {display:flex;align-items:flex-start;gap:12px;margin-top:20px;}
.ex-overall-actions > .ex-reset-actions {margin-top:0;}
.exercises-root .ex-score-info {
  display:grid;place-items:center;flex:0 0 30px;
  width:30px;height:30px;min-width:30px;padding:0;margin-top:0;
  border:1px solid currentColor;border-radius:50%;background:transparent;
  color:var(--round-control-ink);font-family:var(--plain);font-size:18px;
  font-weight:500;line-height:1;box-shadow:none;transform:none;
}
.exercises-root .ex-score-info:is(:hover,:focus-visible) {background:#fff;color:var(--round-control-ink);transform:none;box-shadow:0 2px 5px rgba(34,39,56,.13);}
.ex-score-info-popover {position:fixed;z-index:1000;width:320px;max-width:calc(100vw - 24px);white-space:normal;transform:translateY(-100%);pointer-events:none;}