.k-ground {
  font-family: var(--cv-font);
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  color: var(--cv-ink);
  -webkit-font-smoothing: none;
  text-shadow: var(--cv-smear);
}
 
.k-btn:hover,
.k-btn.is-on,
.k-btn.k-solid,
.k-btn:active,
.k-hw:active,
.k-hw.is-down,
.k-hw.is-hot,
.k-rk:active,
.k-rk.is-down,
.k-rk[aria-checked='true'],
.k-rk[aria-current],
.k-dock .is-on,
.k-flap {
  text-shadow: none;
}
 
.k-px {
  display: block;
  image-rendering: pixelated;
}

 
.k-lbl {
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
}
.k-ctl {
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
}


.k-meta {
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  color: var(--cv-mute);
  text-shadow: none;
}





.k-chip {
  display: inline-block;
  padding: 0 var(--cv-sp-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.k-chip.is-on {
  background: var(--cv-ink);
  color: var(--cv-bright);
  text-shadow: none;
}






.k-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k-tag {
  display: inline-block;
  padding: 0 var(--cv-sp-2);
  border: var(--cv-px) solid var(--cv-line);
  background: var(--cv-surface);
  color: var(--cv-ink);
  font-family: var(--cv-font-code);
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  text-shadow: none;
  white-space: nowrap;
}

 
.k-btn,
.k-hw,
.k-rk,
.k-part,
.k-check,
.k-key,
.k-cell,
.k-cardtab,
.k-tab,
.k-switch {
  font: inherit;
  color: inherit;
  cursor: inherit;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


.k-btn:focus-visible,
.k-hw:focus-visible,
.k-rk:focus-visible,
.k-part:focus-visible,
.k-check:focus-visible,
.k-key:focus-visible,
.k-cell:focus-visible,
.k-cardtab:focus-visible,
.k-switch:focus-visible,
.k-field:focus-within {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: var(--cv-px);
}
 
.k-btn:disabled,
.k-hw:disabled,
.k-rk:disabled,
.k-part:disabled,
.k-check:disabled,
.k-key:disabled {
  color: var(--cv-mute);
  text-shadow: none;
  pointer-events: none;
}
.k-part:disabled .k-px,
.k-hw:disabled,
.k-rk:disabled,
.k-key:disabled {
  filter: grayscale(1) contrast(0.6);
}



.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--cv-px));
  min-height: var(--cv-ctrl-h);
  min-width: var(--cv-ctrl-h);
  padding: 0 calc(4 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  color: var(--cv-ink);
  text-decoration: none;
}
.k-btn:hover,
.k-btn.is-on {
  background: var(--cv-ink);
  color: var(--cv-bright);
}
.k-btn:active {
  background: var(--cv-brick);
  border-color: var(--cv-brick);
  color: var(--cv-bright);
}
.k-btn.k-solid {
  background: var(--cv-ink);
  color: var(--cv-bright);
}
.k-btn.k-solid:hover {
  background: var(--cv-brick);
  border-color: var(--cv-brick);
}
.k-btn:disabled {
  border-color: var(--cv-mute);
  background: transparent;
}


.k-btn[hidden] {
  display: none;
}
 
.k-btn.k-ico {
  width: var(--cv-ctrl-h);
  padding: 0;
}



.k-hw {
  width: calc(36 * var(--cv-px));
  height: calc(18 * var(--cv-px));
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
  background: var(--kp-btn-up) 0 0 / 100% 100%;
  image-rendering: pixelated;
  color: var(--cv-ink);
}
.k-hw:hover {
  color: var(--cv-deep);
}
.k-hw:active,
.k-hw.is-down {
  background-image: var(--kp-btn-down);
  color: var(--cv-bright);
  padding-top: var(--cv-px);
}
.k-hw.is-hot {
  background-image: var(--kp-btn-hot);
  color: var(--cv-bright);
  padding-top: var(--cv-px);
}



.k-rk {
  width: calc(14 * var(--cv-px));
  height: calc(16 * var(--cv-px));
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
  background: var(--kp-rbtn-up) 0 0 / 100% 100%;
  image-rendering: pixelated;
  color: var(--cv-ink);
}
.k-rk:hover {
  color: var(--cv-deep);
}
.k-rk:active,
.k-rk.is-down,
.k-rk[aria-checked='true'],
.k-rk[aria-current] {
  background-image: var(--kp-rbtn-down);
  color: var(--cv-bright);
  padding-top: var(--cv-px);
}
.k-radio {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--cv-px);
}



