.ctl {
  background:
    radial-gradient(
      120% 60% at 50% -10%,
      rgba(212, 176, 120, .10),
      transparent 60%),
    var(--soot);
  min-height: 60vh;
}
.tl-hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(18px, 3vw, 30px);
}
.tl-hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  max-width: 16ch;
}
.tl-hero .lead {
  max-width: 58ch;
}
.tl-kick {
  font-size: .8125rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 18px;
}
.tl-priv {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: .86rem;
  color: var(--on-dark-3);
  margin: 6px 0 0;
}
.tl-priv span {
  color: var(--glass);
}
.tl-tool {
  padding-bottom: clamp(34px, 5vw, 64px);
}
.tl-note {
  padding-bottom: 56px;
  color: var(--on-dark-3);
  font-size: .86rem;
  max-width: var(--max);
}
.tl-note p {
  max-width: 78ch;
}
.tl-link {
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  color: var(--amber);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .25em;
  font-size: .94rem;
  display: inline-flex;
  align-items: center;
}
.tl-link:hover {
  color: var(--heat);
}
.tl-steps {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  flex-wrap: wrap;
  counter-reset: s;
}
.tl-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark-3);
  font-size: .9rem;
  padding-right: 14px;
}
.tl-steps li span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-d);
  font-size: .82rem;
}
.tl-steps li.on {
  color: var(--heat);
}
.tl-steps li.on span {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--accent-text);
  box-shadow: 0 0 0 6px rgba(212, 176, 120, .14);
}
.tl-steps li.done span {
  border-color: var(--glass-2);
  color: var(--glass);
}
.tl-steps li + li:before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-d);
  margin-right: 4px;
}
.tl-drop {
  position: relative;
  border: 1px dashed rgba(212, 176, 120, .45);
  border-radius: var(--r-l);
  padding: clamp(28px, 5vw, 56px) 22px;
  text-align: center;
  background:
    linear-gradient(
      180deg,
      rgba(42, 27, 18, .55),
      rgba(13, 10, 8, .6));
  transition: border-color .3s, background .3s;
  cursor: default;
}
.tl-drop.over,
.tl-drop:focus-visible {
  border-color: var(--amber);
  background: rgba(212, 176, 120, .08);
}
.tl-drop svg {
  color: var(--amber);
  margin: 0 auto 10px;
  display: block;
}
.tl-drop h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: .35em;
}
.tl-drop p {
  color: var(--on-dark-2);
  max-width: 52ch;
  margin: 0 auto 20px;
}
.tl-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tl-row .btn {
  cursor: pointer;
}
.tl-err {
  color: #ffb4a8;
  margin: 14px 0 0 !important;
}
.tl-sub {
  color: var(--on-dark-3);
  font-size: .9rem;
  margin: 26px 0 12px;
}
.tl-vb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tl-vbk {
  position: relative;
  padding: 0;
  border: 1px solid var(--line-d);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--soot-2);
  cursor: pointer;
  color: var(--heat);
  text-align: left;
  aspect-ratio: 3/2;
}
.tl-vbk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .5s;
  filter: brightness(.82);
}
.tl-vbk span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--serif);
  font-size: 1.15rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.tl-vbk:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}
