/* Kiwari Typefaces — embeddable modules.
   They take colour and interface font from the Semplice section they sit in;
   only the type samples use the typefaces themselves. */
.kkte{--line:color-mix(in srgb,currentColor 22%,transparent);--soft:color-mix(in srgb,currentColor 60%,transparent);
  color:inherit;font:inherit;text-align:left;width:100%;container-type:inline-size}
.kkte *{box-sizing:border-box}
.kkte a{color:inherit;text-decoration:none}
.kkte button,.kkte select,.kkte input{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.kkte ul{list-style:none;margin:0;padding:0}
.kkte-title{margin:0 0 16px;font-size:clamp(28px,3.4vw,48px);line-height:1.05;font-weight:600}
.kkte-t{font-weight:600}
.kkte-t em{font-style:normal;font-weight:400;font-size:12px;border:1px solid currentColor;border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.kkte-tag{color:var(--soft)}

/* catalogue */
.kkte-list{border-top:1px solid currentColor}
.kkte-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:24px;align-items:center;padding:clamp(12px,1.8vw,22px) 0;border-bottom:1px solid var(--line)}
.kkte-name{font-family:var(--f),sans-serif;font-size:clamp(36px,11cqi,128px);line-height:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.08em;font-weight:var(--wcur,var(--wmin));font-synthesis:none}
.kkte-meta{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--soft)}
.kkte-meta>span:first-child{color:var(--kkte-fg,currentColor)}
@media (hover:hover){.kkte-item:hover .kkte-name{--wcur:var(--wmax)}}
@media (prefers-reduced-motion:no-preference){.kkte-name{transition:font-weight .45s cubic-bezier(.3,.7,.2,1)}}
@container (max-width:640px){.kkte-item{grid-template-columns:1fr;gap:6px}}
.kkte-cat[data-view=grid] .kkte-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));border-top:0;border-left:1px solid var(--line)}
.kkte-cat[data-view=grid] .kkte-list li{border:1px solid var(--line);border-left:0;margin-top:-1px}
.kkte-cat[data-view=grid] .kkte-item{grid-template-columns:1fr;border:0;padding:16px;min-height:300px;align-content:space-between;height:100%}
.kkte-cat[data-view=grid] .kkte-list{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.kkte-cat[data-view=grid] .kkte-name{font-size:clamp(90px,14cqi,170px)}
.kkte-more{display:inline-block;margin-top:16px;border-bottom:1px solid currentColor;padding-bottom:2px}

/* shared controls */
.kkte-seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.kkte .kkte-seg button{border:0!important;background:transparent!important;padding:5px 11px!important;font-size:14px!important;cursor:pointer;color:var(--soft)!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;min-width:0!important;line-height:1.3!important;text-decoration:none!important;font-family:inherit!important;margin:0!important}
.kkte .kkte-seg button+button{border-left:1px solid var(--line)!important}
.kkte .kkte-seg button[aria-pressed=true]{background:var(--kkte-fg,#000)!important;color:var(--kkte-bg,#fff)!important}
.kkte a.kkte-btn{text-decoration:none!important}
.kkte-btn{display:inline-block;border:1px solid currentColor;border-radius:6px;padding:9px 16px;font-size:15px;white-space:nowrap}
.kkte-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.kkte input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:20px;background:transparent!important;margin:0;padding:0;border:0!important;box-shadow:none!important;cursor:pointer;vertical-align:middle}
.kkte input[type=range]::-webkit-slider-runnable-track{height:2px;background:currentColor}
.kkte input[type=range]::-moz-range-track{height:2px;background:currentColor}
.kkte input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--kkte-bg,#fff);border:2px solid currentColor;margin-top:-6px}
.kkte input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--kkte-bg,#fff);border:2px solid currentColor}

/* feature */
.kkte-big{display:block;font-size:clamp(48px,19cqi,280px);line-height:.9;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;font-synthesis:none;padding-bottom:.06em}
.kkte-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 22px;font-size:14px}
.kkte-readout{color:var(--soft);font-variant-numeric:tabular-nums;min-width:92px}
.kkte-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;border-top:1px solid currentColor;padding-top:14px}
.kkte-foot>div{display:flex;flex-direction:column;gap:2px;max-width:46ch}

/* tester */
.kkte-tester{border-top:1px solid currentColor;border-bottom:1px solid var(--line)}
.kkte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;font-size:14px}
.kkte-ctl{display:inline-flex;align-items:center;gap:8px}
.kkte-ctl output{min-width:48px;font-variant-numeric:tabular-nums;color:var(--soft)}
.kkte .kkte-bar select{border:1px solid var(--line)!important;background:transparent!important;color:inherit!important;border-radius:6px!important;padding:5px 8px!important;font-size:14px!important;min-height:0!important;width:auto!important}
.kkte .kkte-bar option{background:var(--kkte-bg,#fff);color:var(--kkte-fg,#000)}
.kkte-link{margin-left:auto;border-bottom:1px solid currentColor}
.kkte-sample{outline:none;padding:4px 0 26px;line-height:1.08;overflow-wrap:break-word;font-synthesis:none;caret-color:currentColor}
.kkte-sample:focus{background:color-mix(in srgb,currentColor 5%,transparent)}