.k-rk:has(> input[type='radio']) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.k-rk > input[type='radio'] {
  position: absolute;
   
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.k-rk:has(> input:checked) {
  background-image: var(--kp-rbtn-down);
  color: var(--cv-bright);
  padding-top: var(--cv-px);
}
.k-rk.k-wide:has(> input:checked) {
  background-image: var(--kp-rbtnw-down);
}
.k-rk:has(> input:focus-visible) {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: var(--cv-px);
}
 
.k-choose {
  display: grid;
  gap: var(--cv-sp-2);
  justify-items: start;
}


.k-rk.k-wide {
  width: calc(22 * var(--cv-px));
  height: calc(12 * var(--cv-px));
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  white-space: nowrap;
  background-image: var(--kp-rbtnw-up);
}
.k-rk.k-wide:active,
.k-rk.k-wide.is-down,
.k-rk.k-wide[aria-checked='true'],
.k-rk.k-wide[aria-current] {
  background-image: var(--kp-rbtnw-down);
}




.k-part {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.k-part::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cv-ctrl-h) * var(--cv-world-k, 1));
  height: calc(var(--cv-ctrl-h) * var(--cv-world-k, 1));
  transform: translate(-50%, -50%);
}





.k-part:hover .k-px,
.k-part:active .k-px {
  filter: brightness(1.08);
}
 
.k-knob .k-px {
  width: calc(22 * var(--cv-px));
  height: calc(22 * var(--cv-px));
}
.k-toggle .k-px {
  width: calc(18 * var(--cv-px));
  height: calc(30 * var(--cv-px));
}
.k-lamp {
  width: calc(8 * var(--cv-px));
  height: calc(8 * var(--cv-px));
}
.k-pin .k-px {
  width: calc(16 * var(--cv-px));
  height: calc(16 * var(--cv-px));
}
 
.k-key {
  width: calc(14 * var(--cv-px));
  height: calc(14 * var(--cv-px));
  padding-bottom: var(--cv-px);
  background: var(--kp-key-up) 0 0 / 100% 100%;
  image-rendering: pixelated;
  color: var(--cv-ink);
}
.k-key:hover {
  color: var(--cv-deep);
}
.k-key:active,
.k-key.is-down {
  background-image: var(--kp-key-down);
  padding-bottom: 0;
}



.k-piano {
  position: relative;
  display: inline-flex;
  height: calc(44 * var(--cv-px));
}
.k-piano .k-white .k-px {
  width: calc(22 * var(--cv-px));
  height: calc(44 * var(--cv-px));
}
.k-piano .k-black {
  position: absolute;
  top: 0;
  z-index: var(--cv-z-over);
}
.k-piano .k-black .k-px {
  width: calc(12 * var(--cv-px));
  height: calc(28 * var(--cv-px));
}




.k-fader {
  position: relative;
  display: block;
  width: calc(64 * var(--cv-px));
  height: var(--cv-ctrl-h);
  cursor: inherit;
}
.k-fader::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--cv-px);
  margin-top: calc(-0.5 * var(--cv-px));
  background: var(--cv-ink);
}
.k-fader .k-tick {
  position: absolute;
  bottom: 0;
  width: var(--cv-px);
  height: calc(2 * var(--cv-px));
  background: var(--cv-mute);
}
.k-fader .k-cap {
  position: absolute;
  top: 50%;
  width: calc(8 * var(--cv-px));
  height: calc(12 * var(--cv-px));
  margin: calc(-6 * var(--cv-px)) 0 0 calc(-4 * var(--cv-px));
  pointer-events: none;
}
.k-fader:focus-visible {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: var(--cv-px);
}




.k-fader.k-vert {
  width: calc(8 * var(--cv-px));
  height: calc(44 * var(--cv-px));
}
.k-fader.k-vert::before {
  left: 50%;
  right: auto;
  top: calc(6 * var(--cv-px));
  bottom: calc(6 * var(--cv-px));
  width: var(--cv-px);
  height: auto;
  margin: 0 0 0 calc(-0.5 * var(--cv-px));
}
.k-fader.k-vert .k-tick,
.k-fader.k-vert .k-cap {
  top: calc(6 * var(--cv-px) + (100% - 12 * var(--cv-px)) * (1 - var(--k-at, 0)));
}
.k-fader.k-vert .k-tick {
  left: auto;
  right: 0;
  bottom: auto;
  width: calc(2 * var(--cv-px));
  height: var(--cv-px);
  margin-top: calc(-0.5 * var(--cv-px));
}
.k-fader.k-vert .k-cap {
  left: 50%;
}



