@font-face{
  font-family:"Triptih Fill";
  src:url("../../public/fonts/triptih/Triptih-Fill.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Triptih Parth";
  src:url("../../public/fonts/triptih/Triptih-Parth.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Triptih Stroke";
  src:url("../../public/fonts/triptih/Triptih-Stroke.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.font-detail-root{
  overflow-x:clip;
  overflow-y:visible;
}

.font-detail-page{
  --bg:#ffffff;
  --fg:#0B0B0C;
  --muted:rgba(8,8,8,.5);
  min-height:100%;
  height:auto;
  overflow-x:clip;
  overflow-y:visible;
  background:var(--bg);
  color:var(--fg);
}

.font-detail-main{
  min-height:100vh;
  min-height:100dvh;
  padding-top:16px;
}

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

.font-detail-wall{
  position:relative;
  width:min(1600px, calc(100% - 32px));
  margin-inline:auto;
}

.font-detail-hero{
  --font-bg:#ffffff;
  --font-fg:#080808;
  --font-surface-head:clamp(56px, 5.8vw, 112px);
  --font-surface-top:calc(var(--font-surface-head) * .5);
  --font-surface-bottom:calc(var(--font-surface-head) * .54);
  --font-toolbar-gap:clamp(20px, 1.9vw, 34px);
  min-height:0;
  padding:calc(var(--font-surface-top) + var(--font-toolbar-gap)) 0 var(--font-surface-bottom);
  position:relative;
  color:var(--font-fg);
  z-index:0;
}

.font-detail-hero::before,
.font-detail-hero::after{
  content:"";
  position:absolute;
}

.font-detail-hero::before{
  left:0;
  right:0;
  top:var(--font-surface-top);
  height:1px;
  background:var(--line);
  z-index:2;
}

.font-detail-hero::after{
  left:50%;
  top:0;
  bottom:0;
  width:100vw;
  transform:translateX(-50%);
  background:var(--font-bg);
  z-index:0;
}

.font-detail-hero > *{
  position:relative;
  z-index:1;
}

.font-detail-shell{
  width:100%;
  margin-inline:auto;
}

.font-detail-toolbar{
  display:grid;
  grid-template-columns:minmax(max-content, .7fr) minmax(max-content, 1fr);
  align-items:center;
  gap:24px;
  min-height:48px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 clamp(8px, 1.1vw, 16px);
  color:var(--fg);
  font-size:13px;
  line-height:1;
  scrollbar-width:none;
  white-space:nowrap;
}

.font-detail-toolbar::-webkit-scrollbar{
  display:none;
}

.font-detail-toolbar__left,
.font-detail-toolbar__right{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}

.font-detail-toolbar__right{
  justify-content:flex-end;
  gap:16px;
}

.font-detail-toolbar a{
  color:inherit;
  text-decoration:none;
}

.font-detail-toolbar a{
  color:rgba(11, 11, 12, 0.52);
  transition:color .14s ease;
}

.font-detail-toolbar a:hover{
  color:#0B0B0C;
}

.font-detail-select,
.font-detail-range{
  display:inline-grid;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.font-detail-select{
  grid-template-columns:0 max-content;
  width:88px;
}

.font-detail-label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

.font-detail-select select{
  appearance:none;
  width:auto;
  min-width:0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:0 14px 2px 0;
  background:linear-gradient(45deg, transparent 50%, currentColor 50%) right 4px center / 5px 5px no-repeat;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.font-detail-range{
  grid-template-columns:auto minmax(82px, 8vw);
}

.font-detail-range--size{
  grid-template-columns:auto minmax(96px, 9vw) 46px;
}

.font-detail-range output{
  color:inherit;
  font-variant-numeric:tabular-nums;
}

.font-detail-range input{
  width:100%;
  color:inherit;
  accent-color:currentColor;
}

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

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

.font-detail-range input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:10px;
  height:10px;
  margin-top:-4.5px;
  border:1px solid #0B0B0C;
  border-radius:50%;
  background-color:#0B0B0C;
}

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

.font-detail-range input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  border:1px solid #0B0B0C;
  border-radius:50%;
  background-color:#0B0B0C;
}

.font-detail-specimen{
  display:block;
  width:100%;
  max-width:100%;
  min-height:1em;
  margin:clamp(16px, 2.4vw, 34px) 0 0;
  padding:0;
  color:var(--fg);
  font-family:"Triptih Fill", "DK Form", ui-sans-serif, system-ui, sans-serif;
  font-size:var(--specimen-size, 220px);
  line-height:var(--specimen-leading, .9);
  letter-spacing:var(--specimen-tracking, -.01em);
  hyphens:auto;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:pretty;
  text-align:left;
  outline:0;
  caret-color:var(--fg);
  transition:font-size .12s ease, line-height .12s ease, letter-spacing .12s ease;
}

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

.font-detail-specimen--fill{
  font-family:"Triptih Fill", "DK Form", ui-sans-serif, system-ui, sans-serif;
}

.font-detail-specimen--parth{
  font-family:"Triptih Parth", "DK Form", ui-sans-serif, system-ui, sans-serif;
}

.font-detail-specimen--stroke{
  font-family:"Triptih Stroke", "DK Form", ui-sans-serif, system-ui, sans-serif;
}

.ct-glyph-set{
  --ct-glyph-set-bg:#ffffff;
  --ct-glyph-set-fg:#0B0B0C;
  --ct-glyph-set-muted:rgba(11, 11, 12, .52);
  --ct-glyph-set-line:var(--line);
  --ct-glyph-set-soft:#f5f5f5;
  --ct-glyph-set-grid-line:rgba(11, 11, 12, .105);
  --ct-glyph-set-metric:rgba(11, 11, 12, .2);
  --ct-glyph-set-baseline:rgba(11, 11, 12, .32);
  --glyph-sticky-offset:96px;
  background:var(--ct-glyph-set-bg);
  color:var(--ct-glyph-set-fg);
  border-top:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ct-glyph-inspector{
  position:relative;
  isolation:isolate;
}

.ct-glyph-set__shell{
  width:min(1600px, calc(100% - 32px));
  margin-inline:auto;
  padding:clamp(18px, 2.8vw, 40px) 0 clamp(64px, 8vw, 126px);
}

.ct-glyph-toolbar{
  position:sticky;
  top:var(--glyph-toolbar-sticky-offset, var(--glyph-sticky-offset));
  z-index:50;
  isolation:isolate;
  margin-bottom:24px;
  padding:0 0 18px;
  border-bottom:0;
  background:#ffffff;
}

.ct-glyph-toolbar::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--glyph-sticky-offset)) -1px -24px;
  z-index:-1;
  background:#ffffff;
  pointer-events:none;
}

.ct-glyph-toolbar__meta{
  display:grid;
  gap:8px;
  margin-bottom:clamp(12px, 1.8vw, 22px);
  color:var(--ct-glyph-set-muted);
  font-size:13px;
  line-height:1;
}

.ct-glyph-toolbar__meta span:first-child{
  color:var(--ct-glyph-set-fg);
}

.ct-glyph-set__stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 55fr) minmax(380px, 45fr);
  align-items:stretch;
  min-height:100vh;
}

