.panel__head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--fs-ui);
  color: var(--ink-body);
  padding-bottom: calc(var(--cell) * 0.26);
  border-bottom: var(--hairline) solid var(--ink-body);
  margin-bottom: calc(var(--cell) * 0.27);
}
.panel__head strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel__head span { letter-spacing: 0.04em; text-transform: uppercase; }

.panel__body { padding: calc(var(--cell) * 0.45); }

.sheets {
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: calc(var(--cell) * 0.34) calc(var(--cell) * 0.29);
}

.sheet-card { min-width: 0; }

.sheet-card__art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  cursor: pointer;
}

.sheet-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  font-size: var(--fs-micro);
  color: var(--ink-body);
  margin: calc(var(--cell) * 0.09) 0 calc(var(--cell) * 0.10);
}
.sheet-card__id { font-weight: 700; }

.sheet-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  height: clamp(30px, calc(var(--cell) * 0.30), 36px);
  font-size: var(--fs-micro);
  white-space: nowrap;
  border: var(--hairline) solid var(--ink-body);
  background: transparent;
  color: var(--ink-body);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.sheet-card__action .icon { width: 1.1em; height: 1.1em; }
.sheet-card__action:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-reverse); }

.sheet-card__action[disabled] {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}

.sheet-card__dl {
  display: flex;
  gap: calc(var(--cell) * 0.06);
  margin-top: calc(var(--cell) * 0.06);
}
.sheet-card__dlbtn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: clamp(26px, calc(var(--cell) * 0.26), 32px);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: var(--hairline) solid #c9c6c2;
  background: transparent;
  color: var(--ink-body);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.sheet-card__dlbtn .icon { width: 0.95em; height: 0.95em; }
.sheet-card__dlbtn:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-reverse); }
.sheet-card__dlbtn[disabled] { opacity: 0.45; cursor: progress; pointer-events: none; }

.sheet-card__dlbtn.is-failed,
.mark__tile.is-failed {
  color: var(--warn);
  border-color: var(--warn);
}

.sheet-card--empty { visibility: hidden; }

.choice__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--cell) * 0.33);
}

.choice__option { min-width: 0; }

.choice__frame {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.choice__frame--blank { border: var(--hairline) solid var(--ink-body); background: var(--bg-modal); }
.choice__frame--marked { background: var(--bg-panel); }
.choice__frame img { width: 100%; height: 100%; display: block; }

.choice__frame--marked .pens { width: 78%; height: auto; display: block; }

.choice__caption {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-body);
  text-align: center;
  margin-top: calc(var(--cell) * 0.16);
}

.choice__commit {
  display: flex;
  
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--cell) * 0.14);
  margin: calc(var(--cell) * 0.5) 0 calc(var(--cell) * 0.44);
}

@media (max-width: 620px) {
  .choice__commit { flex-direction: column; align-items: center; }
}

.choice__commit .btn { min-width: clamp(150px, calc(var(--cell) * 1.52), 168px); }

.btn--mark {
  background: var(--ink-body);
  color: #fff;
  border-color: var(--ink-body);
}
.btn--mark:hover { background: var(--accent); border-color: var(--accent); }

.choice__warning {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--warn);
  text-align: center;
  margin-top: calc(var(--cell) * -0.30);
  margin-bottom: calc(var(--cell) * 0.42);
  text-transform: uppercase;
}

.choice__examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: calc(var(--cell) * 0.19);
}
.choice__examples img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  background: var(--bg);
}

@media (max-width: 860px) {
}
@media (max-width: 620px) {
  .panel__body { padding: 22px 18px 28px; }
  .sheets { gap: 20px 14px; }
  .choice__options { gap: 14px; }
  .choice__examples { gap: 10px; }
  .panel__head { font-size: var(--fs-micro); }
}

.sheets__empty {
  margin: calc(var(--cell) * 0.10) 0 calc(var(--cell) * 0.34);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}
.sheets__empty[hidden] { display: none; }
.sheets__empty .link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}