:root{--animation-duration:3s;--border-radius:8px;--bg-opacity:.8}body{color:#222;background:0 0;margin:0;font-family:Arial,sans-serif}#config-form{z-index:1000;padding:4px;display:block;position:fixed}#canvas{border-radius:var(--border-radius);border:5px solid #0000;justify-content:center;align-items:center;column-gap:24px;padding:8px;display:flex;position:fixed;inset:0}#error{color:maroon;border-radius:var(--border-radius);padding:8px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#error:not(:empty){border:5px solid maroon}#error:empty{display:none}#verdict{font-size:clamp(12px,5cqw,48px)}#cf-logo{display:block}#canvas.PROBLEM{color:#fef2f2;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;background:linear-gradient(#c8000066,#ef444466),#000000a6;border-color:maroon}#canvas.SUCCESS{color:#ecfdf5;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;background:linear-gradient(#22c55e7a,#22c55e7a),#000000a6;border-color:#22c55ebf}#canvas.UNKNOWN{color:#fff;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;background:linear-gradient(#3b82f629,#3b82f629),#000000a6;border-color:#363636}#canvas.PROBLEM{animation:slideInOut var(--animation-duration) ease forwards}#canvas.PROBLEM #verdict{animation:1s ease-in-out infinite alternate pulse}#canvas.PROBLEM #cf-logo{transform-origin:bottom;animation:2s ease-in-out infinite bounceSquish}#canvas.PROBLEM #socket-disconnected{animation:.35s ease-out infinite packetNudge}#canvas.SUCCESS{animation:slideInOut var(--animation-duration) ease forwards}#canvas.SUCCESS #verdict{animation:1s ease-in-out infinite alternate pulse}#canvas.SUCCESS #cf-logo{transform-origin:bottom;animation:2s ease-in-out infinite bounceSquish}#canvas.SUCCESS #socket-disconnected{animation:.35s ease-out infinite packetNudge}#canvas.SUCCESS #socket-connected{animation:.35s ease-out infinite shake}#canvas.UNKNOWN{animation:slideInOut var(--animation-duration) ease forwards}#canvas.UNKNOWN #verdict{animation:1s ease-in-out infinite alternate pulse}#canvas.UNKNOWN #cf-logo{transform-origin:bottom;animation:2s ease-in-out infinite bounceSquish}#canvas.UNKNOWN #socket-disconnected{animation:.35s ease-out infinite packetNudge}#canvas:not(.CF) #cf-logo,#canvas:not(.SOCKET.PROBLEM) #socket-disconnected,#canvas:not(.SOCKET.SUCCESS) #socket-connected{display:none}#logo{box-sizing:border-box;max-width:100%;max-height:100%;display:flex}#logo img{object-fit:contain;max-width:100%;max-height:150px}#canvas.SOCKET_OPENED{background-color:rgba(0, 255, 0, var(--bg-opacity))}#canvas.SOCKET_CLOSED{background-color:rgba(255, 0, 0, var(--bg-opacity))}#canvas.SOCKET_ERROR{background-color:rgba(128, 128, 128, var(--bg-opacity))}#canvas.COMPILATION_ERROR{background-color:rgba(255, 255, 0, var(--bg-opacity))}#canvas.RUNTIME_ERROR{background-color:rgba(255, 165, 0, var(--bg-opacity))}#canvas.UNKNOWN{background-color:rgba(128, 128, 128, var(--bg-opacity))}@keyframes slideInOut{0%{opacity:0;transform:translate(-100%)}10%{opacity:1;transform:translate(0)}90%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes pulse{0%{transform:scale(.9)}60%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bounceSquish{0%{transform:translateY(0)scale(1)}20%{transform:translateY(-12px)scale(1)}40%{transform:translateY(0)scale(1.1,.85)}50%{transform:translateY(-6px)scale(.97,1.05)}70%{transform:translateY(0)scale(1.05,.9)}to{transform:translateY(0)scale(1)}}@keyframes packetNudge{0%,to{transform:translate(0)}30%{transform:translate(4px)}60%{transform:translate(-2px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}