.sheet { padding-block: 28px; }
.intro, .tools, .equation, .mini div, .legend span { display: flex; align-items: center; }
.intro, .tools { justify-content: space-between; gap: 18px; }
.intro { padding-block: 12px 28px; }
.title h1 { font-size: clamp(35px,5vw,56px); }
.title p { max-width: 23em; margin: 12px 0 0; font-size: clamp(15px,1.6vw,18px); color: var(--secondary); }
.equation { --u:#B74D29; --c:#345FCE; justify-content:center; gap: clamp(10px,1.7vw,21px); padding: 16px clamp(16px,2vw,28px); background: #e8e8df; border-radius: 6px; }
.equation > span { align-self: center; margin-top: -18px; color: #687169; font: 19px var(--mono); }
figure { margin: 0; min-width: 0; display: grid; justify-items: center; align-content: end; gap: 5px; }
figcaption { font: 13px/1.35 system-ui,"PingFang SC",sans-serif; color: #505a52; }
.mark { display:block; width:70px; height:70px; }
.equation .mark { width: 68px; height: 68px; }
.strand-u, .mono .strand-c { color: var(--u); }
.strand-c { color: var(--c); }
.tools { margin-bottom: 10px; }
.tools p { margin: 0; color: var(--secondary); font-size: 14px; }
.tools label { min-width: 65px; }
.columns, .row { grid-template-columns: minmax(175px,.92fr) repeat(2,minmax(0,1.85fr)); }
.pair { padding: 18px 10px 18px 0; align-self:center; }
.pair h2 { font-size:clamp(19px,2.1vw,25px); }
.legend { display:grid; gap:2px; margin-top:10px; color: var(--secondary); font-size:13px; }
.legend span { gap:8px; }
.legend i { width:10px; height:10px; border-radius:2px; }
.legend .u { background:var(--u); }
.legend .c { background:var(--c); }
.cell { display:grid; grid-template-columns:1fr 1fr .9fr; gap:8px; align-items:end; padding:16px clamp(12px,1.7vw,24px); }
.cell.light { background:var(--paper); border-left:1px solid #d5d7cd; }
.cell.dark { background:var(--graphite); }
.dark figcaption { color:#c1c7c5; }
.mini { border-left:1px solid #d2d5cd; }
.dark .mini { border-color:#465054; }
.mini div { justify-content:center; gap:8px; min-height:70px; }
.mini .mark { width:24px; height:24px; }
.mobile-surface { display:none; }
body:has(input[value="u"]:checked) .rows .strand-c,
body:has(input[value="c"]:checked) .rows .strand-u { visibility:hidden; }
@media(max-width:760px) {
  .sheet { padding-top:18px; }
  .intro { flex-direction:column; align-items:flex-start; padding:4px 0 16px; gap:14px; }
  .equation { align-self:stretch; padding:10px 8px; }
  .equation .mark { width:clamp(50px,15vw,70px); height:clamp(50px,15vw,70px); }
  .tools { flex-wrap:wrap; gap:6px; }
  .row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pair { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0 9px; }
  .legend { margin:0; gap:0; font-size:11px; }
  .cell { padding:9px 7px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 3px; }
  .mobile-surface { display:block; grid-column:1/-1; font-size:12px; }
  .dark .mobile-surface { color:#c1c7c5; }
  .cell .mark { width:clamp(38px,12vw,66px); height:clamp(38px,12vw,66px); }
  .cell figcaption { font-size:11px; }
  .mini { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:8px; border:0; }
  .mini div { min-height:24px; }
  .mini .mark { width:24px; height:24px; }
}
@media print {
  .sheet { padding-block:24px; }
  .intro { padding-block:4px 20px; }
  .tools p { padding-bottom:5px; }
}