:root {
  color-scheme: light;
  font-family: "Instrument Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #14323e;
  background: #edf3f5;
}
body { margin: 0; }
main { width: min(100% - 36px, 490px); margin: 0 auto; padding: 24px 0; }
header { margin: 0 0 16px; font-size: 16px; font-weight: 650; }
section { padding: clamp(16px, 5vw, 28px); background: #fff; border: 1px solid #ccdade; border-radius: 14px; }
#state { color: #14645d; font-weight: 700; margin: 0 0 8px; }
#state[data-tone="caution"] { color: #8b370b; }
h1 { margin: 0 0 22px; font-size: clamp(25px, 7vw, 36px); }
#notice { margin: -8px 0 20px; color: #70431e; line-height: 1.55; }
.progress-label { display: flex; align-items: baseline; justify-content: space-between; }
#percent { font-size: 32px; font-variant-numeric: tabular-nums; }
progress {
  display: block;
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 7px 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #e1ecee;
  accent-color: #0b776d;
}
progress::-webkit-progress-bar { background: #e1ecee; }
progress::-webkit-progress-value { background: #0b776d; }
progress::-moz-progress-bar { background: #0b776d; }
#marks, footer { color: #405b64; font-size: 14px; }
dl { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; border-top: 1px solid #e2ebee; margin: 22px 0 0; padding-top: 17px; }
dt { font-size: 14px; color: #405b64; }
dd { margin: 5px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
footer { padding: 14px 2px; }

.login { display: grid; gap: 10px; margin-top: 20px; }
.login input, .login button { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #9bb4bc; border-radius: 8px; font: inherit; }
.login button { background: #14645d; color: #fff; font-weight: 700; cursor: pointer; }
.login :focus-visible { outline: 2px solid #14645d; outline-offset: 2px; }
.login-error { color: #8b370b; }