.ct-specimen-module{
  --ct-specimen-bg:#FFFFFF;
  --ct-specimen-fg:#0B0B0C;
  --ct-specimen-muted:rgba(11, 11, 12, 0.52);
  --ct-specimen-line:var(--line);
  --ct-specimen-dropdown-line:rgba(11, 11, 12, 0.14);
  --ct-specimen-dropdown-width:88px;
  --ct-specimen-thumb:#0B0B0C;
  background:var(--ct-specimen-bg);
  color:var(--ct-specimen-fg);
}

.ct-specimen-shell{
  width:min(1600px, calc(100% - 32px));
  margin-inline:auto;
  padding:clamp(28px, 3.5vw, 52px) 0 clamp(64px, 8vw, 118px);
}

.ct-specimen-controls{
  display:grid;
  grid-template-columns:minmax(220px, .8fr) minmax(0, 1.2fr);
  align-items:center;
  gap:clamp(18px, 2.6vw, 42px);
  min-height:clamp(48px, 6vw, 74px);
  border-top:0;
  padding:clamp(12px, 1.3vw, 18px) 0;
  font-size:13px;
  line-height:1;
}

.ct-specimen-controls__left,
.ct-specimen-controls__right{
  display:flex;
  align-items:center;
  min-width:0;
}

.ct-specimen-controls__left{
  gap:clamp(18px, 2.2vw, 30px);
}

.ct-specimen-controls__right{
  justify-content:flex-end;
  gap:clamp(14px, 1.6vw, 24px);
}

.ct-specimen-dropdown{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:var(--ct-specimen-dropdown-width);
}

.ct-specimen-label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.ct-specimen-dropdown__button{
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:8px;
  width:fit-content;
  min-height:0;
  min-width:0;
  border:0;
  border-radius:0;
  padding:0;
  background:#FFFFFF;
  color:var(--ct-specimen-fg);
  font:inherit;
  line-height:1;
  text-align:left;
  cursor:pointer;
  transition:border-color .14s ease, background-color .14s ease;
}

.ct-specimen-dropdown__button:hover,
.ct-specimen-dropdown.is-open .ct-specimen-dropdown__button{
  background:#FFFFFF;
}

.ct-specimen-dropdown__arrow{
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.ct-specimen-dropdown.is-open .ct-specimen-dropdown__arrow{
  transform:translateY(1px) rotate(225deg);
}

.ct-specimen-dropdown__menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:8;
  display:grid;
  width:max-content;
  min-width:100%;
  border:1px solid var(--ct-specimen-dropdown-line);
  border-radius:0;
  padding:4px 0;
  background:#FFFFFF;
  opacity:0;
  visibility:hidden;
  transform:translateY(-2px);
  transition:opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}

.ct-specimen-dropdown.is-open .ct-specimen-dropdown__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .1s ease, transform .1s ease, visibility 0s;
}

.ct-specimen-dropdown__option{
  appearance:none;
  display:grid;
  grid-template-columns:10px minmax(0, 1fr);
  align-items:center;
  gap:6px;
  width:100%;
  border:0;
  padding:7px 12px 7px 10px;
  background:transparent;
  color:var(--ct-specimen-muted);
  font:inherit;
  line-height:1;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}

.ct-specimen-dropdown__option::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
}

.ct-specimen-dropdown__option:hover,
.ct-specimen-dropdown__option.is-active{
  color:var(--ct-specimen-fg);
}

.ct-specimen-dropdown__option.is-active::before{
  background:currentColor;
}

.ct-specimen-download{
  color:var(--ct-specimen-muted);
  text-decoration:none;
  transition:color .16s ease;
}

.ct-specimen-download:hover{
  color:var(--ct-specimen-fg);
}

.ct-specimen-slider{
  display:inline-grid;
  grid-template-columns:auto minmax(78px, 7.5vw);
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--ct-specimen-muted);
}

.ct-specimen-slider--size{
  grid-template-columns:auto minmax(90px, 8.4vw) 40px;
}

.ct-specimen-slider span,
.ct-specimen-slider output{
  color:var(--ct-specimen-fg);
  font-variant-numeric:tabular-nums;
}

.ct-specimen-slider input{
  width:100%;
  color:inherit;
  accent-color:var(--ct-specimen-thumb);
}

.ct-specimen-slider input[type="range"]{
  appearance:none;
  height:14px;
  background:transparent;
}

.ct-specimen-slider input[type="range"]::-webkit-slider-runnable-track{
  height:1px;
  background-color:#0B0B0C;
}

.ct-specimen-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:9px;
  height:9px;
  margin-top:-4px;
  border:1px solid var(--ct-specimen-thumb);
  border-radius:50%;
  background-color:var(--ct-specimen-thumb);
}

.ct-specimen-slider input[type="range"]::-moz-range-track{
  height:1px;
  background-color:#0B0B0C;
}

.ct-specimen-slider input[type="range"]::-moz-range-thumb{
  width:9px;
  height:9px;
  border:1px solid var(--ct-specimen-thumb);
  border-radius:50%;
  background-color:var(--ct-specimen-thumb);
}

.ct-specimen-preview{
  min-height:clamp(420px, 58vw, 760px);
  padding:clamp(20px, 2.8vw, 42px) 0 0;
}

.ct-specimen-text{
  margin:0;
  width:100%;
  max-width:100%;
  color:var(--ct-specimen-fg);
  font-family:var(--ct-specimen-family), "DK Form", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(64px, 7.6vw, 500px);
  font-size:clamp(64px, var(--ct-specimen-size, 96px), 500px);
  font-weight:var(--ct-specimen-weight, 400);
  line-height:var(--ct-specimen-leading, 1);
  letter-spacing:calc(var(--ct-specimen-tracking, 0) * 1em);
  hyphens:auto;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:pretty;
  outline:0;
  transition:
    font-family .18s ease,
    font-size .16s ease,
    font-weight .16s ease,
    line-height .16s ease,
    letter-spacing .16s ease;
}

.ct-specimen-text:empty::before{
  content:attr(data-placeholder);
  color:var(--ct-specimen-muted);
}

@media (max-width: 920px){
  .ct-specimen-controls{
    grid-template-columns:1fr;
    gap:14px;
  }

  .ct-specimen-controls__right{
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .ct-specimen-controls__right::-webkit-scrollbar{
    display:none;
  }
}

@media (max-width: 760px){
  .ct-specimen-shell{
    width:calc(100% - 32px);
    padding-bottom:clamp(52px, 15vw, 78px);
  }

  .ct-specimen-controls{
    font-size:12px;
  }

  .ct-specimen-controls__left{
    justify-content:space-between;
  }

  .ct-specimen-controls__right{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .ct-specimen-controls__right .ct-specimen-slider:not(.ct-specimen-slider--size){
    display:none;
  }

  .ct-specimen-slider,
  .ct-specimen-slider--size{
    grid-template-columns:64px minmax(0, 1fr) 42px;
  }

  .ct-specimen-slider:not(.ct-specimen-slider--size)::after{
    content:"";
    width:42px;
  }

  .ct-specimen-preview{
    min-height:clamp(360px, 105vw, 520px);
    padding-top:clamp(20px, 6vw, 32px);
  }

  .ct-specimen-text{
    max-width:100%;
    font-size:clamp(42px, var(--ct-specimen-size, 78px), 500px);
    line-height:max(var(--ct-specimen-leading, 1), .9);
  }
}

@media (min-width: 1025px){
  .ct-specimen-shell{
    width:min(1760px, calc(100% - 44px));
  }
}