#font_size_convertion.offcanvas {--bs-offcanvas-width: 800px;}@media screen and (max-width: 992px) {#font_size_convertion.offcanvas {--bs-offcanvas-width: 400px;}}#typography_system.offcanvas {--bs-offcanvas-height: 100vh;--bs-offcanvas-height: 100dvh;}#contrast_boxes {display: -webkit-box;display: -ms-flexbox;display: flex;}#contrast_boxes > div {flex: 1;margin: 0.5rem 0.5rem 0 0;background: #081;color: var(--white);text-align: center;padding: 0.5rem;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-transition: background-color 0.5s;-moz-transition: background-color 0.5s;-ms-transition: background-color 0.5s;-o-transition: background-color 0.5s;transition: background-color 0.5s;}#contrast_boxes > div::after {content: "✓ Pass";color: var(--white);text-align: center;width: 100%;display: block;font-size: 1.1rem;font-weight: 600;margin-top: 0.6rem;}#contrast_boxes > div.fail {background: #d32;}#contrast_boxes > div.fail::after {content: "✕ Fail";}#contrast_boxes span:first-child {font-size: 1rem;display: block;}#sample-text {padding: 2rem 1rem;background: var(--white);color: var(--black);text-align: center;font-size: 1.5rem;}#bars {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}#bars > div {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}#bars > div:first-child {margin-right: 0.5rem;}#bars > div:last-child {margin-left: 0.5rem;}#bars > div > div {display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 0.5rem;}#bars label {display: inline-block;color: var(--white);font-size: 1rem;font-weight: 600;width: 2rem;height: 2rem;line-height: 2rem;text-align: center;box-sizing: border-box;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;margin-right: 0.5rem;}label.red {background: #d32;}label.green {background: #081;}label.blue {background: #26e;}#bars input[type="range"] {flex: 1;}#bars input[type="number"] {text-align: center;width: 3rem;border-radius: 2px;border: 1px solid #ccc;font-size: 0.75rem;height: 2rem;box-sizing: border-box;line-height: 2rem;margin-left: 0.5rem;}#bars input[type="text"] {border-radius: 2px;border: 1px solid #ccc;text-align: center;font-size: 1rem;height: 2rem;box-sizing: border-box;line-height: 2rem;}