/* Problem-specific content styles; the worksheet shell lives in /site-src/worksheet.css. */
[data-problem-id="12"] .problem-content {
  --ink: #261c18;
  --muted: #68564c;
  --paper: #fffaf0;
  --parchment: #f4e6ca;
  --parchment-light: #fff7e6;
  --screen: #211a19;
  --charcoal: #211a19;
  --charcoal-soft: #352723;
  --fire: #a43122;
  --fire-dark: #6f1d18;
  --ember: #dc5a2c;
  --gold: #d6a83f;
  --gold-light: #f0d37a;
  --line: #b99a69;
}

[data-problem-id="12"] .problem-content {
  font-size: 0.18in;
  line-height: 1.4;
}

[data-problem-id="12"] .problem-setup {
  padding: 0.135in 0.16in;
  background: var(--parchment-light);
  border: 1.5px solid var(--line);
  border-left: 0.065in solid var(--fire);
  border-radius: 0.075in;
}

[data-problem-id="12"] .problem-setup p {
  margin: 0;
}

[data-problem-id="12"] .spire-illustration {
  margin: 0.07in 0 0.08in;
}

[data-problem-id="12"] .spire-illustration img {
  width: 100%;
  height: 0.5in;
  object-fit: cover;
  object-position: center 58%;
  border: 2px solid var(--gold);
  border-radius: 0.085in;
}

[data-problem-id="12"] .number-line-panel {
  margin: 0.08in 0;
  padding: 0.12in 0.14in 0.1in;
  color: #fff8e8;
  background: linear-gradient(145deg, var(--charcoal), var(--charcoal-soft));
  border: 2px solid var(--gold);
  border-radius: 0.095in;
}

[data-problem-id="12"] .number-line-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.18in;
  margin-bottom: 0.045in;
}

[data-problem-id="12"] .section-label {
  margin: 0;
  color: var(--gold-light);
  font-size: 0.125in;
  font-weight: 950;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

[data-problem-id="12"] .hidden-key {
  margin: 0;
  color: #ebdbc1;
  font-size: 0.125in;
  font-weight: 750;
}

[data-problem-id="12"] .number-line-panel svg {
  display: block;
  width: 100%;
  height: 2.02in;
}

[data-problem-id="12"] .outer-sum {
  fill: #fff8e8;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 31px;
  font-weight: 950;
  letter-spacing: 1px;
}

[data-problem-id="12"] .sum-caption {
  fill: #e9c768;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
}

[data-problem-id="12"] .sum-bracket,
[data-problem-id="12"] .number-line-stroke {
  fill: none;
  stroke: #f2d77f;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-problem-id="12"] .sum-bracket {
  stroke-width: 3;
}

[data-problem-id="12"] .number-line-stroke {
  stroke-width: 6;
}

[data-problem-id="12"] .jump-line {
  fill: none;
  stroke: #df673a;
  stroke-width: 4;
  stroke-linecap: round;
}

[data-problem-id="12"] .jump-label {
  fill: #ffd891;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 1.7px;
}

[data-problem-id="12"] .point-halo {
  fill: #2b211e;
  stroke: #f2d77f;
  stroke-width: 5;
}

[data-problem-id="12"] .point-core {
  fill: #ba3c29;
}

[data-problem-id="12"] .rest-core {
  fill: #e6a937;
}

[data-problem-id="12"] .room-label {
  fill: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 800;
}

[data-problem-id="12"] .room-tag {
  fill: #dfc992;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

[data-problem-id="12"] .rest-answer {
  fill: #fff1a8;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

[data-problem-id="12"] .challenge-panel {
  padding: 0.14in 0.16in 0.15in;
  background: var(--parchment);
  border: 2px solid var(--fire-dark);
  border-radius: 0.085in;
}

[data-problem-id="12"] .challenge-panel h2 {
  margin: 0 0 0.055in;
  color: var(--fire-dark);
  font-size: 0.125in;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-problem-id="12"] .question {
  margin: 0;
  font-size: 0.185in;
  line-height: 1.38;
  font-weight: 820;
}

[data-problem-id="12"] .response-directions {
  display: flex;
  align-items: center;
  gap: 0.08in;
  margin: 0.09in 0 0;
  padding-top: 0.075in;
  color: var(--muted);
  border-top: 1px solid #b99a69;
  font-size: 0.125in;
  line-height: 1.25;
  font-weight: 800;
}

[data-problem-id="12"] .response-directions::before {
  display: grid;
  flex: 0 0 auto;
  width: 0.24in;
  height: 0.24in;
  place-items: center;
  color: #ffffff;
  background: var(--fire);
  border-radius: 50%;
  content: "✦";
  font-size: 0.125in;
}