.kl-v5-table {
  --tb-pad: 14px;
  margin: calc(-1 * var(--tb-pad)); padding: var(--tb-pad); width: auto; min-width: 0; min-height: 0; aspect-ratio: auto;
  --row-gap: 14px; --pad-th: 3px;
  --thw: 48px; --s3b-tick: 24px; --s3b-g: 8px;
  --s3b-cols: var(--thw) minmax(0, 1fr) var(--s3b-tick);
  --s3b-fixed: calc(var(--thw) + var(--s3b-tick) + 2 * var(--row-gap));
  --kl-toggle-ink: var(--light);
  --kl-ring: var(--yellow);
  color: var(--fg, var(--light));
}
.kl-v5-table p { margin: 0; }
.kl-v5-table .kl-camera { position: relative; inset: auto; line-height: normal; }
.kl-v5-table [data-m]:not(svg *) { transform: translate(0px, 0px); }

.kl-v5-table .s3b-film-top { display: flex; align-items: center; height: 44px; }
.kl-v5-table .s3b-table { position: relative; }
.kl-v5-table .s3b-grp { position: relative; isolation: isolate; margin-top: 12px; }

.kl-v5-table .s3b-wash {
  position: absolute; z-index: -1; top: 0; bottom: 0;
  right: calc(var(--s3b-tick) + var(--row-gap) - 6px);
  width: calc((100% - var(--s3b-fixed) - 3 * var(--s3b-g)) / 4 + 12px);
  background: rgba(167, 244, 255, .09); border-radius: 3px;
}

.kl-v5-table .s3b-head { display: grid; grid-template-columns: var(--s3b-cols); column-gap: var(--row-gap); align-items: end; }
.kl-v5-table .s3b-names { grid-column: 2; text-align: right; }
.kl-v5-table .s3b-names > .k-label:not(:last-child) { display: none; }
.kl-v5-table .s3b-ask { display: inline-block; padding: 1px 8px; margin: -1px -8px; }

.kl-v5-table .s3b-row { --cols: var(--s3b-cols); --row-py: 10px; }
.kl-v5-table .s3b-row--you { --row-py: 13px; }
.kl-v5-table .s3b-name { display: block; }
.kl-v5-table .s3b-img--b3 { object-position: 50% 62%; }

.kl-v5-table .s3b-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3b-g); margin-top: 8px; }
.kl-v5-table .s3b-p { position: relative; display: block; height: 20px; border-radius: 3px; background: var(--tone); }
.kl-v5-table .s3b-cv { position: absolute; inset: 0; display: block; border-radius: inherit; background: #52686a; opacity: 0; }

.kl-v5-table .s3b-p--slot { background: transparent; }
.kl-v5-table .s3b-hair, .kl-v5-table .s3b-dash { position: absolute; inset: 0; display: block; border-radius: inherit; }
.kl-v5-table .s3b-hair { border: 1px solid rgba(246, 246, 246, .5); opacity: 0; }
.kl-v5-table .s3b-dash { border: 2px dashed var(--yellow); }
.kl-v5-table .s3b-yours { position: relative; }

.kl-v5-table .s3b-tk { display: block; width: var(--s3b-tick); height: var(--s3b-tick); }
.kl-v5-table .s3b-tk svg { display: block; width: 100%; height: 100%; }

.kl-v5-table .s3b-band { margin-top: 28px; }
.kl-v5-table .s3b-tilt { display: block; width: max-content; max-width: 100%; }
.kl-v5-table .s3b-sticker { display: block; margin: 0; max-width: 100%; }

.kl-v5-table .kl-toggle {
  top: var(--tb-pad); right: var(--tb-pad); bottom: auto; left: auto; width: 44px; height: 44px;
  border: 1.5px solid currentColor; border-radius: 50%; color: var(--kl-toggle-ink); transition: transform 120ms cubic-bezier(.22, 1, .36, 1);
}
.kl-v5-table .kl-toggle::before { inset: 0; background: transparent; box-shadow: none; transition: none; }
.kl-v5-table .kl-toggle::after { width: 18px; height: 18px; }
.kl-v5-table .kl-toggle:active { transform: translateY(2px); }
.kl-v5-table .kl-toggle:focus-visible { outline: 3px solid var(--kl-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .kl-v5-table:not(:where(:root[data-wheel] *)) .kl-toggle:hover::before { background: color-mix(in srgb, currentColor 16%, transparent); }
}

@media (min-width: 768px) {
  .kl-v5-table .s3b-table, .kl-v5-table .s3b-film-top, .kl-v5-table .s3b-band { max-width: 560px; }
  .kl-v5-table .kl-toggle { left: calc(var(--tb-pad) + 560px - 44px); right: auto; }
}

@media (min-width: 1180px) {
  .kl-v5-table {
    --row-gap: 20px; --pad-th: 4px;
    --thw: 72px; --s3b-tick: 28px; --s3b-g: 10px;
    --s3b-cols: 104px var(--thw) minmax(0, 1fr) var(--s3b-tick);
    --s3b-fixed: calc(104px + var(--thw) + var(--s3b-tick) + 3 * var(--row-gap));
  }
  .kl-v5-table .s3b-table, .kl-v5-table .s3b-film-top, .kl-v5-table .s3b-band { max-width: none; }
  .kl-v5-table .kl-toggle { left: auto; right: var(--tb-pad); }
  .kl-v5-table .s3b-film-top { position: absolute; left: 0; top: 0; z-index: 2; }
  .kl-v5-table .s3b-grp { margin-top: 0; }
  .kl-v5-table .s3b-head { align-items: center; min-height: 44px; }
  .kl-v5-table .s3b-names { grid-column: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3b-g); text-align: left; }
  .kl-v5-table .s3b-names > .k-label:not(:last-child) { display: block; }
  .kl-v5-table .s3b-names > .k-label { white-space: nowrap; }
  .kl-v5-table .s3b-ask { padding: 5px 8px; margin: -5px -8px; }
  .kl-v5-table .s3b-row { --row-py: 8px; }
  .kl-v5-table .s3b-row--you { --row-py: 10px; }
  .kl-v5-table .k-row-tx { display: contents; }
  .kl-v5-table .s3b-name { grid-column: 1; grid-row: 1; }
  .kl-v5-table .k-row-th { grid-column: 2; grid-row: 1; }
  .kl-v5-table .s3b-bar { grid-column: 3; grid-row: 1; margin-top: 0; }
  .kl-v5-table .s3b-tk { grid-column: 4; grid-row: 1; }
  .kl-v5-table .s3b-p { height: 30px; border-radius: 4px; }
  .kl-v5-table .s3b-band { display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 2px; }
  .kl-v5-table .s3b-tilt { max-width: 420px; margin-right: calc(var(--s3b-tick) + var(--row-gap)); }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .kl-v5-table .s3b-names > .k-label { letter-spacing: clamp(0px, calc((100vw - 1180px) * .0128), .08em); }
  .kl-v5-table .s3b-ask { padding: 5px 0; margin: -5px 0; }
}