@font-face{font-family:Oswald;src:url(/fonts/Oswald.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@keyframes splitFlapFlipDownTop{0%{transform:rotateX(0);filter:brightness(1)}to{transform:rotateX(-90deg);filter:brightness(.3)}}@keyframes splitFlapFlipDownBottom{0%{transform:rotateX(90deg);filter:brightness(.3)}to{transform:rotateX(0);filter:brightness(1)}}.split-flap-display{--rows: 6;--cols: 22;--flap-w: 36px;--flap-h: 50px;--font-size: 34px;--gap: 4px;--board-padding: 24px;--flip-half: .05s;--bg-color: #121212;--board-bg: #0a0a0b;--flap-bg: #1c1c1c;--flap-border: #000000;--text-color: #ededed;font-family:Oswald,sans-serif;font-weight:500;background-color:var(--bg-color)}.split-flap-display .board{background:var(--board-bg);padding:var(--board-padding);border-radius:8px;box-shadow:0 25px 50px #000c,inset 0 0 0 2px #ffffff05;display:grid;grid-template-columns:repeat(var(--cols),var(--flap-w));gap:var(--gap);position:relative}.split-flap-display .flap{width:var(--flap-w);height:var(--flap-h);position:relative;background:#000;border-radius:3px;perspective:1000px;box-shadow:0 2px 5px #0006;contain:layout style paint;will-change:auto;-webkit-user-select:none;user-select:none}.split-flap-display .half{position:absolute;left:0;width:100%;height:calc(50% - .5px);background-color:var(--flap-bg);overflow:hidden;border-radius:3px;backface-visibility:hidden;transform-style:preserve-3d}.split-flap-display .top{top:0;transform-origin:bottom;border-bottom:1px solid var(--flap-border)}.split-flap-display .bottom{bottom:0;transform-origin:top;border-top:1px solid var(--flap-border)}.split-flap-display .text{position:absolute;left:0;width:100%;height:var(--flap-h);line-height:var(--flap-h);text-align:center;font-size:var(--font-size);color:var(--text-color);text-shadow:0 1px 1px rgba(0,0,0,.8)}.split-flap-display .text.high-char{line-height:calc(var(--flap-h) - 10px)}.split-flap-display .text.medium-char{line-height:calc(var(--flap-h) - 6px)}.split-flap-display .text.low-char{line-height:calc(var(--flap-h) + 5px)}.split-flap-display .top .text{top:0}.split-flap-display .bottom .text{bottom:0}.split-flap-display .flip-top,.split-flap-display .flip-bottom{display:none;z-index:10}.split-flap-display .flap.flipping{will-change:transform}.split-flap-display .flap.flipping .flip-top{display:block;animation:splitFlapFlipDownTop var(--flip-half) ease-in forwards}.split-flap-display .flap.flipping .flip-bottom{display:block;transform:rotateX(90deg);animation:splitFlapFlipDownBottom var(--flip-half) ease-out var(--flip-half) forwards}