#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;font-family:Inter,Segoe UI,Arial,sans-serif;background:none;min-height:100vh}body{background:linear-gradient(180deg,#9ca3af,#d1d5db,#9ca3af)}.App{background:#ffffffeb;padding:2.5rem 2rem 2rem;border-radius:18px;box-shadow:0 8px 32px #1f268726,0 1.5px 8px #3c3c501a;border:1.5px solid #e5e7eb;margin-top:2rem}.input-group{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem}input{width:50%;padding:12px 16px;font-size:16px;border:1.5px solid #cbd5e1;border-radius:8px;background-color:#f4f4f6;color:#23272f;box-shadow:0 2px 8px #3c3c5021;transition:border .3s,box-shadow .3s;outline:none;margin-right:12px}input:focus{border:1.5px solid #6366f1;box-shadow:0 0 0 2px #6366f133}.container{width:660px;display:flex;padding:20px;gap:20px;flex-wrap:wrap;justify-content:center;align-items:center;border-radius:5px;border:1px solid white;margin:0 auto}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;justify-items:center;margin-top:20px}.box{perspective:1000px;width:200px;height:200px;margin:0 auto}.inner-box{position:relative;width:100%;height:100%;transition:transform .6s ease,box-shadow .3s;transform-style:preserve-3d;border-radius:10px;box-shadow:0 4px 16px #3c3c5021;cursor:pointer}.inner-box.flipped{transform:rotateY(180deg) scale(1.04);box-shadow:0 8px 32px #3c3c502e}.front,.back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid black;border-radius:5px;font-weight:700;text-transform:capitalize;padding:1rem;box-sizing:border-box;-webkit-user-select:none;user-select:none}.front{background:linear-gradient(135deg,#f4f4f6 60%,#e0e7ef);color:#23272f;border:1px solid #e5e7eb}.back{transform:rotateY(180deg);border:1px solid #e5e7eb}.front,.back{border-radius:16px;box-shadow:0 4px 16px #3c3c5029}.reset-button{padding:10px 22px;font-size:1rem;background:linear-gradient(90deg,#d1d5db,#9ca3af);color:#23272f;border:1px solid #000;border-radius:8px;font-weight:600;box-shadow:0 2px 8px #3c3c5021,0 1.5px 8px #3c3c501a;cursor:pointer;transition:background .3s,transform .2s;margin-top:0;margin-left:0;margin-right:12px}.reset-button:last-child{margin-right:0}.reset-button:hover{background:linear-gradient(90deg,#9ca3af,#d1d5db);color:#23272f;transform:translateY(-2px) scale(1.04)}.reset-button:disabled{background:#e5e7eb;color:#a3a3a3;cursor:not-allowed}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}