@charset "UTF-8";#dnb-container{background-color:#282828;color:#eee;font-family:dosis,helvetica neue,arial,sans-serif;padding:1.5rem;border-radius:8px;border:1px solid #444;margin:2rem 0}#dnb-container h1,#dnb-container h2{font-size:2rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-top:0}#dnb-container h2{font-size:1.5rem;margin-bottom:1.5rem}#dnb-container p{color:#ccc;margin:.5rem 0}#dnb-container .dnb-status-panel{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;background-color:#303030;border-radius:6px;padding:.5rem;margin:1rem 0;text-align:center}#dnb-container .dnb-status-panel .dnb-label{font-size:.8rem;color:#aaa;text-transform:uppercase}#dnb-container .dnb-status-panel .dnb-value{font-size:1.25rem;font-weight:700;color:#e80012}#dnb-container .dnb-n-controls{display:flex;align-items:center;justify-content:center;margin-top:.25rem}#dnb-container .dnb-n-controls button{background-color:#444;border:1px solid #555;color:#eee;font-weight:700;font-size:1.25rem;padding:.1rem .75rem;border-radius:4px;cursor:pointer;transition:background-color .2s}#dnb-container .dnb-n-controls button:hover{background-color:#e80012}#dnb-container .dnb-n-controls button:disabled{background-color:#3a3a3a;color:#777;cursor:not-allowed}#dnb-container .dnb-n-controls .dnb-value{width:3rem}#dnb-container #grid-container{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.75rem;aspect-ratio:1/1;max-width:20rem;margin:0 auto;padding:.75rem;background-color:#3a3a3a;border-radius:8px}#dnb-container #grid-container div{background-color:#555;border-radius:6px;transition:background-color .2s;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff}#dnb-container #grid-container div.active{background-color:#e80012}#dnb-container .dnb-match-controls{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}#dnb-container .dnb-match-btn{background-color:#444;color:#fff;border:1px solid #666;padding:.75rem;font-size:1rem;font-weight:700;border-radius:6px;cursor:pointer;transition:all .2s;font-family:dosis;text-transform:uppercase}#dnb-container .dnb-match-btn:hover{background-color:#e80012;border-color:#e80012}#dnb-container .dnb-match-btn.pressed{background-color:#c0000f;border-color:#c0000f;transform:translateY(2px)}#dnb-container .dnb-match-btn:disabled{background-color:#3a3a3a;color:#777;cursor:not-allowed}#dnb-container .dnb-main-controls{border-top:1px solid transparent}#dnb-container .dnb-btn{width:100%;background-color:#e80012;color:#fff;font-weight:700;padding:.8rem 1rem;border-radius:6px;border:none;cursor:pointer;transition:transform .2s,background-color .2s;text-transform:uppercase;font-family:dosis;letter-spacing:.1em;font-size:1rem;margin:1em 0}#dnb-container .dnb-btn:hover{transform:scale(1.02);background-color:#ff3345}#dnb-container .dnb-btn:disabled{background-color:#555;cursor:not-allowed;opacity:.6}#dnb-container #reset-btn{background-color:#6c757d}#dnb-container #reset-btn:hover{background-color:#5a6268;transform:scale(1.02)}#dnb-container #settings-panel{background-color:#303030;border-radius:8px;padding:1.5rem;margin-top:2rem;border:1px solid #444}#dnb-container .dnb-settings-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:640px){#dnb-container .dnb-settings-grid{grid-template-columns:1fr 1fr}#dnb-container .dnb-span-2{grid-column:span 2}}#dnb-container .dnb-setting-item label{display:block;font-size:.9rem;margin-bottom:.5rem;color:#ddd}#dnb-container .dnb-setting-item input[type=radio]{margin-right:.5rem}#dnb-container .dnb-number-input-custom{display:flex;align-items:center;background-color:#444;border:1px solid #666;border-radius:4px;overflow:hidden}#dnb-container .dnb-number-input-custom button{background-color:#555;border:none;color:#fff;font-size:1.5rem;font-weight:700;cursor:pointer;padding:.25rem 1rem;transition:background-color .2s;align-self:stretch}#dnb-container .dnb-number-input-custom button:hover{background-color:#e80012}#dnb-container .dnb-number-input-custom input[type=number]{flex-grow:1;background-color:transparent;border:none;color:#fff;text-align:center;font-size:1.1rem;padding:.5rem;width:100%;box-sizing:border-box}#dnb-container .dnb-number-input-custom input[type=number]::-webkit-outer-spin-button,#dnb-container .dnb-number-input-custom input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#dnb-container .dnb-number-input-custom input[type=number]{-moz-appearance:textfield}#dnb-container .dnb-setting-item input[type=range]{width:100%}#dnb-container #result-modal{position:fixed;inset:0;background-color:rgba(0,0,0,.7);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}#dnb-container #result-modal.visible{opacity:1;visibility:visible}#dnb-container .dnb-modal-content{background-color:#282828;border-radius:8px;padding:2rem;width:90%;max-width:45rem;text-align:center;border:1px solid #555}#dnb-container .dnb-results-details{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem;text-align:left}@media(min-width:768px){#dnb-container .dnb-results-details{grid-template-columns:repeat(3,1fr)}}#dnb-container .dnb-results-details h3{font-size:1.1rem;color:#eee;margin:0 0 .75rem;border-bottom:1px solid #444;padding-bottom:.5rem}#dnb-container .dnb-results-details p{display:flex;justify-content:space-between;font-size:.9rem;margin:.3rem 0}#dnb-container .dnb-results-details .result-value{font-weight:700;color:#fff}#dnb-container .feedback-correct{animation:dnb-flash-green .5s ease-out}#dnb-container .feedback-incorrect{animation:dnb-flash-red .5s ease-out}@keyframes dnb-flash-green{50%{box-shadow:0 0 15px 5px rgba(34,197,94,.5)}}@keyframes dnb-flash-red{50%{box-shadow:0 0 15px 5px rgba(239,68,68,.5)}}#dnb-container .dnb-setting-item div label{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;margin:.25rem 1.5rem .25rem 0;transition:color .2s ease}#dnb-container .dnb-setting-item input[type=radio]{position:absolute;opacity:0;width:0;height:0}#dnb-container .dnb-setting-item div label::before{content:'';display:block;width:1.2em;height:1.2em;margin-right:.6em;border:2px solid #666;border-radius:50%;background-color:#3a3a3a;transition:all .2s ease-in-out;flex-shrink:0}#dnb-container .dnb-setting-item div label:has(input[type=radio]:checked)::before{background-color:#e80012;border-color:#e80012;box-shadow:0 0 8px rgba(232,0,18,.5)}#dnb-container .dnb-setting-item div label:has(input[type=radio]:checked)::after{content:'';position:absolute;display:block;top:50%;left:calc(.666em + 1px);transform:translate(-50%,-50%);width:.5em;height:.5em;border-radius:50%;background:#fff;transition:transform .2s ease-in-out}#dnb-container .dnb-setting-item div label:hover::before{border-color:#e80012}#dnb-container .dnb-setting-item div label:has(input[type=radio]:checked){color:#fff}#dnb-container .dnb-setting-item div label:has(input[type=radio]:focus-visible)::before{outline:2px solid #e80012;outline-offset:2px}