.error-container{--metal:#fff;--smoke:rgba(255,255,255,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:linear-gradient(135deg,#939aa4,#6c7383 50%,#4f5a6b);color:white;text-align:center;h1{font-size:8rem;font-weight:900;margin:0;text-shadow:0 4px 8px rgba(0,0,0,.3);animation:pulse 2s ease-in-out infinite alternate}h2{font-size:2rem;font-weight:600;margin:1rem 0;opacity:.9}.sub-heading{font-size:1.2rem;font-weight:400;margin:2rem 0;line-height:1.6;max-width:600px;opacity:.8}a{display:inline-block;margin-top:2rem;padding:.8rem 2rem;background:rgba(255,255,255,.2);color:white;text-decoration:none;border-radius:8px;border:2px solid rgba(255,255,255,.3);font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s ease-in-out;&:hover{background:rgba(255,255,255,.3)}}}.pistons{display:flex;justify-content:center;gap:30px;margin-top:40px;&.broken{animation:shake .4s ease-in-out 3,subtleVibration 2s ease-in-out 1.5s infinite;.piston{.rod{animation:none}&:first-child{.smoke:nth-child(3){animation:puff 2s ease-out 0s infinite}.smoke:nth-child(4){animation:puff 2.4s ease-out .4s infinite}.smoke:nth-child(5){animation:puff 2.8s ease-out 1s infinite}}&:nth-child(2){.smoke:nth-child(3){animation:puff 2.2s ease-out .2s infinite}.smoke:nth-child(4){animation:puff 2.6s ease-out .8s infinite}.smoke:nth-child(5){animation:puff 3s ease-out 1.4s infinite}}&:nth-child(3){.smoke:nth-child(3){animation:puff 2.4s ease-out .3s infinite}.smoke:nth-child(4){animation:puff 2.8s ease-out .9s infinite}.smoke:nth-child(5){animation:puff 3.2s ease-out 1.6s infinite}}&:nth-child(4){.smoke:nth-child(3){animation:puff 2.6s ease-out .1s infinite}.smoke:nth-child(4){animation:puff 3s ease-out .7s infinite}.smoke:nth-child(5){animation:puff 3.4s ease-out 1.3s infinite}}}.smoke-source{opacity:.6;animation:glow 2.5s ease-in-out infinite}}}.piston{width:40px;height:120px;position:relative;overflow:visible;.rod{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:120px;background:var(--metal);border-radius:6px;animation:rodMove .4s ease-in-out infinite;&:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:44px;background:var(--metal);border-radius:10px}}.smoke-source{width:16px;height:16px}.smoke,.smoke-source{position:absolute;top:-10px;left:50%;background:var(--smoke);border-radius:50%;opacity:0}.smoke{width:12px;height:12px}&.delay1 .rod{animation:rodMove .405s ease-in-out .05s infinite}&.delay2 .rod{animation:rodMove .41s ease-in-out .1s infinite}&.delay3 .rod{animation:rodMove .415s ease-in-out .15s infinite}}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes rodMove{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,28px)}}@keyframes glow{0%,to{transform:translate(-50%) scale(1);opacity:.4;filter:blur(0)}50%{transform:translate(-50%) scale(1.1);opacity:.6;filter:blur(1px)}}@keyframes puff{0%{transform:translate(-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-25px) scale(1.7);opacity:.3}to{transform:translate(-50%,-50px) scale(2);opacity:0}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}@keyframes subtleVibration{0%,to{transform:translateX(0)}50%{transform:translateX(1px)}}@media (max-width:768px){.error-container{h1{font-size:6rem}h2{font-size:1.5rem}.sub-heading{font-size:1rem;padding:0 1rem}}}@media (max-width:480px){.error-container{padding:1rem;h1{font-size:4rem}}}