.mat{--g:#4ade80;--r:#f87171;position:relative;width:100%;max-width:440px;aspect-ratio:34/20;overflow:hidden;border:1px solid var(--color-line-strong);border-radius:14px;background:#0a0d0f}.mat-svg{position:absolute;left:4px;right:4px;top:16px;width:calc(100% - 8px);height:auto}.mat-hud{position:absolute;left:12px;top:10px;display:grid;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--color-muted)}.mat-hud span{grid-area:1/1}.mat-hud .t1{animation:mat-t1 9s infinite}.mat-hud .t2{opacity:0;animation:mat-t2 9s infinite}@keyframes mat-t1{0%,49%{opacity:1}51%,to{opacity:0}}@keyframes mat-t2{0%,49%{opacity:0}51%,to{opacity:1}}.mat-chip{position:absolute;right:10px;top:8px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;border-radius:6px;padding:5px 9px;letter-spacing:.04em}.mat-chip.pass{color:#062b16;background:var(--g);animation:mat-pass 9s infinite}.mat-chip.fail{color:#2a0707;background:var(--r);opacity:0;animation:mat-fail 9s infinite}@keyframes mat-pass{0%,33%{opacity:0;transform:scale(.9)}36%,46%{opacity:1;transform:none}50%,to{opacity:0}}@keyframes mat-fail{0%,76%{opacity:0;transform:scale(.9)}79%,90%{opacity:1;transform:none}94%,to{opacity:0}}.mat-svg g{transform-box:view-box}.mat-up{transform-origin:90px 120px;transform:rotate(-56.2deg);animation:mat-up 9s ease-in-out infinite}.mat-fore{transform-origin:170px 120px;transform:rotate(75.5deg);animation:mat-fore 9s ease-in-out infinite}.mat-wrist{transform-origin:250px 120px;transform:rotate(70.7deg);animation:mat-wrist 9s ease-in-out infinite}.mat-f1{transform:translateY(2px);animation:mat-f1 9s ease-in-out infinite}.mat-f2{transform:translateY(-2px);animation:mat-f2 9s ease-in-out infinite}.mat-block{transform-box:fill-box!important;transform-origin:50% 100%;transform:translateY(-38px);animation:mat-block 9s ease-in-out infinite}@keyframes mat-up{0%,8%{transform:rotate(-60deg)}18%,24%{transform:rotate(-42.4deg)}33%,44%{transform:rotate(-56.2deg)}48%,50%{transform:rotate(-42.4deg)}56%{transform:rotate(-60deg)}62%,67%{transform:rotate(-42.4deg)}76%,88%{transform:rotate(-56.2deg)}96%,to{transform:rotate(-60deg)}}@keyframes mat-fore{0%,8%{transform:rotate(60deg)}18%,24%{transform:rotate(82.8deg)}33%,44%{transform:rotate(75.5deg)}48%,50%{transform:rotate(82.8deg)}56%{transform:rotate(60deg)}62%,67%{transform:rotate(82.8deg)}76%,88%{transform:rotate(75.5deg)}96%,to{transform:rotate(60deg)}}@keyframes mat-wrist{0%,8%{transform:rotate(90deg)}18%,24%{transform:rotate(49.6deg)}33%,44%{transform:rotate(70.7deg)}48%,50%{transform:rotate(49.6deg)}56%{transform:rotate(90deg)}62%,67%{transform:rotate(49.6deg)}76%,88%{transform:rotate(70.7deg)}96%,to{transform:rotate(90deg)}}@keyframes mat-f1{0%,18%{transform:none}21%,48%{transform:translateY(2px)}50%,62%{transform:none}65%,88%{transform:translateY(2px)}92%,to{transform:none}}@keyframes mat-f2{0%,18%{transform:none}21%,48%{transform:translateY(-2px)}50%,62%{transform:none}65%,88%{transform:translateY(-2px)}92%,to{transform:none}}@keyframes mat-block{0%,24%{transform:translateY(0) rotate(0)}33%,44%{transform:translateY(-38px) rotate(0)}48%,67%{transform:translateY(0) rotate(0)}71%{transform:translateY(-12px) rotate(0)}74%{transform:translateY(0) rotate(-8deg)}79%,to{transform:translateY(0) rotate(0)}}.mat-score{position:absolute;left:12px;bottom:12px;display:flex;gap:5px;align-items:center}.mat-score i{width:22px;height:6px;border-radius:2px;background:rgba(255,255,255,.12)}.mat-score i.p{background:var(--g);opacity:.75}.mat-score i.f{background:var(--r);opacity:.75}.mat-score i.c7{background:var(--g);animation:mat-c7 9s infinite}.mat-score i.c8{animation:mat-c8 9s infinite}@keyframes mat-c7{0%,34%{background:rgba(255,255,255,.12)}36%,97%{background:var(--g)}to{background:rgba(255,255,255,.12)}}@keyframes mat-c8{0%,77%{background:rgba(255,255,255,.12)}79%,97%{background:var(--r)}to{background:rgba(255,255,255,.12)}}@media (prefers-reduced-motion:reduce){.mat *,.mat :after,.mat :before{animation:none!important}}