.k-check {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--cv-px));
  min-height: var(--cv-ctrl-h);
  text-align: left;
}
.k-check .k-box {
  width: calc(6 * var(--cv-px));
  height: calc(6 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.k-check[aria-checked='true'] .k-box::after {
  content: '';
  width: calc(2 * var(--cv-px));
  height: calc(2 * var(--cv-px));
  background: var(--cv-ink);
}
.k-check:hover .k-box {
  background: var(--cv-bright);
}
.k-check:disabled .k-box {
  border-color: var(--cv-mute);
}












.k-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--cv-px));
  min-height: var(--cv-ctrl-h);
  text-align: left;
}
.k-switch .k-lever {
  flex-shrink: 0;
  width: calc(6 * var(--cv-px));
  height: calc(10 * var(--cv-px));
  background: var(--kp-flip-off) 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.k-switch[aria-checked='true'] .k-lever,
.k-switch > input:checked + .k-lever {
  background-image: var(--kp-flip-on);
}
.k-switch > input[type='checkbox'] {
  position: absolute;
   
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.k-switch:hover {
  color: var(--cv-deep);
}
.k-switch:has(> input:focus-visible) {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: var(--cv-px);
}
.k-switch:has(> input:disabled),
.k-switch:disabled {
  color: var(--cv-mute);
}






.k-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cv-ctrl-h);
  border-bottom: var(--cv-px) solid var(--cv-ink);
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
}
.k-field input {
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  min-width: 0;
  flex: 1;
  


  align-self: stretch;
  

  padding-right: calc(4 * var(--cv-px) + var(--cv-sp-hair));
  caret-color: var(--cv-ink);
}
.k-field.k-sm input {
  padding-right: calc(2 * var(--cv-px) + var(--cv-sp-hair));
}
.k-field.k-tracked input {
  caret-color: transparent;
}




.k-field .k-caret {
  position: absolute;
  left: 0;
  top: 50%;
  translate: calc(var(--k-caret-x, 0px) + var(--cv-sp-hair)) -50%;
  width: calc(4 * var(--cv-px));
  height: calc(8 * var(--cv-px));
  background: var(--cv-ink);
  pointer-events: none;
  visibility: hidden;
}



.k-field.k-tracked[data-caret='bar'] .k-caret {
  translate: max(0px, calc(var(--k-caret-x, 0px) - var(--cv-px))) -50%;
  width: var(--cv-px);
}
.k-field.k-tracked:focus-within:not([data-caret='none']) .k-caret {
  visibility: visible;
  animation: k-blink calc(2 * var(--cv-dur-drift)) var(--cv-ease-step) infinite;
}
@keyframes k-blink {
  50% {
    visibility: hidden;
  }
}


.k-field.k-sm {
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  box-sizing: border-box;
  height: var(--cv-ctrl-h);
}
.k-field.k-sm .k-caret {
  width: calc(2 * var(--cv-px));
  height: calc(4 * var(--cv-px));
}





.k-field.k-boxed {
  border: var(--cv-px) solid var(--cv-ink);
}




.k-rb {
  border-bottom: var(--cv-px) solid var(--cv-ink);
}
.k-rt {
  border-top: var(--cv-px) solid var(--cv-ink);
}
.k-rl {
  border-left: var(--cv-px) solid var(--cv-ink);
}
.k-panel {
  display: flex;
  border: var(--cv-px) solid var(--cv-ink);
}
.k-panel > .k-sec {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--cv-px));
  padding: calc(4 * var(--cv-px));
  border-right: var(--cv-px) solid var(--cv-ink);
}
.k-panel > .k-sec:last-child {
  border-right: 0;
}
.k-sec > .k-meta {
  order: 1;
}





 
.k-scope {
  display: grid;
  grid-template-columns: repeat(var(--k-cols, 32), var(--k-cell, calc(2 * var(--cv-px))));
  grid-auto-rows: var(--k-cell, calc(2 * var(--cv-px)));
  border: var(--cv-px) solid var(--cv-ink);
  background-color: var(--cv-bright);
  


  background-image: conic-gradient(
    at calc(var(--cv-px) / 2) calc(var(--cv-px) / 2),
    transparent 0 270deg,
    var(--cv-mid) 0
  );
  background-size: calc(2 * var(--cv-px)) calc(2 * var(--cv-px));
  background-position: calc(3 * var(--cv-px) / 4) calc(3 * var(--cv-px) / 4);
}
.k-cell {
  width: var(--k-cell, calc(2 * var(--cv-px)));
  height: var(--k-cell, calc(2 * var(--cv-px)));
}
.k-cell.is-ink {
  background: var(--cv-ink);
}
.k-cell.is-live {
  background: var(--cv-brick);
}




