.kit { --kit-c: var(--step); --kit-e: var(--ink-soft); min-width: 0; margin: 1.6em 0; }
:is(h2, h3, h4) + .kit { margin-top: 0; }






.kit-t--step { --kit-c: var(--step); --kit-e: var(--ink-soft); }
.kit-t--piece-i { --kit-c: var(--piece-i); --kit-e: var(--work-ink); }
.kit-t--piece-o { --kit-c: var(--piece-o); --kit-e: var(--number-ink); }

.kit-t--piece-s { --kit-c: var(--piece-s); --kit-e: var(--understood-ink); }
.kit-t--piece-z { --kit-c: var(--piece-z); --kit-e: var(--lesson-ink); }
.kit-t--piece-j { --kit-c: var(--piece-j); --kit-e: var(--found-ink); }
.kit-t--piece-l { --kit-c: var(--piece-l); --kit-e: var(--ink-soft); }
:is(.field, .kit--field, .kit-well) [class*="kit-t--"], .kit-well[class*="kit-t--"] { --kit-e: var(--kit-c); }

.kit-take { max-width: var(--measure); margin: 0 0 12px; font-weight: 700; line-height: 1.45; }
.kit-src, .kit-legend, .kit-axis { color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
:is(.field, .kit--field) :is(.kit-src, .kit-legend, .kit-axis) { color: var(--bone-soft); }
.kit-src { margin-top: 10px; }
.kit-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.kit-key { display: inline-flex; align-items: center; gap: 7px; }

.kit-b { display: inline-block; flex: none; box-sizing: border-box; width: 36px; height: 36px; border: 2px solid var(--kit-e); border-radius: 2px; background: var(--kit-c); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18), inset 3px 3px 0 rgba(255, 255, 255, .28); }
.kit-b--outline, .kit-b--dotted { background: transparent; box-shadow: none; }
.kit-b--dotted { border-style: dotted; }

.kit-key .kit-b, .kit-data .kit-b { width: 14px; height: 14px; box-shadow: none; }
.kit-data .kit-b { margin-right: 8px; vertical-align: -1px; }

.kit-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kit-blocks a { display: block; width: 100%; height: 100%; }
.kit-bp { display: flex; align-items: flex-end; }
.kit-bp a { display: flex; align-items: flex-end; }
@media (min-width: 760px) { .kit-blocks > .kit-b { width: 44px; height: 44px; } }
.kit-row--named .kit-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: 6px 12px; }
.kit-row--named .kit-bn { margin-bottom: 10px; }
.kit-row--named .kit-bp { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; align-items: end; justify-items: start; }
.kit-row--named .kit-bn { align-self: start; }
.kit-bn { display: grid; gap: 1px; font-size: .84rem; line-height: 1.3; }
.kit-bn b { font-weight: 700; }
.kit-bn span { color: var(--ink-soft); }
:is(.field, .kit--field) .kit-bn span { color: var(--bone-soft); }

.kit-piece { --kit-cell: 12px; display: block; width: calc(var(--w) * var(--kit-cell)); height: calc(var(--h) * var(--kit-cell)); overflow: visible; }
.kit-piece rect { fill: var(--kit-c); stroke: var(--kit-e); stroke-width: 1.4; }
.kit-piece--outline rect, .kit-piece--dotted rect { fill: none; }
.kit-piece--dotted rect { stroke-dasharray: 2 1.6; }
@media (min-width: 760px) { .kit-piece { --kit-cell: 15px; } }











:is(.field, .kit--field) .kit-share-n span { color: var(--bone-soft); }






:is(.field, .kit--field) .kit-share-ends span + span { color: var(--bone-soft); }






















.kit-data { margin-top: 12px; overflow-x: auto; }
.kit-data.visually-hidden, .tx .kit-data.visually-hidden { overflow: clip; }
.kit-data:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.kit-data table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.4; }
.kit-data :is(th, td) { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: top; }
.kit-data thead th { color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.kit-data tbody th { font-weight: 700; }
.kit-data :is(th, td) time { white-space: nowrap; }
.kit-data tbody th { min-width: 7em; } .kit-data tbody td { min-width: 6em; } 
.kit-data :is(th, td) { text-wrap: pretty; }

@media (max-width: 559px) {
  .kit-data--days thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kit-data--days tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--paper-line); }
  :is(.field, .kit--field) .kit-data--days tbody tr { border-color: var(--field-line); }
  .kit-data--days tbody :is(th, td) { padding: 0; border: 0; }
  .kit-data--days .kd-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .kit-data--days tbody tr:has(.kd-val + .kd-val) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kit-data--days .kd-unit { display: inline; font-weight: 400; color: var(--ink-soft); }
  .kit-data--days .kd-wide { grid-column: 1 / -1; }
  .kit-data--days .kd-mark { color: var(--ink-soft); font-size: .85rem; }
}
:is(.field, .kit--field) .kit-data :is(th, td) { border-color: var(--field-line); }
:is(.field, .kit--field) .kit-data thead th { color: var(--bone-soft); }






.kit-pair-phone { display: block; overflow: hidden; border: 6px solid var(--field); border-radius: 22px; background: var(--field); }
.kit-pair-phone img { width: 100%; height: auto; }



:is(.field, .kit--field) .kit-pair-date { color: var(--bone-soft); }



:is(.field, .kit--field) .kit-stamp--solid { color: var(--bone); }



















.site-age { font-size: .86em; font-weight: 500; white-space: nowrap; }

.kit-row--shapes .kit-src:not(#_m) { max-width: none; }
.cs-note:not(#_m), .wc-take:not(#_m), .kit-strip .kit-src:not(#_m) { max-width: none; }









:is(.field, .kit--field) .miss-row-say, .miss-row.kit--field .miss-row-say { color: var(--bone-soft); }
:is(.field, .kit--field) .miss-row-say strong, .miss-row.kit--field .miss-row-say strong { color: var(--bone); }