/* Problem-specific content styles; the worksheet shell lives in /site-src/worksheet.css. */
[data-problem-id="40"] .song-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(2.45in, 0.95fr);
  gap: 0.18in;
  align-items: center;
}

[data-problem-id="40"] .problem-setup {
  margin: 0;
}

[data-problem-id="40"] .problem-setup p {
  max-width: 4.35in;
}

[data-problem-id="40"] .song-still {
  min-width: 0;
  margin: 0;
}

[data-problem-id="40"] .song-still img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid #7356a3;
  border-radius: 0.1in;
  box-shadow: 0 0.05in 0.12in rgb(36 31 76 / 16%);
}

[data-problem-id="40"] .song-still figcaption {
  margin-top: 0.035in;
  overflow-wrap: anywhere;
  font-size: 0.125in;
  text-align: right;
}

[data-problem-id="40"] .screen-puzzle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(2.35in, 0.8fr) minmax(0, 1.2fr);
  gap: 0.12in 0.22in;
  align-items: center;
  margin: 0.16in 0 0.13in;
  padding: 0.13in 0.16in 0.15in;
  border: 3px solid #5d467f;
  border-radius: 0.14in;
  background:
    linear-gradient(135deg, rgb(237 246 246 / 96%), rgb(242 236 249 / 96%)),
    repeating-linear-gradient(90deg, transparent 0 0.18in, rgb(93 70 127 / 8%) 0.18in 0.19in);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 70%);
}

[data-problem-id="40"] .screen-puzzle > .problem-section-label {
  grid-column: 1 / -1;
  margin-bottom: -0.03in;
}

[data-problem-id="40"] .screen-equation {
  display: grid;
  place-items: center;
  min-height: 1.02in;
  padding: 0.08in 0.15in;
  border: 2px solid #283759;
  border-radius: 0.1in;
  color: #172340;
  background: #fff;
  box-shadow: 0.035in 0.04in 0 #c4a6d5;
}

[data-problem-id="40"] .screen-equation mj-math {
  font-size: 1.65em;
}

[data-problem-id="40"] .screen-rules {
  margin: 0;
  padding-left: 0.22in;
}

[data-problem-id="40"] .screen-rules li + li {
  margin-top: 0.045in;
}

[data-problem-id="40"] .problem-question {
  margin-top: 0.05in;
}

[data-problem-id="40"] .problem-parts {
  gap: 0.07in;
}

@media (max-width: 680px) {
  [data-problem-id="40"] .song-intro,
  [data-problem-id="40"] .screen-puzzle {
    grid-template-columns: 1fr;
  }

  [data-problem-id="40"] .problem-setup p {
    max-width: none;
  }
}

@media print {
  [data-problem-id="40"] .problem-setup {
    padding: 0.11in 0.14in 0.12in;
  }

  [data-problem-id="40"] .problem-content .problem-setup p {
    font-size: 0.18in;
    line-height: 1.35;
  }

  [data-problem-id="40"] .song-still img {
    box-shadow: none;
  }

  [data-problem-id="40"] .screen-puzzle {
    gap: 0.08in 0.18in;
    margin: 0.1in 0 0.08in;
    padding: 0.1in 0.14in 0.11in;
    background: #f4f4f4;
    box-shadow: none;
  }

  [data-problem-id="40"] .screen-equation {
    min-height: 0.82in;
    box-shadow: 0.025in 0.025in 0 #bbb;
  }

  [data-problem-id="40"] .screen-rules {
    font-size: 0.18in;
    line-height: 1.32;
  }

  [data-problem-id="40"] .problem-question {
    margin-top: 0.035in;
    padding: 0.1in 0.14in 0.11in;
  }

  [data-problem-id="40"] .problem-question-header {
    margin-bottom: 0.04in;
  }

  [data-problem-id="40"] .problem-part {
    padding-block: 0.075in 0.08in;
  }

  [data-problem-id="40"] .problem-part + .problem-part {
    margin-top: 0.035in;
  }

  [data-problem-id="40"] .problem-content .problem-part-copy p {
    font-size: 0.18in;
    line-height: 1.3;
  }
}