.k-scope.k-plain {
  background-image: none;
}










.k-cardtabs {
  position: relative;
  z-index: var(--cv-z-over);
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--cv-px));
  padding-left: calc(6 * var(--cv-px));
}
.k-cardtab {
  height: var(--cv-ctrl-h);
  padding: 0 calc(5 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  border-bottom: 0;
  background: var(--cv-ground);
  color: var(--cv-mute);
  text-shadow: none;
  white-space: nowrap;
}
.k-cardtab:hover {
  color: var(--cv-ink);
}
.k-cardtab[aria-selected='true'] {
  height: calc(var(--cv-ctrl-h) + var(--cv-px));
  margin-bottom: calc(-1 * var(--cv-px));
  color: var(--cv-ink);
   
  text-shadow: inherit;
}














.k-tab {
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--cv-ctrl-h);
  margin-bottom: var(--cv-px);
  padding: 0 calc(2 * var(--cv-px)) 0 calc(4 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  border-bottom: 0;
  background: var(--cv-ground);
  color: var(--cv-mute);
  text-shadow: none;
  white-space: nowrap;
}
.k-tab:hover {
  color: var(--cv-ink);
}
.k-tab.is-on {
  height: calc(var(--cv-ctrl-h) + var(--cv-px));
  margin-bottom: 0;
  background: var(--k-tab-ground, var(--cv-ground));
  color: var(--cv-ink);
   
  text-shadow: inherit;
}
.k-tab > .k-tab-go {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  

  display: block;
  line-height: var(--cv-ctrl-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}


.k-tab > .k-tab-go:focus-visible {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: calc(-1 * var(--cv-px));
}
.k-card {
  border: var(--cv-px) solid var(--cv-ink);
  background: var(--cv-ground);
}




.k-strip {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.k-strip > .k-sec {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--cv-px));
  padding: calc(4 * var(--cv-px));
  margin: calc(-1 * var(--cv-px)) 0 0 calc(-1 * var(--cv-px));
  border-left: var(--cv-px) solid var(--cv-ink);
  border-top: var(--cv-px) solid var(--cv-ink);
}

 
.k-dock {
  display: inline-flex;
  border: var(--cv-px) solid var(--cv-ink);
  background: var(--cv-ground);
}
.k-dock .k-btn {
  border: 0;
  border-right: var(--cv-px) solid var(--cv-ink);
}
.k-dock .k-btn:last-child {
  border-right: 0;
}






.k-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(28 * var(--cv-px)));
  justify-content: center;
  width: 100%;
  padding: 0 var(--cv-px) var(--cv-px) 0;
}
.k-bank .k-btn {
  margin: 0 calc(-1 * var(--cv-px)) calc(-1 * var(--cv-px)) 0;
  white-space: nowrap;
}














.k-scroll {
  --k-n: 1;
  --k-at: 0;
  display: inline-flex;
  align-items: stretch;
  height: var(--k-step, var(--cv-ctrl-h));
  border: var(--cv-px) solid var(--cv-ink);
  box-sizing: border-box;
  vertical-align: middle;
}
.k-scroll > .k-step {
  position: relative;
  flex: none;
  width: var(--k-step, var(--cv-ctrl-h));
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
}
.k-scroll > .k-prev {
  border-right: var(--cv-px) solid var(--cv-ink);
}
.k-scroll > .k-next {
  border-left: var(--cv-px) solid var(--cv-ink);
}
 
.k-scroll > .k-step svg {
  display: block;
  width: calc(11 * var(--cv-px) / 2);
  height: calc(11 * var(--cv-px) / 2);
  fill: currentColor;
}





