:root{--bg-color:#f0f0f0;--text-color:#000;--primary-color:#00f;--secondary-color:#f0f;--accent-color:#ff0;--danger-color:red;--success-color:#0f0;--border-width:4px;--shadow-offset:6px}*{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:none;background-image:radial-gradient(#000 1px,#0000 1px);background-size:20px 20px;margin:0;padding:0;font-family:Courier New,Courier,monospace}.container{border-left:var(--border-width)solid black;border-right:var(--border-width)solid black;background:#fff;max-width:800px;min-height:100vh;margin:0 auto;padding:20px}h1,h2,h3{text-transform:uppercase;letter-spacing:-1px;margin-bottom:20px;font-weight:900}h1{background:var(--accent-color);border:var(--border-width)solid black;box-shadow:var(--shadow-offset)var(--shadow-offset)0 0 black;padding:10px;font-size:3rem;display:inline-block}h2{font-size:1.5rem}button{color:#000;border:var(--border-width)solid black;cursor:pointer;box-shadow:var(--shadow-offset)var(--shadow-offset)0 0 black;text-transform:uppercase;background:#fff;margin:10px 0;padding:15px 20px;font-family:inherit;font-size:1.2rem;font-weight:700;transition:all .1s;position:relative;top:0;left:0}button:active{top:4px;left:4px;box-shadow:2px 2px #000}button:hover{color:#fff;background:#000}button.secondary{background:var(--bg-color);padding:10px;font-size:.8rem}input,select{border:var(--border-width)solid black;appearance:none;background:#fff;border-radius:0;width:100%;margin-bottom:15px;padding:15px;font-family:inherit;font-size:1.2rem;box-shadow:4px 4px #ddd}input[type=range]{height:20px;box-shadow:none;background:#ddd;border:2px solid #000;margin-top:10px;padding:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--secondary-color);cursor:pointer;border:3px solid #000;width:30px;height:30px;box-shadow:2px 2px #000}input[type=range]::-moz-range-thumb{background:var(--secondary-color);cursor:pointer;border:3px solid #000;width:30px;height:30px;box-shadow:2px 2px #000}input:focus,select:focus{background:var(--secondary-color);color:#fff;outline:none;box-shadow:4px 4px #000}input[type=range]:focus{background:#ddd}.card{border:var(--border-width)solid black;box-shadow:var(--shadow-offset)var(--shadow-offset)0 0 black;background:#fff;margin-bottom:30px;padding:20px}.progress-bar{border:var(--border-width)solid black;background:#fff;width:100%;height:30px;margin-bottom:30px;position:relative}.progress-fill{background:var(--primary-color);border-right:var(--border-width)solid black;height:100%;transition:width .3s}.flex-row{justify-content:space-between;gap:10px;display:flex}.result-badge{border:var(--border-width)solid black;margin:20px 0;padding:20px;font-size:4rem;font-weight:700;display:inline-block;box-shadow:10px 10px #000}.mt-4{margin-top:2rem}.mb-4{margin-bottom:2rem}.text-center{text-align:center}.bold{font-weight:700}@media (max-width:600px){h1{font-size:2rem}.result-badge{font-size:3rem}.container{border:none;width:100%;max-width:100%;padding:15px}.flex-row{flex-direction:column;gap:15px}button{width:100%;padding:20px;font-size:1.1rem}.test-buttons-grid{grid-template-columns:repeat(5,1fr);gap:5px}.test-buttons-grid button{padding:15px 5px;font-size:1.2rem}input,select{padding:15px;font-size:16px}.card{padding:15px}}
