.typography-recommendations,.typography-finishes{color:#121212;background:#fff;padding:16px;min-width:0}
.typography-font-browser{display:block;overflow:auto}.typography-font-browser[hidden]{display:none}
.typography-font-browser .font-browser-layout{min-height:300px}.typography-font-browser .font-categories button{min-height:44px}
.typography-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}
.typography-cards article{border:1px solid #121212;border-radius:8px;padding:16px;min-width:0}
.typography-cards p{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.typography-sample{background:#121212;overflow:hidden;min-height:44px;display:flex;align-items:center;border-radius:4px;margin:8px 0}
.typography-sample svg{display:block;width:100%;height:88px}
.typography-swatches{display:flex;gap:4px;margin:8px 0}.typography-swatches span{width:24px;height:24px;border:1px solid #121212;border-radius:50%}
.typography-recommendations button,.typography-effects button{min-height:44px;padding:8px 16px;border:1px solid #121212;border-radius:4px;background:#fff;color:#121212;font:inherit;cursor:pointer}
.typography-recommendations button:hover,.typography-effects button:hover{border-color:#F96601;background:#F3F3F3}
.typography-effects{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:16px 0}
.typography-effects button{font-size:16px;white-space:normal;text-transform:none;letter-spacing:0}
.typography-controls{display:flex;flex-wrap:wrap;gap:16px}.typography-controls label{flex:1 1 120px}.typography-controls select,.typography-finishes>select{display:block;min-height:44px;width:100%;font:inherit}
@media(max-width:700px){.typography-cards{grid-template-columns:1fr}.typography-recommendations,.typography-finishes{padding:8px}}
.typography-admin{width:min(1500px,96vw);height:90vh;overflow:auto;background:#fff;color:#121212;border:2px solid #121212;padding:24px}
.typography-admin::backdrop{background:#121212bb}.typography-admin section{margin-top:16px}.typography-admin details{padding:16px;border-bottom:1px solid #121212}
.typography-admin summary{cursor:pointer;font-size:20px;min-height:44px}.typography-admin label{display:inline-flex;flex-direction:column;gap:4px;margin:8px;max-width:100%}
.typography-admin input,.typography-admin select{min-height:44px;font:inherit;max-width:100%}.typography-admin input[type=checkbox]{width:24px}
.typography-alphabet{font-size:28px;margin:16px 0}.typography-showcase-board{background:#121212;aspect-ratio:51.4/4.25;overflow:hidden}.typography-showcase-board svg{width:100%;height:100%}
.font-acquisition{overflow-wrap:anywhere}.font-acquisition button{margin:4px;min-height:44px;white-space:normal}.font-acquisition textarea{width:100%;max-width:100%;font:inherit}.font-acquisition label{max-width:100%;min-width:0}.font-acquisition fieldset{min-width:0;border:1px solid #121212;margin:12px 0}.font-acquisition article{padding:16px 0;border-bottom:1px solid #121212}.font-acquisition-record{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:13px}.font-acquisition-metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px}.font-acquisition-metrics dd{margin:0;font-weight:700}.font-acquisition a{display:block;color:#121212;text-decoration:underline;margin:12px 0}.font-acquisition>div>p:first-of-type{border-left:4px solid #F96601;padding:12px}