.k-scroll > .k-step::after {
  content: '';
  position: absolute;
  top: 50%;
  width: max(100%, calc(var(--cv-ctrl-h) * var(--cv-world-k, 1)));
  height: max(100%, calc(var(--cv-ctrl-h) * var(--cv-world-k, 1)));
  transform: translateY(-50%);
}
.k-scroll > .k-prev::after {
  right: 0;
}
.k-scroll > .k-next::after {
  left: 0;
}
.k-scroll.k-vert > .k-step::after {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}
.k-scroll.k-vert > .k-prev::after {
  right: auto;
  bottom: 0;
}
.k-scroll.k-vert > .k-next::after {
  left: 50%;
  top: 0;
}
.k-scroll > .k-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  

  touch-action: none;
}
 
.k-scroll > .k-track:focus-visible {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: calc(-1 * var(--cv-px));
}
.k-scroll .k-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--k-at) * 100% / var(--k-n));
  width: max(calc(100% / var(--k-n)), calc(2 * var(--cv-px)));
  background: var(--cv-ink);
}
.k-scroll > .k-track:hover .k-thumb {
  background: var(--cv-deep);
}
.k-scroll.is-drag .k-thumb,
.k-scroll > .k-track:active .k-thumb {
  background: var(--cv-brick);
}
 
.k-scroll.k-vert {
  flex-direction: column;
  width: var(--k-step, var(--cv-ctrl-h));
  height: auto;
}
.k-scroll.k-vert > .k-step {
  width: 100%;
  height: var(--k-step, var(--cv-ctrl-h));
}
.k-scroll.k-vert > .k-prev {
  border-right: 0;
  border-bottom: var(--cv-px) solid var(--cv-ink);
}
.k-scroll.k-vert > .k-next {
  border-left: 0;
  border-top: var(--cv-px) solid var(--cv-ink);
}
.k-scroll.k-vert .k-thumb {
  left: 0;
  right: 0;
  width: auto;
  top: calc(var(--k-at) * 100% / var(--k-n));
  height: max(calc(100% / var(--k-n)), calc(2 * var(--cv-px)));
}





.k-flaps {
  display: inline-flex;
  gap: var(--cv-px);
}
.k-flap {
  --k-rows: 20;
  position: relative;
  width: calc(12 * var(--cv-px));
  height: calc(var(--k-rows) * var(--cv-px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cv-ink);
  color: var(--cv-bright);
  font-size: var(--cv-fs-6);
  line-height: calc(var(--k-rows) * var(--cv-px));
}
.k-flap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--cv-px);
  background: var(--cv-ground);
}



.k-flaps.k-sm .k-flap {
  --k-rows: 6;
  width: calc(4 * var(--cv-px));
  font-size: var(--cv-fs-0);
}
.k-flaps.k-sm .k-flap::after {
  height: calc(var(--cv-px) / 2);
  margin-top: calc(var(--cv-px) / -4);
}

















.k-select::after,
.k-date::after,
.k-disc > summary::after {
  content: '';
  flex-shrink: 0;
  width: calc(6 * var(--cv-px));
  height: calc(3 * var(--cv-px));
  background: var(--cv-ink);
  clip-path: polygon(
    0 0,
    16.667% 0,
    16.667% 33.333%,
    33.333% 33.333%,
    33.333% 66.667%,
    66.667% 66.667%,
    66.667% 33.333%,
    83.333% 33.333%,
    83.333% 0,
    100% 0,
    100% 33.333%,
    83.333% 33.333%,
    83.333% 66.667%,
    66.667% 66.667%,
    66.667% 100%,
    33.333% 100%,
    33.333% 66.667%,
    16.667% 66.667%,
    16.667% 33.333%,
    0 33.333%
  );
  pointer-events: none;
}





.k-select {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cv-ctrl-h);
  border-bottom: var(--cv-px) solid var(--cv-ink);
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
}
.k-select select {
  appearance: none;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 calc(8 * var(--cv-px)) 0 0;
  min-width: 0;
  width: 100%;
  min-height: var(--cv-ctrl-h);
  outline: 0;
  cursor: inherit;
}
.k-select select:disabled {
  color: var(--cv-mute);
  text-shadow: none;
}
.k-select::after,
.k-date::after {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: calc(-1.5 * var(--cv-px));
}
.k-select:focus-within,
.k-date:focus-within,
.k-textarea:focus-within,
.k-file:focus-within,
.k-check:focus-within,
.k-range:focus-visible,
.k-swatch:focus-visible {
  outline: var(--cv-px) solid var(--cv-ink);
  outline-offset: var(--cv-px);
}




