.type-intro{max-width:70ch}.type-tabs{display:block;width:max-content;max-width:100%;margin:24px 0}.type-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:960px}.type-controls label,.type-copy-controls label{min-width:0}.type-controls select,.type-copy-controls select,.type-copy-controls input{width:100%;min-width:0}.type-copy-controls{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;margin-top:16px;max-width:960px}.type-tests{display:flex;flex-wrap:wrap;gap:16px 32px;padding:16px 0 24px}.type-tests label{display:flex;align-items:center;gap:8px;min-height:44px}.type-tests input,.type-sample-group input{accent-color:var(--accent);width:20px;height:20px}.type-tests>span{color:var(--dim);font-size:12px;align-self:center}.type-specimen{container-type:inline-size;border:1px solid var(--line);background:var(--surface-panel,#0c1624);border-radius:16px;min-width:0;width:100%;margin:0 auto}.type-specimen-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 24px}.type-specimen-header code{font:12px/16px ui-monospace,monospace;color:var(--dim);overflow-wrap:anywhere}.type-sample{padding:32px;min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:start;min-width:0}.type-sample>*{min-width:0;max-width:100%}.type-sample p,.type-example-content p{max-width:70ch}.type-sample input,.type-example-content input{background:#070e18;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-height:48px;min-width:0;width:100%;max-width:480px}.type-sample input::placeholder,.type-example-content input::placeholder{color:var(--dim);opacity:1}.type-sample label,.type-example-content label{display:block}.type-input-label{font-size:16px;line-height:24px;margin-bottom:8px}.type-hint{font:12px/16px Inter,sans-serif;color:var(--dim);margin:16px 0 0;overflow-wrap:anywhere;max-width:70ch}.type-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0}.type-values>div{min-width:0}.type-values dt{font-size:12px;line-height:16px;color:var(--dim);margin-bottom:4px}.type-values dd{margin:0;overflow-wrap:anywhere}.type-notice{margin-top:16px;color:#f2c57c}.type-role-list{display:grid;margin-top:24px}.type-role-list>button{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.7fr) 160px;gap:24px;align-items:center;text-align:left;background:transparent;color:var(--ink);border:0;padding:16px 8px;min-height:64px;cursor:pointer}.type-role-list>button:hover,.type-role-list>button[aria-pressed=true]{background:var(--surface-hover,#101f30)}.type-role-list>button>span:first-child{display:grid;gap:4px}.type-role-list button>span>span,.type-role-list button>span:last-child{font-size:12px;line-height:16px;color:var(--dim)}.type-role-list code{font:12px/16px ui-monospace,monospace;color:var(--dim);overflow-wrap:anywhere}.type-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.type-examples>article{min-width:0;padding:24px 0;}.type-example-name{font:600 16px/24px Inter,sans-serif;text-transform:none;margin:0 0 24px;color:var(--accent)}.type-example-content{min-width:0;container-type:inline-size}.type-example-content>button{margin-top:16px!important}.type-font-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.type-font-list article{min-width:0}.type-font-list h3{margin:0 0 8px}.type-font-list p{margin-bottom:8px}.type-sample-group{border:1px solid var(--line);padding:16px;width:100%;max-width:480px}.type-sample-group label{display:flex;gap:8px;align-items:center;min-height:44px}.type-sample-list{padding-left:24px}.type-sample blockquote{padding:0}.type-sample kbd{border:1px solid var(--line);border-radius:4px;padding:4px 8px}.type-sample pre{white-space:pre-wrap;overflow-wrap:anywhere}.type-spec-detail pre{max-height:600px;overflow:auto;padding:24px;background:var(--surface-panel,#0c1624);border-radius:16px}.type-resize [data-type-role]{font-size:calc(2 * var(--type-test-size,1rem))!important}.type-spacing-stress [data-type-role]{line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important}.type-spacing-stress p[data-type-role]{margin-bottom:2em!important}.type-spacing-stress label[data-type-role]{margin-bottom:1em!important}.type-resize .type-sample input{min-height:64px;height:auto}
@media(max-width:1000px){.type-values{grid-template-columns:repeat(2,minmax(0,1fr))}.type-role-list>button{grid-template-columns:minmax(0,1fr) minmax(140px,.8fr);gap:16px}.type-role-list button>span:last-child{grid-column:1/-1}}@media(max-width:767px){.type-controls,.type-copy-controls{grid-template-columns:1fr}.type-sample{padding:24px 16px}.type-specimen-header{padding:16px}.type-examples,.type-font-list{grid-template-columns:1fr}.type-role-list>button{grid-template-columns:1fr;gap:8px;padding:16px 0}.type-values{gap:16px}.type-tests{gap:8px 24px}.type-spec-detail pre{padding:16px}}

.type-kpi-scroll{overflow-x:auto}.type-kpi-scroll [data-type-role="metric-value"]{flex-shrink:0;white-space:nowrap}.type-kpi-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}