.info-toggle svg{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:translate .2s cubic-bezier(.22,1,.36,1)}
.info-toggle .info-dot{fill:currentColor;stroke:none;transition:translate .36s cubic-bezier(.34,1.56,.64,1)}
.info-toggle:is(:hover, :focus-visible) svg{translate:0 -1px}
.info-toggle:is(:hover, :focus-visible) .info-dot{translate:0 -1px}
.info-toggle:active svg{translate:0 1px}

.fontinfo{
  --info-w:max(min(980px, 100vw - 32px), min(1280px, 100vw - 120px));
  inset:0;width:auto;
  padding:calc(var(--info-top, 0px) + 2rem) calc((100% - var(--info-w)) / 2 + 2.25rem) calc(var(--info-bottom, 0px) + 2rem);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;
  touch-action:pan-y;
}
.info-veil{
  position:fixed;inset:0;z-index:19;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;transition:opacity .3s linear .4s;
}
.info-veil.open{opacity:1;transition-duration:.2s;transition-delay:0s}
@media (prefers-reduced-motion:reduce){ .info-veil{transition-delay:0s} }
.info-veil[hidden]{display:none}
.info-close{position:fixed;z-index:21;display:grid;place-items:center;width:44px;height:44px;color:var(--dim);transition:color .2s linear}
.info-close[hidden]{display:none}
.info-close svg{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:rotate .46s cubic-bezier(.22,1,.36,1), scale .36s cubic-bezier(.34,1.56,.64,1)}
.info-close:is(:hover, :focus-visible){color:var(--fg);outline:none}
.info-close:is(:hover, :focus-visible) svg{rotate:90deg}
.info-close:active svg{scale:.8;transition-duration:.46s, .08s}
.info-share{position:fixed;z-index:21;display:grid;place-items:center;width:44px;height:44px;color:var(--dim);transition:color .2s linear}
.info-share[hidden]{display:none}
.info-share svg{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:scale .36s cubic-bezier(.34,1.56,.64,1)}
.info-share:is(:hover, :focus-visible){color:var(--fg);outline:none}
.info-share .share-out{transition:opacity .18s linear}
.info-share .share-arrow{transition:translate .42s cubic-bezier(.22,1,.36,1)}
.info-share:is(:hover, :focus-visible) .share-arrow{translate:0 -1.5px}
.info-share:active svg{scale:.8;transition-duration:.08s}
.info-share .share-tick{stroke-dasharray:11 12;stroke-dashoffset:11.2;transition:stroke-dashoffset .24s cubic-bezier(.4,0,.2,1)}
.info-share.copied .share-out{opacity:0}
.info-share.copied .share-tick{stroke-dashoffset:0;transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1) .12s}
.info-nav{position:fixed;z-index:21;display:grid;place-items:center;width:52px;height:72px;color:var(--dim);font-size:32px;line-height:1;transition:color .2s linear, translate .32s cubic-bezier(.22,1,.36,1)}
.info-nav[hidden]{display:none}
.info-nav:is(:hover, :focus-visible){color:var(--fg);outline:none}
.info-prev:is(:hover, :focus-visible){translate:-3px 0}
.info-next:is(:hover, :focus-visible){translate:3px 0}
@keyframes info-nudge-prev{0%, 56%, 100%{translate:0 0} 64%{translate:-6px 0} 72%{translate:0 0} 80%{translate:-6px 0} 90%{translate:0 0}}
@keyframes info-nudge-next{0%, 56%, 100%{translate:0 0} 64%{translate:6px 0} 72%{translate:0 0} 80%{translate:6px 0} 90%{translate:0 0}}
.info-prev.hint{animation:info-nudge-prev 2.6s cubic-bezier(.45,0,.55,1) infinite}
.info-next.hint{animation:info-nudge-next 2.6s cubic-bezier(.45,0,.55,1) infinite}
.info-nav.hint:is(:hover, :focus-visible){animation:none}
@media (prefers-reduced-motion:reduce){ .info-nav.hint{animation:none} }
.info-ghost{pointer-events:none}
.info-top{padding-right:58px}
.fontinfo .webcode-blocks{gap:56px}
.fontinfo .webcode-block:first-child{flex-grow:1}
.fontinfo .info-text{flex-grow:1.3}
.info-top{margin-bottom:28px}
.info-title{margin:0;font-size:28px;line-height:1.2;color:var(--fg);font-synthesis:none;overflow-wrap:anywhere}

