*{font-family:Outfit,sans-serif}.app{width:100%;margin:0 auto;padding:10px;text-align:center}.number-selector{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin:10px 0}.number-button{padding:10px;border:1px solid #ccc;border-radius:10px;cursor:pointer}.number-button.selected{background-color:#666;color:#fff}.random-buttons{display:flex;gap:10px;justify-content:center;margin:10px 0}.random-buttons button{border-radius:10px;padding:10px 20px;border:1px solid #ccc;cursor:pointer}.shuffle-button{padding:12px 30px;margin:10px 0;font-size:1.6em;border-radius:10px;border:1px solid #90ee90;cursor:pointer;background-color:#98fb98;color:#333;transition:background-color .3s ease}.shuffle-button:hover{background-color:#90ee90}.shuffle-button:disabled{background-color:#e0e0e0;border-color:#ccc;cursor:not-allowed;color:#666}.circle-display{display:flex;border:4px solid #ccc;border-radius:20px;height:140px;margin:10px 0;position:relative;overflow:hidden}.divider{width:4px;background-color:#ccc;height:100%;flex-shrink:0}.left-side,.right-side{flex:1;position:relative;padding:20px;display:flex;flex-direction:column}.circle{width:40px;height:40px;border-radius:50%;position:absolute;transition:all .3s ease}.circle.left{background-color:#f99}.circle.right{background-color:#9cf}.answer-section{display:flex;gap:20px;justify-content:center;width:100%;margin:0 auto}.answer-side{flex:1;width:50%;padding:0 10px}.answer-display{border:2px solid #ccc;border-radius:10px;padding:10px;margin-bottom:5px;min-height:20px;font-size:1.2em}.number-pad{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.number-pad button{padding:8px;border:1px solid #ccc;border-radius:10px;cursor:pointer;font-size:1.2em;width:100%;height:40px;display:flex;align-items:center;justify-content:center}.answer-side.left .number-pad button{background-color:#f99;border:1px solid #ff8080;color:#333}.answer-side.right .number-pad button{background-color:#9cf;border:1px solid #80bfff;color:#333}.answer-side.left .number-pad button:hover{background-color:#ff8080}.answer-side.right .number-pad button:hover{background-color:#80bfff}.answer-side.left .answer-display{border:2px solid #ff9999}.answer-side.right .answer-display{border:2px solid #99ccff}.feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;border-radius:10px;font-size:1.2em;z-index:10;animation:fadeInOut 10s forwards}.feedback.correct{background-color:#4caf50;color:#fff}.feedback.incorrect{background-color:#f44336;color:#fff}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0}}canvas{position:fixed!important;top:0;left:0;z-index:1000;pointer-events:none}.shuffle-container{display:flex;align-items:center;justify-content:center;gap:20px;margin:10px 0}.selected-number{font-size:1.2em;padding:10px 20px;background-color:#f5f5f5;border-radius:10px;border:1px solid #ccc}@media (max-width: 1320px){.circle{width:30px;height:30px}.circle-display{height:120px}.number-pad{grid-template-columns:repeat(7,1fr)}}@media (max-width: 900px){.circle{width:25px;height:25px}.circle-display{height:110px}.shuffle-button{font-size:1.4em;padding:10px 25px}.number-pad{grid-template-columns:repeat(5,1fr)}.number-pad button{font-size:1.1em;height:35px}}@media (max-width: 600px){.circle{width:25px;height:25px}.circle-display{height:100px}.shuffle-button{font-size:1.2em;padding:8px 20px}.number-selector{grid-template-columns:repeat(5,1fr)}.random-buttons{flex-direction:column}.number-pad{grid-template-columns:repeat(4,1fr)}.number-pad button{font-size:1em;height:30px}.answer-section{flex-direction:column;gap:10px}.answer-side{width:100%}}@media (max-width: 500px){.circle-display{height:200px}.circle{width:25px;height:25px}.shuffle-button{font-size:1.1em;padding:8px 15px}.number-selector{grid-template-columns:repeat(4,1fr)}.random-buttons{flex-direction:column}.number-pad{grid-template-columns:repeat(4,1fr)}.number-pad button{font-size:.9em;height:28px;padding:4px}.answer-section{flex-direction:column;gap:10px}.answer-side{width:100%}.answer-display{font-size:1.1em}}@media (max-width: 977px){.circle{width:25px;height:25px}.circle-display{height:110px}.number-pad{grid-template-columns:repeat(6,1fr)}}.back-link{text-align:center;margin:40px 0}.back-link a{color:#666;text-decoration:none;font-size:.8em;transition:color .3s ease}.back-link a:hover{color:#333;text-decoration:underline}.container{display:flex;flex-direction:column;min-height:100vh;width:80vw;margin:0 auto}.toggle-container{display:flex;justify-content:center;margin:10px 0}.toggle{display:inline-flex;align-items:center;cursor:pointer;gap:10px}.toggle input{display:none}.toggle-slider{position:relative;width:50px;height:24px;background-color:#ccc;border-radius:12px;transition:.4s}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s}.toggle input:checked+.toggle-slider{background-color:#98fb98}.toggle input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-label{font-size:1.1em;color:#333}.right-side.hidden{opacity:0;visibility:hidden}@media (max-width: 820px){.circle-display{height:200px}.circle{width:25px;height:25px}.number-pad{grid-template-columns:repeat(5,1fr)}}@media (max-width: 410px){.circle-display{height:160px}.circle{width:20px;height:20px}.number-pad{grid-template-columns:repeat(4,1fr)}.number-pad button{font-size:.8em;height:25px;padding:2px}.shuffle-button{font-size:1em;padding:6px 12px}.toggle-label{font-size:.9em}}