.ct-glyph-set__controls{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  align-items:start;
  gap:34px;
  width:100%;
  font-size:13px;
  line-height:1;
}

.ct-glyph-toolbar__select-wrap{
  position:relative;
  display:inline-block;
  align-items:center;
  flex:0 0 auto;
  width:88px;
  min-width:0;
}

.ct-glyph-dropdown__button{
  appearance:none;
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:8px;
  width:fit-content;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  padding:0;
  background:#fff;
  color:var(--ct-glyph-set-fg);
  font:inherit;
  font-size:13px;
  line-height:1;
  text-align:left;
  outline:0;
  cursor:pointer;
}

.ct-glyph-dropdown__button:hover,
.ct-glyph-dropdown.is-open .ct-glyph-dropdown__button{
  background:#fff;
}

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

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

.ct-glyph-dropdown__menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:80;
  display:grid;
  width:max-content;
  min-width:100%;
  border:1px solid rgba(11, 11, 12, .14);
  border-radius:0;
  padding:4px 0;
  background:#fff;
  opacity:0;
  visibility:hidden;
  transform:translateY(-2px);
  transition:opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}

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

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

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

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

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

.ct-glyph-toolbar__input{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  min-height:13px;
  color:var(--ct-glyph-set-muted);
}

.ct-glyph-toolbar__icon{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:none;
  color:var(--ct-glyph-set-fg);
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(-3px);
}

.ct-glyph-toolbar__input input{
  width:100%;
  min-width:0;
  height:13px;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  color:var(--ct-glyph-set-fg);
  font:inherit;
  font-size:13px;
  line-height:1;
  outline:0;
}

.ct-glyph-toolbar__input input::placeholder{
  color:var(--ct-glyph-set-muted);
}

.ct-glyph-dropdown__button:focus-visible,
.ct-glyph-toolbar__input:focus-within{
  color:var(--ct-glyph-set-fg);
}

.ct-glyph-set__preview{
  min-width:0;
}

