/* Mechanical split-flap enhancement. Isolated from the preserved legacy board. */
.split-flap-mechanical-frame {
  --sf-gap:4px;
  --sf-height:450px;
  height:var(--sf-height)!important;
  align-items:stretch!important;
}
.split-flap-mechanical {
  --sf-cell-height:calc((var(--sf-height) - 5 * var(--sf-gap))/6);
  display:grid!important;
  grid-template-columns:repeat(15,minmax(0,1fr))!important;
  grid-template-rows:repeat(6,var(--sf-cell-height))!important;
  gap:var(--sf-gap)!important;
  width:min(806px,100%)!important;
  height:var(--sf-height)!important;
  margin:0 auto!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  overflow:hidden!important;
  -webkit-perspective:900px;
  perspective:900px;
  -webkit-transform:none!important;
  transform:none!important;
}
.split-flap-mechanical .sf-cell {
  --sf-half:calc(var(--sf-cell-height)/2);
  position:relative;
  width:100%;
  height:var(--sf-cell-height);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:clamp(2px,.45vw,5px);
  background:#141416;
  color:#f1eee3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.35);
  contain:layout paint style;
  isolation:isolate;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.sf-cell::before,.sf-cell::after {
  content:"";
  position:absolute;
  top:calc(50% - 2px);
  z-index:20;
  width:clamp(2px,.35vw,4px);
  height:4px;
  border-radius:1px;
  background:#080809;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.sf-cell::before{left:1px}.sf-cell::after{right:1px}
.sf-half {
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.sf-half span {
  position:absolute;
  left:0;
  display:flex;
  width:100%;
  height:var(--sf-cell-height);
  align-items:center;
  justify-content:center;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:clamp(.72rem,3.5vw,2.55rem);
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 0 #000;
}
.sf-top{top:0;border-bottom:1px solid #050506;background:linear-gradient(180deg,#242427,#1c1c1f)}
.sf-top span,.sf-out span{top:0}
.sf-bottom{bottom:0;border-top:1px solid rgba(255,255,255,.035);background:linear-gradient(180deg,#171719,#111113)}
.sf-bottom span,.sf-in span{top:calc(var(--sf-half) * -1)}
.sf-out{top:0;z-index:8;background:linear-gradient(180deg,#262629,#1c1c1f);transform-origin:bottom center}
.sf-in{bottom:0;z-index:9;background:linear-gradient(180deg,#18181a,#111113);transform:rotateX(90deg);transform-origin:top center}
.sf-cell.is-flipping .sf-out{animation:sf-top-drop var(--sf-speed) steps(2,end) forwards}
.sf-cell.is-flipping .sf-in{animation:sf-bottom-land var(--sf-speed) steps(2,end) forwards}
@keyframes sf-top-drop{0%,42%{transform:rotateX(0)}50%,100%{transform:rotateX(-90deg)}}
@keyframes sf-bottom-land{0%,49%{transform:rotateX(90deg)}58%,100%{transform:rotateX(0)}}
@media(max-width:900px){
  .split-flap-mechanical-frame{--sf-gap:3px;--sf-height:270px}
  .sf-half span{font-size:clamp(.7rem,3.45vw,1.72rem)}
}
@media(max-width:600px){
  .split-flap-mechanical-frame{--sf-gap:2px;--sf-height:214px}
  .sf-half span{font-size:clamp(.62rem,3.42vw,1.28rem)}
}
@media(max-width:430px){.split-flap-mechanical-frame{--sf-height:190px}}
@media(prefers-reduced-motion:reduce){.sf-cell.is-flipping .sf-out,.sf-cell.is-flipping .sf-in{animation:none!important}}
@supports not (transform-style:preserve-3d){.sf-out,.sf-in{display:none}}