:root {
  --mono:
    "Departure Mono",
    ui-monospace,
    monospace;
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 40px 56px;
  min-height: calc(100svh - 28px);
  margin: 14px;
  padding: 44px 0 0 48px;
  border: 1px solid color-mix(in srgb, var(--ink-2) 70%, var(--paper));
}
html[data-lab-pill] .sheet {
  margin-bottom: 62px;
  min-height: calc(100svh - 76px);
}
.notes {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 24px;
}
.notes-h {
  display: inline-block;
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink-2);
  color: var(--ink);
  line-height: 0;
}
.list {
  display: grid;
  gap: 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.note {
  display: grid;
  grid-template-columns: 30px 92px minmax(0, 1fr);
  align-items: baseline;
  color: var(--ink);
}
.note .n {
  color: var(--ink-2);
}
.note .k,
.face .bytes,
.face .lic {
  font: 9px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.note .v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 9px;
  min-height: 13px;
}
.seg {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.seg .sep {
  margin: 0 8px;
}
.seg .lettering {
  margin-bottom: -1px;
}
.faces {
  grid-column: 3;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  gap: 11px 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.face {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  color: var(--ink-2);
}
.face .bytes {
  text-align: right;
}
.face .ack {
  grid-column: 1 / -1;
  width: 0;
  min-width: 100%;
  margin-top: 3px;
  font: 9px/1.55 var(--mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.specimen {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  position: relative;
  margin: 0 48px 0 0;
  padding-bottom: 34px;
}
.specimen .box {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  margin-left: auto;
  color: var(--figure);
}
.specimen .draw {
  position: absolute;
  inset: 0;
}
.specimen .fig-no {
  position: absolute;
  right: 0;
  bottom: -8px;
  display: flex;
  gap: 0.9em;
  color: var(--ink-2);
}
.block {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  margin: 0 -1px -1px 0;
  line-height: 0;
}
.weigh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 899px) {
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 36px;
    padding: calc(env(safe-area-inset-top) + 28px) 0 0 20px;
    margin: 10px;
    min-height: calc(100svh - 20px);
  }
  .specimen {
    grid-column: 1;
    grid-row: 2;
    margin-right: 20px;
  }
  .specimen .box {
    max-width: none;
  }
  .notes {
    grid-row: 1;
    padding-right: 20px;
  }
  .note {
    grid-template-columns: 24px 80px minmax(0, 1fr);
  }
  .faces {
    grid-column: 2 / -1;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px 16px;
  }
  .face .lic {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 6px;
  }
  .face .ack {
    grid-row: 3;
  }
  .block {
    grid-row: 4;
  }
}