.flap-board{--flap-w:1.15em;--flap-h:1.6em;--flap-bg:#1d1d1f;--flap-bg-low:#262628;--flap-ink:#f5f5f7;--flap-sep:var(--gold-ink);font-family:var(--font-code),monospace;font-variant-numeric:tabular-nums;align-items:center;gap:.14em;font-weight:600;line-height:1;display:inline-flex}.dark .flap-board{--flap-bg:#2a2a2c;--flap-bg-low:#323234;--flap-ink:#ececec}.flap-cell{width:var(--flap-w);height:var(--flap-h);perspective:6em;color:var(--flap-ink);border-radius:.16em;display:block;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px color(display-p3 0 0 0/.3);box-shadow:0 1px 2px lab(0% 0 0/.3)}.flap-cell:after{content:"";z-index:3;left:0;right:0;pointer-events:none;background:rgba(0,0,0,.55);background:color(display-p3 0 0 0/.55);background:lab(0% 0 0/.55);height:1px;position:absolute;top:calc(50% - .5px)}.flap-half{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:50%;position:absolute;left:0;right:0;overflow:hidden}.flap-half>span{height:var(--flap-h);line-height:var(--flap-h);text-align:center;display:block}.flap-top{background:var(--flap-bg);border-radius:.16em .16em 0 0;top:0}.flap-bottom{background:var(--flap-bg-low);border-radius:0 0 .16em .16em;bottom:0}.flap-bottom>span,.flap-back>span{translate:0 -50%}.flap-leaf{z-index:2;transform-origin:50% 100%;transform-style:preserve-3d;animation:flap-fall var(--flap-dur,90ms)cubic-bezier(.55,0,.9,.45)both;position:absolute;top:0;bottom:50%;left:0;right:0}.flap-leaf>.flap-half{height:100%;top:0;bottom:0;left:0;right:0}.flap-leaf>.flap-back{background:var(--flap-bg-low);border-radius:0 0 .16em .16em;transform:rotateX(180deg)}.flap-leaf>.flap-top{animation:flap-dim var(--flap-dur,90ms)ease-in both}.flap-leaf[data-final]{animation-name:flap-fall-final;animation-timing-function:linear}@keyframes flap-fall{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}@keyframes flap-fall-final{0%{animation-timing-function:cubic-bezier(.5,0,.9,.5);transform:rotateX(0)}68%{animation-timing-function:cubic-bezier(.2,.7,.4,1);transform:rotateX(-180deg)}82%{animation-timing-function:cubic-bezier(.6,0,.8,.4);transform:rotateX(-163deg)}to{transform:rotateX(-180deg)}}@keyframes flap-dim{to{filter:brightness(.6)}}.flap-sep{text-align:center;width:.3em;color:var(--flap-sep);display:block}