.tl-vbk:focus-visible {
  outline: 2px solid var(--glass);
  outline-offset: 3px;
}
.tl-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}
.tl-stage {
  position: sticky;
  top: 86px;
}
.tl-canvas {
  position: relative;
  width: 100%;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow), 0 0 0 1px rgba(212, 176, 120, .14);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tl-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tl-ed:not(.hoeken) .tl-canvas {
  cursor: grab;
}
.tl-canvas.drag {
  cursor: grabbing;
}
.tl-hint {
  color: var(--on-dark-3);
  font-size: .84rem;
  margin: 10px 2px 0;
}
.tl-quad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tl-quad polygon {
  fill: rgba(212, 176, 120, .14);
  stroke: var(--amber);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 6;
}
.tl-h {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  z-index: 3;
  padding: 0;
}
.tl-h:before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(212, 176, 120, .28), 0 0 22px 6px rgba(212, 176, 120, .55);
  transition: transform .2s;
}
.tl-h.drag:before,
.tl-h:hover:before {
  transform: scale(1.25);
}
.tl-h:focus-visible {
  outline: 2px solid var(--glass);
  outline-offset: 2px;
}
.tl-split {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  margin-left: -22px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.tl-split:before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--heat);
  box-shadow: 0 0 14px rgba(255, 239, 210, .7);
}
.tl-split span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--heat);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.tl-split span:before {
  content: "‹ ›";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soot);
  font-size: 1rem;
  letter-spacing: 4px;
}
.tl-tag {
  position: absolute;
  top: 12px;
  padding: 4px 10px;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(13, 10, 8, .72);
  color: var(--heat);
  border-radius: 2px;
  font-weight: 600;
  pointer-events: none;
}
.tl-tag.l {
  left: 12px;
}
.tl-tag.r {
  right: 12px;
}
.tl-panel {
  background:
    linear-gradient(
      180deg,
      var(--soot-3),
      var(--soot-2));
  border: 1px solid var(--line-d);
  border-radius: var(--r-l);
  padding: 22px;
}
.tl-panel h2 {
  font-size: 1.75rem;
  margin-bottom: .4em;
}
.tl-panel h2 small {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 8px;
}
.tl-panel > p {
  color: var(--on-dark-2);
}
.tl-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.tl-col .btn {
  width: 100%;
}
.tl-row2 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tl-sw {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  margin: 4px 0 18px;
}
.tl-sw button {
  position: relative;
  padding: 0;
  border: 1px solid var(--line-d);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--soot);
}
.tl-sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tl-sw button.on {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber), 0 0 18px rgba(212, 176, 120, .5);
}
.tl-sw i {
  position: absolute;
  right: 3px;
  top: 1px;
  font-style: normal;
  color: var(--heat);
  font-size: .8125rem;
  text-shadow: 0 0 6px rgba(212, 176, 120, 1);
}
.tl-f {
  display: block;
  margin: 0 0 16px;
}
.tl-lbl {
  display: block;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 8px;
}
.tl-seg {
  display: flex;
  border: 1px solid var(--line-d);
  border-radius: 3px;
  overflow: hidden;
}
.tl-seg button {
  flex: 1;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--on-dark-2);
  cursor: pointer;
  font-size: .92rem;
}
.tl-seg button + button {
  border-left: 1px solid var(--line-d);
}
.tl-seg button.on {
  background: var(--amber);
  color: var(--accent-text);
  font-weight: 600;
}
.tl-f input[type=range] {
  width: 100%;
  accent-color: var(--amber);
  min-height: 44px;
}
.tl-f input[type=range]:disabled {
  opacity: .4;
}
.tl-mm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tl-mm label span {
  display: block;
  font-size: .8125rem;
  color: var(--on-dark-3);
  margin-bottom: 4px;
}
.tl-mm input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--soot);
  border: 1px solid var(--line-d);
  border-radius: 3px;
  color: var(--heat);
  font-size: 16px;
}
.tl-mm input:focus {
  border-color: var(--amber);
  outline: none;
}
.tl-warn {
  font-size: .86rem;
  color: #f6c784;
  background: rgba(212, 176, 120, .08);
  border-left: 2px solid var(--amber);
  padding: 10px 12px;
  margin: -6px 0 16px;
}
.kh-bar {
  height: 2px;
  background: var(--line-d);
  margin: 0 0 18px;
  overflow: hidden;
}
.kh-bar i {
  display: block;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      var(--flame),
      var(--amber));
  transition: width .6s var(--ease);
}
.kh-st {
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin: 0 0 6px;
}
.kh-q {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.kh-q legend {
  padding: 0;
  margin: 0 0 18px;
}
.kh-q h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  margin: 0;
  outline: none;
}
.kh-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kh-opts.sfeer,
.kh-opts.omvang {
  grid-template-columns: repeat(2, 1fr);
}
.kh-opts.licht {
  grid-template-columns: 1fr;
}
.kh-o {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-l);
  background: rgba(30, 22, 17, .65);
  cursor: pointer;
  transition:
    border-color .3s,
    background .3s,
    box-shadow .3s;
  color: var(--on-dark);
}
.kh-o:hover {
  border-color: rgba(212, 176, 120, .5);
}
.kh-o.on {
  border-color: var(--amber);
  background: rgba(212, 176, 120, .09);
  box-shadow: inset 0 0 0 1px var(--amber), 0 10px 30px -18px rgba(212, 176, 120, .9);
}
.kh-o input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.kh-o:focus-within {
  outline: 2px solid var(--glass);
  outline-offset: 2px;
}
.kh-ic {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 239, 210, .9),
      rgba(212, 176, 120, .6) 40%,
      rgba(138, 42, 18, .6) 75%);
  box-shadow: 0 0 18px rgba(212, 176, 120, .25);
}
.kh-ic.kleur-zwart {
  background:
    radial-gradient(
      circle at 35% 30%,
      #d9b56b,
      var(--surface) 45%,
      var(--bg));
}
.kh-ic.kleur-wit {
  background:
    radial-gradient(
      circle at 35% 30%,
      var(--surface-2),
      var(--surface-3) 50%,
      var(--surface-3));
}
.kh-ic.kleur-groen {
  background:
    radial-gradient(
      circle at 35% 30%,
      var(--surface),
      #3f8a5c 45%,
      var(--surface-2));
}
.kh-ic.kleur-blauw {
  background:
    radial-gradient(
      circle at 35% 30%,
      #d6ecff,
      #2f6fae 45%,
      #0f2846);
}
.kh-ic.kleur-roze {
  background:
    radial-gradient(
      circle at 35% 30%,
      var(--surface),
      #e4a7b6 50%,
      #9a5a6a);
}
.kh-ic.licht-nee {
  background:
    radial-gradient(
      circle at 35% 30%,
      var(--surface-3),
      var(--surface-2) 55%,
      var(--bg));
  box-shadow: none;
}
.kh-ic.licht-twijfel {
  background:
    radial-gradient(
      circle at 35% 30%,
      #ffefd2,
      #8a6a48 50%,
      var(--surface));
}
.kh-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.kh-res {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.kh-card {
  border: 1px solid var(--line-d);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--soot-2);
  display: flex;
  flex-direction: column;
}
.kh-card.top {
  border-color: rgba(212, 176, 120, .6);
  box-shadow: 0 0 0 1px rgba(212, 176, 120, .35), 0 30px 60px -30px rgba(212, 176, 120, .6);
}
.kh-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.kh-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.kh-card:hover .kh-img img {
  transform: scale(1.05);
}
.kh-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--amber);
  color: var(--accent-text);
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
}
.kh-licht {
  position: absolute;
  right: 12px;
  top: 10px;
  font-style: normal;
  color: var(--heat);
  text-shadow: 0 0 10px rgba(212, 176, 120, 1);
  font-size: 1.1rem;
}
.kh-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kh-body h3 {
  font-size: 1.6rem;
  margin-bottom: .3em;
}
.kh-body h3 small {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 8px;
}
.kh-w {
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin: 6px 0 6px;
}
.kh-body ul {
  margin: 0 0 6px;
  padding-left: 18px;
  color: var(--on-dark-2);
  font-size: .94rem;
}
.kh-body .tl-col {
  margin-top: auto;
  padding-top: 14px;
}
.tl-ft-i {
  max-width: 60ch;
}
.tl-ft-i p {
  margin-top: 14px;
}
@media (max-width:980px) {
  .tl-ed {
    grid-template-columns: 1fr;
  }
  .tl-stage {
    position: relative;
    top: 0;
  }
  .kh-res {
    grid-template-columns: 1fr;
  }
}
@media (max-width:640px) {
  .tl-vb {
    grid-template-columns: 1fr 1fr;
  }
  .tl-vb .tl-vbk:last-child {
    grid-column: span 2;
    aspect-ratio: 2/1;
  }
  .kh-opts,
  .kh-opts.sfeer,
  .kh-opts.omvang {
    grid-template-columns: 1fr;
  }
  .kh-o {
    min-height: 64px;
  }
  .tl-steps li {
    font-size: .82rem;
    padding-right: 4px;
  }
  .tl-steps li + li:before {
    width: 14px;
  }
  .tl-panel {
    padding: 18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .tl-vbk img,
  .kh-img img,
  .kh-bar i {
    transition: none;
  }
}
.kh-body ul {
  list-style: none;
  padding: 0;
}
.kh-body li {
  position: relative;
  padding-left: 20px;
  margin: 0 0 6px;
}
.kh-body li:before {
  content: "✦";
  position: absolute;
  left: 0;
  top: .2em;
  color: var(--amber);
  font-size: .8125rem;
}
.tl-priv {
  border-left: 2px solid var(--goud,#cfa56a);
  padding-left: 12px;
}
.tl-gekozen {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .06em;
}
.tl-quad path {
  fill: none;
  stroke: rgba(231, 196, 140, .75);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 6 5;
}
.tl-loep {
  position: absolute;
  z-index: 6;
  width: 120px;
  height: 120px;
  border: 1px solid #e7c48c;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
  pointer-events: none;
  background: #0a0807;
}
.tl-loep[hidden] {
  display: none;
}
.tl-tw {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tl-tw input {
  flex: 1 1 auto;
  min-width: 0;
}
.tl-tw small {
  flex: none;
  font-size: 12px;
}
@media (max-width:560px) {
  .tl-steps {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .tl-steps li {
    font-size: .76rem;
    padding-right: 0;
    gap: 6px;
    white-space: nowrap;
  }
  .tl-steps li span {
    width: 24px;
    height: 24px;
    flex: none;
  }
  .tl-steps li + li:before {
    width: 8px;
    margin-right: 0;
  }
}
.tl-weerg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.tl-weerg button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--line-d);
  border-radius: 3px;
  color: var(--on-dark-2);
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
}
.tl-weerg b {
  font-weight: 600;
}
.tl-weerg small {
  font-size: .76rem;
  color: var(--on-dark-3);
  line-height: 1.25;
}
.tl-weerg button[aria-pressed=true] {
  border-color: var(--amber);
  background: rgba(212, 176, 120, .12);
  color: var(--heat);
}
.tl-weerg .tl-w3 {
  border-style: dashed;
}
.tl-concept {
  padding-bottom: clamp(30px, 5vw, 60px);
  scroll-margin-top: 90px;
}
.tl-concept h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  margin: 0 0 8px;
}
.tl-concept > p {
  color: var(--on-dark-2);
  max-width: 70ch;
}
.tl-concept .tl-cn {
  color: var(--on-dark-3);
  font-size: .86rem;
  margin-top: 14px;
}
.tl-c3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.tl-c3 figure,
.tl-c4 {
  margin: 0;
}
.tl-c3 img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10/14;
  object-fit: cover;
  border-radius: 3px;
}
.tl-c4 {
  margin-top: 10px;
}
.tl-c4 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.tl-concept figcaption {
  display: grid;
  gap: 2px;
  padding: 8px 2px 0;
}
.tl-concept figcaption b {
  font-weight: 600;
  font-size: .92rem;
}
.tl-concept figcaption small {
  color: var(--on-dark-3);
  font-size: .8rem;
}
@media (max-width:700px) {
  .tl-weerg {
    grid-template-columns: 1fr 1fr;
  }
  .tl-weerg .tl-w3 {
    grid-column: 1/-1;
    min-height: 44px;
  }
  .tl-c3 {
    gap: 6px;
  }
  .tl-concept figcaption b {
    font-size: .8rem;
  }
  .tl-concept figcaption small {
    font-size: .72rem;
  }
}
.tl-marge {
  position: relative;
  box-sizing: content-box;
  box-sizing: border-box;
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(212, 176, 120, .05) 0 8px,
      transparent 8px 16px),
    var(--soot);
  border: 1px dashed var(--line-d);
  border-radius: var(--r-l);
}
.tl-mbl {
  position: absolute;
  left: 10px;
  top: 6px;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--on-dark-3);
  pointer-events: none;
}
.tl-ed.hoeken .tl-canvas {
  overflow: visible;
}
.tl-ed.hoeken .tl-canvas canvas {
  border-radius: var(--r-l);
}
.tl-ed.hoeken .tl-quad {
  overflow: visible;
}
.tl-vraag {
  color: var(--heat);
  font-weight: 600;
  margin: 16px 0 4px;
}
.tl-ed.hoeken .tl-col {
  margin-top: 12px;
}
.tl-mkk {
  margin-top: 10px;
}
.tl-ed.masker .tl-canvas {
  touch-action: none;
  cursor: crosshair;
  margin: 0 auto;
}
.tl-ed.masker .tl-canvas[data-modus=schuif] {
  cursor: grab;
}
.tl-ed.masker .tl-canvas.drag {
  cursor: grabbing;
}
.tl-mku {
  margin: 0 0 10px;
  color: var(--on-dark-2);
  font-size: .95rem;
  line-height: 1.45;
  max-width: 64ch;
}
.tl-mbalk {
  margin: 0 0 10px;
}
.tl-mbalk.tl-mr {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
  align-items: stretch;
}
.tl-mr .tl-seg {
  flex: 0 0 96px;
}
.tl-mr .tl-seg button {
  font-size: 1.15rem;
}
.tl-mr .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.tl-seg button:disabled,
.tl-mr .btn:disabled,
.tl-col .btn:disabled {
  opacity: .4;
  cursor: default;
}
#mk-status {
  min-height: 1.3em;
  margin-top: 6px;
}
.tl-mslim {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 6px;
  min-height: 44px;
  cursor: pointer;
  color: var(--on-dark-2);
  font-size: .92rem;
}
.tl-mslim input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--amber);
  flex: none;
}
.tl-mslim small {
  display: block;
  color: var(--on-dark-3);
  font-size: .8rem;
  margin-top: 2px;
}
body.fw-mk .fb-k {
  display: none;
}
.tl-steps {
  scroll-margin-top: 78px;
}
@media (max-width:700px) {
  .tl-mku {
    font-size: .86rem;
    margin-bottom: 8px;
  }
  .tl-ed.masker .tl-seg button {
    min-height: 42px;
    font-size: .86rem;
  }
}