:root {
  color-scheme: light;
  --ink: #152d3a;
  --muted: #596d78;
  --accent: #176d63;
  --line: #dce4e5;
  --paper: #f5f7f6;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    15px/1.6 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: 1660px;
  margin: auto;
  padding: 17px 28px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 23px;
  font-weight: 750;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}
nav {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}
nav a {
  color: var(--ink);
}
nav form {
  margin: 0;
}
.nav-button {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.nav-signup {
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 7px;
}
.role-badge,
.tag,
.best-badge {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 3px 11px;
  font-size: 11px;
}
.role-badge {
  background: var(--surface-soft);
  color: var(--accent);
}
main {
  max-width: 1660px;
  min-height: 76vh;
  margin: auto;
  padding: 30px 28px 55px;
}
h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
h1 {
  font-size: 35px;
  margin: 9px 0 20px;
}
h2 {
  font-size: 21px;
  margin: 0 0 17px;
}
h3 {
  font-size: 17px;
  margin: 24px 0 9px;
}
h4 {
  font-size: 12px;
  margin: 12px 0 6px;
}
p {
  margin: 11px 0 20px;
}
.eyebrow {
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 750;
  color: var(--accent);
}
.lead {
  color: var(--muted);
  max-width: 860px;
}
.small {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
.section-head h2 {
  margin: 0;
}
.section-head > span {
  color: var(--muted);
  font-size: 13px;
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 22px;
}
.chapter-card {
  display: block;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  max-width: 780px;
}
.chapter-card:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.card-top,
.card-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.card-top {
  margin-bottom: 22px;
}
.chapter-number {
  font-size: 27px;
  color: #9db2b7;
}
.chapter-card p {
  color: var(--muted);
  font-size: 14px;
}
.chapter-score {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 17px 0 8px;
  color: var(--muted);
}
.chapter-score strong {
  font-size: 31px;
  color: var(--ink);
}
progress {
  display: block;
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  margin: 12px 0 20px;
  accent-color: var(--accent);
}
progress::-webkit-progress-bar {
  background: #e5ecea;
}
progress::-webkit-progress-value {
  background: var(--accent);
}
.card-bottom {
  font-size: 12px;
  color: var(--muted);
}
.arrow {
  font-size: 24px;
  color: var(--accent);
}
.notice {
  padding: 17px 20px;
  background: #e9f1ef;
  border: 1px solid #cddfd9;
  border-radius: 8px;
  margin: 20px 0;
  color: #25574d;
  font-size: 13px;
}
.error {
  background: #fff2ed;
  color: #92351d;
  border-color: #f0d5c9;
}
.compact {
  padding: 12px 14px;
}
.back {
  display: inline-block;
  font-size: 13px;
  margin-bottom: 22px;
}
.workspace {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 28px;
}
.sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sidebar h2 {
  font-size: 17px;
  padding: 0 17px;
  margin: 18px 0;
}
.chapter-back {
  display: block;
  margin: 17px;
  font-size: 12px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 9px 18px;
}
.block-title {
  font-size: 11px;
  color: var(--muted);
  padding: 0 17px;
  margin: 22px 0 10px;
  letter-spacing: 0.03em;
}
.sidebar-task {
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 13px 10px;
  border-radius: 6px;
  color: var(--ink);
  margin: 3px 0;
  font-size: 12px;
}
.sidebar-task:hover {
  text-decoration: none;
  background: var(--surface-soft);
}
.sidebar-task.selected {
  background: var(--surface-selected);
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}
.task-number {
  font-weight: 700;
  color: var(--accent);
  grid-row: 1 / 3;
}
.task-name {
  overflow-wrap: anywhere;
}
.sidebar-score {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}
.work-main {
  min-width: 0;
}
.task-heading {
  font-size: 30px;
  margin-bottom: 19px;
  max-width: 1080px;
}
.task-progress {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 15px;
  background: var(--surface-selected);
  border-radius: 7px;
  font-size: 12px;
  margin-bottom: 22px;
}
.task-progress strong {
  color: var(--accent);
}
.task-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.panel {
  background: var(--surface);
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.panel p {
  font-size: 14px;
}
.editor-column {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}
.editor-header h2 {
  margin: 0;
}
.editor-header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
input,
textarea,
select {
  font: inherit;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: 9px 11px;
  background: var(--surface);
  color: var(--ink);
  max-width: 100%;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #176d633b;
  border-color: var(--accent);
}
.source-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
}
.code-editor {
  width: 100%;
  min-height: 320px;
  background: #122933;
  color: #e0f2ed;
  font:
    13px/1.65 ui-monospace,
    Consolas,
    monospace;
  tab-size: 4;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  padding: 16px;
  border-color: #122933;
}
.primary,
.secondary,
button {
  display: inline-block;
  background: var(--button);
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 10px 18px;
  font: 600 13px/1.6 system-ui;
  cursor: pointer;
}
.primary:hover {
  background: var(--button-hover);
  text-decoration: none;
}
.secondary {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  padding: 7px 13px;
}
.secondary:hover {
  text-decoration: none;
  background: var(--surface-selected);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 0;
}
.example > div {
  min-width: 0;
}
.example > div + div {
  border-left: 1px solid var(--line);
}
.example span {
  display: block;
  background: var(--surface-soft);
  padding: 6px 11px;
  font-size: 10px;
  color: var(--muted);
}
pre {
  font:
    12px/1.65 ui-monospace,
    Consolas,
    monospace;
  padding: 12px;
  margin: 0;
  background: var(--surface-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
code {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.report-summary {
  font-size: 12px;
}
.attempt-id {
  display: block;
  color: var(--muted);
  margin: 10px 0;
}
.status {
  display: inline-block;
  padding: 3px 9px;
  background: var(--surface-selected);
  color: var(--accent);
  border-radius: 5px;
  font-size: 11px;
}
.technical_error {
  background: #fff0e9;
  color: #92351d;
}
.report-score {
  margin: 14px 0;
  font-size: 14px;
}
.report-score strong {
  font-size: 38px;
  letter-spacing: -0.04em;
}
.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  font-size: 10px;
}
.stages li {
  padding: 5px 9px;
  background: var(--surface-soft);
  border-radius: 5px;
}
.stages .active {
  background: var(--button);
  color: #fff;
}
.test-report {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 11px 0;
  min-width: 0;
}
.test-report summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  cursor: pointer;
}
.test-io {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 10px;
}
.test-io > div {
  min-width: 0;
}
.verdict.accepted {
  color: var(--accent);
}
.verdict.failed,
.verdict-fail {
  color: var(--error);
}
.compiler,
.version-info {
  font-size: 12px;
  margin: 17px 0;
}
.compiler summary,
.version-info summary {
  color: var(--muted);
  cursor: pointer;
}
.compiler pre {
  margin-top: 10px;
  max-height: 300px;
  overflow: auto;
}
.version-info p {
  font-size: 11px;
  margin-bottom: 9px;
}
.history-panel {
  margin-top: 22px;
}
.attempt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 20px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 11px 0;
  color: var(--ink);
  font-size: 13px;
  min-width: 0;
}
.attempt-row:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.attempt-row > div {
  min-width: 0;
}
.attempt-row strong {
  overflow-wrap: anywhere;
}
.attempt-row span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}
.attempt-points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
  white-space: nowrap;
}
.attempt-points > .score {
  line-height: 1.6;
  white-space: nowrap;
}
.attempt-points > .best-badge,
.attempt-points > .teacher-badge {
  margin-top: 0;
}
.best-attempt {
  border-left: 3px solid var(--accent);
}
.best-badge {
  color: var(--accent) !important;
  background: var(--surface-selected);
  font-size: 10px !important;
  white-space: normal;
}
.solution-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 23px;
  align-items: start;
}
.submitted-code {
  background: #122933;
  color: #e0f2ed;
  border-radius: 7px;
  overflow: auto;
  white-space: pre;
  word-break: normal;
  font-size: 13px;
  min-height: 220px;
}
.account-card {
  max-width: 570px;
  margin: 15px auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.account-card h1 {
  font-size: 30px;
}
.account-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.account-card input {
  width: 100%;
}
.helptext {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.helptext ul {
  padding-left: 18px;
}
.account-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 13px;
}
.errorlist {
  font-size: 12px;
  color: var(--error);
  padding-left: 18px;
}
.profile-email {
  overflow-wrap: anywhere;
}
.filters {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 23px;
}
.filters label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}
.filters input {
  min-width: 260px;
}
.student-list {
  display: grid;
  gap: 22px;
}
.student-card h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.student-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 23px;
  margin: 19px 0;
}
.student-task {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 13px 0;
  font-size: 12px;
  min-width: 0;
}
.student-task > span {
  min-width: 0;
}
.student-task strong {
  white-space: nowrap;
}
.student-task .small {
  margin: 7px 0 0;
}
.history-title {
  margin: 32px 0 20px;
}
.pagination {
  display: flex;
  gap: 24px;
  font-size: 13px;
  margin: 23px 0;
}
.empty {
  padding: 35px;
}
footer {
  max-width: 1660px;
  margin: auto;
  padding: 23px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 10px;
}
@media (min-width: 1450px) {
  .task-columns {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .test-io {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .nav-wrap {
    gap: 18px;
    flex-wrap: wrap;
  }
  nav {
    gap: 16px;
  }
  .workspace {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;
  }
  .solution-columns {
    grid-template-columns: 1fr;
  }
  .section-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .nav-wrap {
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
  .brand {
    font-size: 22px;
  }
  nav {
    gap: 12px;
    font-size: 12px;
  }
  main {
    padding: 23px 18px 40px;
  }
  .workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sidebar {
    position: static;
  }
  .task-heading {
    font-size: 25px;
  }
  .task-columns {
    gap: 18px;
  }
  .panel {
    padding: 20px;
  }
  .task-progress {
    gap: 10px;
    font-size: 11px;
  }
  .account-card {
    padding: 24px;
  }
  .chapter-card {
    padding: 23px;
  }
  .student-card .section-head {
    flex-direction: column;
  }
  .attempt-row {
    padding: 15px;
    gap: 13px;
    font-size: 12px;
  }
  .attempt-points {
    white-space: normal;
  }
  .filters input {
    min-width: 0;
    width: 100%;
  }
  .filters label {
    width: 100%;
  }
  footer {
    flex-direction: column;
  }
  .test-io {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 390px) {
  h1 {
    font-size: 29px;
  }
  .role-badge {
    font-size: 10px;
  }
  .example {
    grid-template-columns: 1fr;
  }
  .example > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .panel {
    padding: 17px;
  }
  .editor-header {
    gap: 10px;
  }
  .editor-header h2 {
    font-size: 18px;
  }
  .code-editor {
    font-size: 12px;
  }
  .student-card h2 {
    font-size: 17px;
  }
}
.student-task > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.student-task > span {
  overflow-wrap: anywhere;
}
select {
  max-width: 100%;
  min-width: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}
.team-card {
  color: var(--ink);
}
.team-card:hover {
  text-decoration: none;
  border-color: var(--accent);
}
.grade-panel {
  margin-top: 24px;
  max-width: 700px;
}
.grade-panel label {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.grade-panel textarea {
  width: 100%;
}
.grade-panel input[type="number"] {
  width: 180px;
}

.team-card {
  display: block;
  min-height: 180px;
}
.team-card h2 {
  margin: 0 0 15px;
}
.team-card p {
  margin: 8px 0 15px;
}
.team-card > span {
  display: block;
  margin-top: 20px;
}
.student-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.student-task-menu {
  position: sticky;
  top: 20px;
}
.student-task-menu h2 {
  font-size: 17px;
}
.student-task-menu ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 25px;
}
.student-task-menu a {
  display: block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  margin: 7px 0;
  color: var(--ink);
  font-size: 12px;
}
.student-task-menu a span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}
.student-task-menu a.selected {
  background: var(--surface-selected);
  border-left: 3px solid var(--accent);
}
.student-attempts .attempt-row {
  padding: 14px;
}
.teacher-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.teacher-source {
  margin-top: 47px;
}
.grade-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}
.grade-form textarea {
  width: 100%;
}
.grade-form input[type="number"] {
  width: 180px;
}
.grade-reset {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.grade-reset p {
  margin-bottom: 0;
}
.reference-code {
  margin: 20px 0;
}
.reference-code summary {
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 12px;
}
.reference-code .secondary {
  margin-top: 12px;
}
@media (max-width: 1000px) {
  .student-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .teacher-report-layout {
    grid-template-columns: 1fr;
  }
  .teacher-source {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .student-workspace {
    grid-template-columns: 1fr;
  }
  .student-task-menu {
    position: static;
  }
  .student-task-menu ul {
    margin-bottom: 15px;
  }
}

/* Scores keep their exact numeric labels; color is supplementary. */
.score {
  font-variant-numeric: tabular-nums;
}
.teacher-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #b8c4dd;
  border-radius: 20px;
  color: #344e80;
  background: #f1f4fb;
  font-size: 11px;
  white-space: normal;
}
.teacher-badge [aria-hidden] {
  font-size: 16px;
  line-height: 1;
}
.report-summary > .teacher-badge {
  margin-top: 8px;
}
input:disabled {
  background: #edf1f2;
  color: #51646f;
  cursor: default;
}

.score.score-ungraded {
  color: var(--muted);
}
.score.score-tone-0 {
  color: hsl(0 65% var(--score-lightness));
}
.score.score-tone-1 {
  color: hsl(1 65% var(--score-lightness));
}
.score.score-tone-2 {
  color: hsl(2 65% var(--score-lightness));
}
.score.score-tone-3 {
  color: hsl(3 65% var(--score-lightness));
}
.score.score-tone-4 {
  color: hsl(4 65% var(--score-lightness));
}
.score.score-tone-5 {
  color: hsl(5 65% var(--score-lightness));
}
.score.score-tone-6 {
  color: hsl(6 65% var(--score-lightness));
}
.score.score-tone-7 {
  color: hsl(7 65% var(--score-lightness));
}
.score.score-tone-8 {
  color: hsl(8 65% var(--score-lightness));
}
.score.score-tone-9 {
  color: hsl(9 65% var(--score-lightness));
}
.score.score-tone-10 {
  color: hsl(10 65% var(--score-lightness));
}
.score.score-tone-11 {
  color: hsl(11 65% var(--score-lightness));
}
.score.score-tone-12 {
  color: hsl(12 65% var(--score-lightness));
}
.score.score-tone-13 {
  color: hsl(13 65% var(--score-lightness));
}
.score.score-tone-14 {
  color: hsl(14 65% var(--score-lightness));
}
.score.score-tone-15 {
  color: hsl(15 65% var(--score-lightness));
}
.score.score-tone-16 {
  color: hsl(16 65% var(--score-lightness));
}
.score.score-tone-17 {
  color: hsl(17 65% var(--score-lightness));
}
.score.score-tone-18 {
  color: hsl(18 65% var(--score-lightness));
}
.score.score-tone-19 {
  color: hsl(19 65% var(--score-lightness));
}
.score.score-tone-20 {
  color: hsl(20 65% var(--score-lightness));
}
.score.score-tone-21 {
  color: hsl(21 65% var(--score-lightness));
}
.score.score-tone-22 {
  color: hsl(22 65% var(--score-lightness));
}
.score.score-tone-23 {
  color: hsl(23 65% var(--score-lightness));
}
.score.score-tone-24 {
  color: hsl(24 65% var(--score-lightness));
}
.score.score-tone-25 {
  color: hsl(25 65% var(--score-lightness));
}
.score.score-tone-26 {
  color: hsl(26 65% var(--score-lightness));
}
.score.score-tone-27 {
  color: hsl(27 65% var(--score-lightness));
}
.score.score-tone-28 {
  color: hsl(28 65% var(--score-lightness));
}
.score.score-tone-29 {
  color: hsl(29 65% var(--score-lightness));
}
.score.score-tone-30 {
  color: hsl(30 65% var(--score-lightness));
}
.score.score-tone-31 {
  color: hsl(31 65% var(--score-lightness));
}
.score.score-tone-32 {
  color: hsl(32 65% var(--score-lightness));
}
.score.score-tone-33 {
  color: hsl(33 65% var(--score-lightness));
}
.score.score-tone-34 {
  color: hsl(34 65% var(--score-lightness));
}
.score.score-tone-35 {
  color: hsl(35 65% var(--score-lightness));
}
.score.score-tone-36 {
  color: hsl(36 65% var(--score-lightness));
}
.score.score-tone-37 {
  color: hsl(37 65% var(--score-lightness));
}
.score.score-tone-38 {
  color: hsl(38 65% var(--score-lightness));
}
.score.score-tone-39 {
  color: hsl(39 65% var(--score-lightness));
}
.score.score-tone-40 {
  color: hsl(40 65% var(--score-lightness));
}
.score.score-tone-41 {
  color: hsl(41 65% var(--score-lightness));
}
.score.score-tone-42 {
  color: hsl(42 65% var(--score-lightness));
}
.score.score-tone-43 {
  color: hsl(43 65% var(--score-lightness));
}
.score.score-tone-44 {
  color: hsl(44 65% var(--score-lightness));
}
.score.score-tone-45 {
  color: hsl(45 65% var(--score-lightness));
}
.score.score-tone-46 {
  color: hsl(46 65% var(--score-lightness));
}
.score.score-tone-47 {
  color: hsl(47 65% var(--score-lightness));
}
.score.score-tone-48 {
  color: hsl(48 65% var(--score-lightness));
}
.score.score-tone-49 {
  color: hsl(49 65% var(--score-lightness));
}
.score.score-tone-50 {
  color: hsl(50 65% var(--score-lightness));
}
.score.score-tone-51 {
  color: hsl(51 65% var(--score-lightness));
}
.score.score-tone-52 {
  color: hsl(52 65% var(--score-lightness));
}
.score.score-tone-53 {
  color: hsl(53 65% var(--score-lightness));
}
.score.score-tone-54 {
  color: hsl(54 65% var(--score-lightness));
}
.score.score-tone-55 {
  color: hsl(55 65% var(--score-lightness));
}
.score.score-tone-56 {
  color: hsl(56 65% var(--score-lightness));
}
.score.score-tone-57 {
  color: hsl(57 65% var(--score-lightness));
}
.score.score-tone-58 {
  color: hsl(58 65% var(--score-lightness));
}
.score.score-tone-59 {
  color: hsl(59 65% var(--score-lightness));
}
.score.score-tone-60 {
  color: hsl(60 65% var(--score-lightness));
}
.score.score-tone-61 {
  color: hsl(61 65% var(--score-lightness));
}
.score.score-tone-62 {
  color: hsl(62 65% var(--score-lightness));
}
.score.score-tone-63 {
  color: hsl(63 65% var(--score-lightness));
}
.score.score-tone-64 {
  color: hsl(64 65% var(--score-lightness));
}
.score.score-tone-65 {
  color: hsl(65 65% var(--score-lightness));
}
.score.score-tone-66 {
  color: hsl(66 65% var(--score-lightness));
}
.score.score-tone-67 {
  color: hsl(67 65% var(--score-lightness));
}
.score.score-tone-68 {
  color: hsl(68 65% var(--score-lightness));
}
.score.score-tone-69 {
  color: hsl(69 65% var(--score-lightness));
}
.score.score-tone-70 {
  color: hsl(70 65% var(--score-lightness));
}
.score.score-tone-71 {
  color: hsl(71 65% var(--score-lightness));
}
.score.score-tone-72 {
  color: hsl(72 65% var(--score-lightness));
}
.score.score-tone-73 {
  color: hsl(73 65% var(--score-lightness));
}
.score.score-tone-74 {
  color: hsl(74 65% var(--score-lightness));
}
.score.score-tone-75 {
  color: hsl(75 65% var(--score-lightness));
}
.score.score-tone-76 {
  color: hsl(76 65% var(--score-lightness));
}
.score.score-tone-77 {
  color: hsl(77 65% var(--score-lightness));
}
.score.score-tone-78 {
  color: hsl(78 65% var(--score-lightness));
}
.score.score-tone-79 {
  color: hsl(79 65% var(--score-lightness));
}
.score.score-tone-80 {
  color: hsl(80 65% var(--score-lightness));
}
.score.score-tone-81 {
  color: hsl(81 65% var(--score-lightness));
}
.score.score-tone-82 {
  color: hsl(82 65% var(--score-lightness));
}
.score.score-tone-83 {
  color: hsl(83 65% var(--score-lightness));
}
.score.score-tone-84 {
  color: hsl(84 65% var(--score-lightness));
}
.score.score-tone-85 {
  color: hsl(85 65% var(--score-lightness));
}
.score.score-tone-86 {
  color: hsl(86 65% var(--score-lightness));
}
.score.score-tone-87 {
  color: hsl(87 65% var(--score-lightness));
}
.score.score-tone-88 {
  color: hsl(88 65% var(--score-lightness));
}
.score.score-tone-89 {
  color: hsl(89 65% var(--score-lightness));
}
.score.score-tone-90 {
  color: hsl(90 65% var(--score-lightness));
}
.score.score-tone-91 {
  color: hsl(91 65% var(--score-lightness));
}
.score.score-tone-92 {
  color: hsl(92 65% var(--score-lightness));
}
.score.score-tone-93 {
  color: hsl(93 65% var(--score-lightness));
}
.score.score-tone-94 {
  color: hsl(94 65% var(--score-lightness));
}
.score.score-tone-95 {
  color: hsl(95 65% var(--score-lightness));
}
.score.score-tone-96 {
  color: hsl(96 65% var(--score-lightness));
}
.score.score-tone-97 {
  color: hsl(97 65% var(--score-lightness));
}
.score.score-tone-98 {
  color: hsl(98 65% var(--score-lightness));
}
.score.score-tone-99 {
  color: hsl(99 65% var(--score-lightness));
}
.score.score-tone-100 {
  color: hsl(100 65% var(--score-lightness));
}
.score.score-tone-101 {
  color: hsl(101 65% var(--score-lightness));
}
.score.score-tone-102 {
  color: hsl(102 65% var(--score-lightness));
}
.score.score-tone-103 {
  color: hsl(103 65% var(--score-lightness));
}
.score.score-tone-104 {
  color: hsl(104 65% var(--score-lightness));
}
.score.score-tone-105 {
  color: hsl(105 65% var(--score-lightness));
}
.score.score-tone-106 {
  color: hsl(106 65% var(--score-lightness));
}
.score.score-tone-107 {
  color: hsl(107 65% var(--score-lightness));
}
.score.score-tone-108 {
  color: hsl(108 65% var(--score-lightness));
}
.score.score-tone-109 {
  color: hsl(109 65% var(--score-lightness));
}
.score.score-tone-110 {
  color: hsl(110 65% var(--score-lightness));
}
.score.score-tone-111 {
  color: hsl(111 65% var(--score-lightness));
}
.score.score-tone-112 {
  color: hsl(112 65% var(--score-lightness));
}
.score.score-tone-113 {
  color: hsl(113 65% var(--score-lightness));
}
.score.score-tone-114 {
  color: hsl(114 65% var(--score-lightness));
}
.score.score-tone-115 {
  color: hsl(115 65% var(--score-lightness));
}
.score.score-tone-116 {
  color: hsl(116 65% var(--score-lightness));
}
.score.score-tone-117 {
  color: hsl(117 65% var(--score-lightness));
}
.score.score-tone-118 {
  color: hsl(118 65% var(--score-lightness));
}
.score.score-tone-119 {
  color: hsl(119 65% var(--score-lightness));
}
.score.score-tone-120 {
  color: hsl(120 65% var(--score-lightness));
}
.score.score-tone-121 {
  color: hsl(121 65% var(--score-lightness));
}
.score.score-tone-122 {
  color: hsl(122 65% var(--score-lightness));
}
.score.score-tone-123 {
  color: hsl(123 65% var(--score-lightness));
}
.score.score-tone-124 {
  color: hsl(124 65% var(--score-lightness));
}
.score.score-tone-125 {
  color: hsl(125 65% var(--score-lightness));
}
.score.score-tone-126 {
  color: hsl(126 65% var(--score-lightness));
}
.score.score-tone-127 {
  color: hsl(127 65% var(--score-lightness));
}
.score.score-tone-128 {
  color: hsl(128 65% var(--score-lightness));
}
.score.score-tone-129 {
  color: hsl(129 65% var(--score-lightness));
}
.score.score-tone-130 {
  color: hsl(130 65% var(--score-lightness));
}
.score.score-tone-131 {
  color: hsl(131 65% var(--score-lightness));
}
.score.score-tone-132 {
  color: hsl(132 65% var(--score-lightness));
}
.score.score-tone-133 {
  color: hsl(133 65% var(--score-lightness));
}
.score.score-tone-134 {
  color: hsl(134 65% var(--score-lightness));
}
.score.score-tone-135 {
  color: hsl(135 65% var(--score-lightness));
}
.score.score-tone-136 {
  color: hsl(136 65% var(--score-lightness));
}
.score.score-tone-137 {
  color: hsl(137 65% var(--score-lightness));
}
.score.score-tone-138 {
  color: hsl(138 65% var(--score-lightness));
}
.score.score-tone-139 {
  color: hsl(139 65% var(--score-lightness));
}
.score.score-tone-140 {
  color: hsl(140 65% var(--score-lightness));
}

.score strong {
  color: inherit;
}
.attempt-row .teacher-badge {
  display: inline-flex;
  color: #344e80;
  font-size: 11px;
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: center;
}
.attempt-row .teacher-badge [aria-hidden] {
  display: inline-block;
  margin: 0;
  color: inherit;
}
@media (max-width: 480px) {
  .attempt-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .attempt-points {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: none;
    gap: 8px;
  }
}
.student-task-menu a span.score {
  display: inline;
  margin: 0;
}

.material-text { overflow-wrap: anywhere; }
.material-text pre { overflow-x: auto; white-space: pre; }
.material-text code { font-family: ui-monospace, Consolas, monospace; }
.material-text :first-child { margin-top: 0; }
.material-text ul, .material-text ol { padding-left: 1.5rem; }