section.type-tester{--foreground: var(--black);--background: var(--yellow-01);position:relative;padding:.2rem 0 .5rem;transition:background-color 200ms ease;background-color:var(--background);color:var(--foreground)}section.type-tester .line-label{margin-bottom:.8rem}section.type-tester .toolbar{display:flex;gap:.2rem;border-top:.02rem solid var(--foreground);margin-bottom:.8rem;max-height:.28rem;overflow:hidden}section.type-tester .toolbar .inner{position:relative;display:flex;align-items:center;flex-grow:1}section.type-tester .toolbar .inner:nth-child(1),section.type-tester .toolbar .inner:nth-child(2),section.type-tester .toolbar .inner:nth-child(3){width:1.58rem}section.type-tester .toolbar .aligment{display:flex;gap:.1rem;align-items:center;padding-right:.1rem}section.type-tester .toolbar .aligment .i{display:block;cursor:pointer;transition:opacity 300ms ease;width:.16rem;opacity:.3}section.type-tester .toolbar .aligment .i.active{opacity:1}section.type-tester .toolbar .aligment svg{display:block}section.type-tester .toolbar .colors{display:flex;align-items:center;gap:.05rem}section.type-tester .toolbar .colors .c{position:relative;display:block;cursor:pointer;width:.12rem;height:.12rem;border-radius:50%}section.type-tester .toolbar .colors .c::before{content:"";display:block;position:absolute;transition:opacity 300ms ease;inset:0;width:100%;height:100%;border:.02rem solid rgba(0,0,0,0);border-radius:50%;opacity:0}section.type-tester .toolbar .colors .c.active::before{opacity:1}section.type-tester .toolbar .colors .y{background-color:var(--yellow-01)}section.type-tester .toolbar .colors .y::before{border-color:var(--black)}section.type-tester .toolbar .colors .b{background-color:var(--blue-01)}section.type-tester .toolbar .colors .b::before{border-color:var(--black)}section.type-tester .toolbar .colors .o{background-color:var(--orange-01)}section.type-tester .toolbar .colors .o::before{border-color:var(--black)}section.type-tester .toolbar .colors .p{background-color:var(--pink)}section.type-tester .toolbar .colors .p::before{border-color:var(--black)}section.type-tester .toolbar .colors .g{background-color:var(--green)}section.type-tester .toolbar .colors .g::before{border-color:var(--black)}section.type-tester .playground{all:unset;display:block;width:100%;max-width:12.22rem;white-space:normal;resize:none;overflow:hidden;word-break:break-word;font-family:var(--ff);font-size:var(--fs);line-height:var(--lh);letter-spacing:var(--ls);font-weight:var(--fw);text-align:var(--ta);padding:.5em 0 0;margin:-0.5em 0 0}section.type-tester .playground[data-align=center]{margin-left:auto;margin-right:auto}section.type-tester .playground[data-align=justify]{margin-left:auto;margin-right:auto;max-width:none}section.type-tester .playground[data-align=right]{margin-left:auto;margin-right:0}@media screen and (max-width: 768px)and (orientation: portrait){section.type-tester .line-label{margin-bottom:0}section.type-tester .toolbar{gap:0;flex-direction:row-reverse;justify-content:flex-start;border:none;margin-top:-0.13rem;margin-bottom:1.2rem}section.type-tester .toolbar .inner{flex-grow:0}section.type-tester .toolbar .inner:not(:nth-last-child(-n+2)){display:none}section.type-tester .toolbar .colors{margin-right:.44rem}section.type-tester .toolbar .colors .c::before{border-width:.01rem}}/*# sourceMappingURL=style.css.map */