.ct-glyph-set__preview-pin{
  position:sticky;
  top:var(--glyph-sticky-offset);
  display:grid;
  grid-template-rows:auto minmax(420px, 1fr) auto;
  height:calc(100vh - var(--glyph-sticky-offset));
  min-height:min(520px, calc(100vh - var(--glyph-sticky-offset)));
  padding:0 0 clamp(20px, 2.8vw, 42px) clamp(28px, 3.8vw, 58px);
  overflow:hidden;
}

.ct-glyph-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
}

.ct-glyph-preview{
  display:block;
  width:100%;
  height:100%;
  min-height:420px;
  overflow:visible;
}

.ct-glyph-preview__metric line{
  stroke:var(--ct-glyph-set-metric);
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
}

.ct-glyph-preview__metric--baseline line{
  stroke:var(--ct-glyph-set-baseline);
  stroke-dasharray:4 4;
}

.ct-glyph-preview__metric text{
  fill:rgba(11, 11, 12, .42);
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:13px;
  letter-spacing:0;
}

.ct-glyph-preview__metric-value{
  text-anchor:end;
}

.ct-glyph-preview__metric--baseline text{
  fill:rgba(11, 11, 12, .52);
}

.ct-glyph-preview__glyph{
  fill:var(--ct-glyph-set-fg);
  font-family:"Triptih Fill", "DK Form", ui-sans-serif, system-ui, sans-serif;
  text-anchor:middle;
  dominant-baseline:alphabetic;
  transition:font-family .14s ease;
}

.ct-glyph-set__library{
  min-width:0;
  container:ct-glyph-library / inline-size;
  height:auto;
  max-height:none;
  overflow:visible;
  border-right:0;
  padding:0 clamp(28px, 3.8vw, 58px) clamp(20px, 2.8vw, 42px) 0;
}

.ct-glyph-set__groups{
  display:grid;
  gap:0;
}

.ct-glyph-browser__section{
  min-width:0;
}

.ct-glyph-browser__section + .ct-glyph-browser__section{
  margin-top:72px;
}

.ct-glyph-browser__section-title{
  margin:0 0 28px;
  color:var(--ct-glyph-set-fg);
  font:inherit;
  font-size:13px;
  line-height:1;
  font-weight:400;
}

.ct-glyph-browser__section-groups{
  display:grid;
  gap:0;
}

.ct-glyph-tabs{
  display:none;
}

.ct-glyph-grid__group{
  min-width:0;
}

.ct-glyph-browser__section-groups > .ct-glyph-grid__group + .ct-glyph-grid__group{
  margin-top:56px;
}

.ct-glyph-grid__head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  margin:0 0 16px;
  padding:0;
  color:var(--ct-glyph-set-muted);
  font-size:13px;
  line-height:1;
}

.ct-glyph-grid__head h3{
  margin:0;
  color:var(--ct-glyph-set-fg);
  font:inherit;
  font-size:13px;
  line-height:1;
  font-weight:400;
}

.ct-glyph-grid{
  display:grid;
  grid-template-columns:repeat(9, minmax(0, 1fr));
  align-content:start;
  gap:8px;
}

.ct-glyph-cell{
  appearance:none;
  display:grid;
  place-items:center;
  min-width:0;
  width:100%;
  height:auto;
  aspect-ratio:1;
  border:1px solid var(--ct-glyph-set-grid-line);
  border-radius:0;
  padding:0;
  background:#ffffff;
  color:var(--ct-glyph-set-fg);
  font-family:"Triptih Fill", "DK Form", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(24px, 2.1vw, 36px);
  line-height:1;
  cursor:pointer;
}

@container ct-glyph-library (max-width: 572px){
  .ct-glyph-grid{
    grid-template-columns:repeat(8, minmax(0, 1fr));
  }
}

@container ct-glyph-library (max-width: 508px){
  .ct-glyph-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr));
  }
}

@container ct-glyph-library (max-width: 444px){
  .ct-glyph-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
}

.ct-glyph-cell:hover,
.ct-glyph-cell:focus-visible{
  background:var(--ct-glyph-set-soft);
  border-color:rgba(11, 11, 12, .18);
  outline:0;
}

.ct-glyph-cell.is-active{
  background:#000000;
  color:#ffffff;
  outline:0;
}

.ct-glyph-set__meta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  color:var(--ct-glyph-set-muted);
  font-size:12px;
  line-height:1.15;
}

.ct-glyph-set__meta span{
  min-width:0;
  border-top:0;
  padding-top:12px;
  overflow-wrap:anywhere;
}

.font-detail-info{
  border-top:1px solid var(--line);
  padding:clamp(52px, 6vw, 92px) 0 clamp(80px, 9vw, 132px);
}

.font-detail-info h2{
  margin:0 0 18px;
  font-size:clamp(32px, 4vw, 68px);
  line-height:.95;
  font-weight:400;
}

