/* Generated by scripts/build-themes.cjs from the light design. Do not edit. */
:where(html[data-theme='dark']) button {
  border: 1px solid #404f45;
  background: #212121;
}
:where(html[data-theme='dark']) button:hover {
  background: #2d3924;
}
:where(html[data-theme='dark']) button:focus-visible,
:where(html[data-theme='dark']) a:focus-visible,
:where(html[data-theme='dark']) summary:focus-visible {
  outline: 3px solid #809f45;
}
:where(html[data-theme='dark']) input,
:where(html[data-theme='dark']) textarea,
:where(html[data-theme='dark']) select {
  border: 1px solid #485a4e;
  background: #212121;
}
:where(html[data-theme='dark']) input::placeholder,
:where(html[data-theme='dark']) textarea::placeholder {
  color: #7a847d;
}
:where(html[data-theme='dark']) .top {
  background: #212121;
}
:where(html[data-theme='dark']) .modes {
  background: #3a402e;
}
:where(html[data-theme='dark']) .modes button[aria-pressed='true'] {
  background: #212121;
}
:where(html[data-theme='dark']) .paper {
  background: #212121;
}
:where(html[data-theme='dark']) .pill {
  background: #333924;
}
:where(html[data-theme='dark']) .progress-track span {
  background: #39412d;
}
:where(html[data-theme='dark']) .step-number {
  background: #313d23;
}
:where(html[data-theme='dark']) .prompt-math {
  background: #2e3121;
}
:where(html[data-theme='dark']) .preview {
  color: #acbfb7;
}
:where(html[data-theme='dark']) .primary {
  color: #212121;
}
:where(html[data-theme='dark']) .primary:hover {
  background: #ade3d4;
}
:where(html[data-theme='dark']) .feedback {
  background: #2c3b21;
}
:where(html[data-theme='dark']) .feedback.retry {
  background: #4b2d0b;
  color: #d4b190;
}
:where(html[data-theme='dark']) .hint {
  border-left: 3px solid #697a49;
  background: #31371e;
}
:where(html[data-theme='dark']) .choices button.selected {
  background: #323d1f;
}
:where(html[data-theme='dark']) .finish {
  background: #3b4720;
  border-color: #536538;
}
@media print {
:where(html[data-theme='dark']) body {
  background: #212121;
  color: #ededed;
}
:where(html[data-theme='dark']) .paper {
  border-bottom: 1px solid #585858;
}
}
:where(html[data-theme='dark']) dialog::backdrop {
  background: #c5e1d766;
}
:where(html[data-theme='dark']) .visual-explanation {
  border: 1px solid #4b5b38;
  background: #313a1b;
}
:where(html[data-theme='dark']) .math-chip {
  background: #212121;
  border: 1px solid #43503f;
}
:where(html[data-theme='dark']) .coefficient-chip {
  background: #543617;
  color: #daac86;
}
:where(html[data-theme='dark']) .variable-chip {
  background: #304229;
}
:where(html[data-theme='dark']) .cancelled {
  color: #889387;
  background: #383e2e;
}
:where(html[data-theme='dark']) .cancelled:after {
  background: #b3766a;
}
:where(html[data-theme='dark']) .fraction-line {
  border-top: 2px solid #879b87;
}
:where(html[data-theme='dark']) .shared,
:where(html[data-theme='dark']) .glow {
  background: #5b6a24;
  border-color: #95ad6f;
}
:where(html[data-theme='dark']) .branch-lines {
  color: #5d6d4d;
}
:where(html[data-theme='dark']) .visual-rule {
  border-left: 3px solid #7b9559;
}
:where(html[data-theme='dark']) .times {
  color: #7d887e;
}
:where(html[data-theme='calm']) button {
  border: 1px solid #c3cbc6;
  background: #f2f2f2;
}
:where(html[data-theme='calm']) button:hover {
  background: #e2e7df;
}
:where(html[data-theme='calm']) button:focus-visible,
:where(html[data-theme='calm']) a:focus-visible,
:where(html[data-theme='calm']) summary:focus-visible {
  outline: 3px solid #a0b37c;
}
:where(html[data-theme='calm']) input,
:where(html[data-theme='calm']) textarea,
:where(html[data-theme='calm']) select {
  border: 1px solid #b7c1bb;
  background: #f2f2f2;
}
:where(html[data-theme='calm']) input::placeholder,
:where(html[data-theme='calm']) textarea::placeholder {
  color: #858c87;
}
:where(html[data-theme='calm']) .top {
  background: #f2f2f2;
}
:where(html[data-theme='calm']) .modes {
  background: #dbded6;
}
:where(html[data-theme='calm']) .modes button[aria-pressed='true'] {
  background: #f2f2f2;
}
:where(html[data-theme='calm']) .paper {
  background: #f2f2f2;
}
:where(html[data-theme='calm']) .pill {
  background: #e5e7df;
}
:where(html[data-theme='calm']) .progress-track span {
  background: #dbded5;
}
:where(html[data-theme='calm']) .step-number {
  background: #e2e7dc;
}
:where(html[data-theme='calm']) .prompt-math {
  background: #ebede7;
}
:where(html[data-theme='calm']) .preview {
  color: #45524c;
}
:where(html[data-theme='calm']) .primary {
  color: #f2f2f2;
}
:where(html[data-theme='calm']) .primary:hover {
  background: #25493f;
}
:where(html[data-theme='calm']) .feedback {
  background: #e3e9df;
}
:where(html[data-theme='calm']) .feedback.retry {
  background: #f3e8dc;
  color: #664e38;
}
:where(html[data-theme='calm']) .hint {
  border-left: 3px solid #aeb89c;
  background: #eaece3;
}
:where(html[data-theme='calm']) .choices button.selected {
  background: #e6eade;
}
:where(html[data-theme='calm']) .finish {
  background: #e1e6d6;
  border-color: #c2ccb3;
}
@media print {
:where(html[data-theme='calm']) body {
  background: #f2f2f2;
  color: #0d0d0d;
}
:where(html[data-theme='calm']) .paper {
  border-bottom: 1px solid #b5b5b5;
}
}
:where(html[data-theme='calm']) dialog::backdrop {
  background: #21332c66;
}
:where(html[data-theme='calm']) .visual-explanation {
  border: 1px solid #c6cebc;
  background: #eaede2;
}
:where(html[data-theme='calm']) .math-chip {
  background: #f2f2f2;
  border: 1px solid #c5ccc2;
}
:where(html[data-theme='calm']) .coefficient-chip {
  background: #e9dcce;
  color: #6e4e34;
}
:where(html[data-theme='calm']) .variable-chip {
  background: #d8e0d5;
}
:where(html[data-theme='calm']) .cancelled {
  color: #757d75;
  background: #dcded7;
}
:where(html[data-theme='calm']) .cancelled:after {
  background: #91675d;
}
:where(html[data-theme='calm']) .fraction-line {
  border-top: 2px solid #6d7b6d;
}
:where(html[data-theme='calm']) .shared,
:where(html[data-theme='calm']) .glow {
  background: #d2dab6;
  border-color: #7e8e62;
}
:where(html[data-theme='calm']) .branch-lines {
  color: #afb8a6;
}
:where(html[data-theme='calm']) .visual-rule {
  border-left: 3px solid #94a480;
}
:where(html[data-theme='calm']) .times {
  color: #818982;
}