:root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh;background-color:#f0f0f0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");padding:1rem;padding-bottom:10vh}.container{max-width:500px;width:100%;padding:3rem 3rem 4rem;background:#fff;box-shadow:15px 15px #000;border:4px solid #000;text-align:left;position:relative}header h1{font-size:3.5rem;font-weight:900;text-transform:uppercase;letter-spacing:-3px;margin:0;line-height:.85;color:#000;overflow-wrap:break-word}.subtitle{font-size:.8rem;font-weight:800;letter-spacing:.3em;margin-top:1rem;margin-bottom:3rem;color:#000;text-transform:uppercase;border-bottom:2px solid #000;padding-bottom:.5rem;display:inline-block}.judgment-zone{margin-bottom:3rem;font-style:normal;font-weight:500;border-left:6px solid #000;padding-left:1.5rem;font-size:1.1rem;line-height:1.4}.judgment-zone p{margin:.5rem 0}.input-group{margin-bottom:2rem;display:flex;flex-direction:column}label{font-size:.7rem;text-transform:uppercase;font-weight:900;margin-bottom:.75rem;letter-spacing:2px;color:#000}input,textarea{padding:1.25rem;border:2px solid #000;font-family:inherit;font-size:1rem;font-weight:600;background:transparent;transition:all .2s cubic-bezier(.25,1,.5,1);border-radius:0;width:100%}input:focus,textarea:focus{outline:none;background:#000;color:#fff;transform:scale(1.02);box-shadow:10px 10px #0003}button{width:100%;padding:1.25rem;background:#000;color:#fff;border:2px solid #000;font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:3px;cursor:pointer;transition:all .2s;margin-top:2rem;border-radius:0;position:relative;overflow:hidden}button:hover{background:#fff;color:#000;box-shadow:8px 8px #000;transform:translate(-4px,-4px)}button:active{transform:translate(0);box-shadow:none}footer{margin-top:2.5rem;text-align:center;font-size:.65rem;font-weight:900;color:#000;letter-spacing:1px;text-transform:uppercase;opacity:.5}footer p{margin:0}@media(max-width:600px){.container{padding:1.5rem 1.5rem 2.5rem;box-shadow:8px 8px #000}header h1{font-size:2.5rem;letter-spacing:-2px}.subtitle{margin-bottom:2rem;font-size:.7rem}.judgment-zone{margin-bottom:2rem;padding-left:1rem;border-left-width:4px;font-size:1rem}input,textarea{padding:1rem}button{padding:1rem;font-size:1rem}footer{margin-top:1.5rem}input,textarea{font-size:16px}}@media(prefers-color-scheme:dark){:root{color:#fff;background-color:#050505}body{background-color:#0a0a0a;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E")}.container{background:#000;border:4px solid #fff;box-shadow:15px 15px #222}header h1{color:#fff}.subtitle{color:#fff;border-bottom-color:#fff}.judgment-zone{border-left-color:#fff}label{color:#fff}input,textarea{border-color:#333;color:#fff;background:#000}input:focus,textarea:focus{border-color:#fff;background:#fff;color:#000;box-shadow:10px 10px #fff3}button{background:#fff;color:#000;border-color:#fff}button:hover{background:#000;color:#fff;box-shadow:8px 8px #fff}footer{color:#fff}@media(max-width:600px){.container{box-shadow:8px 8px #222}}}