.font-tester.ft-ready { display: flex; flex-direction: column; gap: var(--size-s); background: var(--white); color: var(--black); overflow: hidden; } .font-tester.ft-inverted { background: var(--black); color: var(--white); } .ft-bar { display: flex; align-items: center; gap: var(--size-m); flex: none; font-family: var(--carnokytype); font-size: var(--text-s); line-height: 1; } .ft-name, .ft-select { font-family: inherit; font-size: inherit; color: inherit; white-space: nowrap; } .ft-select { background: transparent; border: 0; padding: 0; cursor: var(--cursor-pointer); } .ft-size { flex: 1 1 auto; min-width: 0; accent-color: currentColor; cursor: var(--cursor-pointer); } .ft-invert { flex: none; width: 1em; height: 1em; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); cursor: var(--cursor-pointer); } .ft-preview { --ft-size-unit-at-1440x900: 20.16; flex: 1 1 auto; font-size: calc(var(--size-unit) / var(--ft-size-unit-at-1440x900) * var(--ft-specimen-size)); outline: 0; overflow-wrap: break-word; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } .ft-preview::-webkit-scrollbar { display: none; } .ft-preview p { margin: 0 0 0.3em; font-size: inherit; line-height: inherit; } .ft-preview p:last-child { margin-bottom: 0; } .ft-error { font-family: var(--carnokytype); font-size: var(--text-m); line-height: var(--size-m); color: var(--blue); } @media screen and (max-aspect-ratio: 2.6/3) { .font-tester.ft-ready { height: auto; gap: var(--size-s); } .ft-bar { flex-wrap: wrap; gap: var(--size-s); } .ft-name, .ft-select { flex: 1 1 calc(50% - var(--size-s)); min-width: 0; overflow: hidden; text-overflow: ellipsis; } }