:root { color: #1b2434; background: #f7f9fd; font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
.lab { max-width: 1180px; margin: 0 auto; padding: 22px 20px 28px; }
header { margin-bottom: 14px; }
.eyebrow { margin: 0; color: #3f7fd6; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 4px 0 6px; font-size: 25px; }
header > p:last-child { margin: 0; color: #56627a; }
h2 { margin: 0 0 4px; font-size: 19px; }
h3 { margin: 0 0 8px; font-size: 15px; color: #3f7fd6; }
button { min-height: 44px; padding: 9px 13px; border: 1px solid #c3cddd; border-radius: 10px; background: #fff; color: #1b2434; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { border-color: #3f7fd6; }
button.primary, button.active { border-color: #3f7fd6; background: #3f7fd6; color: #fff; }
button:disabled { cursor: default; opacity: .85; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.scene { position: relative; min-height: 520px; height: 520px; overflow: hidden; border: 1px solid #d6dded; border-radius: 14px; background: #f2f5fb; touch-action: none; }
.scene canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.scene canvas:active { cursor: grabbing; }
.scene-message { position: absolute; inset: 0; display: grid; margin: 0; padding: 20px; place-content: center; color: #56627a; font-size: 14px; text-align: center; }
.scene-hint { margin: 8px 0 0; color: #56627a; font-size: 12px; text-align: center; }

.panel { padding: 0; }
.panel-body { display: grid; gap: 13px; }
.lead { margin: 0; color: #56627a; font-size: 14px; }
.controls-row { display: flex; flex-wrap: wrap; gap: 8px; }
.add-base { min-width: 58px; border-width: 2px; font-weight: 800; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.fact { display: grid; gap: 2px; padding: 11px 13px; border-radius: 11px; background: #eaf1fc; }
.fact small { color: #56627a; font-size: 12px; }
.fact b { color: #2c62ad; font-size: 18px; }

.parts, .counts { padding: 14px; border-radius: 12px; background: #f1f4fa; }
.part-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #dde4f0; }
.part-row:last-child { border-bottom: 0; }
.part-row p { margin: 2px 0 0; color: #56627a; font-size: 13px; }
.swatch { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; }

.hint { padding: 13px 15px; border-left: 4px solid #3f7fd6; border-radius: 0 10px 10px 0; background: #f1f4fa; }
.hint b { display: block; margin-bottom: 4px; color: #2c62ad; }
.hint p { margin: 0; font-size: 14px; }
.note { margin: 8px 0 0; color: #56627a; font-size: 13px; }

.base-dot { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 800; }
.base-dot.small { width: 27px; height: 27px; font-size: 13px; }
.pair-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pair-card { display: grid; gap: 5px; justify-items: center; padding: 14px; border-radius: 12px; background: #eaf1fc; }
.pair-card > span { grid-row: 1; }
.pair-card .base-dot:first-child { grid-column: 1; }
.pair-card .bond-mark { grid-column: 2; align-self: center; color: #56627a; font-size: 20px; font-weight: 800; }
.pair-card .base-dot:nth-child(3) { grid-column: 3; }
.pair-card small { grid-row: 2; grid-column: 1 / -1; color: #56627a; font-size: 12px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid #d6dded; text-align: left; }
thead th { background: #eaf1fc; font-size: 13px; }
td small { display: block; color: #7a869c; font-size: 11px; }

.field { display: grid; gap: 5px; font-weight: 650; font-size: 14px; }
.field input { min-height: 46px; padding: 10px 12px; border: 1px solid #c3cddd; border-radius: 10px; background: #fff; color: #1b2434; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: .12em; }
.field input:focus { border-color: #3f7fd6; outline: 2px solid rgba(63,127,214,.25); }

.strands { display: grid; gap: 7px; padding: 13px; border-radius: 12px; background: #f1f4fa; }
.strand-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; align-items: center; }
.strand-tag { color: #56627a; font-size: 12px; font-weight: 650; }
.strand-row code { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .1em; }
.strand-row.pair code { color: #2c62ad; }

.count-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.count-cell { display: grid; gap: 3px; justify-items: center; padding: 9px; border-radius: 10px; background: #fff; }
.count-cell b { font-size: 19px; }

.scale-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scale-list li { display: flex; gap: 11px; padding: 12px 14px; border-left: 3px solid #3f7fd6; border-radius: 0 10px 10px 0; background: #f1f4fa; }
.scale-index { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #3f7fd6; color: #fff; font-size: 13px; font-weight: 800; }
.scale-list p { margin: 2px 0 0; color: #56627a; font-size: 13px; }

.level { margin: 0; color: #2c62ad; font-weight: 700; }
.question { margin: 0; font-size: 18px; font-weight: 700; }
.choices { display: grid; gap: 9px; }
.choice { min-height: 52px; font-size: 14px; text-align: left; }
.choice.correct { border-color: #138a62; background: #e6f7ef; }
.choice.incorrect { border-color: #c64141; background: #fff0f0; }
.result { padding: 13px; border-left: 5px solid #8090aa; border-radius: 8px; background: #edf1f8; }
.result.correct { border-color: #138a62; background: #e6f7ef; }
.result.incorrect { border-color: #c64141; background: #fff0f0; }
.result b { display: block; margin-bottom: 3px; }
.result p { margin: 0; font-size: 14px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .scene { height: 420px; min-height: 420px; }
}
@media (max-width: 600px) {
  .lab { padding: 17px 13px; }
  .tabs button { flex: 1 1 44%; }
  .scene { height: 360px; min-height: 360px; }
  .pair-visual { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  :root { color: #edf2ff; background: #101522; }
  header > p:last-child, .lead, .note, .fact small, .part-row p, .strand-tag, .scale-list p, td small, .scene-message, .scene-hint, .pair-card small, .pair-card .bond-mark { color: #b4bfd4; }
  button, .field input { color: #edf2ff; background: #1a2232; border-color: #46536b; }
  .scene { background: #141b2b; border-color: #46536b; }
  .fact, .pair-card { background: #172236; }
  .fact b { color: #8fb6f0; }
  .parts, .counts, .hint, .strands, .scale-list li, .result { background: #1a2232; }
  .count-cell { background: #172236; }
  .part-row { border-color: #46536b; }
  th, td { border-color: #46536b; }
  thead th { background: #172236; }
  .hint b, .level, .strand-row.pair code, h3 { color: #8fb6f0; }
  .result.correct, .choice.correct { background: #12392f; }
  .result.incorrect, .choice.incorrect { background: #431f25; }
}