.info-sec{margin:26px 0 8px;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.info-sec:first-child{margin-top:0}

.info-list{font-size:12.5px;line-height:1.7}
.info-row{display:flex;gap:18px;align-items:baseline;padding:2px 0}
.info-break{margin-top:12px}
.info-k{flex:none;width:88px;color:var(--dim)}
.info-v{min-width:0;overflow-wrap:anywhere}
.info-line{display:block}
.info-small{font-size:11px;line-height:1.6;color:var(--dim)}
.info-fine{font-size:11px;line-height:1.6}
.info-fine .info-v{color:var(--dim)}
.info-empty{margin:0;color:var(--dim)}

.info-prose{font-size:13px;line-height:1.85}
.info-prose > :not(.glyph-row){max-width:62ch}
.info-prose p{margin:0 0 1em}
.info-prose :is(h4, h5, h6){margin:1.6em 0 .5em;font-size:13px;font-weight:600}
.info-prose :is(h5, h6){color:var(--dim)}
.info-prose :is(ul, ol){margin:0 0 1em;padding-left:1.3em}
.info-prose hr{border:0;border-top:1px solid var(--faint);margin:1.6em 0}
.info-prose blockquote{margin:0 0 1em;padding-left:1em;border-left:1px solid var(--faint)}
.info-prose table{border-collapse:collapse;margin:0 0 1em;font-size:12px}
.info-prose :is(th, td){padding:2px 12px 2px 0;text-align:left;vertical-align:top}

@property --glyph-draw{syntax:"<number>";inherits:false;initial-value:0}
.glyph-row{display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));container-type:inline-size;color:var(--fg);font-synthesis:none}
.glyph-gap{margin-top:12px}
.glyph-row + .info-empty{margin-top:26px}
.glyph{position:relative;display:grid;place-items:center;aspect-ratio:1;font-size:calc(100cqw / var(--n) * .66);line-height:1}
.glyph::before{
  --top:clamp(0, var(--glyph-draw) * 4, 1);
  --side:clamp(0, (var(--glyph-draw) - .25) * 2, 1);
  --foot:clamp(0, (var(--glyph-draw) - .75) * 4, 1);
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--dim), var(--dim)) 50% 0 / calc(var(--top) * 100%) 1px,
    linear-gradient(var(--dim), var(--dim)) 0 1px / 1px calc(var(--side) * (100% - 2px)),
    linear-gradient(var(--dim), var(--dim)) 100% 1px / 1px calc(var(--side) * (100% - 2px)),
    linear-gradient(var(--dim), var(--dim)) 0 100% / calc(var(--foot) * 50%) 1px,
    linear-gradient(var(--dim), var(--dim)) 100% 100% / calc(var(--foot) * 50%) 1px;
  background-repeat:no-repeat;
  transition:--glyph-draw .26s cubic-bezier(.4,0,.2,1);
}
.glyph:hover::before{--glyph-draw:1;transition-duration:.4s}
.glyph:empty::before{content:none}
@media (prefers-reduced-motion:reduce){ .glyph::before{transition:none} }

.glyph{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button.glyph{letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-indent:inherit;text-shadow:inherit;text-align:inherit;cursor:auto;-webkit-tap-highlight-color:transparent}
.glyph:focus-visible{outline-offset:-3px}
.glyph.lifted > .glyph-ch{visibility:hidden}
.glyph-loupe{position:fixed;z-index:30;width:0;height:0;pointer-events:none;color:var(--fg);font-synthesis:none}
.glyph-loupe > span{position:absolute;left:0;top:0;translate:-50% -50%;line-height:1;white-space:pre}
.fontinfo > *{transition:opacity .36s linear}
.fontinfo.magnifying > *{opacity:.1;transition-duration:.6s}

.glyph-carousel{position:fixed;inset:0;z-index:29;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.glyph-caption{position:fixed;z-index:30;display:flex;gap:16px;translate:-50% 0;font-size:11px;line-height:1.2;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}

.info-link{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px;transition:text-decoration-color .2s linear}
.info-link:is(:hover, :focus-visible){text-decoration-color:currentColor;outline:none}