[data-ds-component=FontInspector] .symbolInspector{grid-template-columns:1fr;max-width:100vw;display:grid}[data-ds-component=FontInspector] .accordion{margin-bottom:var(--core-spacing-size-06);background:var(--semantic-color-background-primary);border:1px solid var(--semantic-color-border-primary);flex-direction:column;display:flex}[data-ds-component=FontInspector] .accordion summary{padding:var(--core-spacing-size-04);font-size:var(--heading-05);cursor:pointer}[data-ds-component=FontInspector] .inspectorContainer{margin-top:var(--core-spacing-size-10);margin-bottom:var(--core-spacing-size-10);background:var(--semantic-color-background-primary);border:1px solid var(--semantic-color-border-primary)}[data-ds-component=FontInspector] .name{font-size:12px}[data-ds-component=FontInspector] .canvas{border:1px solid var(--semantic-color-border-primary);border-radius:var(--core-shape-radius-none);cursor:col-resize;border-left:none;border-right:none;position:relative}[data-ds-component=FontInspector] .inspectorControls{width:100%;font-size:var(--heading-05);content-visibility:auto;grid-template-columns:1fr 1fr 1fr auto;gap:0;display:grid}[data-ds-component=FontInspector] .inspectorControls button{min-height:var(--core-spacing-size-10);padding:var(--core-spacing-size-04);border:1px solid var(--semantic-color-border-primary);color:var(--semantic-color-foreground-primary);cursor:pointer;align-items:center;transition:background-color .3s;display:flex}[data-ds-component=FontInspector] .inspectorControls button:hover{background-color:var(--semantic-color-background-secondary)}[data-ds-component=FontInspector] .inspectorControls button:active{background-color:var(--semantic-color-background-tertiary)}[data-ds-component=FontInspector] .inspectorControls button:focus,[data-ds-component=FontInspector] .inspectorControls button:focus-visible{background-color:var(--semantic-color-background-secondary);outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}[data-ds-component=FontInspector] .inspectorControls button.preview{aspect-ratio:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex}[data-ds-component=FontInspector] .fontSelector{background-color:var(--semantic-color-background-primary);border:1px solid var(--semantic-color-border-primary);width:100%;height:100%;color:var(--semantic-color-foreground-primary)}[data-ds-component=FontInspector] .anatomyControls{gap:var(--core-spacing-size-06);padding:var(--core-spacing-size-06);flex-direction:column;display:flex}[data-ds-component=FontInspector] .anatomyControls h4{margin:var(--core-spacing-size-04) 0}[data-ds-component=FontInspector] .anatomyControls ul{gap:var(--core-spacing-size-04);grid-template-columns:repeat(3,1fr);display:grid}[data-ds-component=FontInspector] .anatomyControls ul+ul{margin-top:var(--core-spacing-size-06)}[data-ds-component=FontInspector] .anatomyControls ul li{list-style:none}[data-ds-component=FontInspector] .symbolContainer{height:100%;padding-bottom:20vh;position:relative;overflow-y:auto}[data-ds-component=FontInspector] .symbolGrid{grid-template-columns:repeat(auto-fill, minmax(var(--core-spacing-size-10), var(--core-spacing-size-10)));width:100%;margin-top:var(--core-spacing-size-10);display:grid;overflow-y:auto}[data-ds-component=FontInspector] .symbolSelectorButton{all:unset;aspect-ratio:1;border:1px solid var(--semantic-color-border-primary);width:100%;color:var(--semantic-color-foreground-primary);font-weight:500;font-size:var(--heading-04);cursor:pointer;justify-content:center;align-items:center;transition:background-color .3s;display:flex}[data-ds-component=FontInspector] .symbolSelectorButton:hover{background-color:var(--semantic-color-background-hover)}[data-ds-component=FontInspector] .symbolSelectorButton:active{background-color:var(--semantic-color-background-tertiary)}[data-ds-component=FontInspector] .symbolSelectorButton:focus{background-color:var(--semantic-color-background-hover);border-radius:var(--core-shape-radius-small);outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}[data-ds-component=FontInspector] .selected{background-color:var(--semantic-color-foreground-accent);color:var(--semantic-color-foreground-onColor)}[data-ds-component=FontInspector] .articleContent{max-width:55rem;margin:var(--core-spacing-size-10) auto;padding:0 var(--core-spacing-size-06);font-size:var(--body-01);line-height:var(--line-height-body)}[data-ds-component=FontInspector] .articleContent img{width:100%;height:auto}[data-ds-component=FontInspector] .articleContent h2{font-size:var(--heading-02)}[data-ds-component=FontInspector] .articleContent p{font-size:var(--body-02);line-height:1.5}[data-ds-component=FontInspector] .articleContent p+p{text-indent:1.5em}[data-ds-component=FontInspector] .articleContent>*+*{margin-top:var(--core-spacing-size-07)}[data-ds-component=FontInspector] .articleContent dl{gap:var(--core-spacing-size-07);grid-template-columns:1fr 1fr;display:grid}[data-ds-component=FontInspector] .articleContent dt{font-weight:500}[data-ds-component=FontInspector] .articleContent dd{margin-left:var(--core-spacing-size-03)}[data-ds-component=FontInspector] .articleContent aside div>*+*{margin-top:var(--core-spacing-size-07)}:is([data-ds-component=FontInspector] .articleContent ul,[data-ds-component=FontInspector] .articleContent ol,[data-ds-component=FontInspector] .articleContent dl) li+li{margin-top:var(--core-spacing-size-06)}[data-ds-component=FontInspector] .articleContent code,[data-ds-component=FontInspector] .articleContent pre{padding:var(--core-spacing-size-04);background-color:var(--semantic-color-background-secondary);border-radius:var(--core-shape-radius-02)}@media (min-width:768px){[data-ds-component=FontInspector] .symbolInspector{grid-template-columns:10fr 12fr}[data-ds-component=FontInspector] .inspectorContainer{--header-height:4rem;top:var(--header-height);max-height:calc(100vh - var(--header-height));position:sticky;left:0}}@media (max-width:1000px){[data-ds-component=FontInspector] .anatomyControls{gap:var(--core-spacing-size-08);padding:var(--core-spacing-size-08) var(--core-spacing-size-04)}[data-ds-component=FontInspector] .anatomyControls ul{gap:var(--core-spacing-size-02);grid-template-columns:1fr 1fr}[data-ds-component=FontInspector] .anatomyControls ul li{margin-bottom:var(--core-spacing-size-06);padding:var(--core-spacing-size-04) 0}}@media screen and (min-width:1000px){[data-ds-component=FontInspector] .articleContent aside{gap:var(--core-spacing-size-07);grid-template-columns:1fr 1fr;display:grid}}