.k-textarea {
  display: block;
  border: var(--cv-px) solid var(--cv-ink);
}
.k-textarea textarea {
  display: block;
  width: 100%;
  min-height: calc(18 * var(--cv-px));
  font: inherit;
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: calc(2 * var(--cv-px)) calc(3 * var(--cv-px));
  box-sizing: border-box;
  resize: none;
  outline: 0;
}
.k-textarea textarea::placeholder {
  color: var(--cv-mute);
  opacity: 1;
}




.k-date {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cv-ctrl-h);
  border-bottom: var(--cv-px) solid var(--cv-ink);
  font-size: var(--cv-fs-0);
  line-height: calc(6 * var(--cv-px));
}
.k-date input {
  appearance: none;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 calc(8 * var(--cv-px)) 0 0;
  min-width: 0;
  width: 100%;
  min-height: var(--cv-ctrl-h);
  outline: 0;
  cursor: inherit;
}
.k-date input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(8 * var(--cv-px));
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}






.k-file {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(2 * var(--cv-px));
  min-height: calc(24 * var(--cv-px));
  padding: calc(4 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  color: var(--cv-ink);
  text-align: center;
  font-size: var(--cv-fs-3);
  line-height: calc(12 * var(--cv-px));
  cursor: inherit;
}
.k-file input {
  position: absolute;
   
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.k-file:hover,
.k-file:focus-within,
.k-file.is-over {
  background: var(--cv-ink);
  color: var(--cv-bright);
  text-shadow: none;
}




.k-progress {
  appearance: none;
  display: block;
  width: 100%;
  height: calc(4 * var(--cv-px));
  margin: 0;
  border: var(--cv-px) solid var(--cv-ink);
  background: transparent;
  box-sizing: border-box;
}
.k-progress::-webkit-progress-bar {
  background: transparent;
}
 
.k-progress::-webkit-progress-value {
  background: repeating-linear-gradient(
    90deg,
    var(--cv-ink) 0 calc(2 * var(--cv-px)),
    transparent calc(2 * var(--cv-px)) calc(3 * var(--cv-px))
  );
}
 
.k-progress::-moz-progress-bar {
  background: repeating-linear-gradient(
    90deg,
    var(--cv-ink) 0 calc(2 * var(--cv-px)),
    transparent calc(2 * var(--cv-px)) calc(3 * var(--cv-px))
  );
}




.k-disc > summary {
  list-style: none;
  width: fit-content;
}
.k-disc > summary::-webkit-details-marker {
  display: none;
}
.k-disc > summary:hover::after,
.k-disc > summary:active::after {
  background: var(--cv-bright);
}
.k-disc[open] > summary::after {
  transform: scaleY(-1);
}
.k-disc > .k-body {
  padding-top: calc(3 * var(--cv-px));
}




.k-range {
  appearance: none;
  display: block;
  width: 100%;
  height: calc(12 * var(--cv-px));
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: inherit;
}
.k-range::-webkit-slider-runnable-track {
  height: var(--cv-px);
  background: var(--cv-ink);
}
.k-range::-webkit-slider-thumb {
  appearance: none;
  width: calc(8 * var(--cv-px));
  height: calc(12 * var(--cv-px));
  margin-top: calc(-5.5 * var(--cv-px));
  border: 0;
  border-radius: 0;
  background: var(--kp-cap-thin) 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.k-range::-moz-range-track {
  height: var(--cv-px);
  background: var(--cv-ink);
}
.k-range::-moz-range-thumb {
  width: calc(8 * var(--cv-px));
  height: calc(12 * var(--cv-px));
  border: 0;
  border-radius: 0;
  background: var(--kp-cap-thin) 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.k-range:disabled {
  filter: grayscale(1) contrast(0.6);
  pointer-events: none;
}




.k-check {
  position: relative;
}
.k-check > input[type='checkbox'] {
  position: absolute;
   
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.k-check > input:checked + .k-box::after {
  content: '';
  width: calc(2 * var(--cv-px));
  height: calc(2 * var(--cv-px));
  background: var(--cv-ink);
}
.k-check > input:disabled ~ .k-box {
  border-color: var(--cv-mute);
}



.k-swatch {
  appearance: none;
  width: var(--cv-ctrl-h);
  height: var(--cv-ctrl-h);
  margin: 0;
  padding: 0;
  border: var(--cv-px) solid var(--cv-ink);
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  cursor: inherit;
}
.k-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.k-swatch::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}
.k-swatch::-moz-color-swatch {
  border: 0;
  border-radius: 0;
}





.k-btn.is-hot {
  background: var(--cv-brick);
  border-color: var(--cv-brick);
  color: var(--cv-bright);
  text-shadow: none;
}








.k-secs {
  display: grid;
  gap: calc(6 * var(--cv-px));
}
.k-secs > .k-sec {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--cv-px));
  min-width: 0;
  padding-top: calc(4 * var(--cv-px));
  border-top: var(--cv-px) solid var(--cv-ink);
}
.k-secs > .k-sec > .k-ctl {
  margin: 0;
  font-weight: 400;
}

















.k-menu {
  display: flex;
  flex-direction: column;
  border: var(--cv-px) solid var(--cv-ink);
  background: var(--cv-ground);
}
.k-menu > .k-btn {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  text-align: left;
  white-space: nowrap;
}


.k-menu > * + *,
.k-menu > .k-btn + .k-btn {
  border-top: var(--cv-px) solid var(--cv-ink);
}
.k-menu > .k-btn[aria-selected='true'] {
  background: var(--cv-ink);
  color: var(--cv-bright);
  text-shadow: none;
}
.k-menu > .k-btn:hover .k-meta,
.k-menu > .k-btn:active .k-meta,
.k-menu > .k-btn.is-on .k-meta,
.k-menu > .k-btn[aria-selected='true'] .k-meta {
  color: inherit;
}
.k-menu > .k-meta {
  display: flex;
  align-items: center;
  min-height: var(--cv-ctrl-h);
  padding: 0 calc(4 * var(--cv-px));
}
.k-menu.k-up {
  flex-direction: column-reverse;
}
.k-menu.k-up > * + * {
  border-top: 0;
  border-bottom: var(--cv-px) solid var(--cv-ink);
}







.k-sel {
  position: absolute;
  inset: calc(-2 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  pointer-events: none;
}
 
.k-sel::before {
  content: '';
  position: absolute;
  inset: calc(-2 * var(--cv-px));
  background:
    linear-gradient(var(--cv-ink), var(--cv-ink)) 0 0 / calc(3 * var(--cv-px))
      calc(3 * var(--cv-px)) no-repeat,
    linear-gradient(var(--cv-ink), var(--cv-ink)) 100% 0 / calc(3 * var(--cv-px))
      calc(3 * var(--cv-px)) no-repeat,
    linear-gradient(var(--cv-ink), var(--cv-ink)) 0 100% / calc(3 * var(--cv-px))
      calc(3 * var(--cv-px)) no-repeat,
    linear-gradient(var(--cv-ink), var(--cv-ink)) 100% 100% / calc(3 * var(--cv-px))
      calc(3 * var(--cv-px)) no-repeat;
}






.k-load {
  display: block;
  box-sizing: content-box;
  width: calc(32 * var(--cv-px));
  height: calc(2 * var(--cv-px));
  border: var(--cv-px) solid var(--cv-ink);
  overflow: hidden;
}
.k-load::before {
  content: '';
  display: block;
  width: calc(8 * var(--cv-px));
  height: 100%;
  background: var(--cv-ink);
  animation: k-walk var(--cv-dur-drift) var(--cv-ease-step) infinite;
}
@keyframes k-walk {
  to {
    transform: translateX(calc(32 * var(--cv-px)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .k-load::before {
    animation: none;
  }
}











.k-marquee {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-marquee.is-over {
  text-overflow: clip;
}
.k-marquee.is-over .k-mq {
  display: inline-block;
  


  animation: k-marquee var(--cv-dur-marquee) steps(var(--mq-n, 1), end) infinite;
  animation-delay: calc(var(--cv-dur-marquee) * var(--mq-i, 0) / 10);
}
@keyframes k-marquee {
  0%,
  25% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(calc(-1 * var(--mq-d, 0px)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .k-marquee.is-over {
    text-overflow: ellipsis;
  }
  .k-marquee.is-over .k-mq {
    display: inline;
    animation: none;
  }
}