.font-detail-info p{
  max-width:720px;
  margin:0;
  font-size:clamp(18px, 1.7vw, 26px);
  line-height:1.18;
}

.font-detail-info a{
  color:inherit;
  text-underline-offset:.12em;
}

@media (max-width: 760px){
  .font-detail-wall{
    width:calc(100% - 32px);
  }

  .font-detail-hero{
    --font-surface-head:clamp(42px, 13vw, 64px);
    --font-surface-top:var(--font-surface-head);
    --font-surface-bottom:calc(var(--font-surface-top) * .7);
    --font-toolbar-gap:clamp(18px, 5.8vw, 28px);
  }

  .font-detail-toolbar{
    gap:18px;
    font-size:12px;
  }

  .font-detail-range{
    grid-template-columns:auto 104px;
  }

  .font-detail-range--size{
    grid-template-columns:auto 116px 44px;
  }

  .font-detail-specimen{
    margin-top:clamp(20px, 6.5vw, 34px);
    font-size:min(var(--specimen-size, 148px), 38vw);
  }

  .ct-glyph-set__shell{
    width:calc(100% - 32px);
    padding:clamp(28px, 8vw, 44px) 0 clamp(58px, 14vw, 86px);
  }

  .ct-glyph-toolbar{
    position:static;
    margin-bottom:16px;
    padding:0;
  }

  .ct-glyph-toolbar__meta{
    gap:5px;
    margin-bottom:6px;
  }

  .ct-glyph-set__controls{
    justify-self:stretch;
    grid-template-columns:1fr;
    gap:0;
  }

  .ct-glyph-set__stage{
    display:flex;
    flex-direction:column;
    min-height:0;
    gap:0;
    border-bottom:0;
  }

  .ct-glyph-set__library{
    order:2;
    height:auto;
    max-height:none;
    overflow:visible;
    border-right:0;
    padding:14px 0 0;
  }

  .ct-glyph-set__preview{
    order:1;
  }

  .ct-glyph-toolbar__select-wrap{
    width:100%;
  }

  .ct-glyph-dropdown__button{
    width:100%;
    height:44px;
    min-height:44px;
    grid-template-columns:1fr auto;
  }

  .ct-glyph-dropdown__menu{
    width:100%;
  }

  .ct-glyph-toolbar__input{
    display:none;
  }

  .ct-glyph-set__groups{
    display:block;
  }

  .ct-glyph-browser__section-title{
    display:none;
  }

  .ct-glyph-browser__section + .ct-glyph-browser__section{
    margin-top:0;
  }

  .ct-glyph-tabs--mobile{
    display:flex;
    gap:18px;
    margin:0 0 18px;
    padding:0 0 10px;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
    border-bottom:1px solid var(--ct-glyph-set-line);
  }

  .ct-glyph-tabs--mobile::-webkit-scrollbar{
    display:none;
  }

  .ct-glyph-browser__section .ct-glyph-tabs{
    display:none;
  }

  .ct-glyph-tab{
    appearance:none;
    flex:0 0 auto;
    border:0;
    border-radius:0;
    padding:0;
    background:transparent;
    color:var(--ct-glyph-set-muted);
    font:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
  }

  .ct-glyph-tab.is-active{
    color:var(--ct-glyph-set-fg);
  }

  .ct-glyph-grid__group{
    display:none;
  }

  .ct-glyph-grid__group.is-mobile-active{
    display:block;
  }

  .ct-glyph-browser__section-groups > .ct-glyph-grid__group + .ct-glyph-grid__group{
    margin-top:0;
  }

  .ct-glyph-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:8px;
  }

  .ct-glyph-cell{
    width:auto;
    height:auto;
    border-radius:0;
    font-size:25px;
  }

  .ct-glyph-set__preview{
    min-height:0;
  }

  .ct-glyph-set__preview-pin{
    position:sticky;
    top:0;
    z-index:20;
    grid-template-rows:auto minmax(150px, 26vh);
    height:auto;
    min-height:0;
    border-top:1px solid var(--ct-glyph-set-line);
    padding:12px 0 14px;
    background:#ffffff;
  }

  .ct-glyph-preview{
    min-height:150px;
  }

  .ct-glyph-preview__metric text{
    font-size:12px;
  }

  .ct-glyph-set__meta{
    display:none;
  }
}

@media (max-width: 360px){
  .ct-glyph-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 520px) and (max-width: 760px){
  .ct-glyph-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr));
  }
}

@media (min-width: 1025px){
  .font-detail-wall{
    width:min(1760px, calc(100% - 44px));
  }

  .ct-glyph-set__shell{
    width:min(1760px, calc(100% - 44px));
  }
}