:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #172033;
  background: #f7f9fd;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
.lab { max-width: 920px; margin: 0 auto; padding: 24px; }
header { margin-bottom: 20px; }
.eyebrow { margin: 0 0 6px; color: #3157b7; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(24px, 5vw, 38px); }
header > p:last-child { margin: 8px 0 0; color: #56627a; }
.selectors, .counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
label { display: grid; gap: 7px; font-weight: 650; }
select, input[type="text"], .question input { width: 100%; min-height: 46px; padding: 9px 12px; border: 1px solid #b9c2d3; border-radius: 10px; color: inherit; background: #fff; font-size: 16px; }
input[type="range"] { width: 100%; min-height: 34px; accent-color: #3157b7; }
output { justify-self: end; color: #3157b7; font-size: 20px; }
.meter { --charge-position: 50%; position: relative; height: 42px; margin: 28px 10px; border-radius: 22px; background: linear-gradient(90deg, #5085dd, #e9edf5 46%, #e9edf5 54%, #e56565); }
.meter::before { content: "−"; position: absolute; left: 14px; top: 7px; color: #fff; font-weight: 800; }
.meter::after { content: "+"; position: absolute; right: 14px; top: 7px; color: #fff; font-weight: 800; }
.needle { position: absolute; left: var(--charge-position); top: -8px; width: 5px; height: 58px; border-radius: 4px; background: #172033; transform: translateX(-50%); transition: left .2s ease; }
.zero { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-weight: 800; }
.result, .feedback { margin-top: 14px; padding: 16px; border-left: 5px solid #8090aa; border-radius: 8px; background: #edf1f8; }
.result strong, .result span { display: block; }
.result span { margin-top: 5px; color: #56627a; }
.result p { margin: 8px 0 0; }
.correct { border-color: #138a62; background: #e7f7f0; }
.incorrect { border-color: #c64141; background: #fff0f0; }
.lcm-board { display: grid; gap: 18px; margin-top: 24px; padding: 20px; background: #eaf0ff; border-radius: 14px; }
.lcm-board > div { display: grid; grid-template-columns: minmax(100px, .6fr) 2fr; gap: 12px; align-items: center; }
.multiples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.multiple { min-width: 42px; padding: 8px; border-radius: 50%; text-align: center; background: #fff; }
.multiple.meet { color: #fff; background: #138a62; font-weight: 800; }
.arrow { color: #7b879d; }
.criss { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 70px 50px; max-width: 420px; margin: 26px auto; text-align: center; }
.ion { position: relative; z-index: 2; font-size: 36px; font-weight: 800; }
.ion sup { font-size: 16px; }
.sub { align-self: end; font-size: 26px; font-weight: 800; color: #3157b7; }
.cross-line { position: absolute; top: 43px; left: 25%; width: 50%; height: 3px; background: #8090aa; transform-origin: center; }
.cross-line.down { transform: rotate(27deg); }
.cross-line.up { transform: rotate(-27deg); }
.question-list { display: grid; gap: 14px; }
.question { display: grid; gap: 10px; padding: 16px; border: 1px solid #d5dbe6; border-radius: 14px; background: #fff; }
.question p { margin: 0; }
.question span { display: block; color: #56627a; font-size: 13px; }
.question strong { display: block; margin-top: 3px; font-size: 22px; }
.answers { display: flex; flex-wrap: wrap; gap: 9px; }
button { min-height: 44px; padding: 9px 14px; border: 1px solid #aeb9cc; border-radius: 10px; color: inherit; background: #fff; cursor: pointer; }
button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
.feedback:empty { display: none; }
.correct-text { color: #08734f; }
.incorrect-text { color: #b12e2e; }

@media (max-width: 560px) {
  .lab { padding: 18px 14px; }
  .selectors, .counts { grid-template-columns: 1fr; }
  .lcm-board > div { grid-template-columns: 1fr; }
  .question strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) { .needle { transition: none; } }

@media (prefers-color-scheme: dark) {
  :root { color: #edf2ff; background: #101522; }
  header > p:last-child, .result span, .question span { color: #b4bfd4; }
  select, input[type="text"], .question input, .question, button, .multiple { color: #edf2ff; background: #1a2232; border-color: #46526a; }
  .lcm-board { background: #17213a; }
  .result, .feedback { background: #252e40; }
  .correct { background: #12392f; }
  .incorrect { background: #431f25; }
}